Javascript ist Toll!

LED Laufschrift mit Javascript

Es gibt eine neue Version.10.2.2013

Seit dem 18.11.2011 ist eine komplett neue Version dieses Skripts online. Einige Befehle haben sich daher geändert

Im selfhtml Forum hatte jemand nach einer LED Anzeige mit Javascript gefragt. Da ich das eine Interessante Idee fand, machte mich auf die Suche ob es so was schon im Netz zu finden gibt. Ich fand aber nur Flash Skripte oder Javascripte, die mich aber nicht überzeugten. Davon inspiriert habe ich dann selbst ein kleines LED Laufschrift oder LED Scroller Skript geschrieben.

Beispiele

Beispiel 1 - new LED(12, 80, 6, 1)

Beispiel 2 - new LED(1, 35, 3, 1)

Beispiel Quellcode

Funktionen

eine Instanz des Objekt LED stellt folgenden Methode zu Verfügung, mit der die LED Anzeige gesteuert werden kann.

setText(string)

Setzen des Lauftext

charAt(top, left, char)

Ausgabe eines Zeichens, an einer Position

print(string)

Ausgabe einer Zeichenkette. Diese wird kein Bestandteil des Lauftext!

set(top, left on/off)

Ändern des Status eines Pixel

start()

Startet den Lauftext

stop()

Stoppt den Lauftext

pause(millisekunden)

Wenn der Lauftext aktiv ist, wird eine Pause von x Millisekunden einglegt

up(anzahl)

Die Schrift scrollt nach oben

blink(anzahl)

Die angezeigten Zeichen blinken. Default: [LED].cfg.blinkAmount

flash(anzahl)

Der Hintergrund blinkt. Die Blinkfarbe kann mit LED.flashBackground verändert werden. Default: [LED].cfg.blinkAmount

scrollOut()

Die angezeigten Zeichen, werden aus der Anzeige heraus gescrollt.

clear()

Löschen des LED Panels.

copy(LED)

Kopiert die Anzeige von LED in die aktuelle Instanz.

create(HTMLElement [, color, backcolor])

Erzeugt die Anzeige und fügt sie in das HTML Element ein. Optional kann dort die Farbe angegeben werden

Konfiguration

Folgende Werte können konfiguriert werden:

// globale Konfiguration
LED.FlashBackground = '#fff'; // Hintergrundfarbe beim blinken mit dem flash() Befehl
LED.backgroundColor = '#fff'; // Default Hintergrundfarbe
LED.color = '#000'; // Default Vordergrundfarbe
 
// Jedes Objekt kann darüber hinaus noch individuell konfiguriert werden
led_instanz.cfg.speed = 100;   // Scrollgeschwindigkeit
led_instanz.cfg.blinkInterval = 350; // Interval beim blinken
led_instanz.cfg.blinkAmount = 3; // Anzahl des blinkes
led_instanz.cfg.scrollAmount = 1; // Anzahl beim horizontalen scrollen 
led_instanz.cfg.scrollSpeed = 150; // Geschwindigkeit beim horizontalen scrollen 
led_instanz.cfg.pause_ms = 500; // Dauer der Pause

Download

Das Skript besteht aus insgesamt drei Dateien. Die Buchstabenkodierung ist im Objekt LED.charset. Dort sind die Buchstaben als Bitmap kodiert. Um andere Buchstaben darstellen zu können, kann dieses Objekt ausgetauscht oder die Datei erweitert werden.

Nachtrag 18.11.2011: Hier ist ein Editor dafür

Die Datei led-panel.js enthält ein Objekt, das für die Steuerung der Anzeige zuständig ist. Dort werden die Elemente erzeugt und die entsprechenden Änderungen an ihnen vorgenommen.

led.js ist die Hauptdatei, in der die Ausgabe von Text und das Scrollen gesteuert wird. Alle drei Dateien müssen eingebunden werden.

led.js
led-panel.js
led-chars.js