Javascript ist Toll!

6. February 2013 - 14:08

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

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 eine spezielle Sequenz gesteuert. Mit \zahl wird der Effekt eingeleitet und dahinter kann eine Zahl in einer geschweiften Klammern {} angegeben werden, 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 Eigenschaften 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 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

Comments (20)
1288 mal gelesen.

20 Kommentare

Leave a comment »

Seiten:

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

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

2. Comment von: gast
16. May 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. Comment von: struppi
16. May 2013: 16:20

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

4. Comment von: gast
23. May 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. Comment von: struppi
27. May 2013: 17:39

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

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

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

7. Comment von: gast
28. May 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. Comment von: Gast
2. June 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. Comment von: struppi
2. June 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. Comment von: Gast
2. June 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. Comment von: struppi
3. June 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. Comment von: Gast
4. June 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. Comment von: Till
15. July 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. Comment von: struppi
15. July 2013: 6:59

Dafür existiert die Methode .print()

15. Comment von: Till
15. July 2013: 11:45

…ah, ok. Vielen Dank!

16. Comment von: Till
15. July 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. Comment von: struppi
15. July 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. Comment von: Soni
5. November 2013: 18:06

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

    19. Comment 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. Comment 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.

Leave a comment

Name (required)
Mail (wird nicht angezeigt) (required)
Website

Folgende HTML Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot kostenloser Counter Browser-Statistiken
rats-wonderful
rats-wonderful
rats-wonderful
rats-wonderful