Open Source im professionellen Einsatz
Linux-Magazin 01/2012

HTML-5-Anwendungen mit Canvas, SVG und Websockets

Blühende Oberflächen

Dank HTML 5 lassen sich Client-Server-Anwendungen mit grafischer Oberfläche programmieren, wie sie das Web bisher nicht kannte. Dieser Artikel zeigt, wie das mit Canvas, SVG und Websockets geht. Die Bibliotheken Jquery, Visualize und Autobahn helfen bei der Arbeit.

967

Die neue Generation der Hypertext Markup Language heißt HTML 5 [1] und ist mehr als nur eine Auszeichnungssprache. Im Zuge ihrer Spezifikation ist eine Reihe von Technologien entstanden, die Webanwendungen einen Innovationsschub bescheren. Besonders vielversprechend sind das Element Canvas und das Websocket-Protokoll.

Canvas eröffnet die Möglichkeit, Grafiken mittels Javascript zu zeichnen – und das Hardware-beschleunigt. So lassen sich beispielsweise Diagramme aus Benutzereingaben oder veränderlichen Daten direkt im Browser generieren. Dank des Websocket-Protokolls können Server und Browser sich unabhängig voneinander Nachrichten schicken. Damit lösen Websockets das einseitige Frage-und-Antwort-Spiel zwischen Client und Server gemäß HTTP-Protokoll ab. Diese Starrheit war bisher ein Hemmnis für alle Anwendungsfälle, in denen der Client auf eine Statusänderung der Servers wartet, etwa bei einem Chat.

Online PLUS

Einen Screencast zur Arbeit mit Websockets finden Sie unter http://www.linux-magazin.de/plus/2012/01.

GUI mit Socket

Dieser Artikel demonstriert die Techniken anhand eines Beispiels, das die Speicherauslastung eines entfernten Servers grafisch im Browser anzeigt. Dabei kommen Canvas für die Grafik und Websockets als Netzwerkprotokoll zum Einsatz. Außerdem zeigen die praktischen Bibliotheken Visualize und Autobahn, was sie können. Das HTML-5-Element Canvas [2] liefert eine bemalbare Leinwand, als Zeichenwerkzeug dient Javascript. Dabei sind verschiedene Maltechniken, Kontexte genannt, im Angebot. Derzeit gibt es einen Kontext zum Zeichnen in zwei Dimensionen [3] sowie einen für drei Dimensionen: Web GL [4].

Das Ergebnis ist eine rechteckige Leinwand aus kleinen, eingefärbten Quadraten – eine Bitmapgrafik. Sie ist allerdings nicht skalierbar. Diesem Mangel begegnet aber ein anderes HTML-5-Feature: Es besteht die Möglichkeit, SVG-Grafiken in Dokumente einzubetten. SVG, Scalable Vector Graphics [5], ist ein XML-Vokabular für die Beschreibung von Vektorgrafiken.

Canvas wie auch SVG nutzen ähnliche Konzepte, um Grafiken aufzubauen. Sie können beispielsweise Pfade mit geraden oder gebogenen Begrenzungen anlegen, schließen, füllen und umranden. Das Bitmapverfahren überträgt das Bild einmalig auf eine Leinwand mit einer festen Anzahl von Quadraten (feste Auflösung). Es färbt dabei durch Maloperationen eingeschlossene oder überstrichene Quadrate ein.

Die Vektorgrafik dagegen wird auf eine Leinwand mit einer variablen Anzahl von Quadraten skalierbar gemalt. Listing 1 zeichnet zweimal den gleichen Kegel, per Canvas und per SVG. Die Ausführung der Canvas-Grafik geschieht im »script« -Bereich des HTML-Dokuments. Nach Auswahl des Canvas-Elements selektiert der Javascript-Code den »2d« -Kontext und zeichnet.

Listing 1

Kegel-Grafik mittels Canvas und SVG

01 <!DOCTYPE HTML>
02 <html>
03 <head>
04   <script>
05     window.onload = function() {
06       var cv = document.getElementsByTagName("canvas")[0];
07       cv.width = cv.height = 25;
08       var ctx = cv.getContext("2d");
09       ctx.beginPath();
10       ctx.fillStyle='#0000ff';
11       ctx.moveTo(10, 0);
12       ctx.lineTo(0, 20);
13       ctx.quadraticCurveTo(10,25,20,20)
14       ctx.closePath();
15       ctx.fill();
16     }
17   </script>
18 </head>
19 <body>
20   <canvas></canvas>
21   <svg><path fill="#0000ff" d="M10,0 L0,20 Q10,25 20,20 Z"/></svg>
22 </body>
23 </html>

Die SVG-Grafik dagegen ist nach dem Canvas-Element im Körper des HTML-Dokuments eingebettet. Die Pfadbeschreibung »d="M10,0 L0,20 Q10,25 20,20 Z"« fällt im Vergleich zu den Canvas-Befehlen äußerst kompakt aus. Die Buchstaben der Maloperation entsprechen ungefähr den Canvas-Funktionsaufrufen. Die Ausgabe ist in Abbildung 1 zu sehen, die beim genauen Hinsehen den Qualitätsunterschied offenbart.

Effekte

Neben Pfaden bieten der 2-D-Kontext von Canvas und SVG noch viele weitere Gestaltungsmöglichkeiten, beispielsweise Farbverläufe, Schatten, Transparenzeffekte, Gruppierungen, Transformationen sowie einfache Formen wie Quadrate, Kreisbögen, kubische und quadratische Bézierkurven (Splines). Canvas-2-D kann Grafiken zudem Pixel für Pixel behandeln. Einen sehr guten Einblick in die Verwendung des Canvas-Elements und von SVG in HTML 5 gibt Peter Kreußels Artikel "Malkasten" aus dem Linux-Magazin 11/11 [6].

Dem sei noch hinzugefügt, dass beim Canvas-Element in HTML 5 alle Browser erstmals von Hardwarebeschleunigung Gebrauch machen. Die Rechenoperationen für Grafiken laufen dabei auf der Grafikkarte statt auf der CPU ab. Zudem referenziert die HTML-5-Spezifikation SVG 1.2 (Tiny). Tiny ist eine Teilmenge von SVG 1.1. Dieses Profil wurde mit Rücksicht auf die einheitliche Verwendbarkeit von SVG auf vielen Geräteklassen zusammengestellt.

Obwohl die Spezifikation von HTML 5 noch nicht abgeschlossen ist, gibt es bereits Anwendungen für das Canvas-Element. Ein gutes Beispiel ist das Jquery-Plugin Visualize [7], das aus HTML-Tabellen automatisch Diagramme erzeugt. Visualize ist ein Plugin für die Javascript-Bibliothek Jquery [8]. Sie verdeckt viele Schwächen von Javascript und unterstützt neuere Versionen gängiger Webbrowser wie Firefox 2.0+, Google Chrome, Opera 9.0+, Safari 3.0+ und Microsofts Internet Explorer 6.0+.

Die Bibliothek adressiert die Elemente eines HTML-Dokuments mittels der kompakten CSS-Selektoren anstelle der schwer handhabbaren DOM-Schnittstelle und bietet für die so ausgewählten Elemente eine Vielzahl praktischer Funktionen. Unter anderem vereinfacht Jquery die Ereignis-Behandlung, ermöglicht Animationen und bietet Ajax-Methoden. Beispielsweise kann der Programmierer mit dem kompakten Ausdruck

$('.story').click(function() {alert($(this).text())})

für jedes HTML-Element mit der Eigenschaft »class="story"« einen Eventhandler vereinbaren. Klickt der Anwender dann auf eines dieser Elemente, hebt Javascript dessen Inhalt mit einer Meldung hervor.

Getreu dem Motto "Write less, do more" verwendet die Bibliothek für Methoden einfache Bezeichner wie »each()« , »map()« , »click()« oder »bind()« . Zusätzlich ist Jquery durch eine Vielzahl von Plugins erweiterbar. Die Bibliothek wurde für den Einsatz in der Produktion bestmöglich komprimiert. Außerdem unterstützt Jquery den Standard CSS 3. Jquery und Visualize sind unter MIT- sowie GPL-Lizenz verfügbar.

Um ein Diagramm mittels Visualize darzustellen, wendet der Webentwickler die gleichnamige Methode auf eine Menge von mit Jquery ausgewählten Tabellen an. Für jede Tabelle liest Visualize die Daten aus und erstellt daraus ein Linien-, Torten-, Bereichs- oder Balken-Diagramm. Dazu zeichnet Jquery das Diagramm in ein Canvas-Element, das es standardmäßig nach der Tabelle einfügt. Die Form der Diagramme lässt sich durch Parameter des Funktionsaufrufs sowie durch CSS-Regeln beeinflussen.

Linux-Magazin kaufen

Einzelne Ausgabe
 
Abonnements
 
TABLET & SMARTPHONE APPS
Bald erhältlich
Get it on Google Play

Deutschland

Ähnliche Artikel

  • Screencast: Webanwendungen mit Websockets

    In einem Screencast zum Linux-Magazin-Artikel "Blühende Oberflächen" zeigt der Autor Andreas Möller Server- und Client-Komponente für die Anwendung.

  • WebSocket4J 1.2 implementiert Client und Server

    Websocket4J, eine freie Umsetzung des bidirektionalen Websocket-Protokolls in Java, ist in Version 1.2 erhältlich. Erstmals setzt sie neben dem Server auch den Client-Part um.

  • Websockets

    Wer den Raspberry Pi über eine Android-App zum Tanz auffordern möchte, bringt am besten Websockets mit auf den Ball. Sie erleichtern die gepflegte Konversation mit dem graziösen Minirechner.

  • Leserbriefe

    Haben Sie Anregungen, Statements oder Kommentare? Dann schreiben Sie an redaktion@linux-magazin.de. Die Redaktion behält es sich vor, die Zuschriften und Leserbriefe zu kürzen. Sie veröffentlicht alle Beiträge mit Namen, sofern der Autor nicht ausdrücklich Anonymität wünscht.

  • Perl-Snapshot

    HTML 5 bringt Websockets, über die Webserver mit ihren Clients in einen Dialog treten können. Die im Folgenden vorgestellte kleine Webapplikation zeigt in Echtzeit im Browser, welche Seiten beliebige User von einem Webserver im Moment aufrufen.

comments powered by Disqus

Stellenmarkt

Artikelserien und interessante Workshops aus dem Magazin können Sie hier als Bundle erwerben.