CoW Documentatie
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

CoW Documentatie

  • 747 views
Uploaded on

Documentatia pentru proiectul CoW din cadrul laboratorului CLIW realizat de Constantin Lucian Andrei.

Documentatia pentru proiectul CoW din cadrul laboratorului CLIW realizat de Constantin Lucian Andrei.

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
747
On Slideshare
747
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CoW(Colaborative Whiteboard)_________________________________Web Aplication (mobile) that allows collaborative editing of a whiteboard using HTML5 canvas_________________________________ Constantin Lucian Andrei
  • 2. Abstract. CoW is a Web (mobile) Aplication that allows the colaborative editing of awhiteboard using the canvas element provided by HTML5. The aplication allows users touse different „pencils”, insert text, geometric figures, external images and draw upun thewhiteboard. The whiteboard can also be exported as a PNG image for the purpose of beingsaved and later restored. 1. Introduction CoW was created during the Client Side Web Application Development laboratoryheld by Negru Stefan and having as course teacher Dr Sabin-Corneliu Buraga. 2. Tehnologies used CoW was created using JavaScript, HTML5, and Socket.io tehnologies. The mainelement of the CoW application is a canvas (HTML5 element) which allows the running ofdrawing scripts. The functions that allow the user to interact with the app are part of thejQuery lirbrary(for PC users) and the jQuery mobile library(for mobile users).Comunicating between users is done by means of the Socket.IO module of the Node.JSproject, which, amongst other functionalities provides real time comunication amongstmultiple clients. 2.1 JavaScript+Canvas 2.1.1 Drawing functions Each canvas has a drawing contex. In the CoW app, the context is a 2D one and iscalled as follows: var canvas = document.getElementById("sheet"); var context = canvas.getContext("2d"); Where sheet is the canvas’s ID within the index.html file. For the mobile website the canvas is automaticly generated, resized and placedwithin the contentholder div as follows:function resizeCanvas(){ var w = window.innerWidth / 1.2; var h = window.innerHeight / 1.2; var canvasString = <canvas id="mainCanvas" width="+ w + " height=" + h + ">Canvas is notsupported</canvas>; $(#contentholder).empty(); $(canvasString).appendTo(#contentholder); context = $(#mainCanvas).get(0).getContext(2d);} To draw within the canvas’s context we use the following functions: To draw freely with the pencil:
  • 3. var line = function(x1, y1, x2, y2, s) { s.globalCompositeOperation = source-over; setStyle(s); context.beginPath(); context.moveTo(x1, y1); context.lineTo(x2, y2); context.closePath(); context.stroke(); } Where x1 and y1 are the coordonates where the mouseDown (touchstart formobile)event took place and x2 and y2 are the coordinates where mouseMove (touchmovefor mobile) event took place. To draw a line: var line = function(x1, y1, x2, y2, s) { s.globalCompositeOperation = source-over; setStyle(s); context.beginPath(); context.moveTo(x1, y1); context.lineTo(x2, y2); context.closePath(); context.stroke(); } Where x1 and y1 are the coordonates where the mouseDown (touchstart formobile)event took place and x2 and y2 are the coordinates where the mouseUp (touchendfor mobile) event took place. To draw a circle: var circle = function(x1, y1, x2, y2, s) { s.globalCompositeOperation = source-over; minX = (x1<x2) ? x1 : x2; minY = (y1<y2) ? y1 : y2; radiusX = Math.abs(x1 - x2) / 2; radiusY = Math.abs(y1 - y2) / 2; context.beginPath(); setStyle(s); context.arc(minX+radiusX, minY+radiusY, radiusX, 0, 2*Math.PI, false); context.closePath(); context.stroke(); } Where x1 and y1 are the coordonates where the mouseDown (touchstart formobile)event took place and x2 and y2 are the coordinates where the mouseUp (touchendfor mobile) event took place. To draw a rectangle:
  • 4. var rectangle = function(x1, y1, x2, y2, s) { s.globalCompositeOperation = source-over; minX = (x1<x2) ? x1 : x2; minY = (y1<y2) ? y1 : y2; xl = Math.abs(x1-x2); yl = Math.abs(y1-y2); setStyle(s); context.beginPath(); context.rect(minX, minY, xl, yl); context.closePath(); context.stroke(); } Where x1 and y1 are the coordonates where the mouseDown (touchstart formobile)event took place and x2 and y2 are the coordinates where the mouseUp (touchendfor mobile) event took place. Withing all four functions s represents the shape’s style (colour, thickness,transparency, lineJoin and lineCap). To erase: var eraser = function(x1, y1, x2, y2, s) { s.globalCompositeOperation = copy; s.strokeStyle = rgba(0,0,0,0); setStyle(s); context.beginPath(); context.moveTo(x1, y1); context.lineTo(x2, y2); context.closePath(); context.stroke(); } Where x1 and y1 are the coordonates where the mouseDown (touchstart formobile)event took place and x2 and y2 are the coordinates where mouseMove (touchmovefor mobile) event took place. For a new sheet we use the following function: $(#newSheet).click(function(){ canvas.width = canvas.width; }); 2.1.2 Mouse/Touch event handlers
  • 5. The following functions are used to handle mouse events (mouseDown, mouseUp,mouseMove):// event handler for Mouse Down$(#sheet).mousedown(function(e) {mouseDown = true; //used for checking if left click is downmouseX = e.pageX - this.offsetLeft; //used to get the position of the mouse inside the canvasmouseY = e.pageY - this.offsetTop; //used to get the position of the mouse inside the canvascontext.moveTo(mouseX, mouseY);switch(tool){ case Pen: // draws in case the pen is selected pencil(mouseX, mouseY, mouseX, mouseY, style); message = { "x1":mouseX, "y1":mouseY, "x2":mouseX+1, "y2":mouseY, "tool":Pen, "style":style }; socket.send(JSON.stringify(message)); break; case Text: // text insertion if($(#textVal).val() != ){ //checks for the bold, italic and underline options font = ; if($(#bold).is(:checked)) font += bold ; if($(#underline).is(:checked)) font += underline ; if($(#italic).is(:checked)) font += italic ; font += $(#penSize).slider(value)*5 + px sans-serif; context.font = font; context.fillStyle = style.strokeStyle; context.fillText($(#textVal).val(), mouseX, mouseY); message = { "x":mouseX, "y":mouseY, "tool":Text, " font":font, "text":$(#textVal).val(), "style":style }; socket.send(JSON.stringify(message)); }break; case IMAGE: // drawing an image onto the canvas at the mouseX mouseY position context.drawImage(image, mouseX, mouseY); message = { "x":mouseX, "y":mouseY, "image":image.src, "tool":IMAGE }; socket.send(JSON.stringify(message)); break; break; }
  • 6. });// event handler for Mouse Up$(#sheet).mouseup(function(e) {mouseDown = false; // click is no longer pressednewX = e.pageX - this.offsetLeft;// used to get the position of the mouse inside the canvasnewY = e.pageY - this.offsetTop;// used to get the position of the mouse inside the canvasoldX = mouseX;oldY = mouseY;switch(tool) { case Pen: // do nothing because the drawing has been done insed the mousemove function break; case Circ: //draws the circle from the oldX and oldY position to the newX newY position with the diameter give by the distance between the 2 circle(oldX, oldY, newX, newY, style); message = { "x1":oldX, "y1":oldY, "x2":newX, "y2":newY, "tool":Circ, "style":style }; socket.send(JSON.stringify(message)); break; case Rec:// draws the rectangle from the oldX and oldY position to the newX newY position with the diameter give by the distance between the 2 rectangle(oldX, oldY, newX, newY, style); message = { "x1":oldX, "y1":oldY, "x2":newX, "y2":newY, "tool":Rec, "style":style }; socket.send(JSON.stringify(message)); break; case Line://draws the line from the oldX and oldY position in the newX and newY position line(oldX, oldY, newX, newY, style); message = { "x1":oldX, "y1":oldY, "x2":newX, "y2":newY, "tool":Line, "style":style }; socket.send(JSON.stringify(message)); break; }});// event handler for mouse move$(#sheet).mousemove(function(e) {newX = e.pageX - this.offsetLeft;newY = e.pageY - this.offsetTop;
  • 7. if(mouseDown) { //as long as the mouse is downdraws or erases depending on the selected toololdX = mouseX;oldY = mouseY;switch(tool){ case Pen: pencil(oldX, oldY, newX, newY, style); message = { "x1":oldX, "y1":oldY, "x2":newX, "y2":newY,"tool":Pen,"style":style }; socket.send(JSON.stringify(message)); mouseX = newX; mouseY = newY; break; case Eraser: eraser(oldX, oldY, newX, newY, style); message = { "x1":oldX, "y1":oldY, "x2":newX, "y2":newY, "tool":Eraser, "style":style }; socket.send(JSON.stringify(message)); mouseX = newX; mouseY = newY; break;break; } }});// handles the mouse leaving the canvas$(#sheet).mouseleave(function() { mouseDown = false;}); The handling of the touch events is done pretty much the same, with the exceptionof the syntax upon binding the events to the canvas://the equivalent of mouseDown$(#mainCanvas).bind(touchstart,(function(e) { }//the equivalent of mouseUp$(#mainCanvas).bind(touchend,(function(e) { }//the equivalent of mousemove$(#mainCanvas).bind(touchmove,(function(e) { } These events appear upon mouse/touch actions on the browser surface.
  • 8. 2.1.3 Choosing the color Choosing the color is done by means ofthe 3 sliders you can see on your right whichindicate the percentage of red green and blue thecolor will have. The sample of the output color islocated in the #selected color div.// color and size//adjsusts the brush dependingon the information provided bythe sliders (amount of Red,Green and Blue)$(#red).slider({value: 95,min: 0,max: 255,slide: function(event, ui) { changeColor();}}).width(160);$(#green).slider({value: 221,min: 0,max: 255,slide: function(event, ui) { changeColor();}}).width(160);$(#blue).slider({value: 122,min: 0,max: 255,slide: function(event, ui) {changeColor();}}).width(160);$(#opac).slider({value: 100,min: 0,max: 100,slide: function(event, ui) {changeColor();}
  • 9. }).width(160);//Changes the brush colour updateing the style and thecolour of the Selected colour divs backgroundvar changeColor = function(){c=rgba(+$(#red).slider(value)+,+$(#green).slider(value)+,+$(#blue).slider(value)+,+$(#opac).slider(value) / 100) + );$(#selectedColor).css({backgroundColor: c});style.strokeStyle = rgb( + $(#red).slider(value) + , +$(#green).slider(value)+,+$(#blue).slider(val ue) + );style.globalAlpha = ($(#opac).slider(value) / 100);} 2.2 Communicating between users Data transmition is done using Socket.IO which automaticly selects the datatransmition protocol for each browser that calls it. Installing NodeJS and Socket.IO isdetailed in the youtube link of the biblografy. Server side:var io = require(socket.io).listen(31520);io.sockets.on(connection, function(client){ client.on(message,function(event){ client.broadcast.send(event); }); client.on(disconnect,function(){ });}); Client side://connects to the servervar socket = io.connect(http://localhost:31520);//sends the tool data to the other clientssocket.on(message, function(Data) {Data = $.parseJSON(Data);switch(Data.tool){ case Pen: pencil(Data.x1, Data.y1, Data.x2, Data.y2, Data.style); break; case Circ: circle(Data.x1, Data.y1, Data.x2, Data.y2, Data.style); break; case Rec: rectangle(Data.x1, Data.y1, Data.x2, Data.y2,
  • 10. Data.style); break; case Line: line(Data.x1, Data.y1, Data.x2, Data.y2, Data.style); break; case Text: context.font = Data.font; context.fillStyle = Data.style.strokeStyle; context.fillText(Data.text, Data.x, Data.y); break; case New: canvas.width = canvas.width; break; case IMAGE: image = new Image(); image.src = Data.image; context.drawImage(image, Data.x, Data.y); break; case Eraser: eraser(Data.x1, Data.y1, Data.x2, Data.y2, Data.style); break;break;}}); 2.3 Usage 2.3.1 For the desktop app
  • 11. The tools are displayed in the upper left corner. The drawing possibilities are:pencil, line, rectangle, circle and eraser, which are to be used upon the canvas(thewhiteboard). Bellow those we have the option to export, which opens the content of thecanvas as a new PNG image in a new tab, and the browse button which opens a file browserthat can select an image to be inserted onto the canvas upon click(these 2 can be combinedand used as a sort of save/load function. On the right side the brush options are displayed. They can be used to adjust thesize, color and opacity of the brush. Above them we have the New Sheet button whichclears the canvas. Bellow the brush options we have the text insertion options. The text goes in thetextbox and will be inserted upon click after first selecting Insert Text. 2.3.2 For the mobile app
  • 12. From the upper side of the screen we may select the tool we wish to use and itshall be used by touching the screen. Bibliografie:http://socket.iohttp://profs.info.uaic.ro/~busaco/teach/courses/cliw/web.htmlhttp://www.w3schools.com/http://docs.jquery.com/Main_Pagehttp://jquerymobile.com/demos/1.0/http://www.youtube.com/watch?v=3nnpCXtPXHg