Your SlideShare is downloading. ×
Co w
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Co w

305
views

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