TickerTape ist ein Java-Applet, das eine elektronische Laufschrift mit LED-Matrix simuliert. Es dient zur Animation von HTML-Seiten. (Download hier)

History und Danksagung

Die Laufschrift-Anwendung ist wohl so etwas wie das “Hello World!”-Programm unter den Java-Applets. Im Internet sind viele Applets frei verfügbar, teilweise mit Sourcecode. Viele dieser freeware-Applets basieren auf dem Ur-Applets “TickerTape” aus dem Jahre 1996 von  John Criswick.

Seine Programmsource bildeten auch den Ausgangspunkt für meine eigene Arbeit. Ich zitiere als hommage den Kommentar aus seinem “TickerTape.java”:

/*   A Ticker Tape based on Light Emitting Diode (LED) - objects  *   like the kind of advertising ticker tape you see in some retail  *   stores these days.  *     Currently only accepts text input from an HTML <param string. To  *   specify the text to display you will need a line like:  *       <param name=text value="The Quick Brown Fox...">  *   inside your applet tag.  *     Speed can also be set but seems to work best with the default  *   setting of 100 milliSeconds update rate. Param tag should look like:  *       <param name=speed value=100>  * To do:  *     - other features of real life LED ticker tapes like  *     blinking non-scrolling text, ability to use different  *     colour LEDs in the same text etc. etc.  * Coder: John Criswick, Ottawa, {criswick@conveyor.com"}  *  * Version 1.0b2a Jan.28.96  */

Features:

Mein “TickerTape” versucht möglichst kompatibel zu John Criswicks Applet und dessen Nachfolgern zu bleiben, bietet aber folgende Erweiterungen:

• Es können beliebig lange Texte dargestellt werden. Criswicks TickerTape und alle Abwandlungen können nur Text anzeigen, der 4096 Pixel lang ist (wegen Einschränkungen der Java-Klasse “Image”).
• Textende und Textanfang können beim der zyklischen Anzeige direkt aufeinander folgen (“short cycle”). Ist der anzuzeigende Text kürzer als das Display, erscheint der Text sogar gleichzeitig mehrfach auf dem Display.
• Der Text kann mehrfarbig oder blinkend sein, die Zeichenattribute werden durch die gängigen HTML-Tags gesetzt.
• Verschiedene Zeichensätze können in einer XML-Datei definiert werden, und der Text kann alle definierten Fonts verwenden.
• Im Text können verschiedene URLs definiert werden. Durch Klick in den laufenden Text wird die URL aufgerufen.
• Die Scrollposition kann an die Systemuhrzeit gekoppelt werden, dann wird bei einem Refresh der HTML-Seite das Schriftband nicht zurückgesetzt. 

Das Ganze kann dann so aussehen:

Installation

Als einzige Datei ist “tickertape.jar” nötig. Der Web-Browser muss das Java-Plugin aus dem SDK 1.3 oder höher installiert haben. Die Einbettung in die Webseite kann mit dem <APPLET>-Tag erfolgen. Das Beispiel oben wird durch folgenden Code in der HTML-Seite aufgerufen:

<APPLET ID="DemoTickerTape" NAME="HomeTickerTape"   CODE=" TickerTapeApplet.class" CODEBASE="../../../"   ARCHIVE=" tickertape.jar" HEIGHT=48 WIDTH=594 ALT="">   <PARAM NAME="speed" VALUE="25">   <PARAM NAME="scrollfactor" VALUE="1">   <PARAM NAME="ledcolor" VALUE="red">   <PARAM NAME="backcolor" VALUE="black">   <PARAM NAME="framecolor" VALUE="lightgray">   <PARAM NAME="ledoffcolor" VALUE="darkgray">   <PARAM NAME="framethick" VALUE="4">   <PARAM NAME="ledsize" VALUE="2">   <PARAM NAME="ledtype" VALUE="0">   <PARAM NAME="ledspacing" VALUE="1">   <PARAM NAME="shortcycle" VALUE="1">   <PARAM NAME="file" VALUE="../../../tickertape_demo.txt">   <PARAM NAME="runalways" VALUE="1"> </APPLET>

Der angezeigte Text steht hier in der Datei “tickertape_demo.txt” und sieht so aus:

<font color="white" face="Proportional"> &nbsp; --- &nbsp; Colors: &nbsp; <font color="#FF6666"><blink color="#993333">R</blink></font> <font color="#FFFF66"><blink color="#999933">a</blink></font> <font color="#66FF66"><blink color="#339933">i</blink></font> <font color="#66FFFF"><blink color="#339999">n</blink></font> <font color="#6699FF"><blink color="#336699">b</blink></font> <font color="#CC66FF"><blink color="#993399">o</blink></font> <font color="#FF66CC"><blink color="#993399">w</blink></font> &nbsp; --- &nbsp; Different fonts: &nbsp;&quot;<font color="yellow" face="Default">Default</font>&quot;, &nbsp;&quot;<font color="yellow"                  face="Proportional">Proportional</font>&quot;, &nbsp;&quot;<font color="yellow"                  face="ALPHALED_5*5">ALPHALED_5*5</font>&quot;, &nbsp;&quot;<font color="yellow"                  face="ALPHALED_5*7">Alphaled_5*7</font>&quot;, &nbsp;&quot;<font color="yellow"                  face="ALPHALED_FANCY">Alphaled_Fancy</font>&quot; &nbsp; --- &nbsp; URLs: &nbsp; Click <a href="http://www.j-hoppe.de"><font color="lime">here and go home! </font>

Übrigens: die erste Anweisung “<font color="white"...> “ sorgt für weissen Text und übersteuert den Applet-Parameter “<PARAM NAME="ledcolor" VALUE="red">”.

Parameter

HTML-Tags im Displaytext

Der anzuzeigende Text wird nach dem HTML-Standard ausgewertet. Dies heisst zunächst, dass Zeilenumbrüche keine Bedeutung haben und folgende Zeichen in der “&xxx;”-Notation geschrieben werden müssen:

Zeichen	Character entity
mehrfache Leerzeichen	 
“	"
&	&
<	&lt;
>	&gt;

Zeichenformatierungen und Sonderfunktionen werden durch besondere Tags angegeben. TickerTape versteht folgende Tags:

Tag	Parameter	Bedeutung
<blink>	color=color_code	Der zwischen <blink> und </blink> eingeschlossene Text wird blinkend angezeigt. Mit “color=” kann die HTML-Zeichenfarbe für die Blinkphase angegeben werden, ansonsten wird mit “ledoffcolor” geblinkt.
<font>	color=color_code	Setzt die Zeichenfarbe für den Text zwischen <font> und </font>. Default: Parameter “ledcolor”
<font>	face=font_name	Setzt den Zeichensatz für den Text zwischen <font> und </font>. “font_name” muss im verwendeten Font-Definitionsdatei definiert wurden sein (siehe Parameter “fontlist” und den Absatz über die Fontbeschreibung). Default: “Default”.
<a>	href=URL	Setzt die URL für den Text zwischen <a> und </a>. Bei Klick auf diesen Text wird die URL aufgerufen ... da sich der Text bewegt, sollte die Klickzone nicht zu klein sein. Wenn die Maus in das Display bewegt wird, wird die URL in der Statuszeile des Webbrowsers angezeigt. Default: Parameter “href”.

Color strings

Farben können im HTML-Text und in den Applet-Parametern generell in der “#rrggbb” Notation oder als HTML-Farbname angegeben werden. Die erlaubten Namen sind:
"black”, "gray", "maroon", "red", "green", "lime", "olive", "yellow", "navy", "blue", "purple", "fuchsia", "teal", "aqua", "silver", "white".

Wegen der Kompatibilität zu anderen Laufschrift-Applets können für die Applet-Parameter zusätzlich folgende Java-Farbnamen angegeben werden:
“orange”, “pink”, “lightgray”, “darkgray”, “cyan”, magenta”.

Die Fontbeschreibung

Ein Standardzeichensatz mit dem Namen “Default” ist in TickerTape direkt “eingebaut”. Zusätzliche Zeichensätze werden beim Start des Applets aus der Datei “fonts.xml” gelesen, die sich im Archiv “tickertape.jar” befindet.
Anstelle von “fonts.xml” kann durch Angabe des Parameters ”fontlist” eine andere Zeichensatzdatei geladen werden, der Dateiname wird durch eine normale URL gebildet. Diese Methode hat den  Nachteil, dass die relative grosse Font-Datei mit auf den Client geladen werden muss (ca. 50 KB pro Font). Als Alternative zu ”fontlist” sollte die im Archiv “tickertape.jar” fest eingebaute Fontdatei geändert werden, denn diese ist wie alle Dateien im Archiv komprimiert.  Falls eigene Fonts definiert werden sollen, muss diese Datei im Archiv ersetzt werden.

Es sind folgende Fonts definiert:

Name	definiert in	Matrix	Info
Default	eingebaut	8 * 11	Klassische Zeichendarstellung mit Unterlängen, feste Zeichenbreite, ISO-Latin-1
Proportional	fonts.xml	8 * 11	Wie “Default”, aber individuelle Zeichenbreiten.
ALPHALED_5*5	fonts.xml	5 * 5	Miniatur-Versalien, nur ASCII, nur Grossbuchstaben, wie im  Alpha 220C-Display.
ALPHALED_5*7	fonts.xml	5 * 7	Angepasster Standardzeichensatz für das Alpha 220C-Display. Keine Unterlängen, proportional. Eingeschränkter ISO-Latin-1 Zeichensatz.
ALPHALED_FANCY	fonts.xml	8 * 7	Effekt-Zeichensatz aus dem Alpha 220C. Keine Unterlängen, proportional. Eingeschränkter ISO-Latin-1 Zeichensatz.

Die Fonts werden in XML definiert, wobei die Definition optisch kontrolliert werden kann ... es müssen keine kryptischen Hexadezimal-Zahlen angegeben werden. Das Beispiel zeigt die Definition des kleinen “a” im Font “Proportional” in der mitgelieferten Datei “fonts.xml” und sagt wohl mehr als alle Worte:

<fontlist> <font name="Proportional" pixelrows="11" baserow="8" separatorcols="0">    .... Zeichendefinitionen ....      <char ansi="97" pixelcolumns="6"><!-- a -->      <pixelrow rownum="00"> ------ </pixelrow>      <pixelrow rownum="01"> ------ </pixelrow>      <pixelrow rownum="02"> ------ </pixelrow>      <pixelrow rownum="03"> ------ </pixelrow>      <pixelrow rownum="04"> -XX--- </pixelrow>      <pixelrow rownum="05"> ---X-- </pixelrow>      <pixelrow rownum="06"> -XXX-- </pixelrow>      <pixelrow rownum="07"> X--X-- </pixelrow>      <pixelrow rownum="08"> -XX-X- </pixelrow>      <pixelrow rownum="09"> ------ </pixelrow>      <pixelrow rownum="10"> ------ </pixelrow>   </char>     .... Zeichendefinitionen ....   </font> <font ...>   ..... mehr Fontdefinitionen ... </font> </fontlist>

Zum Aufbau der XML-Datei:

• “font/baserow” bezeichnet die Basislinie des Fonts, sie gilt für alle Zeichen eines Fonts. Die einzelnen Zeichen eines Textes werden vertikal mit der Pixelzeile “<pixelrow rownum=baserow>” aufeinander ausgerichtet.
  Erst dadurch ergibt sich die Höhe der Pixelmatrix, die das Applet anzeigt.
• “font/separators” gibt an, wieviele leere Pixelspalten zwischen zwei aufeinander folgenden Zeichen eingefügt werden sollen. Der leere Trennraum kann aber auch als Teil jedes einzelnen Zeichens definiert werden (wie im Beispiel).
• “char/ansi” gibt die dezimale Nummer des Zeichens in der Codepage an.
• “char/pixelrow” gibt die vertikale Lage der definierten Pixelzeile an. Die oberste Zeile hat die Position “0”, die unterste die Position “font/pixelrows”-1. Zeilen ohne gesetzte Pixel brauchen nicht angegeben werden, dienen aber der Übersichtlichkeit.
• Im “char/pixelrow”-Tag dürfen nur “-” und “X” verwendet werden. Spaces links und rechts werden ignoriert.