CoW Colaborative Whiteboard De Constantin Lucian Andrei
CoW <ul><li>CoW este o aplicatie web (de tip mobile) ce permite editarea colaborativa a unei planse prin folosirea element...
Functii(mobile) <ul><li>Functiile whiteboard-ului sunt: </li></ul><ul><ul><li>Inserarea de figuri geometrice </li></ul></u...
Functii(PC) <ul><li>Functiile in plus fata de  </li></ul><ul><li>mobile: </li></ul><ul><li>- utilizarea diferitelor  </li>...
Drawing freely: <ul><li>var pencil = function(x1, y1, x2, y2, s) { </li></ul><ul><li>s.globalCompositeOperation = 'source-...
Drawing figures <ul><li>var circle = function(x1, y1, x2, y2, s) {  </li></ul><ul><li>s.globalCompositeOperation = 'source...
Tehnologii folosite: JavaScript <ul><li>Sunt folosite 2 librarii de JavaScript </li></ul><ul><ul><li>jQuerry: pentru funct...
Touch start event: <ul><li>$('#mainCanvas').bind('touchstart',(function(e) { </li></ul><ul><li>touchDown = true;  //verifi...
Touch move event: <ul><li>$('#mainCanvas').bind('touchmove',(function(e) { </li></ul><ul><li>newX = e.originalEvent.pageX ...
Touch end event: <ul><li>$('#mainCanvas').bind('touchend',(function(e) { </li></ul><ul><li>touchDown = false;  // verifies...
MouseDown, MouseUp, MouseMove <ul><li>Similar cu evenimentele de touch se fac si cele de mouse, cu precizarea ca bind-ul s...
Tehnologii folosite: HTML5 <ul><li>Canvas  este un element al HTML5 care permite redarea dinamica prin scripturi a formelo...
Initializarea canvas-ului(pentru mobile) <ul><li>$(window).resize(function() { resizeCanvas() }); </li></ul><ul><li>functi...
Tehnologii folosite: Socket.IO <ul><li>Socket.IO face WebSocketurile si realtime-ul posibil pentru toate browserele. </li>...
Client part: <ul><li>//trimite date la ceilalti clienti in functie de toolul selectat </li></ul><ul><li>socket.on('message...
Server part: <ul><li>var io = require('socket.io').listen(31520); </li></ul><ul><li>io.sockets.on('connection', function(c...
Forma finala(PC)
Forma finala(mobile) <ul><li>O aplicatie simpla de </li></ul><ul><li>tip plansa colaborativa </li></ul><ul><li>pentru PC s...
Bibliografie <ul><li>Documentatie completa disponibila  aici </li></ul><ul><li>http :// socket.io /   </li></ul><ul><li>ht...
Upcoming SlideShare
Loading in...5
×

Co w

333

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
333
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Co w

  1. 1. CoW Colaborative Whiteboard De Constantin Lucian Andrei
  2. 2. CoW <ul><li>CoW este o aplicatie web (de tip mobile) ce permite editarea colaborativa a unei planse prin folosirea elementului canvas oferit de HTML5. Aplicatia permite utilizatorilor desenarea si inserarea de diferite figuri geometrice pentru mobile si posibilitatea de a folosi diverse pensule de diferite culori, inerarea de text si imagini si exportarea imaginilor in plus, pentru PC. </li></ul>
  3. 3. Functii(mobile) <ul><li>Functiile whiteboard-ului sunt: </li></ul><ul><ul><li>Inserarea de figuri geometrice </li></ul></ul><ul><ul><li>Desenarea libera </li></ul></ul><ul><ul><li>Radiera </li></ul></ul>
  4. 4. Functii(PC) <ul><li>Functiile in plus fata de </li></ul><ul><li>mobile: </li></ul><ul><li>- utilizarea diferitelor </li></ul><ul><li>pensule de diferite </li></ul><ul><li>marimi </li></ul><ul><li> - inserarea de imagini </li></ul><ul><li> - exportul in png </li></ul><ul><li> - inserarea de text </li></ul>
  5. 5. Drawing freely: <ul><li>var pencil = function(x1, y1, x2, y2, s) { </li></ul><ul><li>s.globalCompositeOperation = 'source-over'; </li></ul><ul><li>setStyle(s); </li></ul><ul><li>context.beginPath(); </li></ul><ul><li>context.moveTo(x1, y1); </li></ul><ul><li>context.lineTo(x2, y2); </li></ul><ul><li>context.closePath(); </li></ul><ul><li>context.stroke(); </li></ul><ul><li>} </li></ul>
  6. 6. Drawing figures <ul><li>var circle = function(x1, y1, x2, y2, s) { </li></ul><ul><li>s.globalCompositeOperation = 'source-over'; </li></ul><ul><li>minX = (x1<x2) ? x1 : x2; </li></ul><ul><li>minY = (y1<y2) ? y1 : y2; </li></ul><ul><li>radiusX = Math.abs(x1 - x2) / 2; </li></ul><ul><li>radiusY = Math.abs(y1 - y2) / 2; </li></ul><ul><li>context.beginPath(); </li></ul><ul><li>setStyle(s); </li></ul><ul><li>context.arc(minX+radiusX, minY+radiusY, radiusX, 0, 2*Math.PI, false); </li></ul><ul><li>context.closePath(); </li></ul><ul><li>context.stroke(); </li></ul><ul><li>} </li></ul>
  7. 7. Tehnologii folosite: JavaScript <ul><li>Sunt folosite 2 librarii de JavaScript </li></ul><ul><ul><li>jQuerry: pentru functiile interactionare cu utilizatorul (PC) </li></ul></ul><ul><ul><li>jQuery mobile: pentru functiile de interactionare cu utilizatorul(mobile) </li></ul></ul>
  8. 8. Touch start event: <ul><li>$('#mainCanvas').bind('touchstart',(function(e) { </li></ul><ul><li>touchDown = true; //verifies if screen is touched </li></ul><ul><li>context.moveTo(touchX, touchY); </li></ul><ul><li>touchX = e.originalEvent.pageX-this.offsetLeft; // gets the touch position on the canvas </li></ul><ul><li>touchY = e.originalEvent.pageY-this.offsetTop; </li></ul><ul><li>switch(tool){ </li></ul><ul><li>case Pen: // in case pen is selected draws freely on the canvas </li></ul><ul><li>pencil(touchX, touchY, touchX, touchY, style); </li></ul><ul><li>msg = { &quot;x1&quot;:touchX, &quot;y1&quot;:touchY, &quot;x2&quot;:touchX+1, &quot;y2&quot;:touchY, &quot;tool&quot;:Pen, &quot;style&quot;:style }; </li></ul><ul><li>socket.send(JSON.stringify(msg)); </li></ul><ul><li>break; </li></ul><ul><li>break; </li></ul><ul><li>} </li></ul>
  9. 9. Touch move event: <ul><li>$('#mainCanvas').bind('touchmove',(function(e) { </li></ul><ul><li>newX = e.originalEvent.pageX - this.offsetLeft; </li></ul><ul><li>newY = e.originalEvent.pageY - this.offsetTop; </li></ul><ul><li>if(touchDown) { //draws while touch is down if pen is selected and erases while touch is down if eraser is selected </li></ul><ul><li>oldX = touchX; </li></ul><ul><li>oldY = touchY; </li></ul><ul><li>switch(tool){ </li></ul><ul><li>case Pen: </li></ul><ul><li>pencil(oldX, oldY, newX, newY, style); </li></ul><ul><li>msg = { &quot;x1&quot;:oldX, &quot;y1&quot;:oldY, &quot;x2&quot;:newX, &quot;y2&quot;:newY,&quot;tool&quot;:Pen,&quot;style&quot;:style }; </li></ul><ul><li>socket.send(JSON.stringify(msg)); </li></ul><ul><li>touchX = newX; </li></ul><ul><li>touchY = newY; </li></ul><ul><li>break; </li></ul><ul><li>case Eraser: </li></ul><ul><li>eraser(oldX, oldY, newX, newY, style); </li></ul><ul><li>msg = { &quot;x1&quot;:oldX, &quot;y1&quot;:oldY, &quot;x2&quot;:newX, &quot;y2&quot;:newY, &quot;tool&quot;:Eraser, &quot;style&quot;:style }; </li></ul><ul><li>socket.send(JSON.stringify(msg)); </li></ul><ul><li>touchX = newX; </li></ul><ul><li>touchY = newY; </li></ul><ul><li>break; </li></ul><ul><li>break; </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>})); </li></ul>
  10. 10. Touch end event: <ul><li>$('#mainCanvas').bind('touchend',(function(e) { </li></ul><ul><li>touchDown = false; // verifies if the touch has ended </li></ul><ul><li>newX = e.originalEvent.pageX -this.offsetLeft; // gets the touch position on the canvas </li></ul><ul><li>newY = e.originalEvent.pageY -this.offsetTop; </li></ul><ul><li>oldX = touchX; </li></ul><ul><li>oldY = touchY; </li></ul><ul><li>switch(tool) { </li></ul><ul><li>case Pen: // in case the Pen tool is selected for this event it does nothing </li></ul><ul><li>break; </li></ul><ul><li>case Circ: //draws the circle with the diameter between the point given by oldX and oldY and the point given by newX and newY </li></ul><ul><li>circle(oldX, oldY, newX, newY, style); </li></ul><ul><li>msg = { &quot;x1&quot;:oldX, &quot;y1&quot;:oldY, &quot;x2&quot;:newX, &quot;y2&quot;:newY, &quot;tool&quot;:Circ, &quot;style&quot;:style }; </li></ul><ul><li>socket.send(JSON.stringify(msg)); </li></ul><ul><li>break; </li></ul><ul><li>case Rec: //draws the rectangle with the diagonal between the point give by oldX and oldY and the point given by newX and newY </li></ul><ul><li>rectangle(oldX, oldY, newX, newY, style); </li></ul><ul><li>msg = { &quot;x1&quot;:oldX, &quot;y1&quot;:oldY, &quot;x2&quot;:newX, &quot;y2&quot;:newY, &quot;tool&quot;:Rec, &quot;style&quot;:style }; </li></ul><ul><li>socket.send(JSON.stringify(msg)); </li></ul><ul><li>break; </li></ul><ul><li>case Line: //draws a line between the points given by oldX/oldY and newX/newY </li></ul><ul><li>line(oldX, oldY, newX, newY, style); </li></ul><ul><li>msg = { &quot;x1&quot;:oldX, &quot;y1&quot;:oldY, &quot;x2&quot;:newX, &quot;y2&quot;:newY, &quot;tool&quot;:Line, &quot;style&quot;:style }; </li></ul><ul><li>socket.send(JSON.stringify(msg)); </li></ul><ul><li>break; </li></ul><ul><li>} </li></ul><ul><li>})); </li></ul>
  11. 11. MouseDown, MouseUp, MouseMove <ul><li>Similar cu evenimentele de touch se fac si cele de mouse, cu precizarea ca bind-ul se face diferit: </li></ul><ul><li>$('#sheet').mouse down (function(e) { } </li></ul><ul><li>$('#sheet').mouseup(function(e) { } </li></ul><ul><li>$('#sheet').mouse move (function(e) { } </li></ul>
  12. 12. Tehnologii folosite: HTML5 <ul><li>Canvas este un element al HTML5 care permite redarea dinamica prin scripturi a formelor si imaginilor 2D </li></ul><ul><li>Canvas este elementul principal al aplicatiei, pe el realizandu-se desenarea. </li></ul>
  13. 13. Initializarea canvas-ului(pentru mobile) <ul><li>$(window).resize(function() { resizeCanvas() }); </li></ul><ul><li>function resizeCanvas() </li></ul><ul><li>{ </li></ul><ul><li>var w = window.innerWidth / 1.2; </li></ul><ul><li>var h = window.innerHeight / 1.2; </li></ul><ul><li>var canvasString = '<canvas id=&quot;mainCanvas&quot; width=&quot;' + w + '&quot; height=&quot;' + h + '&quot;>Canvas is not supported</canvas>'; </li></ul><ul><li>$('#contentholder').empty(); </li></ul><ul><li>$(canvasString).appendTo('#contentholder'); </li></ul><ul><li>context = $('#mainCanvas').get(0).getContext('2d'); </li></ul><ul><li>} </li></ul>
  14. 14. Tehnologii folosite: Socket.IO <ul><li>Socket.IO face WebSocketurile si realtime-ul posibil pentru toate browserele. </li></ul><ul><li>De asemenea asigura multiplexing, scalabilitate orizontala si codificare/decodificare JSON integrata. </li></ul><ul><li>Este cea mai buna metoda de comunicare realtime posibila. </li></ul>
  15. 15. Client part: <ul><li>//trimite date la ceilalti clienti in functie de toolul selectat </li></ul><ul><li>socket.on('message', function(msgData) { </li></ul><ul><li>msgData = $.parseJSON(msgData); </li></ul><ul><li>switch(msgData.tool){ </li></ul><ul><li>case Pen: </li></ul><ul><li>pencil(msgData.x1, msgData.y1, msgData.x2, msgData.y2, msgData.style); </li></ul><ul><li>break; </li></ul><ul><li>case Circ: </li></ul><ul><li>circle(msgData.x1, msgData.y1, msgData.x2, msgData.y2, msgData.style); </li></ul><ul><li>break; </li></ul><ul><li>case Rec: </li></ul><ul><li>rectangle(msgData.x1, msgData.y1, msgData.x2, msgData.y2, msgData.style); </li></ul><ul><li>break; </li></ul><ul><li>case Line: </li></ul><ul><li>line(msgData.x1, msgData.y1, msgData.x2, msgData.y2, msgData.style); </li></ul><ul><li>break; </li></ul><ul><li>case New: </li></ul><ul><li>canvas.width = canvas.width; </li></ul><ul><li>break; </li></ul><ul><li>case Eraser: </li></ul><ul><li>eraser(msgData.x1, msgData.y1, msgData.x2, msgData.y2, msgData.style); </li></ul><ul><li>break; </li></ul><ul><li>break;} </li></ul><ul><li>}); </li></ul>
  16. 16. Server part: <ul><li>var io = require('socket.io').listen(31520); </li></ul><ul><li>io.sockets.on('connection', function(client){ </li></ul><ul><li>client.on('message',function(event){ </li></ul><ul><li>client.broadcast.send(event); </li></ul><ul><li>}); </li></ul><ul><li>client.on('disconnect',function(){ </li></ul><ul><li>}); </li></ul><ul><li>}); </li></ul>
  17. 17. Forma finala(PC)
  18. 18. Forma finala(mobile) <ul><li>O aplicatie simpla de </li></ul><ul><li>tip plansa colaborativa </li></ul><ul><li>pentru PC si </li></ul><ul><li>dispozitive mobile </li></ul><ul><li>Sursa disponibila la: </li></ul><ul><li>source </li></ul>
  19. 19. Bibliografie <ul><li>Documentatie completa disponibila aici </li></ul><ul><li>http :// socket.io / </li></ul><ul><li>http :// profs.info.uaic.ro /~ busaco / teach / courses / cliw / web.html </li></ul><ul><li>http ://www.w3schools.com/ </li></ul><ul><li>http :// docs.jquery.com / Main _Page </li></ul><ul><li>http :// jquerymobile.com /demos/1.0/ </li></ul><ul><li>http :// www.youtube.com / watch ?v=3nnpCXtPXHg </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×