Javascript LED Display Textscroller [Javascript ist Toll!]

Firefox Screenshots »» «« LED Chareditor (2)

6. Februar 2013 - 14:08

Javascript LED Display Textscroller

Letztens gab es in den Kommentaren des älteren Artikels LED Laufschrift eine längere, anregende Diskussion mit dem Besucher '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, das die Änderungen einen etwas größeren Umbau des Skripts bedeuteten. Daher jetzt ein neuer Artikel zum überarbeiteten LED Display 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 Display Scroller

start stopp

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 spezielle Sequenzen gesteuert. Durch \zahl wird der Effekt eingeleitet und danach kann eine Zahl in einer geschweiften Klammern {} folgen, mit der die Anzahl der Durchläufe oder die Zeitdauer des Effekts gesteuert wird. Die Codes für Zahl sind:

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 Instanzeigenschaften können geändert werden (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 von den 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() zu Ende ausgeführt.

Methoden

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

setText(string): Setzen des Lauftext vor dem Start. Der Aufruf hat keinen Effekt auf die aktuelle Anzeige, es wird nur der Text beeinflusst, der gescrollt werden soll
setFont(object): Übergabe eines Bitmap Objekts. Details zum Format gibt es in dem Artikel zum 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:

20 Kommentare

direkt zum Formular »

Seiten:

1. Pingback von: LED Laufschrift mit Javascript [Javascript ist Toll!]
10. Februar 2013: 20:52

[…] Es gibt eine neue Version.10.2.2013 […]

2. Kommentar von: gast
16. Mai 2013: 12:15

Tolle Sache, der überarbeitete LED-Scroller!
Schön, dass es jetzt auch die Kleinschrift gibt.
Jetzt würde ich mich noch freuen, wenn die neuen hinzugekommenen Zeichen auch mit dem LED Chareditor bearbeitet werden könnten.

3. Kommentar von: struppi
16. Mai 2013: 16:20

Keine schlechte Idee. Mal schauen, ob ich das die nächste Tage hinkrieg.

4. Kommentar von: gast
23. Mai 2013: 11:18

Hallo Struppi,

danke zu Deiner Antwort!

Ich bekomme übrigens die individuelle Speed-Einstellung nicht hin.
Nun habe ich in der led2.js folgenden Zusatz eingefügt:

//horizontale Scrollgeschwindigkeit individuell einstellen:
this.setSpeed = function(sp) {
this.cfg.speed = sp;
}

Damit kann ich nun in der HTML-Datei im Script in ‚onload = function()‘ mit

//Scrollgeschwindigkeit:
led1.setSpeed(140);

die Geschwindigkeit individuell einstellen.

Viele Grüße
Peter

5. Kommentar von: struppi
27. Mai 2013: 17:39

Das müßte auch so gehen: led1.cfg.speed = 140;

6. Pingback von: LED Chareditor (2) [Javascript ist Toll!]
27. Mai 2013: 17:52

[…] ist Toll! Javascript LED Scroller »» 27. Mai 2013 – […]

7. Kommentar von: gast
28. Mai 2013: 8:32

Hallo Struppi!

Ja, Du hast recht!
mit led1.cfg.speed = 140; klappt es auch! – Danke :-)

…und ein weiteres großes Dankeschön für den neuen LED Chareditor!

Viele Grüße
Peter

8. Kommentar von: Gast
2. Juni 2013: 12:20

Hallo Struppi!

Leider zieht sich auf meinem Rechner mit XP der Firefox (neueste Version) mit dem Scroller 98 bis 99% CPU-Leistung rein; und der IE8 zeigt gar nichts an. Dafür folgende Fehlermeldung:

Details zum Fehler auf der Webseite

Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; (R1 1.5); .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET4.0C)
Zeitstempel: Sun, 2 Jun 2013 11:19:03 UTC

Meldung: Bezeichner, Zeichenfolge oder Zahl erwartet
Zeile: 375
Zeichen: 3
Code: 0
URI: /js/led-chars-all.js

Meldung: ‚ExtCharset‘ ist undefiniert
Zeile: 34
Zeichen: 2
Code: 0
URI: /index_normal.htm

Wie gehe ich denn damit um?

Viele Grüße
Peter

9. Kommentar von: struppi
2. Juni 2013: 17:39

Vielen Dank, für die Hinweise.

Im IE sollte es jetzt laufen.

Das andere Problem kann ich nicht reproduzieren. Bei mir geht unter XP die Last nicht über 6%, der alte Scroller ist auch nur knapp über 10%.

10. Kommentar von: Gast
2. Juni 2013: 22:14

Hallo Struppi,

wow, das nenne ich schnellen Support! Danke! :-)
Jetzt läuft der Scroller auch im IE8, allerdings sehr langsam bei gleicher Einstellung wie im Firefox.
CPU-Last im IE liegt bei mir zw. 59 und 71%, im Firefox sind es wie vorher 98%.
Auf anderen Rechnern bei zwei Freunden führte das dazu, dass die gesamte Seite nicht mehr lief und eingefroren war.
Ich habe es schon mit einer anderen Schriftart probiert (mit nur einer Punktstärke), das bringt aber auch keinen Vorteil.
Keine Ahnung, warum das bei meinem Rechner so schwer läuft.

Was mir noch aufgefallen ist: in der led-chars-all.js gibt es das Zeichen ‚)‘ 4 mal in den Zeilen: ALT+032, ALT+041, ALT+127 und ALT+255. Das erste und letzte Zeichen hat für alle Spalten die Codierung 0x00. Das führt dazu, dass das Zeichen ‚)‘ im Scroller nicht dargestellt wird. Ich habe darum die nicht benötigten Zeilen erst mal auskommentiert.

Viele Grüße
Peter

11. Kommentar von: struppi
3. Juni 2013: 8:20

Die Kodierungen hatte der Leser Jarbas gemacht. Aber so ganz korrekt sind die nicht. Nicht nur die doppelten sind falsch, auch viele Kodierungen sind falsch angegeben. Muss ich mir mal genauer anschauen.

Das das Skript relativ viel Last braucht, hatte ich bei der alten Version schon geschrieben. Einem Einkernsystem geht dabei schnell die Puste aus, je nach größe des Panels. Mit 2 Kernen ist mn aber schon deutlich unter 50% (mit einem 40×80 Pixel grossen Panel). Mehr optimieren läßt sich das kaum.

12. Kommentar von: Gast
4. Juni 2013: 13:49

Hallo Struppi,

jetzt ist die Ursache für die hohe CPU-Last klar!
Ich hatte das Panel immer auf 100% der Fensterbreite gesetzt!
Darum lief es – je nach Rechner – mal schneller und mal gar nicht mehr.
Wenn ich das Panel kleiner mache, braucht es auch nicht so viel Last! ;-)

Viele Grüße
Peter

13. Kommentar von: Till
15. Juli 2013: 6:45

Hallo,
ich habe nach einer Möglichkeit gesucht einfach einen Text in dem LED Panel ohne jegliche Effekte und scrolling auszugeben?

Habe bisher das (LEDL ist natürlich eine LED Instanz):

LEDL.wC = function(s) {
var str = s.split(„“);
for( var i = 0; i < str.length; i++)
{
this.charAt(1, i * 8 + 1 , str[i]);
}
};

Viele Grüße

14. Kommentar von: struppi
15. Juli 2013: 6:59

Dafür existiert die Methode .print()

15. Kommentar von: Till
15. Juli 2013: 11:45

…ah, ok. Vielen Dank!

16. Kommentar von: Till
15. Juli 2013: 11:50

Hallo,
„Dafür existiert die Methode .print()“
Wenn ich print verwende fängt der Text aber wieder an zu scrollen, das wollte ich ja nicht.
Viele Grüße

17. Kommentar von: struppi
15. Juli 2013: 15:37

Nein, der Text fängt nur an zu scrollen, wenn du die Funktion .start() aufrufst. Die Methode print() gibt nur Text aus.

18. Kommentar von: Soni
5. November 2013: 18:06

Hallo ,… wie kann ich denn nur die laufschrift in einer html einfügen bzw einbinden?

19.

Kommentar von: struppi
5. November 2013: 18:26

In dem du die drei Javascript Dateien runterlädst, den oben gezeigten JS Code in dein HTML einbaust und natürlich die drei JS einbinden, dann brauchst du nur noch ein Element – oben in dem Beispiel mit der id ‚led1‘.

20. Kommentar von: Soni
8. November 2013: 16:30

Hört sich jetzt irgendwie kommisch an. Aber kannst du mir mal hier ein Html code vorgeben?
Weil es möchte mich nicht .. -.- oder ich hab ein denk fehler.

Schreibe einen Kommentar Antworten abbrechen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Stop Spam Harvesters, Join Project Honey Pot

Javascript ist Toll!