This application note demonstrates how to use odd shaped forms drawn with scalable vector graphics to change a value of a Blocks variable and subscribe to any updates to the Blocks variable made from elsewhere. The buttons, shaped as countries of Africa, will indicate its states, showing if a country is selected either from the UI itself or from any other logic that can happen in Blocks. The Display Spot will change its content depending on the selection done on the interactive map.
You need a computer with a running blocks server and a web browser to use this application note.
We have prepared a PIXILAB-blocks-root folder containing everything you need to run the examples. Download this ZIP file and unpack it
If you don't know how to do this, read the instructions in the general setup section.
If you have done the general setup, copied the files and pointed to this application notes root block, follow the next steps to run this application on your computer.
- Start Blocks.
- Open the editor using the Admin button.
- Log in using the name admin and the password pixi.
- Open a second browser window and type in the URL: http://localhost:8080/spot/ this is where you will see some content controlled by the interactive map.
- Open a third browser window and type in the URL: http://localhost:8080/spot/index.ftl?mobile=Mob1, this is where you will control the map.
Run the example
Assign the Interactive map to the Visitor spot and the DisplaySpotIndex file to the display spot.
On the visitor spot you should see a map:
Go ahead and click on Tunisia you should see this on the display sport:
Open the Task page in Blocks editor to see the variable change according to the selection made on the map.
How does this work?
The interactive map itself is a custom web page that is stored under /public/html/SVGMap.
In blocks the web page is displayed with a web block.
<svg> <g id="TheMap"> <g id=CountryA> <path d= [vectordata here] /> <path d= [more vectordata here] /> </g> <g id="CountryB"> <path d= [vectordata here] /> <path d= [more vectordata here] /> </g> <path id="CountryC" d=[a country consisting of only one single path doesn't require a group] /> </g> </svg>
In blocks we can use a change of the realm variable value to trig a task or as in this application note use it to reveal the right page of a book. This is used by applying a reveal behaviour to each page of the book and bind them to the Blocks variable. When the "Reveal when at value" condition of the reveal is true the page will show on the display.