Hinweise zur Benutzung des JavaScript LED-Displays

1.) Einige Bemerkungen vorweg

Dieses JavaScript-Beispiel wurde speziell für das Java-Forum im deutschen AOL-Bereich erstellt. Sie dürfen und sollen, es in Ihre Homepage einbauen. Ich bitte Sie jedoch darum, daß Sie den Kommentar mit dem Authorenvermerk nicht aus dem Sourcefile entfernen. Sollten Sie ihn doch einmal versehentlich löschen, so können Sie ihn hier jederzeit nachlesen und wieder einfügen:


 <!-- This JavaScript example was written by Tilo Dickopp
      Feel free to use it in your own hompepage or internet project.
      You may alter this or any of the other files which belong to it
      in any way you like, and you may also add your own remark under-
      neath, but PLEASE DON'T REMOVE THESE LINES. 

      In case you use this Script, I would be happy if you sent me an 
      e-mail and told me where I can have a look at your version. Also 
      get in touch if you have any other remarks or suggestions: 
      TDickopp@AOL.com  >> http://memebers.aol.com/TDickopp/  -->

Ist dieses JavaScript sinnvoll? Eigentlich schneidet es einen Bereich an, für den sich Java besser eignet, aber auf jeden Fall sieht es gut aus. Wahrscheinlich sieht es sogar noch besser aus, wenn Sie die Grafiken ändern und im Design Ihrer Umgebung anpassen. Das ist ausdrücklich erwünscht. Auch der Sourcecode läßt sich Ihren Bedürfnissen anpassen. Wenn Sie Veränderungen vornehmen, dürfen Sie gerne Ihren eigenen Vermerk unter meinen in in den Sourcecode setzen. Ich würde mich freuen, wenn Sie mir in einer eMail mitteilten, wo Sie den JavaScript verwenden, damit ich es mir ansehen und evtl. von meiner Homepage einen Link darauf setzen kann.

Die Idee zu diesem Script kam mir beim Lesen der Juni'97-Ausgabe der Internet Professionell. Der "geistige Vater" läßt sich bei http://www.geocities.com/SilliconValley/9000/ex27-7.htm bewundern. Indem ich aber einen kleinen Trick benutze, ist mein LED-Display um den Faktor fünf schneller als diese Scripts und bietet somit ganz andere Möglichkeiten. Bei mir enthält nämlich eine GIF-Grafik fünf LEDs anstelle von einer ;-).

2.1.) Wie binde ich das LED-Display in eine HTML-Seite ein?

Zunächst laden Sie alle GIF-Grafiken in das Verzeichnis in dem auch Ihr HTML-Dokument liegt, das später das LED-Display enthalten soll. Dann passen Sie eben dieses HTML-Dokument an. Es gibt theoretisch zwei Möglichkeiten:

Den Script-Scourcecode direkt in das HTML-Dokument integrieren

Zu dieser Vorgehensweise rate ich Ihnen. Sie fügen den gesamten Inhalt der Datei "display.htm" in Ihr HTML-Dokument ein; und zwar zwischen dem <HEAD>-Tag und dem </HEAD>-Tag.

Den Sourcecode als separate Datei ablegen

Das ist eigentlich die elegantere Möglichkeit. Bei meinen Testläufen hat sie aber unter Windows zu Problemen geführt... Unter Linux lief alles einwandfrei. Es handelt sich also nicht zwangsläufig um einen Fehler von mir.

Wenn Sie nun den Sourcecode in einer eigenen Datei ablegen wollen, dann gehen Sie wie folgt vor:

Laden Sie die Datei "display.htm" in Ihren Editor.

Entfernen Sie am Anfang und am Ende die HTML-Tags und ändern Sie den Vermerk in einen Kommentar. Die Datei sollte dann so aussehen:

 
  // This JavaScript example was written by Tilo Dickopp
  // Feel free to use it in your own hompepage or internet project.
  // You may alter this or any of the other files which belong to it
  // in any way you like, and you may also add your own remark under-
  //  neath, but PLEASE DON'T REMOVE THESE LINES. 
  //
  // In case you use this Script, I would be happy if you sent me an 
  // e-mail and told me where I can have a look at your version. Also 
  // get in touch if you have any other remarks or suggestions: 
  // TDickopp@AOL.com  >> http://memebers.aol.com/TDickopp/ 

  // ---------------- //
  // globale Variable //
  // ---------------- //
  var TimerID;             // für "setTimeout()"

  der ganze Quelltext

    Display[x] = 0;
  }
}

Speichern Sie diese Datei als "display.js" ab.

Fügen Sie in Ihr HTML-Dokument zwischen das <HEAD>-Tag und das </HEAD>-Tag den <SCRIPT>-Tag wie folgt ein:


  <HEAD>
    <TITLE>Coole Seite</TITLE>
    <SCRIPT LANGUAGE="JavaScript" SRC="display.js"></SCRIPT>
  </HEAD>

2.2.) Wie bringe ich das LED-Display zum laufen, nachdem ich es eingebunden habe?

Das LED-Display wird über drei Funktionen gesteuert, von denen Sie mindestens zwei aufrufen müssen, um eine Animation auf Ihrer Seite zu sehen:

Die Funktion LaufschriftEinfuegen() fügt, wie der Name schon sagt die Grafik des leeren LED-Displays in Ihre Seite ein. Die Funktion erwartet als Paramter die Breite des LED-Displays in LED-Spalten. Sie sollten keine zu große Breite wählen, weil die Animation dann unter Umständen nicht mehr flüssig läuft. Andererseits sieht ein allzu schmales LED-Display aber auch nicht gut aus. Es hat sich herausgestellt, daß eine Breite von 30 bis 40 Spalten auf den meisten Systemen noch ganz gut läuft. Benutzen Sie folgende Zeilen, um ein LED-Display von 35-LED-Spalten in Ihre Seite zu setzen:
<SCRIPT LANGUAGE="JavaScript"> LaufschriftEinfuegen(35); </SCRIPT>
Sie können diese Zeilen quasi wie das <IMG>-Tag benutzen. Positionierungs-Tags wie z.B. das <CENTER>-Tag zeigen also durchaus Wirkung. Bedenken Sie aber, daß sich JavaScript aufgrund eines Fehlers nicht aus Tabellen heraus aufrufen läßt. Sie können sich jedoch eines kleinen Tricks bedienen, wenn Sie dennoch nicht auf Tabellen verzichten wollen. Schreiben Sie die Tabelle einfach mit JavaScript, indem Sie die nötigen Tags mit document.write() ausgeben.

Die nächste Funktion die Sie aufrufen sollten, ist Start(). Hiermit bringen Sie die Animation zum laufen. Die Funktion erwartet zwei Parameter: den auszugebenden Text und die Verzögerung zwischen zwei Animationsphaden in Millisekunden. Über den Text-Paramter können Sie viele Effekte erzeugen. Hiermit befaßt sich der nächste Abschnitt. Die Verzögerung sollte etwa zwischen 50 und 500 Millisekunden liegen. 500 Millisekunden entspricht einer halben Sekunde.
Es gibt verschiedene Möglichkeiten um Start() aufzurufen. Sie können Ihre Animation. z.B. starten, sobald Sie das LED-Display mit LaufschriftEinfuegen() dargestellt haben. So werden die Gäste Ihrer Seite schon unterhalten, während der Rest noch lädt. Benutzen Sie hierfür etwas wie z.B.
<SCRIPT LANGUAGE="JavaScript"> Start("Willkommen und Hallo!", 100); </SCRIPT>
Genauso ist es möglich, die Animation zu starten, sobald Ihr Gast auf einen Button klickt:
<FORM> <INPUT VALUE="Los!" ONCLICK="Start('Willkommen und Hallo!', 100)"> </FORM>
Oder Sie legen die Start()-Funktion gar auf einen Link, den Sie z.B. wiederum auf eine Grafik legen können:
<A HREF="javascript:Start('Willkommen und Hallo!', 100)"><IMG SRC="mygif.gif"></A>

Die letzte der drei Funktionen, mit denen Sie das LED-Display steuern, ist Stop() Sie stoppt die Animation. Sie wird genauso wie Start() aufgerufen, erwartet aber keine Parameter.

3.1.) Welche Gestaltungsmöglichkeiten bietet mir das LED-Display?

Mit dem ersten Parameter der Funktion Start() legen Sie fest, welcher Text auf Ihrem LED-Display erscheinen soll. Standardmäßig darf der Text aus allen Großbuchstaben und Ziffern, sowie aus Ausrufezeiche, Fragezeichen und Punkten bestehen. Um aber Ihrem Text richtig Pepp zu verleihen, können Sie zusätzlich zu normalem Text auch noch Steuerbefehle einfügen, die regeln auf welche Art Ihr Text erscheint. Ein Steuerbefehl besteht immer aus dem Paragraphenzeichen (§) und einem Buchstaben, der groß oder klein geschrieben sein darf. Jeder Steuerbefehl bezieht sich auf den Text, der rechts neben ihm steht und verliert seine Gültigkeit mit dem nächsten Steuerbefehl. Die Zeichenfolge

"§rHIHO!§p§zHEINZ!"
enthält drei Steuerbefehle. Der Befehl §r zeigt den Text HIHO! an; der Befehl §p zeigt gar keinen Text an; und der Befehl §z zeigt den Text HEINZ!.
Wenn Steuerbefehle, die benutzt werden um Text anzuzeigen, keinen Text rechts neben sich stehen haben, dann lassen sie den gerade angezeigten Text auf die durch sie gesteuerte Art und Weise verschwinden.

95% aller auftretenden Fehler sind wahrscheinlich darauf zurückzuführen, daß sie Zeichen benutzen, die nicht unterstützt werden wie z.B. Kleinbuchstaben, oder daß Sie Steuerbefehle falsch einsetzen. Immer erst ein paar mal Testen bevor Sie Ihre Seite veröffentlichen! Leider kann ich keine Haftung für Schaden übernehemen, der durch meinen Script entsteht...

3.2.) Übersicht aller Steuerbefehle

Befehl	Erläuterung
`§L`	"L" steht für links. Der Text wird von rechts nach links durch das LED-Display gescrollt.
`§R`	"Rechts". Der Text wird von links nach rechts aufgeklappt.
`§O`	"Oben". Der Text wird von unten in das LED-Display hereingefahren.
`§U`	"Unten". Der Text wird von oben in das LED-Display hereingefahren.
`§Z`	"Zufall". Der Text wird LED für LED - scheinbar zufällig angezeigt.
`§I`	"Invers". Das gesamte LED-Display wird invertiert. Dieser Zustand hält bis zum nächsten `§I`-Befehl an.
`§S`	"Sofort". Der Text erscheint ohne Verzögerung im LED-Display
`§P`	"Pause". Zeigt keinen Text an, sondern legt eine Pause ein. Die Pause wird aber umso länger, desto mehr Zeichen der Text rechts von `§P` lang ist.
`§W`	"Wiederholen". Sollte der letzte Steuerbefehl in der Zeichenfolge sein. Beginnt wieder am Anfang der Animation. `§W` wiederholt immer und immer wider, wenn rechts von ihm keine Zeichen stehen. Sonst widerholt er für jedes Zeichen genau einmal.

4.) Das LED-Display den eigenen Bedürfnissen anpassen

Hier sind Ihrer Phantasie und Experimentierfreude keine Grenzen gesetzt. Zunächst sollten Sie die LED-Grafiken Ihrem Geschmack anpassen. Es gibt insgesamt 32 Grafiken, die Namen nach dem Schema "ledXXXXX.gif" haben. Die Xe stehen dabei von links nach rechts gelesen für die LEDs von oben nach unten betrachtet. Eine "1" heißt die entsprechende LED ist an, eine "0", daß sie aus ist. Ein einfache Möglichkeit die Grafiken zu verändern ist, einfach die Farbwerte anzupassen.
Der Font läßt sich ebenso umdefinieren. Schauen Sie sich den Sourcecode mal genauer an!

Der Sourcecode in seiner gesamten Größe ist sehr schwerfällig. Sie können Programteile, die sie nicht brauchen einfach entfernen und so die Animation schneller machen.
Auch ist der Code noch nicht vollkommen optimiert. Er soll schließch noch Raum für Experimente lassen... Es wäre z.B. möglich in einem Array zu speichern, welche LED-Spalten verändert wurden, und dann nur diese neu darzustellen.

Ich wünsche Ihnen nun viel Spaß mit dem LED-Display.
Bei Fragen können Sie sich jederzeit an mich wenden: TDickopp@AOL.com, oder Sie suchen mal auf meiner Homepage nach guten JavScript-Tips: http://members.aol.com/TDickopp/. Wenn Sie AOL-Mitglied sind, können Sie Fragen auch im JavaScript-Pinboard des Java-Forums stellen; Kennwort: Java

Tilo Dickopp - 27. Mai 1997