Javascript ist Toll!

6. Februar 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:

javascript
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:

  • led.js
  • led-panel.js
  • led-chars-all.js
  • 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 (31)

      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 (1)

      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 (29)

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

    Comments (20)
    1154 mal gelesen.
    flattr

    20 Kommentare

    Hinterlasse einen Kommentar »

    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: 08: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 0×00. 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: 08: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: 06: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: 06: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.

    Hinterlasse einen Kommentar

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

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



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