3Quarks » Segmentanzeige english

Gestalte mit dieser Web App Deine eigene Segmentanzeige. Wähle zwischen sieben, vierzehn oder sechzehn Segmenten, experimentiere mit den Einstellungen für die Geometrie, den Farben und den Ausgabeformaten.

Auf Basis Deiner Eingaben erzeugt die App automatisch den passenden JavaScript-Sourcecode. Du kannst ihn hier kopieren und direkt in Deine Webseite einbauen.

Die rechts angezeigte Segmentanzeige ist mit JavaScript und dem <canvas>-Tag realisiert. Dieses Tag ist Bestandteil von HTML 5 und wird von allen modernen Browsern unterstützt; der Internet Explorer bis zur Version 8 gehört leider nicht dazu. Um das <canvas>-Tag auch für die Anwender des Internet Explorer nutzbar zu machen, stellt das Open Source Projekt explorercanvas mit Hilfe einer kleinen JavaScript-Bibliothek zumindest die Grundfunktionen zur Verfügung.

Im Folgenden ist beschrieben, wie Du die Segmentanzeige in Deine HTML-Seiten einbinden kannst. Du benötigst dazu lediglich die JavaScript-Klasse SevenSegmentDisplay und, wenn Du Rücksicht auf die Nutzer des Internet Explorers nehmen willst, die JavaScript-Bibliothek explorercanvas.

Einbindung in das HTML-Dokument

Das <canvas>-Tag wird wie jedes andere HTML-Tag deklariert und kennt die drei Attribute id, width und height. Vergebe eine sinnvolle id - zum Beispiel "display" - und eine beliebige Breite und Höhe für das Element. Die Anzeige wird im <canvas>-Tag zentriert und ihre Größe entsprechend angepaßt. Kann ein Browser die Segmentanzeige nicht darstellen, wird dem Benutzer der eingeschlossene Text angezeigt.

<canvas id="display" width="260" height="140">
  Dieser historische Browser wird nicht unterstützt.
  Benutze bitte einen modernen Browser, um diese Seite anzuzeigen.
</canvas>
            

JavaScript Code

Der unten stehende JavaScript Code wird automatisch aus den Einstellungen der Abschnitte „Geometrie“, „Farben“ und „Anzeige“ generiert. Du kannst so Deine eigene Segmentanzeige gestalten und anschließend den erzeugten Source Code einfach kopieren.

Die ersten drei Zeilen sind nur für den Internet Explorer bis zur Version 8 interessant. Sie binden die JavaScript-Bibliothek excanvas.js über einen bedingten Kommentar ein; andere Browser ignorieren diese Anweisung.

Das Script geht davon aus, daß sich die beiden JavaScript-Bibliotheken seven-segment-display.js und excanvas.js im gleichen Verzeichnis wie die HTML-Seite mit dem <canvas>-Tag befinden. Ist dies bei Dir nicht der Fall, dann mußt Du die beiden Pfadangaben entsprechend ändern.

Weiter geht das Script davon aus, daß Du auf der HTML-Seite wie oben im Beispiel als <canvas> id den Namen display verwendest. Wenn Du eine andere id bevorzugst, dann mußt Du auch hier den Source Code anpassen.

Damit ist die Segmentanzeige initialisiert und zeigt zunächst nur die ausgeschalteten Segmente an. Die Zeichen bzw. die Segmente können nun mit der Funktion setValue(value) gesetzt werden.

  display.setValue('12:34:56');
            

Die Digitaluhr auf der rechten Seite ist ebenfalls schnell geschrieben. Dazu wird alle 100 Millisekunden die Funktion animate() gerufen. Diese Funktion erzeugt ein neues JavaScript-Objekt Date, das mit dem aktuellen Datum und der aktuellen Zeit initialisiert wird. Stunden, Minuten und Sekunden werden anschließend ausgelesen, für das Format ##:##:## aufbereitet und der Segmentanzeige via display.setValue(value) übergeben. Und schon läuft die Uhr.

  window.setInterval('animate()', 100);
  
  function animate() {
    var time    = new Date();
    var hours   = time.getHours();
    var minutes = time.getMinutes();
    var seconds = time.getSeconds();
    var value   = ((hours < 10) ? ' ' : '') + hours
                + ':' + ((minutes < 10) ? '0' : '') + minutes
                + ':' + ((seconds < 10) ? '0' : '') + seconds;
    display.setValue(value);
  }
            

Noch ein Hinweis: Diese Seite bindet das JavaScript-Framework jQuery ein und macht intensiven Gebrauch davon, daher ist der HTML-Quellcode dieser Seite nicht für jeden sofort verständlich. Die JavaScript-Segmentanzeige ist aber unabhängig von jQuery und kann mit jedem anderen JavaScript-Framework oder auch ohne ein solches verwendet werden.

Download und Lizenzbedingungen

Die beiden JavaScript-Dateien segment-display.js und excanvas.js sowie eine HTML-Beispielseite sind hier in einer Zip-Datei zum Download zusammengefaßt:

• SegmentDisplay (21 kByte, gezippt)

Das Script steht unter der Creative Commons 3.0 Lizenz. und darf für private und kommerzielle Zwecke frei verwendet werden. Über einen Hinweis auf den Autor oder einen Link auf diese Seite würde ich mich freuen.