Tickertape

 

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

Das Applet akzeptiert folgende Parameter (sorry, still in english):
 

Parameter

Typ

Bedeutung

Default

width

integer

Width of display on screen in pixels. Sets also the amount of visible LED matrix rows.

80
 

height

integer

Height of display on screen in pixels.
Should be greater than "text_height * (ledsize + ledspacing) + ledspacing".
“text_heigth” is the required amount of LEDs, it is automatically calculated from the character heigths used the display text.

39
 

 Note: frame is drawn with width and height, interior is filled with backcolor, LED matrix is centered inside frame.

speed

integer

Time between two display updates in milli seconds.

100

scrollfactor

integer

Horizontal movement per display update in LED columns.

2

shortcycle

boolean: 0 or 1
 

Controls amount of separator space show when display text rolls around:
0 = end of text and begin of text are not visible at the same time.
1 = end of text follows directly after begin.

0

runalways

boolean: 0 or 1.

If “1”, the tickertape seems to "run in background" even if not active. On reset or start, it begins with a scroll position depending on system time.

0

ledsize

integer
 

Diameter of LED symbols in pixels.

2

ledspacing

integer

Space between LED symbols in pixels.
 

1

ledtype

0 or 1

Shape of LED symbols.
0 = square, 1 = circular.
 

0

backcolor
backcolour

color string

Color for background of LED matrix
 

“black”
 

ledcolor
ledcolour

color string

Default color of shining LED's.

“green”

ledoffcolor
ledoffcolour

color string

Color for dark LED’s.
 

backcolor
 

fontlist

String

Load XML-file with definitions of pixel fonts. These can be used in the <FONT>-Tag.

none, "fonts.xml" from .jar-archive is used

font

String

Choose a font from "fontlist" as default font.

build-in default font “Default”

framethick

integer

Thickness of frame around LED matrix in pixels.

1

framecolor framecolour

color string

color for frame around LED matrix

“green”

href

URL string

Default URL for click into LED display.  Can be overriden by marking text with the "<a>"-tag

none

text

String

The text to be displayed. May be of *ANY* size. Is interpeted as HTML code.:

“-----”

file

Filename string

Name of file containing display text. Must be given relative to position of calling HTML-page.

none

Note: "text" overrides "file".

 

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

&nbsp;

“

&quot;

&

&amp;

<

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

 

[LED-Laufschrift] [Private Motivation] [Ledband.exe] [Tickertape] [Das ALPHA 220C Display] [TextPlayer] [Texte]