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


===== Preparations =====

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.
{{  {{ :blocks:app-note:text-ticker: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 in the [[blocks:app-note:start|general setup section]].

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.

{{vimeo>653680062?large}}

===== Behind the Scenes ====

This solution is based on a small custom HTML file rendering the ticker. This HTML file is stored inside the "Ticker" web block, as indicated by the URL beginning with a tilde sign (the small wave). This HTML file contains the HTML code for the ticker page, along with some CSS for styling and animation (including the animation that makes the ticker scroll) and some Javascript code loading the ticker text from a system property. Looking at the URL inside the Ticker web block, it consists of the following pieces:

  * **~/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.