I was having some fun with creating one of those signs that scrolls messages across the display and thought I would share it with you.

As with all projects – there is usually more than one way to approach them but I hope this will simply provide some inspiration for some of your own projects.
Tackle it however you choose. Here is my rendition…

My little message board is made up of several states, a couple variables, and some buttons.

Image States
Of course, I had to create enough image states to represent all the updates in the display. My example has a display with a digital readout and total  of 33 states. Basically it was nothing more than doing a one-off of each of the letters so it did not take too long to create them. I did spend a little time trying to get what I thought was a decent glow on the letters for aesthetic purposes only.

Variables
I have two variables. One to track whether the display is on or off and one for helping to adjust the speed of the scrolling.

Buttons
I have four buttons. Two speed buttons – one to increase speed and one to decrease along with two buttons for turning the display on and off.

Function
Once started, the message will continue to scroll over and over until stopped. I wrestled a bit with immediately “powering off” the display and letting it finish the message and simply not repeat again. I decided to just stop it cold in order to reduce confusion over whether the button worked or not. The speed buttons will increase or decrease the speed of the scrolling by a hundredth of a second for each click of the respective arrow.

JavaScript
I decided to run with JavaScript on this, although I did make a version using advanced actions as well. I stayed with the JavaScript on this one because I felt it offered better control over the speed. The ‘Delay Next Action’ option is too clunky for me when timing is more critical. I will admit, though, that it was quicker in this case to simply create an advanced action with a ‘While’ condition to go to the next state.

On the green power button, the JavaScript itself is a simple repeating of a setTimeout function called scroll that changes the state of the display. The final setTimeout calls the first one as long as the variable for power is flagged. Here is an example of what they look like so you can see the pattern. I am sure there is a better way to script this but I can only work with what I know for the moment. We are also setting the go variable to 1, calling the scroll function,  and disabling the green button so that the scrolling is not initiated on top of itself.

function scroll() {
cp.changeState(“display”,”w”);
if (window.go==0) {
cp.changeState(“display”,”Normal”);
}
else if(window.go==1) {
setTimeout(scroll2, speed);
}
}

function scroll2() {
cp.changeState(“display”,”we”);
if (window.go==0) {
cp.changeState(“display”,”Normal”);
}
else if(window.go==1) {
setTimeout(scroll3, speed);
}
}

On the red power button we are simply changing the go variable to 0 and re-enabling the green button.

On the speed buttons, the code simply increases or decreases the speed variable by a value of 10. The setTimeout part of the javascript uses a value in milliseconds which means a value of 1000 represents 1 second. I have the default scrolling set for 100. It is worth noting that in order to decrease the speed of the scroll, I am actually increasing the speed variable while decreasing the speed variable in order to make it go faster.

If you have any questions about this please do not hesitate to post them.

I have included a working sample below.