Übersicht

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.

Geometrie

Segmentanzahl
Zeichenform
Zeichenhöhe
Zeichenbreite
Zeichenabstand
Zeichenwinkel
Segmentbreite
Segmentabstand

Beim Spielen mit den Geometriewerten, insbesondere mit Segmentanzahl, -breite und -abstand, kann es leicht zur Übersteuerung kommen. Dies erzeugt zwar interessante Effekte, macht die Anzeige aber unlesbar. Ein Klick auf „Werte zurücksetzen“ setzt sinnvolle Werte für die gewählte Segmentanzahl.

Farben

Segment ein
Segment aus
Hintergrundfarbe

Die eingestellten Farben für die ein- und ausgeschalteten Segmente werden automatisch als hexadezimale Farbangabe in den Sourcecode weiter unten auf dieser Seite eingesetzt.

Hier noch als Vorschlag einige Farbkombinationen:

Anzeige

Beispiel

Muster
Wert

Das Layout der Anzeige wird über ein Muster bestimmt, das aus einer Kombination der folgenden Zeichen besteht:

# ' Segmentanzeige

Mit einer Siebensegmentanzeige können Ziffern, Bindestrich, Unterstrich und die Buchstaben A, b, C, d, E, F, H, L, n, o, P, r, t, U und Y angezeigt werden. So lassen sich außer Zahlen auch kurze Texte wie „Error“, „HELP“, „run“ oder „PLAY“ anzeigen.

Mit einer Vierzehn- und Sechzehnsegmentanzeige lassen sich Ziffern, alle lateinischen Großbuchstaben sowie die Sonderzeichen +, -, ×, /, =, \, $ und @ darstellen.

Die Sechzehnsegmentanzeige kann zusätzlich die Sonderzeichen % und ° anzeigen.

. ' Punkt
: ' Doppelpunkt
'   ' Leerzeichen bzw. doppelter Zeichenabstand

Zur Anzeige der Uhrzeit kann beispielsweise das Muster ##:##:## verwendet werden. Damit werden für Stunden, Minuten und Sekunden jeweils zwei Stellen reserviert und diese Blöcke durch einen Doppelpunkt voneinander getrennt.

Angesteuert wird die Anzeige dann durch die Übergabe einer Zeichenkette, hier Wert genannt. Dabei werden von links nach rechts die Zeichen des Wertes mit dem Muster verglichen. Paßt ein Zeichen für das Muster, beispielsweise das Zeichen 'A' für das Muster '#', dann wird dieses Zeichen angezeigt. Anderenfalls bleibt das entsprechende Element dunkel. Wird für ein Zeichen der Wert '#' übergeben, leuchten alle Segmente.

Beispiel: Für die Uhr wird wie oben schon beschrieben das achtstellige Muster ##:##:## verwendet. Sollen die Doppelpunkte leuchten, dann muß auch im Wert an der dritten und sechsten Stelle ein Doppelpunkt übergeben werden. Sollen sie dunkel bleiben, dann muß an diesen Stellen irgendein anderes Zeichen stehen. Bei einstelligen Stunden (0 bis 9 Uhr) wird im Gegensatz zu den Minuten und Sekunden keine führende Null angezeigt. Deshalb steht in diesem Fall ein Leerzeichen an der ersten Stelle des Wertes.

Das hört sich komplizierter an als es ist. Probiere es einfach aus.

JavaScript

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:

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.