LED5 JavaScript Library
LED5 ist eine kleine Bibliothek zur Darstellung von LED-Anzeigen mit 7-Segment-Elementen.
Die Bibliothek ist in JavaScript geschrieben und nutzt den HTML5-Canvas, der von allen modernen Browsern unterstützt wird.
Lizenz
LED5 steht unter der Atomek-Freeware-Lizenz: Du darfst die Bibliothek zum Zwecke ihrer Funktionalität unentgeltlich
nutzen für private und kommerzielle Zwecke. Bei der Weitergabe des Quellcodes, die nur unentgeltlich zulässig ist,
ist ein Hinweis dieser Art auf den Ursprung der Bibliothek weiterzugeben:
LED5 © 2012 <Atomek> J. Schirrmacher
Download V1.3
Die minifizierte Version ist um unnötigen Whitespace und Kommentare erleichtert und lädt schneller.
Wenn du Änderungen und Einsicht beabsichtigen, lade die vollständige Version.
Neu in Version 1.3 - Eigenschaft fall (Neigung).
Einbinden der Bibliothek
Speichere die Datei LED5.js in deinem Verzeichnis und lopiere die folgende Zeile in den <head>-Abschnitt deiner Html-Seite...
<script src="LED5.js"></script>
Beispiel 1 - Minimal
Für dieses Beispiel füge ein <canvas>-Element an die gewünschte Stelle deiner .html-Datei ein:
<canvas id="MyLedId" width="125" height="60">Ihr Browser unterstützt keinen Canvas</canvas>
Nun fehlt noch der Code zum Zeichnen der Anzeige. Er kann z.B. im window.onload-Ereignis implementiert werden.
Dazu füge im <script>-Abschnitt des <head>-Abschnittes diesen Code ein:
window.onload = function() {
var myled = new Led("MyLedId");
myled.drawString("-47.11");
};
Im Konstruktor des LED-Objektes myled wird die Id des Canvas übergeben, in dem das Objekt dargestellt werden soll. Mit drawString können die Ziffern 0..9, das Vorzeichen "-" und das Exponentialzeichen "E" direkt angezeigt werden:
Das Komma und der Dezimalpunkt werden als Punkt ausgegeben. SPACE zeigt ein leeres Segment, ":" zeigt den Doppelpunkt zwischen zwei Segmenten an. Der Tiefstrich zeigt den abgedunkelten Doppelpunkt an.
API
Zur Darstellung wird ein Led-Objekt erzeugt, dem ein Canvas im Konstruktor übergeben wird. Um das Erscheinungsbild zu steuern werden Eigenschaften verwendet oder Methoden aufgerufen.
Mit der drawString()-Methode kann dann ein Text gezeichnet werden.
Methoden
| Methode | Aktion |
|---|---|
| Led(canvasid) | Konstruktor: canvasid gibt die id des canvas-Elementes an in dem gezeichnet werden soll. Wenn die Id weggelassen wird, muss der 2d-Context beim Zeichen angegeben werden oder durch das Zuweisen der Eigenschaft context. |
| drawString(text) | Zeichnet das LED-Objekt zentriert im Canvas. Der gesamte Canvas wird bei transparent=true mit der backcolor-Farbe dargestellt. |
| drawString(x, y, text) | Zeichnet das LED-Objekt an den Koordinaten x, y. text Enthält die Zeichen "-0123456789,.:_E" und SPACE. _ ist der abgedunkelte Doppelpunkt, , und . werden als Punkt dargestellt. |
| drawString(context, x, y, text) | Zeichnet das LED-Objekt in den angegebenen Context an die Position x, y. |
| getMetrics(text) | gibt die Abmessungen der Darstellung mit den Eigenschaften width und height zurück. |
| setTheme(theme) | legt eine von 8 vordefinierten Darstellungen fest, indem entsprechende Farben gewählt werden. theme ist entweder der Index (0..7) des Themas oder der Name. Die möglichen Namen sind weiter unten aufgeführt. |
Eigenschaften
| Eigenschaft | Bedeutung | Wertebereich | Default |
|---|---|---|---|
| size | legt die Höhe der Led fest | >0 | 40 |
| ratio | legt das Verhältnis Breite/Höhe fest | 0.2 .. 0.9 | 0.45 |
| segWidth | legt mit dem Verhältnis Segmentbreite/Höhe die Dicke der Segmente fest | <0.2 | 0.13 |
| fall | Neigung der Segmente 0..0.1..0.4 | >=0 | 0.1 |
| padding | legt einen Rand um die Anzeige fest | >=0 | 5 |
| showDark | legt fest, ob die dunklen Segmente angezeigt werden | true, false | true |
| transparent | legt fest, ob der Hintergrund dargestellt wird | true, false | false |
| forecolor | Farbe der leuchtenden Segmente | Farbwert, z.B. "#78EFEF" | #EF0000 |
| backcolor | Farbe des Hintergrundes. Wird ignoriert, wenn transparent=true | Farbwert, z.B. "#081010" | #100000 |
| darkcolor | Farbe der nichtleuchtenden Segmente. Wird ignoriert, wenn showDark=false | Farbwert, z.B. "#204040" | #400000 |
Erlaubte Parameter für setTheme(theme)
Es kann für theme entweder der Index oder die Zeichenkette angegeben werden:
0 "red" |
1 "green" |
2 "blue" |
3 "yellow" |
4 "orange" |
5 "white" |
6 "LCD" |
7 "negblue" |
Konfigurator
Gestalte deine LED-Anzeige mit den Parametern, klicke Anzeigen und sieh dir das Ergebnis an. Du siehst dann den für die Anzeige nötigen Code und kannst ihn über die Zwischenablage in dein Projekt einbauen.
Beachte, dass die Eigenschaft transparent hier nicht verfügbar ist, weil bei wiederholter Darstellung der Hintergrund von Ihrer Anwendung jeweils ebenfalls neu dargestellt werden muss.
Die Eigenschaft padding, die scheinbar hier keinen Effekt hat, wird sinnvoll, wenn du die Methode drawString(x, y, text) verwendest. Ohne Angabe von x und y wird der Text immer im Canvas zentriert und der gesamte Canvas wird mit der Hintergrundfarbe gefüllt.
Alternativ zur Verwendung der Themen kannst du die Eigenschaften forecolor, backcolor und darkcolor auch einzeln setzen.
Beispiel 2 - LCD-Digitaluhr
Diese Digitaluhr verwendet das Led-Objekt und einen Timer um es jede Sekunde mit der PC-Uhr abzudaten.