Javascript ist Toll!

Javascript LED Scroller

Letztens gab es in den Kommentaren des älteren Artikels LED Laufschrift eine längere, anregende Diskussion mit einem Besucher Namens 'Jarbas'. Neben einigen Vorschlägen zur Verbesserung der technischen Umsetzung, äußerte er auch den Wunsch einen kompletten Zeichensatz in dem LED Panel darstellen zu können. Da ich keine gosse Lust hatte an dem Skript viel zu machen, verwies ich nur darauf wie das umgesetzt ist und dass ich eben keine Lust habe komplett alle Zeichen in eine Bitmap zu konvertieren. Auch wenn es mit dem LED Chareditor im Prinzip relativ einfach ginge.

Daraufhin erstellte der Besucher nahezu den kompletten Bitmap Zeichensatz, mit den gängigen Sonderzeichen und präsentierte ihn auf einer jsbin Seite. Da konnte ich nicht untätig bleiben. Merkte aber schnell, dass das die Änderungen einen etwas größeren Umbau des Skripts bedeuteten. Daher jetzt ein neuer Artikel zum überarbeiteten LED Scroller Skript, das es nun ermöglicht (fast) alle Zeichen darzustellen.

Die Änderungen im Detail sind eine neue Funktion, mit der ein Bitmapfont dem LED Scroller übergeben werden kann. Geänderte Sonderzeichen für die Effekte. Und das keine nachträgliche Änderungen der Farben (zur Zeit) mehr möglich ist. Ansonsten ist die Geschwindigkeit - zumindest die gefühlte - verbessert worden, auch wenn der IE immer noch bei grossen Panels arg ausgebremst wird. Darüber hinaus habe ich noch ein paar Events hinzugefügt, mit dem ein Ablauf etwas gesteuert werden kann.

Beispiel LED Scroller

Der Quelltext dieses einfachen Beispiel sieht so aus:

var led1;

onload = function() {

	led1 = new LED({height:10, width:70, pixel:4, padding:1});

        led1.setFont(ExtCharset);

	var p  = document.getElementById('led1');

	var el = led1.create(p, '#f00', '#000');

	led1.setText('Hallo!\2Jetzt mit neuen Wörtern.\1{3}');

};

Effekte

Der Lauftext wird durch die Methode setText() an den Scroller übergeben. Die Effekte werden in der Zeichenkette durch Sonderzeichen gesteuert. Dahinter kann eine Zahl in einer geschweiften Klammern {} angegeben sein, mit der die Anzahl der Durchläufe oder die Zeitdauer des Effekts gesteuert wird.

\1

blinken (Default: 3x/350ms)

\2

nach oben scrollen(Default: 1x)

\3

nach unten scrollen(Default: 1x)

\4

invers blinken (Flash)(Default: 3x/350ms)

\5

Pause(Default: 500ms)

\6

Der Text scrollt aus der Anzeige (löschen)

\7

stoppt die Laufschrift

Konfiguration

Jede LED Instanz kann individuell gesteuert werden. Folgende Einstellungen sind möglich (in Klammer die Defaultwerte).

.speed (100ms)

Geschwindigkeit der Laufschrift.

.blinkInterval (350ms)

Geschwindigkiet eines Blinkintervals beim Flash und Blinkeffekt.

.blinkAmount (1)

Anzahl der Wiederholungen der Blinkeffekte.

.scrollAmount (1)

Anzahl der Durchläufe beim scrollen.

.scrollSpeed (150ms)

Geschwindigkeit der Scrolleneffekte.

.pause_ms

Dauer einer Pause.

Events

Events können über Funktionsreferenzen der folgenden Eigenschaften gesteuert werden:

.onstart

Beim starten des Lauftexts.

.onscroll

Beim scrollen. Wird bei jeder Verschiebung aufgerufen.

.onready

Wenn der komplette Text durchgescrollt ist.

.onstop

Wenn das scrollen stoppt. Effekte werden nach einem Aufruf von .stop() zuende ausgeführt.

Methoden

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

setText(string)

Setzen des Lauftext.

setFont(object)

Übergabe eines Bitmap Objekts. Details zum Format gibt es in dem Artikel über den LED Chareditor.

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)

Ein Pixel an/ausschalten.

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

Download

Folgende Dateien werden benötigt, um einen LED Scrollen einzubinden:

Thank you

Und natürlich: Thank you to the visitor off my site, Jarbas!
You gave me the needed kick to rewrite this script and also some useful tips to make it better.

Ähnliche Artikel

• 12. Februar 2009 -- 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...

• 18. November 2011 -- LED Editor

  LED Scroller Chareditor Dieses Skript dient zum bearbeiten der Zeichen des LED Scrollers. Es erzeugt den Code, der für die Darstellung der Zeichen notwendig ist, um diese im LED Scroller benutzen zu...

• 29. April 2009 -- Online Molmassen Rechner

  Ein kleines Javascript, aus der Welt der Chemie. Der Molmassenrechner berechnet die Molmasse einer chemischen Verbindung. Dazu parst das Skript eine eingegebene Zeichenkette und versucht die Zusammensetzung...