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
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:
ähnliche Artikel
- 12. Februar 2009 -- LED Laufschrift mit Javascript (0)
Es gibt eine neue Version.10.2.2013 Seit dem 18.11.2011...
- 18. November 2011 -- LED Editor (1)
LED Scroller Chareditor Dieses Skript dient zum...
- 29. April 2009 -- Online Molmassen Rechner (29)
Ein kleines Javascript aus der Welt der Chemie. Der...
8432 mal gelesen.
20 Kommentare
direkt zum Formular »
Seiten:
10. Februar 2013: 20:52
[…] Es gibt eine neue Version.10.2.2013 […]
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.
16. Mai 2013: 16:20
Keine schlechte Idee. Mal schauen, ob ich das die nächste Tage hinkrieg.
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
27. Mai 2013: 17:39
Das müßte auch so gehen: led1.cfg.speed = 140;
27. Mai 2013: 17:52
[…] ist Toll! Javascript LED Scroller »» 27. Mai 2013 – […]
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
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
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%.
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
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.
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
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
15. Juli 2013: 6:59
Dafür existiert die Methode .print()
15. Juli 2013: 11:45
…ah, ok. Vielen Dank!
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
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.
5. November 2013: 18:06
Hallo ,… wie kann ich denn nur die laufschrift in einer html einfügen bzw einbinden?
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‘.
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.