Skip to content
Browse files

Added whiteboard functionality

  • Loading branch information...
1 parent 56615f1 commit db336096e94a698f036cac2e5326b280a54a8b9b @julien committed Apr 22, 2012
Showing with 102 additions and 54 deletions.
  1. +3 −13 app.js
  2. +44 −17 public/coffeescripts/app.coffee
  3. +2 −1 public/css/style.css
  4. +3 −3 public/index.html
  5. +50 −20 public/javascripts/app.js
View
16 app.js
@@ -41,7 +41,6 @@ function clientById(id) {
}
// Event listeners
function onClientAdd() {
- // console.log('onClientAdd', this.id);
var i,
l,
s,
@@ -88,28 +87,19 @@ function onMessageSend(from, message, to) {
}
}
-function onStreamStart(stream, videoSrc) {
- console.log('onStreamStart', stream, videoSrc);
- var client = clientById(this.id);
- this.broadcast.emit('streamStart', client, stream, videoSrc);
-}
-
-function onStreamStop(id, stream) {
- console.log('onStreamStop', id, stream);
+function onDrawPointsSend(points) {
+ this.broadcast.emit('drawPointsReceive', points);
}
function onConnect(client) {
- // console.log('onConnect', client.id);
client.on('disconnect', onDisconnect);
client.on('clientAdd', onClientAdd);
client.on('clientRemove', onClientRemove);
client.on('messageSend', onMessageSend);
- client.on('streamStart', onStreamStart);
- client.on('streamStop', onStreamStop);
+ client.on('drawPointsSend', onDrawPointsSend);
}
function onDisconnect() {
- // console.log('onDisconnect', this.id);
var index,
client = clientById(this.id);
if (client) {
View
61 public/coffeescripts/app.coffee
@@ -11,8 +11,6 @@ client = {
lastMessage: null
}
-localStream = null
-streaming = false
commands = {
'/allow': (user) ->
@@ -31,7 +29,8 @@ remoteClients = []
# references to dom
tablist = tablistItems = activeTab = inactiveTab = canvas = context = animationId = null
drawing = false
-drawPoints = []
+drawPoints = remotePoints = []
+remotePointsIndex = 0
# helpers functions
appendMessage = (message) ->
@@ -192,47 +191,73 @@ onAnchorClick = (e) ->
getTabs()
toggleElementVisibility chat
toggleElementVisibility whiteboard
+
+ # reset drawPoints?
+ drawPoints = []
+ if e.currentTarget.text is 'Whiteboard'
+ parent = canvas.parentNode
+ canvas.width = whiteboard.clientWidth
+ canvas.height = 400
+
return e.currentTarget
onCanvasMouseDown = (e) ->
- console.log 'canvas is active'
drawing = true
- addDrawPoint(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop)
- animationId = window.requestAnimationFrame draw
canvas.onmousemove = onCanvasMouseMove
+ addDrawPoint(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop)
+ draw()
onCanvasMouseUp = (e) ->
- console.log 'canvas is inactive'
- drawing = false
- window.cancelRequestAnimationFrame animationId
canvas.onmousemove = null
-
+ drawing = false
+ socket.emit 'drawPointsSend', drawPoints
+
onCanvasMouseMove = (e) ->
- console.log 'mouse move', e.pageX, e.pageY
- addDrawPoint(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop, true) if drawing
- draw()
+ if drawing
+ addDrawPoint(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop, true)
+ draw()
+ drawing
draw = ->
return unless drawing
- console.log 'drawing'
canvas.width = canvas.width
- context.strokeStyle = '#df4b26'
+ context.strokeStyle = '#df4b26'
+ context.lineWidth = 5
for point, i in drawPoints
context.beginPath()
if drawPoints[i].drag
context.moveTo(drawPoints[i - 1].x , drawPoints[i - 1].y)
else
- context.moveTo(drawPoints[i].x, drawPoints[i].y)
+ context.moveTo(drawPoints[i].x - 1, drawPoints[i].y - 1)
context.lineTo(drawPoints[i].x, drawPoints[i].y)
+ context.stroke()
context.closePath()
+
+onDrawPointsReceive = (points) ->
+ remotePoints = points
+ remotePointsIndex = 0
+ drawRemotePoints()
+
+drawRemotePoints = ->
+ context.strokeStyle = '#00dd00'
+ context.lineWidth = 5
+
+ for point, i in remotePoints
+ context.beginPath()
+ if remotePoints[i].drag
+ context.moveTo(remotePoints[i - 1].x , remotePoints[i - 1].y)
+ else
+ context.moveTo(remotePoints[i].x - 1, remotePoints[i].y - 1)
+
+ context.lineTo(remotePoints[i].x, remotePoints[i].y)
context.stroke()
+ context.closePath()
- animationId = window.requestAnimationFrame draw
# bootstrap
@@ -248,6 +273,7 @@ init = ->
socket.on 'clientList', onClientList
socket.on 'clientRemove', onClientRemove
socket.on 'messageReceive', onMessageReceive
+ socket.on 'drawPointsReceive', onDrawPointsReceive
# ui members and event listeners
incoming = document.getElementById 'incoming'
@@ -276,6 +302,7 @@ init = ->
canvas = document.getElementById 'canvas'
canvas.onmousedown = onCanvasMouseDown
canvas.onmouseup = onCanvasMouseUp
+ #canvas.onmouseleave = onCanvasMouseUp
context = canvas.getContext '2d'
View
3 public/css/style.css
@@ -12,9 +12,10 @@ button{padding:4px}
#users{min-width:140px}
*/
body{overlow-x:hidden}
-canvas{cursor:pointer}
+canvas{border:1px solid #ccc}
textarea{resize:none;margin:0 0 10px 0}
.chat{display:block;width:97%}
+.jumbotron{margin: 30px 0 0 0}
#incoming{min-height:200px}
#incoming,#outgoing {width:100%;margin:0 0 10px 0;font-family:'Lucida Grande',Helvetica,Arial,sans-serif;font-size:12px;}
/* .chat{display:block;width:98%;padding:4px} */
View
6 public/index.html
@@ -60,9 +60,9 @@
</div>
<div class="row" id="whiteboard">
- <div class="span12">
- <canvas id="canvas" class="well" style="width:94%;height:100%"></canvas>
- </div>
+
+ <canvas id="canvas"></canvas>
+
</div>
</div>
</div>
View
70 public/javascripts/app.js
@@ -1,5 +1,5 @@
(function() {
- var activeTab, addDrawPoint, animationId, appendMessage, canvas, client, clientById, clientByName, commands, context, draw, drawPoints, drawing, getTabs, inactiveTab, init, localClient, localStream, onAnchorClick, onCanvasMouseDown, onCanvasMouseMove, onCanvasMouseUp, onClientAdd, onClientCount, onClientId, onClientList, onClientRemove, onConnect, onDisconnect, onMessageReceive, onOutgoingChange, remoteClients, root, sendMessage, socket, streaming, tablist, tablistItems, toggleElementVisibility;
+ var activeTab, addDrawPoint, animationId, appendMessage, canvas, client, clientById, clientByName, commands, context, draw, drawPoints, drawRemotePoints, drawing, getTabs, inactiveTab, init, localClient, onAnchorClick, onCanvasMouseDown, onCanvasMouseMove, onCanvasMouseUp, onClientAdd, onClientCount, onClientId, onClientList, onClientRemove, onConnect, onDisconnect, onDrawPointsReceive, onMessageReceive, onOutgoingChange, remoteClients, remotePoints, remotePointsIndex, root, sendMessage, socket, tablist, tablistItems, toggleElementVisibility;
root = typeof window !== "undefined" && window !== null ? window : global;
@@ -14,10 +14,6 @@
lastMessage: null
};
- localStream = null;
-
- streaming = false;
-
commands = {
'/allow': function(user) {
if (localClient.name !== user) {
@@ -41,7 +37,9 @@
drawing = false;
- drawPoints = [];
+ drawPoints = remotePoints = [];
+
+ remotePointsIndex = 0;
appendMessage = function(message) {
var d, h, m, s;
@@ -225,7 +223,7 @@
};
onAnchorClick = function(e) {
- var li;
+ var li, parent;
e.preventDefault();
li = e.currentTarget.parentNode;
if (li === activeTab) return;
@@ -234,51 +232,82 @@
getTabs();
toggleElementVisibility(chat);
toggleElementVisibility(whiteboard);
+ drawPoints = [];
+ if (e.currentTarget.text === 'Whiteboard') {
+ parent = canvas.parentNode;
+ canvas.width = whiteboard.clientWidth;
+ canvas.height = 400;
+ }
return e.currentTarget;
};
onCanvasMouseDown = function(e) {
- console.log('canvas is active');
drawing = true;
+ canvas.onmousemove = onCanvasMouseMove;
addDrawPoint(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop);
- animationId = window.requestAnimationFrame(draw);
- return canvas.onmousemove = onCanvasMouseMove;
+ return draw();
};
onCanvasMouseUp = function(e) {
- console.log('canvas is inactive');
+ canvas.onmousemove = null;
drawing = false;
- window.cancelRequestAnimationFrame(animationId);
- return canvas.onmousemove = null;
+ return socket.emit('drawPointsSend', drawPoints);
};
onCanvasMouseMove = function(e) {
- console.log('mouse move', e.pageX, e.pageY);
if (drawing) {
addDrawPoint(e.pageX - canvas.offsetLeft, e.pageY - canvas.offsetTop, true);
+ draw();
}
- return draw();
+ return drawing;
};
draw = function() {
- var i, point, _len;
+ var i, point, _len, _results;
if (!drawing) return;
- console.log('drawing');
canvas.width = canvas.width;
context.strokeStyle = '#df4b26';
+ context.lineWidth = 5;
+ _results = [];
for (i = 0, _len = drawPoints.length; i < _len; i++) {
point = drawPoints[i];
context.beginPath();
if (drawPoints[i].drag) {
context.moveTo(drawPoints[i - 1].x, drawPoints[i - 1].y);
} else {
- context.moveTo(drawPoints[i].x, drawPoints[i].y);
+ context.moveTo(drawPoints[i].x - 1, drawPoints[i].y - 1);
}
context.lineTo(drawPoints[i].x, drawPoints[i].y);
- context.closePath();
context.stroke();
+ _results.push(context.closePath());
+ }
+ return _results;
+ };
+
+ onDrawPointsReceive = function(points) {
+ remotePoints = points;
+ remotePointsIndex = 0;
+ return drawRemotePoints();
+ };
+
+ drawRemotePoints = function() {
+ var i, point, _len, _results;
+ context.strokeStyle = '#00dd00';
+ context.lineWidth = 5;
+ _results = [];
+ for (i = 0, _len = remotePoints.length; i < _len; i++) {
+ point = remotePoints[i];
+ context.beginPath();
+ if (remotePoints[i].drag) {
+ context.moveTo(remotePoints[i - 1].x, remotePoints[i - 1].y);
+ } else {
+ context.moveTo(remotePoints[i].x - 1, remotePoints[i].y - 1);
+ }
+ context.lineTo(remotePoints[i].x, remotePoints[i].y);
+ context.stroke();
+ _results.push(context.closePath());
}
- return animationId = window.requestAnimationFrame(draw);
+ return _results;
};
init = function() {
@@ -292,6 +321,7 @@
socket.on('clientList', onClientList);
socket.on('clientRemove', onClientRemove);
socket.on('messageReceive', onMessageReceive);
+ socket.on('drawPointsReceive', onDrawPointsReceive);
incoming = document.getElementById('incoming');
outgoing = document.getElementById('outgoing');
outgoing.onchange = onOutgoingChange;

0 comments on commit db33609

Please sign in to comment.
Something went wrong with that request. Please try again.