Adding a Text Ticker to any Block
This example shows how you can add a crawling text ticker to any block, based on a custom Web Block, rendering the text content of a Realm Variable.
You need a computer with Blocks (such as your laptop) and a web browser to use this application note. There's a "PIXILAB-Blocks-root" folder containing everything you need. tickerroot.zip|Download this ZIP file and unpack it. Edit your configuration file so it points to the folder from the ZIP you just unpacked. If you don't know how to do this, follow the instructions found here.
Once you've done all the preparations outlined above, including any server configuration allowing you to access this application note's content, proceed as follows:
- Start Blocks.
- Open the editor using the Admin button.
- Log in using the name admin and the password pixi.
- Open a second browser window using localhost:8080/spot (assuming Block runs on your laptop – if not, change the URL accordingly).
- Double-click and reassign the Main spot to your newly opened browser window, using the ID number shown there.
- Open a thurd browser window now using the URL localhost:8080/spot?display=1
- Double-click and reassign the TickerText spot to your newly opened browser window, using its ID number.
Ticker Text Display
A picture with some dandelions and a text ticker should now be visible in one of your browser windows, and a text field showing the ticker text in another. Here's a video of what you should see. Edit the text in the third browser window. This updates the ticker text. If you remove the text entirely, the ticker disappears.
Behind the Scenes
- ~/ticker is the path to the HTML file, stored inside the block's folder (as indicated by the leading tilde sign).
- ?speed=200 controls the animation speed of the ticker, in pixels/second.
- &propName=Realm.Tickers.variable.Ticker1.value specifies the name of the property from where the ticker text is obtained.
If you look inside the HTML file, you can see there's a third query parameter named bumper, specifying the text inserted between each copy of the text, with the default value being a the " • " you can see in the video.