LED Laufschrift mit Javascript
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 Anzeige mit Javascript gefragt. Da ich das eine Interessante Idee fand, machte mich auf die Suche ob es so was schon im Netz zu finden gibt. Ich fand aber nur Flash Skripte oder Javascripte die mich aber nicht überzeugten. Davon inspiriert habe ich dann selbst ein kleines LED Laufschrift oder LED Scroller Skript geschrieben.
Beispiele
Beispiel 1 - new LED(12, 80, 6, 1)
Beispiel 2 - new LED(1, 35, 3, 1)
Beispiel Quellcode
var led1, led2; |
window.onload = function() { |
/** |
* new LED(height, width, pixel, padding); |
* |
* Parameter: |
* Höhe der Anzeige |
* Breite der Anzeige |
* Größe der Pixel |
* Abstand zwischen den Pixeln |
* */ |
led1 = new LED(12, 80, 6, 1); |
/** |
* .create(HTMLElement) |
* |
* erzeugt die Anzeige und fügt sich in das Element ein. |
* Das erzeugte Panel hat die CSS Klasse 'LED' |
* |
* */ |
led1.create(document.getElementById('led1')); |
/** |
* .setText(string) |
* |
* Setzt die Zeichenkette, die gescrollt werden soll. Sonderzeichen stossen eine Aktion an. |
* Hinter dem Sonderzeichen, werden in geschweiften Klammern die Anzahl oder Dauer der Aktion angegeben. |
* Ist kein Wert angegeben, werden Konfigurationswerte benutzt. |
* |
* Folgende Aktionen sind eingebaut: |
* @{ms} - Pause in Millisekunden (.cfg.pause_ms) |
* #{anzahl} - Blinken der Schrift (.cfg.blinkAmount} |
* ^{anzahl} - Horizontales Scrollen der Schrift (.cfg.scrollAmount) |
* _{anzahl} - Der Hintergrund blinkt (.cfg.blinkAmount), |
* die Blinkfarbe kann mit LED.FlashBackground verändert werden. |
* * - Die Schrift rollt aus der Anzeige. (kein Parameter) |
* $ - Stoppt das Scrollen |
* */ |
led1.setText(" pause@ blink#{1} scroll^{1} flash_{2} 1234567890?!,"); |
led2 = new LED(1, 35, 3, 1); |
led2.create(document.getElementById('led2')) |
led2.setText("scroll^{1} flash_{2} "); |
} |
Funktionen
- setText(string)
- Setzen des Lauftext
- charAt(top, left, char)
- Ausgabe eines Zeichens an einer Position.
- print(string)
- Ausgabe einer Zeichenkette, dieser wird kein Bestandteil des Lauftext
- set(top, left on/off)
- Ändern des Status eines Pixesl
- start()
- Startet das scrollen
- stop()
- Stoppt das scrollen
- pause(millisekunden)
- Ein Pause
- up(anzahl)
- Die Schrift scrollt horizonta.
- blink(anzahl)
- Blinken der Schrift (.cfg.blinkAmount}
- flash(anzahl)
- Der Hintergrund blinkt. (.cfg.blinkAmount). Die Blinkfarbe kann mit LED.flashBackground verändert werden
- scrollOut()
- scrolled die Text aus der Anzeige
- clear(rgb, rgb)
- Löschen der Anzeige, optional kann dabei noch die Vordergrund- und Hintergrundfarbe wie im CSS übergeben werden
- copy(LED)
- Kopiert die Anzeige von LED in die aktuelle
- create(HTMLElement)
- Erzeugt die Anzeige und fügt sie in das Element ein
Folgende Werte können Konfiguriert werden:
LED.flashBackground = '#fff'; // Hintergrundfarbe beim blinken mit dem flash() Befehl |
LED.backgroundColor = '#fff'; // Hintergrundfarbe |
LED.color = '#000'; // Vordergrundfarbe |
// Jedes Objekt kann darüber hinaus noch individuell Konfiguriert werden |
led_instanz.cfg.speed = 100; // Scrollgeschwindigkeit |
led_instanz.cfg.blinkInterval = 350; // Interval beim blinken |
led_instanz.cfg.blinkAmount = 3; // Anzahl des blinkes |
led_instanz.cfg.scrollAmount = 1; // Anzahl beim horizontalen scrollen |
led_instanz.cfg.scrollSpeed = 150; // Geschwindigkeit beim horizontalen scrollen |
led_instanz.cfg.pause_ms = 500; // Dauer der Pause |
Download
Das Skript besteht aus insgesamt drei Dateien. Die Buchstabenkodierung ist im Objekt LED.charset. Dort sind die Buchstaben als Bitmap kodiert. Um andere Buchstaben darstellen zu können, kann dieses Objekt ausgetauscht oder die Datei erweitert werden. Nachtrag 18.11.2011: Hier ist ein Editor dafür
led.js
led-panel.js
led-chars.js
Ähnliche Artikel
9802 mal gelesen.
13 Comments
Einen Kommentar hinterlassen »
Kommentare
Freitag 23.Juli 2010: 14:14
Sehr geehrter Verfasser,
finde das Beispiel sehr gut. Könnten Sie mal eine einfache html-Seite mit nur einer Laufschrift als Beispiel erstellen und mir senden ?
Danke im Voraus
Donnerstag 19.August 2010: 19:14
Hallo, ich find die LED-Anzeige ganz witzig. Aber kriege es nicht zum Laufen. Ein Beispiel wäre nett. Danke.
Samstag 21.August 2010: 07:57
Auf der Seite sind doch zwei Beispiele. Es muss natürlich bekannt sein, wie Javascript Dateien im HTML Code eingebunden werden, aber ansonsten funktioniert das Skript so wie es hier auf der Seite beschrieben wird.
Mittwoch 15.September 2010: 00:11
Leider geht das script immer von onclick aus oder eine interaktion on mouseover usw. wie bekomme ich es hin das es gleich nach dem laden losgeht ?
Mittwoch 15.September 2010: 00:31
Steht im Code - led.start()
Mittwoch 15.September 2010: 01:06
Soweit war ich schon aber es funktioniert nicht :heul:
das geht aber
geht nicht.
led.start();am ende der body tag geht nicht.
Mittwoch 15.September 2010: 01:09
existiert denn ein LED Objekt mit der Bezeichnung led?
Mittwoch 15.September 2010: 01:10
also mouseover geht, aber led.start() am ende body tag als script eingebunden nicht. In der onload funktion eingebunden auch nicht.
Ich finde das script so toll nur der autostart bekomme ich nicht hin.
Mittwoch 15.September 2010: 01:17
Ich kann ohne den Code zu kennen, leider nichts dazu sagen. Auf der Beispielseite (s. update) habe ich das mal eingebaut und es funktioniert
Mittwoch 15.September 2010: 01:25
SUPER Danke, an der stelle hätte ich im leben kein led.start eingetragen.
Gute Nacht.
Nochmal dank.... jetzt darf ich endlich ins bett
Mittwoch 15.September 2010: 01:28
Ich auch
Mittwoch 3.August 2011: 16:26
Ich möchte Ä Ö Ü in die Schrift einfügen. Habs auch schon selbst probiert, hab aber nicht ganz das System kapiert.
Kann mir bitte jemand den eintrag in led-chars.js schreiben
Samstag 19.November 2011: 13:52
[...] Seite dient zum bearbeiten der Zeichen des LED Skripts. function _(id) { return document.getElementById(id); } var led1, led2; window.onload = [...]
Einen Kommentar hinterlassen