• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Co w
 

Co w

on

  • 442 views

 

Statistics

Views

Total Views
442
Views on SlideShare
440
Embed Views
2

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 2

http://cliw-eustudent.appspot.com 2

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Co w Co w Presentation Transcript

    • CoW Colaborative Whiteboard De Constantin Lucian Andrei
    • 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.
    • Functii(mobile)
      • Functiile whiteboard-ului sunt:
        • Inserarea de figuri geometrice
        • Desenarea libera
        • Radiera
    • Functii(PC)
      • Functiile in plus fata de
      • mobile:
      • - utilizarea diferitelor
      • pensule de diferite
      • marimi
      • - inserarea de imagini
      • - exportul in png
      • - inserarea de text
    • 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();
      • }
    • 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();
      • }
    • 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)
    • 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;
      • }
    • 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;
      • }
      • }
      • }));
    • 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;
      • }
      • }));
    • 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) { }
    • 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.
    • 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');
      • }
    • 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.
    • 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;}
      • });
    • 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(){
      • });
      • });
    • Forma finala(PC)
    • Forma finala(mobile)
      • O aplicatie simpla de
      • tip plansa colaborativa
      • pentru PC si
      • dispozitive mobile
      • Sursa disponibila la:
      • source
    • 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