Zum Hauptinhalt springen
Datenvisualisierung mit SVG

Messinstrumente mit Federphysik

Tacho, Akku, Thermometer, Kompass und Uhr – gezeichnet mit SVG und bewegt mit echter Federphysik. Zieh an den Zeigern, und die Zahlen schlagen aus.

Was du siehst

Im Startbereich steht ein großer Tacho, darum herum pendeln leise weitere Instrumente. Tippt man auf einen Fahrmodus, schwingt die Nadel mit etwas Überschwung auf den neuen Wert – wie ein echtes Messgerät. Weiter unten hängen acht Instrumente zusammen: Wer den Akku leerzieht, sieht die Reichweite schrumpfen.

Darunter zählen Kennzahlen hoch, sobald man sie sieht, und im Baukasten lässt sich ein eigenes Instrument zusammenstellen: Zeiger, Bogen oder Segmente, Spannweite, Skala und Farbe.

So ist es gebaut

Jedes Instrument besteht aus denselben Teilen: einem Bogen, Skalenstrichen, einem Zeiger und einer Anzeige, alles als SVG berechnet. Die Bewegung kommt aus einer kleinen Federsimulation, die alle Instrumente in einem gemeinsamen Takt antreibt. Zeiger lassen sich mit Maus, Finger und Pfeiltasten bedienen.

Woher die Idee kommt

Gauge UI zeigt, wie viele Arten von Messinstrumenten sich aus wenigen Bausteinen bauen lassen. Wir haben die Idee ohne Framework nachgebaut und um Federphysik und zusammenhängende Werte ergänzt.

Darauf achten wir

  • Jedes Instrument ist ein Schieberegler mit Tastatur und Vorlesefunktion
  • Ruhige Fassung springt ohne Schwingen auf den Wert
  • Reines SVG, gestochen scharf auf jedem Bildschirm

Steckbrief

  • Technik
    Datenvisualisierung mit SVG
  • Werkzeuge
    SVG · Federphysik · Pointer Events
  • Aufwand
    Mittel
  • Vorbild
    Gauge UI
  • Passt für
    Seiten mit Zahlen, die etwas bedeuten: E-Bikes, Energie, Sport, Finanzen, Dashboards.

Das Zentrum

Und alles kreist um eine Sache: die Idee.

Erzähl uns, wofür deine Marke steht. Wir finden die Idee, die sie unvergesslich macht – und bauen sie so, dass du sie selbst pflegen kannst.

Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein.

Du brauchst ein großes Portal, einen Shop oder eine Plattform, die mitwächst? Dafür gibt es die Joomla Agentur.