Digitale Whiteboard-Software mit HTML5, SVG und WebSockets Webprogrammierung und Web 2.0-Technologien 30.11.2011 Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann
Gliederung 2 1. Aufgabenstellung 2. HTML5-Canvas 3. SVG 4. fabric.js 5. Raphael 6. Vergleich
1. Aufgabenstellung 3 Implementierung eines Whiteboard-Clients für das Tele-Board- Projekt Realisierung der Zeichenfläche mit HTML5-Canvas oder SVG Kommunikation und Synchronisation der Clients mit WebSockets
2. HTML5-Canvas HTML5 4 Sammlung von neuen Features Erster Arbeitsentwurf 22.01.2008, letzter am 25.05.2011 Spezifikation voraussichtlich 2014 fertiggestellt Neuheiten/Änderungen: Nur ein Doctype: <!DOCTYPE html> Strukturiende Elemente: section, nav, article Canvas <video>-tag Local Storage SVG- und MathML-Einbindung Neue <input>-felder
2. HTML5-Canvas - <canvas> 5 Erlaubt dynamisches Zeichnen von Bitmaps in 2D Wird von allen gängigen und aktuellen Browsern unterstützt IE Firefox Safari Chrome Opera iphone Android 9.0+ 3.0+ 3.0+ 3.0+ 10.0+ 1.0+ 1.0+ Markup: <canvas id= canvas" width= 500" height= 350"> Fallback content </canvas> Zeichnen in JavaScript: var canvas = document.getelementbyid('canvas'); var context = canvas.getcontext('2d');
2. HTML5-Canvas - Zeichenmethoden 6 Farbe strokestyle fillstyle Rechtecke clearrect(float x, float y, float w, float h) fillrect(float x, float y, float w, float h) Pfade strokerect(float x, float y, float w, float h) beginpath( ) closepath( ) moveto( float x, float y) lineto( float x, float y) quadraticcurveto(float cpx, float cpy, float x, float y ) beziercurveto(float cp1x, float cp1y, float cp2x, float cp2y, float x, float y ) Text startangle, float endangle, boolean anticlockwise ) stroke() filltext(string text, float x, float y, [Optional] float maxwidth) stroketext(string text, float x, float y, [Optional] float maxwidth) Bilder drawimage( ) Line styles Transformation scale( float x, float y) rotate( float angle) translate( float x, float y) transform(...) settransform(...) arc(float x, float y, float radius, float
2. HTML5-Canvas - Beispiel 7 <!DOCTYPE html> <html> <head> <title>canvas example</title> </head> <body> <canvas id="canvas" width="300" height="300"></canvas> </body> </html>
2. HTML5-Canvas - Beispiel 8 <!DOCTYPE html> <html> <head> <title>canvas example</title> <script type="text/javascript"> function draw(){ var ctx = document.getelementbyid('canvas').getcontext('2d'); } </script> </head> <body onload="draw();"> <canvas id="canvas" width="300" height="300"></canvas> </body> </html>
2. HTML5-Canvas - Beispiel 9 function draw(){ var ctx = document.getelementbyid('canvas').getcontext('2d'); } ctx.fillstyle = "rgb(174,0,54)"; ctx.fillrect (10, 40, 160, 160);
2. HTML5-Canvas - Beispiel 10 function draw(){ var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.fillstyle = "rgb(174,0,54)"; ctx.fillrect (10, 40, 160, 160); } ctx.fillstyle = "rgb(246, 167, 1)"; ctx.fillrect (55, 20, 140, 140);
2. HTML5-Canvas - Beispiel 11 function draw(){ var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.fillstyle = "rgb(174,0,54)"; ctx.fillrect (10, 40, 160, 160); ctx.fillstyle = "rgb(246, 167, 1)"; ctx.fillrect (55, 20, 140, 140); } ctx.fillstyle = "rgb(221, 99, 13)"; ctx.fillrect (55, 40, 115, 120);
2. HTML5-Canvas - Beispiel 12 function draw(){ var ctx = document.getelementbyid('canvas').getcontext('2d'); ctx.fillstyle = "rgb(174,0,54)"; ctx.fillrect (10, 40, 160, 160); ctx.fillstyle = "rgb(246, 167, 1)"; ctx.fillrect (55, 20, 140, 140); ctx.fillstyle = "rgb(221, 99, 13)"; ctx.fillrect (55, 40, 115, 120); } ctx.font = "40pt sans-serif"; ctx.fillstyle = "rgb(255,255,255)"; ctx.filltext("hpi", 70, 100);
SVG - Allgemeines 13 SVG => Scalable Vector Graphics XML basiert, textorientiert für 2D, skalierbare Grafiken Bilder und Text sind grafische Objekte Darstellung durch user agents: Browser SVG Viewer
SVG - Entstehung 14 1998: Vector Markup Language (VML) Precision Graphics Markup Language (PGML) zur Standardisierung eingereicht Sep 2001: Veröffentlichung von Scalable Vector Graphics 1.0 Jan 2003: aktuelle Version SVG 1.1 Dez 2008: SVG 1.2 Tiny (mobile devices)
SVG Was kann SVG? 15
SVG Code 16 Header Rechteck Größe Farbeinstellungen Startkoordinaten
SVG - Kompatibilität 17 Unterstützt Scriptsprachen (z.b. JavaScript) Unterstützt Stylesprachen (z.b. CSS) Kompatible zu: XML extensible Markup Language CSS Cascading Stylesheets DOM Document Object Model HTML Hypertext Markup Language XHTML und HTML5
SVG - Browserkompatibilität 18 SVG Unterstützung der aktuellen Browsern IE ab 9.0 Firefox ab 4.0 Safari ab 5.0 Chrome ab 10.0 Opera ab 11.01
4. fabric.js Eine Canvas-Library 19
4. fabric.js - Features 20 Designziele: Performance und Kompatibilität (Firefox 2+, Chrome, Safari 3+, Opera 9.64+, IE9+) Interaktives Objektmodell Eingebaute Maus-Interaktion Text-Rendering SVG-Parsing
4. fabric.js - Beispiel 21 example.html <!DOCTYPE html> <html> <head> <script src="fabric.js"></script> <script src="example.js"></script> </head> <body> <canvas id="c" width="200" height="200"> Fallback Content </canvas> </body> </html> example.js window.onload = function() { var canvas = new fabric.canvas('c'); var rect = new fabric.rect({ width: 100, height: 100, left: 100, top: 100 }); canvas.add(rect); var angle = 0; settimeout(function animate() { angle = (angle + 2) % 360; rect.setangle(angle); canvas.renderall(); settimeout(animate, 10); }); }
4. fabric.js - Dokumentation 22 kangax.github.com/fabric.js/docs kangax.github.com/fabric.js/demos www.slideshare.net/kangax groups.google.com/group/fabricjs
5. Raphael.js JavaScript Library by Dmitry Baranovskiy 23 Kleine JavaScript Library vereinfacht zeichnen von Vectorgrafiken im Web Entspricht W3C SVG Empfehlung erstellt standardkonforme SVG Grafiken Editierbarkeit außerhalb des Webs möglich! Lizenz? : MIT Lizenz Cross Browser kompatibel bis Internet Explorer 6 (VML) Raphael Projects + Plugins: graphael Graph-Zeichentool ZPD Zooming + Panning + Drag and Drop URL: raphaeljs.com
5. Raphael.js JavaScript Library 24 Sehr gute übersichtliche Dokumentation:
5. Raphael.js - Beispiel 25 example.html example.js <!DOCTYPE html> <html> <head> <script src= raphael.js"></script> <script src="example.js"></script> </head> <body> <div id= paper ></div> </body> </html> window.onload = function() { var paper = Raphael( paper", 320, 200); var circle = paper.circle(50, 50, 40); circle.click(function (){ alert( Web 2.0 rockz ) }; var c = paper.rect(10, 10, 50, 50); }
Frames per Second 6. Vergleich Canvas vs. SVG 26 Benchmark: http://themaninblue.com/writing/perspective/2010/03/22/ 80 70 60 50 40 30 20 10 0 Kubuntu 11.10 Windows 7 Windows 7 (high end) Mac OSX 10.7.2 Canvas - Chrome 52 35 65 32 SVG- Chrome 75 32 64 35 Canvas - Firefox 12,5 33,5 34 39 SVG - Firefox 3 2 2,5 3 Canvas - Chrome SVG- Chrome Canvas - Firefox SVG - Firefox Kubuntu 11.10, Windows 7: Intel Pentium SU4100, 2x 1.3GHz Windows 7 (high end): Intel Core i5-480m, 2x 2.66GHz Mac OSX 10.7.2: Intel Core2Duo, 2x 2.00 GHz
6. Vergleich - Testpanels 27 Spezifikation: 500 bewegliche Rechtecke 50 bewegliche Bilder 500 Scribbles, je 100 Linien Zooming Panning/Scrolling Freihandzeichnen
6. Vergleich - Fabric.js vs. Raphael.js unter Google Chrome 15 28 Eingesetzter Browser: Chrome Eingesetzte Testsysteme: LINUX: Intel Core i5-480m, 2x 2,66 GHz; 4 GB RAM WINDOWS 7: Intel Core i5-480m, 2x 2,66 GHz; 4 GB RAM MAC OSX: Intel Core2Duo, 2x 2,00 GHz; 4 GB RAM Average Load Time alle Systeme kombiniert Raphael.js 883 ms Fabric.js 330 ms
Frames per Second 6. Vergleich - Fabric.js vs. Raphael.js unter Google Chrome 15 29 70 60 50 40 30 20 10 fabric.js - Linux raphael.js - Linux fabric.js - Windows 7 raphael.js - Windows 7 fabric.js - Mac OSX raphael.js - Mac OSX 0 move rectangle: move image: panning: zooming: drawing: fabric.js - Linux 27 25 20 15 60 raphael.js - Linux 60 60 46 25 46 fabric.js - Windows 7 22 22 18 15 57 raphael.js - Windows 7 61 61 48 15 49 fabric.js - Mac OSX 10 11 9 7 51 raphael.js - Mac OSX 60 60 28 18 32
6. Vergleich - Fabric.js vs. Raphael.js unter Firefox 8.0.1 30 Eingesetzter Browser: Firefox Eingesetzte Testsysteme: LINUX: Intel Core i5-480m, 2x 2,66 GHz; 4 GB RAM WINDOWS 7: Intel Core i5-480m, 2x 2,66 GHz; 4 GB RAM MAC OSX: Intel Core2Duo, 2x 2,00 GHz; 4 GB RAM Average Load Time alle Systeme kombiniert Raphael.js 1570 ms Fabric.js 425 ms
Frames per Second 6. Vergleich - Fabric.js vs. Raphael.js unter Firefox 8.0.1 31 70 60 50 40 30 20 fabric.js - Windows 7 raphael.js - Windows 7 fabric.js - Mac OSX raphael.js - Mac OSX 10 0 move rectangle: move image: panning: zooming: drawing: fabric.js - Windows 7 6 4 7 13 13 raphael.js - Windows 7 56 56 18 16 33 fabric.js - Mac OSX 16 16 13 12 51 raphael.js - Mac OSX 60 60 6 10 20
Quellen 32 Canvas Tutorial: https://developer.mozilla.org/en/canvas_tutorial fabric.js: http://kangax.github.com/fabric.js/ https://github.com/kangax/fabric.js/ HTML5 Working Draft: http://www.w3.org/tr/html5/ Mark Pilgrim - Dive into HTML5, Kapitel 4: http://fortuito.us/diveintohtml5/canvas.html Raphael.js: http://raphaeljs.com/ stats.js: https://github.com/mrdoob/stats.js SVG Wiki: http://de.wikipedia.org/wiki/scalable_vector_graphics SVG Tutorial: http://svg.tutorial.aptico.de/ Tele-Board: http://www.hpi.unipotsdam.de/meinel/systeme/tele_board.html The man in blue - Benchmark: http://themaninblue.com/writing/perspective/2010/03/22/ W3C Standard: http://www.w3.org/tr/#tr_svg/