Skip to content
Browse files

Image being sent at start of session. First working version!

  • Loading branch information...
1 parent 6b7b146 commit 691e498e0de770f67f36aa52a838dcca4afcc409 @andrew-smith committed Jun 13, 2012
Showing with 55 additions and 7 deletions.
  1. +27 −0 livewall.js
  2. +28 −7 public/js/livewall.js
View
27 livewall.js
@@ -2,9 +2,17 @@
//--------------------------------------------------------------
// handles the socket.io connections and live streaming
+var config = require('./config');
+
+
//socket.io instance
var io;
+//the canvas constructor
+var Canvas = require('canvas');
+//a global canvas object that will be the 'database' almost...
+var canvas;
+
module.exports.init = function(socketio, cb)
{
//keep reference
@@ -14,6 +22,7 @@ module.exports.init = function(socketio, cb)
io.sockets.on('connection', function (socket) {
//need to send them the live image
+ sendLiveImage(socket);
//assign listeners
@@ -22,6 +31,8 @@ module.exports.init = function(socketio, cb)
});
});
+ //create a global canvas to use
+ canvas = new Canvas(config.canvas_width, config.canvas_height);
cb();
@@ -32,7 +43,23 @@ module.exports.init = function(socketio, cb)
function drawChannel(socket, data)
{
//need to update main drawing image
+ var ctx = ctx = canvas.getContext("2d"); //the context to draw to
+ ctx.fillStyle = '#000000';
+ ctx.beginPath();
+ ctx.moveTo(data.x1,data.y1);
+ ctx.lineTo(data.x2,data.y2);
+ ctx.closePath();
+ ctx.stroke();
//send update to all other clients
io.sockets.emit('draw', data);
+}
+
+
+//sends the current live image to a socket
+function sendLiveImage(socket)
+{
+ canvas.toDataURL('image/png', function(err, str){
+ socket.emit('image', str);
+ });
}
View
35 public/js/livewall.js
@@ -14,26 +14,47 @@ function canvas_init()
WIDTH = getCanvas().width();
HEIGHT = getCanvas().height();
- //assign listeners
- getCanvas().mousemove(mouseMove);
- getCanvas().mousedown(mouseDown);
- getCanvas().mouseup(mouseUp);
- getCanvas().mouseenter(mouseUp);
+ //center canvas
+ getCanvas().center();
+
+
//clear rect
var ctx = getGraphics();
ctx.fillStyle = "#FFFFFF";
ctx.fillRect(0,0,WIDTH,HEIGHT);
- //center canvas
- getCanvas().center();
+
socket = io.connect(document.URL);
socket.on('draw', updateDraw);
+ socket.on('image', initStartImage);
}
+//initial starting image (as a PNG string)
+function initStartImage(imgStr)
+{
+ console.log(imgStr);
+
+ var startImage = new Image();
+ startImage.src = imgStr;
+
+ startImage.onload = function () {
+ getGraphics().drawImage(startImage, 0, 0);
+
+ //assign listeners to state that we have started
+ getCanvas().mousemove(mouseMove);
+ getCanvas().mousedown(mouseDown);
+ getCanvas().mouseup(mouseUp);
+ getCanvas().mouseenter(mouseUp);
+ };
+
+
+
+
+}
//updates a line from the server

0 comments on commit 691e498

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