Posted on Leave a comment

Interaktive Grafiken mit HTML5 erstellen

Interaktive Grafiken mit HTML5 erstellen

Motivation

Grafikdesign ist fester Bestandteil heutiger digitaler Medien. Visuelle Darstellungen lockern dabei nicht nur trockene Texte auf. Sachverhalte lassen sich durch Grafiken oftmals schneller vermitteln als durch reinen Text, zu dem sich der Leser erst eine visuelle Vorstellung bilden muss. Über statische Grafiken hinaus bieten bewegte Bilder deutlich mehr Möglichkeiten zur Veranschaulichung von Abläufen und Prozessen. Am weitesten geht die Königsdiziplin der Visualisierung: interaktive Grafiken. Der Anwender erhält eine lebendige Vorstellung eines dynamischen Systems, indem er in die Abläufe eines Modells eingreifen kann und den sich wandelnden Zustand visuell verfolgen kann.

Interaktive Grafiken eignen sich nicht nur weitreichend für zum Beispiel Konzeptvisualisierung und eLearning, sondern auch für animierte Clips und Spiele.


Technologien

Interaktive Inhalte lassen sich heute plattformübergreifend als Webanwendung in Webbrowsern realisieren. Die Grundlage dazu bietet die Sprache HTML (Hypertext Markup Language) in ihrer aktuellen Version 5. Sie legt die Gliederung der Inhalte der Anwendung fest (Abschnitte, Überschriften, Bedienelemente). Für die automatische, an unterschiedliche Ausgabegeräte oder Zwecke angepasste Darstellung der Inhalte (Layout, Schriftarten, Farben) dient die Sprache CSS (Cascading Style Sheets). Für interaktive Grafiken ist das Grafikformat SVG (Scalable Vector Graphics) interessant. Es ist, wie der Name schon sagt, vektorbasiert, bietet Transformationsfunktionen für Verschiebung, Skalierung, Drehung und Scherung und eignet sich damit besonders für geometrische Figuren. Dazu kommt die Programmiersprache JavaScript, die Webseiten um dynamische Funktionalität erweitert. Sie sorgt dafür, dass sich die Grafiken durch Benutzerinteraktion bewegen.

Sogenannte Frameworks, Programmiergerüste, sollen bei der Entwicklung von komplexen Anwendungen helfen. Sie bieten u.a. einen visuellen Editor mit Grundfunktionen, um in einer Webanwendung Elemente zu platzieren, zu bewegen und ihnen Funktionalität zuzuweisen. Daraus wird automatisch textueller Programmiercode erzeugt. Vier der momentan meistgenutzten Frameworks für interaktive Grafiken sind Adobe Edge Animate, Tumult Hype, Sencha Animator und Google Web Designer.

Um ein Verständnis für die programmtechnische Funktionsweise zu gewinnen und gezielt Probleme im Code ausfindig machen zu können, ist die Beschäftigung mit der textuellen Programmierung unabdingbar. Dies gehen wir hier anhand einfacher Beispiele an.

Das HTML5-Grundgerüst

Die Minimalversion des Code-Grundgerüsts einer HTML-Seite sieht so aus:

<!DOCTYPE html>
<html>

<head>
<title>Titel</title>
</head>

<body>
// hierhin kommen die Inhalte
</body>

</html>


Dies sagt dem Browser, dass es sich um ein HTML-Dokument handelt. Im <head>-Element steht der Titel der Seite, der im Browser-Tab der Seite angezeigt wird. Im <body>-Teil folgt der Inhalt der Seite, den wir in den Beispielen entwickeln.

Eine Einführung in den Aufbau des HTML-Codes für das Grundgerüst einer Webseite findet sich hier:
ansehen!

Wir bleiben im Folgenden bei minimalem Code und damit beim Wesentlichen zum Thema dieses Workshops. Alle drei Beispiel gibt es als Quellcode fertig zum Download.

Beispiel 1 – Rotating Rectangle

Im ersten Beispiels stellen wir ein Rechteck dar, das per Mausklick schrittweise rotiert. Wir lernen hierfür das SVG-Format und zwei ihrer Transformationsfunktionen kennen. So sieht der Code für das SVG-Element aus:

<svg viewbox=”-100 -100 300 300″ height=”300″ width=”300″>
<g id=”rectID” onPointerDown=”rotateRect()”>
<rect width=”100″ height=”100″ fill=”blue”/>
</g>
</svg>


Die Attribute height und width legen den sogenannten Viewport fest. Das ist der Bildschirmbereich, der für die SVG-Grafik zur Verfügung steht, hier 300 x 300 Pixel. Ohne weitere Angaben erstreckt sich dieser Bereich von der linken oberen Ecke (Koordinatenpunkt 0,0) des Webseitenbereichs in Richtung rechts unten. Da Webseiten nach oben und links, theoretisch aber nicht nach unten und rechts begrenzt sind, ist diese Festlegung des Nullpunkts und das Ansteigen der y-Koordinatenwerte nach unten hin sinnvoll.

Mit dem Attribut viewbox lässt sich der Ausschnitt festlegen, den man vom Viewport sieht. Die ersten beiden Werte geben den linken oberen Punkt des Bereichs an, der sich von dort nach rechts unten erstreckt. Wählt man diesen Bereich kleiner beziehungsweise größer als den Viewport, wird in den Viewport hinein- beziehungsweise aus ihm herausgezoomt. Wir wählen mit 300 x 300 eine 1:1-Erfassung des Viewports, also des SVG-Bereichs.

Indem der linke obere Punkt der Viewbox auf (-100, -100) gelegt wird, kommt ein quadratisches Rechteck der Größe 100 x 100, das standardmäßig mit linker oberer Ecke bei (0, 0) gezeichnet wird, in der 300 x 300 Punkte großen Viewbox genau in der Mitte zu liegen. Hier das Koordinatensystem mit rot eingezeichnetem Viewbox-Bereich:

Abb. SVG-Koordinatensystem mit Viewbox

Die eigentliche Grafik steht im Code innerhalb des SVG-Elements immer in einem Element namens <g>. Sie kann aus mehreren Komponenten bestehen; in unserem Fall ist ein Rechteck die einzige Komponente. Das Rechteck-Element <rect> ist eine der Grundformen des SVG-Formats. Hier sind alle verfügbaren Formen aufgeführt: hier ansehen!

Wir wählen eine quadratische Größe von 100 x 100 Pixeln und Blau als Füllfarbe. Die Reihenfolge der durch Leerzeichen getrennten Parameterzuweisungen kann frei gewählt werden.

Das Grafikelement <g>, das als einzigen Bestandteil das Rechteck enthält, erhält mit “rectID” einen Identifikator. Diesen benötigen wir zum späteren Zugriff auf das Objekt, um es zu drehen. Mit dem Attribut onPointerDown wird der Grafik ein sogenannter Event-Handler der Sprache JavaScript zugeordnet. Der Event-Handler ist hier die JavaScript-Funktion rotateRect. Diese wird aufgerufen, sobald ein bestimmtes Event eintritt, und “behandelt” dann dieses. In diesem Fall ist das Event ein Mausklick oder Touchklick auf die Grafik.

Damit ist die Definition der SVG-Grafik abgeschlossen.

Wir fügen den Code an die Stelle des Kommentars “// hierhin kommen die Inhalte” im HTML-Gerüst ein und speichern die HTML-Datei als rotating_rectangle.html.
Wenn wir diese Datei im Browser öffnen sehen wir das blaue Rechteck.

Nun geht es an die Implementierung der Rotation:

<script type=”text/javascript”>
var rotateDegree = 0;

function rotateRect() {
rotateDegree += 5;
if (rotateDegree >= 360) rotateDegree = 0;
var rectangle = document.getElementById(“rectID”);
rectangle.setAttribute(“transform”, “rotate(“+rotateDegree+”,50,50)”);
}

< /script >


Mit dem HTML-Element < script type=”text/javascript” > betten wir JavaScript-Code in den HTML-Code ein. Als Erstes definieren wir hier eine globale Variable rotateDegree, die den Rotationswinkel des Rechtecks angibt. Zu Beginn beträgt dieser null.

Es folgt der Event-Handler, die Funktion rotateRect, die im Falle eines Klicks auf die Grafik aufgerufen wird. Zunächst ist der aktuelle Rotationswinkel zu berechnen. Dieser soll mit jedem Klick um 5 Grad fortschreiten. Wenn dabei eine volle Drehung erreicht wurde (360 Grad), beginnt die Zählung wieder bei null.

Um den Rotationsschritt durchzuführen, weisen wir einer Variable eine Referenz auf das Rechteck zu:
var rectangle = document.getElementById(“rectID”);
Hier kommt der im <rect>-Element definierte Identifikator zum Einsatz.

Mit rectangle.setAttribute kann nun dem SVG-Attribut transform der Grafik die SVG-Transformation rotate zugewiesen werden. Übergeben werden dafür (in Klammern) der Rotationswinkel (immer absolut, vom Ausgangswert null aus) und die 2D-Koordinaten des Drehpunkts. (0,0) ist dabei immer die linke obere Ecke des Viewports. Wenn ein Rechteck (bzw. Quadrat) der Größe 100 x 100 um den Mittelpunkt gedreht werden soll, muss hier also (50,50) gewählt werden.

Zu weiteren möglichen SVG-Transformationen: hier ansehen!

Wir fügen diesen Abschnitt nach der SVG-Grafik in das < body >-Element des HTML-Dokuments ein und speichern die Datei. Nach Aufruf im Browser sollte das Rechteck auf Klicks in der gewünschten Weise reagieren.

Hier ausprobieren: (hier kompletten Quellcode downloaden!)

Beispiel 2 – Moving Rectangle

Im nächsten Beispiel lernen wir ein HTML-Input-Element kennen, mit dem wir eine SVG-Grafik steuern. Wie der Name schon sagt, kann der Nutzer über Input-Elemente der Anwendung Daten zur Verarbeitung zuführen. Ein solches Element ist zum Beispiel der Schieberegler, englisch Slider, als HTML-Element <range> genannt. Mit diesem bewegen wir im Folgenden das Rechteck. Input-Elemente funktionieren in HTML allein stehend oder als Teile eines sogenannten Formulars für Benutzereingaben.
Zu den Typen von Input-Elementen: hier ansehen!

Wir definieren zwei Schieberegler für die horizontale und die vertikale Bewegungsrichtung:

<br>
X: <input id=”slider-x” type=”range” min=”-20″ max=”20″ value=”0″ oninput=”moveSlider(this)”/>
Y: <input id=”slider-y” type=”range” min=”-20″ max=”20″ value=”0″ oninput=”moveSlider(this)”/>


Der Zeilenumbruch < br > sorgt dafür, dass die Regler unter statt neben dem Grafikbereich platziert werden.
X: und Y: ist freistehender Text und dient lediglich der Beschriftung der Regler. Wir setzen Identifikatoren für beide Regler, über die wir später im Javascript-Code erkennen, welcher Regler bewegt wurde. type=”range” weist die Elemente als Schieberegler aus, der Browser stellt sie dann entsprechend dar. Mit min und max haben sie einen Wertebereich, der sich um den Koordinaten-Nullpunkt herum bewegt, an dem das Rechteck zu Beginn steht. Dieser Nullpunkt ist daher auf beiden Achsen der Anfangswert value der Regler.

Anders als im vorigen Beispiel fragen wir keinen Mausklick ab, sondern das Input-Element bringt zur Verarbeitung einer Eingabe ein eigenes Attribut oninput mit. Diesem wird die JavaScript-Funktion moveSlider zugewiesen, die zur Verarbeitung einer Reglerbewegung aufgerufen wird. Übergeben wird der Funktion der Parameter this. Dies ist eine Referenz auf das Element, in dem die Funktion steht – also entweder auf das x- oder y-Regler-Element.

So sieht der JavaScript-Code mit der Funktion aus:

< script type=”text/javascript” >
var coordX = 100;
var coordY = 100;

function moveSlider(slider) {

if (slider.id == “slider-x”) coordX = slider.value*5;
if (slider.id == “slider-y”) coordY = slider.value*5;

var rectangle = document.getElementById(“rectID”);
rectangle.setAttribute(“transform”, “translate(“+coordX+”,”+coordY+”)”);

}

< /script >


Die globalen Variablen coordX und coordY werden mit den Koordinaten des linken oberen Eckpunkts intialisiert. Die Funktion moveSlider nimmt in der Variable slider die Referenz auf den gerade bewegten Regler entgegen. Je nachdem, welcher Regler bewegt wurde, soll sich entweder die x- oder die y-Position des Rechtecks verschieben, und zwar um 5 Pixel. Dies leisten die beiden if-Kommandozeilen. Über die Slider-Referenz und die Punktnotation kann der jeweilige Identifikator abgefragt werden sowie der zugehörige neu eingestellte Reglerwert ermittelt werden.

Die min- und max-Werte für die Regler wurden mit -20 beziehungsweise 20 so gewählt, dass sich das Rechteck exakt in seinem gesamten Viewport bewegen lässt, ohne über die Grenze hinauszuragen. (Dies kann nur bei der Rotation in der Nähe der Ränder geschehen.) Die linke obere Ecke des Rechtecks kann für beide Koordinaten zwischen -20 * 5 = -100 und 20 * 5 = 100 liegen, also zwischen (-100, -100) und (100, 100). In diesen Positionen füllt das Rechteck die linke obere bzw. die untere rechte Ecke des Viewports aus.

Wie schon im ersten Beispiel, beziehen wir einen Verweis auf das Rechteck über seinen Identifikator rectID. Damit setzen wir sein Transform-Attribut auf eine Translate-Verschiebung auf die aktuellen Koordinaten.

Zur besseren Visualisierung des SVG-Viewports, innerhalb dem wir das Rechteck bewegen können, zeichnen wir einen 3 Pixel breiten roten Rand um den Viewport-Bereich herum. Dazu dient das Attribute style=”border: 3px solid red” im SVG-Element.

Wir speichern die HTML-Datei unter dem Namen moving_rectangle.html und probieren die Funktionalität aus.

Hier ausprobieren:  (hier kompletten Quellcode downloaden!)
X: Y:

Beispiel 3 – Moving and Rotating Rectangle

Als Letztes kombinieren wir beide Funktionalitäten – das Rotieren und das Verschieben – in einer Anwendung.

onPointerDown=”rotateRect()” aus dem ersten Beispiel kehrt zur Behandlung eines Klicks zurück in das <g>-Element.
Der JavaScript-Code beider Beispiele kommt gemeinsam in den Script-Bereich. Mit Eintritt in den JavaScript-Bereich sind alle in diesem Bereich definierten globalen Variablen und Funktionen bekannt. An welcher Stelle sie dort definiert sind, spielt keine Rolle.

Der zentrale Unterschied zu den Einzelbeispielen ist, dass bei Transformations-Operationen nun sowohl translate als auch rotate ausgeführt werden müssen. Dies ist nötig, da jede Transformation immer wieder neu vom Nullpunkt der Grafik ausgeht. Daher muss für jede aktuelle Transformation auch die letzte der jeweils anderen mit ausgeführt werden. 
Das heißt, bei einem Rotationsschritt muss das Rechteck auch neu an die aktuelle Position gesetzt werden. Und bei einer Verschiebung muss die eventuell gedrehte aktuelle Stellung des Rechtecks wieder hergestellt werden.

Die Reihenfolge der Transformationen spielt dabei eine Rolle. Vertauscht man in der moveSlider-Funktion die Reihenfolge der Transformationen, so dass zuerst rotate und dann translate ausgeführt wird, ergibt sich ein anderes Resultat als in der umgekehrten Reihenfolge.

Statt unnötiger Doppelung von Code können wir die letzten beiden Zeilen für die Transformation, die in beiden JavaScript-Funktionen identisch sind, in einer neuen Funktion unterbringen:

function transformRect() {
var rectangle = document.getElementById(“rectID”);
rectangle.setAttribute(“transform”, “translate(“+coordX+”,”+coordY+”) rotate(“+rotateDegree+”,50,50)”);
}


An die Stelle der ursprünglichen Zeilen tritt in beiden Funktionen dann der Funktionsaufruf transformRect();

Das Ergebnis speichern wir als moving_and_rotating_rectangle.html und testen es im Browser.

Hier ausprobieren:  (hier kompletten Quellcode downloaden!)
X: Y:

Fazit

Wir haben im Rahmen eines HTML5-Dokuments exemplarisch eine SVG-Grafik realisiert, die der Nutzer interaktiv steuern kann. Dazu haben wir die SVG-Form Rectangle, zwei Transformationsformen (Translate und Rotate) und zwei Control-Formen (Mouse-Event und Schieberegler) samt ihrer Behandlung durch JavaScript-Code kennengelernt. Dazu gehörte auch das grundlegende SVG-Konzept des Viewports und der Viewbox.
Die genannten Quellen zu SVG-Formen, Transformationen und Input-Elementen bieten Stoff für weiterführende Experimente.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.