Spring Graph mit Hilfe von JavaScript und dem HTML5 Canvas Element
Ob eine Technologie obsolet ist, kann und sollte man nur für sich selber entscheiden. Zu schnell kann es passieren, dass im technologischen Kleinkrieg zwischen Firmen, Partei ergriffen wird. So scheint es mir aktuell bei der Frage zu sein, ob Flash tod ist und HTML5 seinen Siegeszug begonnen hat, wir also in einer Umbruchphase sind.
Aus diesem Grund möchte ich nicht einfach so in den Chor der Aguren einstimmen, welche das Ende von Flash herbei schreien, aus was für Gründen auch immer, sondern selbest ausprobieren, ob HTML5 heute schon so weit ist um meine kleine, private Welt von Flash zu befreien (Im Online Marketing Bereich sehe ich aktuell keinen Grund, warum Flash als Werbeform so schnell sterben sollte. Aktuell existieren faktisch keine geeigneten Authoring-Tools um HTML5-Werbemittel zu bauen auch wenn Adobe das sicherlich schnell nachrüsten könnte). Aus diesem Grund habe ich ein Miniprojekt gestartet, welches zum Ziel hatte, eine Flash-Lösung durch eine adequarte HTML5-Lösung zu ersetzen. Thema dabei ist eine Aufgabenstellung aus meiner Diplomarbeit. Dabei hatte ich mit dem Flash-eigenen ActionScript einen Graph-Algorithmus implementiert, welcher die einen Kräfte-basiernden Verteilungsalgorithmus implementiert. Beim Übergang von Flash zu HTML stellt sich die Frage der verwendeteten Programmiersprache als erstes. Mit was kann ich den ActionScript-Code ersetzen? Die Antwort stimmt hoffnungsvoll: JavaScript! Eine Sprache die seit 1995, fast jede Browsergenerationen begleitet hat und stetig an wachsende Herausforderungen angepasst wurde (siehe AJAX etc.). In meinem Fall ergab sich der glückliche Umstand, dass bereits Aslak Hellesoy und Dave Hoover schon eine entsprechende JavaScript-Implementierung des Spring-Graph-Algorithmus von Paul Mutto erstellt hatten, welchen ich mit wenigen Mondifikationen weiterverwenden konnte.
Die zweite Frage im Bezug auf eine Umstellung ist: Wie kann ich im Browser zeichnen? Dafür steht in HTML5 das Canvas-Element zur Verfügung. Das Canvas-Element hat eine feste Ausdehnung (Höhe, Breite) und ermöglich über einen Context-Handler den direkten, zeichnenden Zugriff. Die zu visualisierenden Daten sollten aus co2alarm.com kommen. Das Ergebnis der Bemühungen kann als Bitmap in diesem Artikel betrachtet werden. Das Ergebnis ist: Alles funktioniert in HTML5 ähnlich wie in meiner alten ActionScipt/Flash-Version.
