Mein Osterei für Euch.
Meßwerte mit skalierbaren Vektorgrafiken visualisieren
Das Osterei besteht zum einen aus einem kleinen Tutorial, welches die Grundlagen und die Verwendung der Grundformen vermittelt.
Dieses Tutorial besteht aus den drei Dateien: svg-tutorial.html svg-tutorial.css svg-tutorial-01.svg
(Ich hoffe, das mein Menü rechts oben so funktioniert, wie ich das mir gedacht habe - selten, aber manchmal will es nicht - warum auch immer)
Der zweite Teil des Ostereies ist eine Art interaktive Entwicklung eines Diagramms zur Darstellung eines Meßwertverlaufes.
Dieser Teil besteht aus den Dateien: svg_entwurf.html svg_entwurf.css svg_entwurf.js
Bei Verwendung von Chrome und dessen Ableger entstehen manchmal seltsame Effekte. Ab und an findet sich ein Button "Chrome-Hack", damit der Browser wieder spurt. Am Anfang der Seite die letzte Aktion einfach nochmal machen und dann paßt das wieder. Liegt wohl daran, weil Chrome SVG nicht 100% unterstützt. Im Firefox, der 100% SVG-Unterstützung hat, gibt es keine Probleme.
Und da man immer gerne etwas Anschauungsmaterial mag, habe ich eine svg-demo.html beigelegt, die ich vorhin noch schnell aus meiner Sensorseite kopiert habe. Ursprünglich wollte ich das noch animieren, aber der Aufwand ist mir jetzt doch zu groß.
Und für die, die von dem Tutorial angeregt sind und sich selbst ausprobieren wollen, habe ich noch zwei Vorlagen beigelegt. Eine für eine Standalone-SVG (vorlage.svg) und eine HTML-Seite, in dem man SVG einbetten kann (vorlage.html).
Da SVGs reine Textdateien sind, läßt sich damit wunderbar ein Template erstellen oder man bastelt aus einen Haufen Schnipsel mittels seiner Programmiersprache die Webseite mit dem/den SVG/s zusammen.
Zu guter Letzt hänge ich noch einen Screenshot von der svg-demo.html an, damit gleich klar ist, um was es geht:
Bleibt mir noch, Euch viel Spaß damit zu wünschen.