Learn Advanced JavaScript Programming

Table of Contents

function drawMessage(num) {
 // initialize variable to current message
 var text = messages[num]
 // initialize two counters (j - current character in message,
i - current x coordinate)
 var i = 0
 var j = 0

 while (1) {
if (text.charAt(j) != " ") {
// draw current letter
drawLetter(text.charAt(j), i)

// increment i by the constant width of an image
i += width
} else {
// add an extra space (do not advance j yet)
drawSpace(i)
i += space
}
// if j is less than index of last character
if (j < text.length – 1) {
drawSpace(i)
i += space
} else
// j is the index of the last character (last character
already printed)
break
// increment j by one because one letter was printed
++j
 }
 // flood the remaining piece of the sign (turn it off)
 floodBoard(i)
 // if message printed this time was not the last one in the array
 if (num < messages.length – 1)
// val *must* be a global variable for use with the timeout
val = ++num
 else
val = 0 // start cycle over again

// recursive call after waiting 3 seconds
// (some of the time already passed during printing)
timerID = setTimeout("drawMessage(val)", pause)
}

The next function, drawMessage(), is probably the most important but is still straightforward. After initializing some variables, the while statement loops over the message characters and displays them by the drawLetter() or the drawSpace() functions. After the message is exhausted, the rest of the board is flooded with off dots. The function ends, after determining the index of the next message to be displayed (either next or first one), by recursively calling itself after a pause of pause milliseconds. See the online documentation for more details.

startSign()

function startSign() {
 running = true

 // wait 3 seconds and then call function to print first message
 drawMessage(0)
}

This function simply sets the value of the global variable running to true, indicating that the ticker has started, and then invokes the drawMessage() function to actually start displaying the first message (0).

stopSign()

function stopSign() {
 if(running)
clearTimeout(timerID)
 running = false
}

This function stops the LED ticker by clearing the last time out via the clearTimeout() method. Reflecting the status of the banner, the value of running is set to false. Note that the stopSign() function does not clear the current LED sign display.

More Global Statements

// open form
document.write('<FORM>')

// create initial sign (all signs are off)
drawBlank()

document.write('<INPUT TYPE="button" VALUE="start"
onClick="startSign()">')
document.write('<INPUT TYPE="button" VALUE="stop"
onClick="stopSign();
floodBoard(0)">')
document.write('</FORM>')

The second segment of global statements at the end of the script creates the form where the Start and Stop buttons reside (they are form elements). We then define the buttons and their onClick event handler script. Notice that the Stop button event handler includes two function calls, one to stop the LED sign and the other to clear (flood) it. It is important to open the form before the drawBlank() function creates the LED sign, because the <FORM> tag starts a new line with some vertical space from the HTML elements above it. In order to assure that the buttons touch the border of the LED sign, we include the LED sign in the form itself.

Many people ask us how to get rid of the buttons and make the LED sign start on its own. You simply need to delete the lines that open and close the form, as well as the lines that define the buttons:

1. document.write('<FORM>')
2. document.write('<INPUT TYPE="button" VALUE="start"
onClick="startSign()">')
3. document.write('<INPUT TYPE="button" VALUE="stop"
onClick="stopSign(); floodBoard(0)">')
4. document.write('</FORM>')

You should then use an onLoad event handler to start the LED sign when the document finishes loading:

<BODY onLoad="startSign()">

Table of Contents