digitale whiteboard-software mit html5, svg und … · digitale whiteboard-software mit html5, svg...
TRANSCRIPT
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
1. Aufgabenstellung
2. HTML5-Canvas
3. SVG
4. fabric.js
5. Raphael
6. Vergleich
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
2
1. Aufgabenstellung
■ 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
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
3
■ 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 – HTML5
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
4
2. HTML5-Canvas - <canvas>
■ Erlaubt dynamisches Zeichnen von Bitmaps in 2D
■ Wird von allen gängigen und aktuellen Browsern unterstützt
■ Markup:
■ Zeichnen in JavaScript:
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
5
IE Firefox Safari Chrome Opera iPhone Android
9.0+ 3.0+ 3.0+ 3.0+ 10.0+ 1.0+ 1.0+
<canvas id=“canvas" width=“500" height=“350"> Fallback content </canvas>
var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d');
2. HTML5-Canvas - Zeichenmethoden
■ Farbe
□ strokeStyle
□ fillStyle
■ Rechtecke
□ clearRect(float x, float y, float w, float h)
□ fillRect(float x, float y, float w, float h)
□ strokeRect(float x, float y, float w, float
h)
■ Pfade
□ 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 )
□ arc(float x, float y, float radius, float
startAngle, float endAngle, boolean
anticlockwise )
□ stroke()
■ Text
□ 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(...)
■ …
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
6
2. HTML5-Canvas - Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Canvas example</title>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
7
2. HTML5-Canvas - Beispiel
<!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>
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
8
2. HTML5-Canvas - Beispiel
function draw(){
var ctx =
document.getElementById('canvas')
.getContext('2d');
ctx.fillStyle = "rgb(174,0,54)";
ctx.fillRect (10, 40, 160, 160);
}
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
9
2. HTML5-Canvas - Beispiel
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);
}
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
10
2. HTML5-Canvas - Beispiel
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);
}
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
11
2. HTML5-Canvas - Beispiel
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);
}
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
12
SVG - Allgemeines
■ 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
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
13
SVG - Entstehung
■ 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)
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
14
SVG – Was kann SVG?
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
15
SVG – Code
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
16 Header
Rechteck
Größe
Farbeinstellungen
Startkoordinaten
SVG - Kompatibilität
■ 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
□ …
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
17
SVG - Browserkompatibilität
■ SVG Unterstützung der aktuellen Browsern
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
18
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
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
19
4. fabric.js - Features
■ Designziele: Performance und Kompatibilität (Firefox 2+, Chrome, Safari 3+, Opera 9.64+, IE9+)
■ Interaktives Objektmodell
■ Eingebaute Maus-Interaktion
■ Text-Rendering
■ SVG-Parsing
■ …
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
20
4. fabric.js - Beispiel
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
21
<!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>
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);
});
}
example.html example.js
4. fabric.js - Dokumentation
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
22
kangax.github.com/fabric.js/docs
www.slideshare.net/kangax
kangax.github.com/fabric.js/demos
groups.google.com/group/fabricjs
5. Raphael.js – JavaScript Library by Dmitry Baranovskiy
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
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
■ Sehr gute übersichtliche Dokumentation:
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
24
5. Raphael.js – JavaScript Library
5. Raphael.js - Beispiel
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
25
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);
}
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>
6. Vergleich – Canvas vs. SVG
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
26 Benchmark: http://themaninblue.com/writing/perspective/2010/03/22/
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
Kubuntu 11.10 Windows 7Windows 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
0
10
20
30
40
50
60
70
80
Fram
es p
er S
eco
nd
Canvas - Chrome
SVG- Chrome
Canvas - Firefox
SVG - Firefox
6. Vergleich - Testpanels
■ Spezifikation:
□ 500 bewegliche Rechtecke
□ 50 bewegliche Bilder
□ 500 Scribbles, je 100 Linien
□ Zooming
□ Panning/Scrolling
□ Freihandzeichnen
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
27
6. Vergleich - Fabric.js vs. Raphael.js unter Google Chrome 15
■ 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
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
28
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
29
6. Vergleich - Fabric.js vs. Raphael.js unter Google Chrome 15
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
0
10
20
30
40
50
60
70
Fram
es p
er S
eco
nd
fabric.js - Linux
raphael.js - Linux
fabric.js - Windows 7
raphael.js - Windows 7
fabric.js - Mac OSX
raphael.js - Mac OSX
6. Vergleich - Fabric.js vs. Raphael.js unter Firefox 8.0.1
■ 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
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
30
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
31
6. Vergleich - Fabric.js vs. Raphael.js unter Firefox 8.0.1
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
0
10
20
30
40
50
60
70
Fram
es p
er S
eco
nd
fabric.js - Windows 7
raphael.js - Windows 7
fabric.js - Mac OSX
raphael.js - Mac OSX
Quellen
■ 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.uni-
potsdam.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/
Whiteboard-Client | Jan Teske, Peter Weigt, Philipp Nagy, Daniel Hoffmann | 30.11.2011
32