Digitale Whiteboard-Software mit HTML5, SVG und … · Digitale Whiteboard-Software mit HTML5, SVG...

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


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


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:


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(...)

■ …


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>


7


<!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>


8


function draw(){

var ctx =

document.getElementById('canvas')

.getContext('2d');

ctx.fillStyle = "rgb(174,0,54)";

ctx.fillRect (10, 40, 160, 160);

}


9


function draw(){

var ctx =


.getContext('2d');


ctx.fillRect (10, 40, 160, 160);

ctx.fillStyle = "rgb(246, 167, 1)";

ctx.fillRect (55, 20, 140, 140);

}


10


function draw(){

var ctx =


.getContext('2d');


ctx.fillRect (10, 40, 160, 160);


ctx.fillRect (55, 20, 140, 140);


ctx.fillRect (55, 40, 115, 120);

}


11


function draw(){

var ctx = document.getElementById('canvas')

.getContext('2d');


ctx.fillRect (10, 40, 160, 160);


ctx.fillRect (55, 20, 140, 140);


ctx.fillRect (55, 40, 115, 120);

ctx.font = "40pt sans-serif";


ctx.fillText("HPI", 70, 100);

}


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


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)


14

SVG – Was kann SVG?


15

SVG – Code


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

□ …


17

SVG - Browserkompatibilität

■ SVG Unterstützung der aktuellen Browsern


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


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

■ …


20

4. fabric.js - Beispiel


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


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


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:


24

5. Raphael.js – JavaScript Library

5. Raphael.js - Beispiel


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


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

http://themaninblue.com/writing/perspective/2010/03/22/

6. Vergleich - Testpanels

■ Spezifikation:

□ 500 bewegliche Rechtecke

□ 50 bewegliche Bilder

□ 500 Scribbles, je 100 Linien

□ Zooming

□ Panning/Scrolling

□ Freihandzeichnen


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


28


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


30


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/


32

Digitale Whiteboard-Software mit HTML5, SVG und … · Digitale Whiteboard-Software mit HTML5, SVG...

Documents

Transcript of Digitale Whiteboard-Software mit HTML5, SVG und … · Digitale Whiteboard-Software mit HTML5, SVG...