Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
blocks:app-note:interactivemap [2020-11-04 07:59] mattias [Installation] |
blocks:app-note:interactivemap [2023-08-01 21:07] (current) admin [Installation] |
||
---|---|---|---|
Line 2: | Line 2: | ||
===== Interactive map ===== | ===== Interactive map ===== | ||
- | This map of Africa | + | This application note demonstrates how to use odd shaped |
- | The Display Spot will change its content depending on the slection | + | The Display Spot will change its content depending on the selection |
Line 13: | Line 13: | ||
We have prepared a PIXILAB-blocks-root folder containing everything you need to run the examples. | We have prepared a PIXILAB-blocks-root folder containing everything you need to run the examples. | ||
- | {{ : | + | {{ : |
- | If you don't know how to do this, read the instructions in the [[https:// | + | If you don't know how to do this, read the instructions in the [[blocks:app-note:start|general setup section]]. |
Line 23: | Line 23: | ||
- Open the editor using the Admin button. | - Open the editor using the Admin button. | ||
- Log in using the name admin and the password pixi. | - Log in using the name admin and the password pixi. | ||
- | - Open a second browser window and type in the URL: http:// | + | - Open a second browser window and type in the URL: http:// |
- Open a third browser window and type in the URL: http:// | - Open a third browser window and type in the URL: http:// | ||
Line 31: | Line 31: | ||
Assign the Interactive map to the Visitor spot and the DisplaySpotIndex file to the display spot. | 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: | On the visitor spot you should see a map: | ||
- | {{: | + | {{: |
- | And if you go ahead and click on Algeria | + | Go ahead and click on Tunisia |
{{: | {{: | ||
+ | |||
+ | Open the Task page in Blocks editor to see the variable change according to the selection made on the map. | ||
+ | |||
+ | {{: | ||
+ | |||
+ | |||
+ | |||
=====How does this work?===== | =====How does this work?===== | ||
- | The interactive map itself is a custom web page that is stored under / | + | The interactive map itself is a custom web page that is stored under / |
- | {{: | + | {{: |
- | The web page is made up from a html file // | + | In blocks the web page is displayed with a web block. |
- | There is also a javascript that is run from the index.html file. | + | {{: |
- | //main.js// that handles the particular logic from this example and the pub-sub-peer.js that provides a API that communicates with Blocks, | + | |
- | If we look at the index.html file in more detail, | + | In the URL setting of the web block there are two query-parameters. blocksVar will point to a blocks variable, svgFileName will set the filename |
+ | The map image is a .svg file that is picked up by script.js and applied to the html document in runtime. | ||
+ | Script.js (the compiled version of scrip.ts) uses the Blocks javascript bridge API called pub_sub_peer.js to set value and subscripe to the Blocks variable. | ||
+ | |||
+ | | ||
+ | |||
+ | Svg files can be created and edited with creative tools like Adobe Illustrator or Inkcape. This script.js file assumes that there are a outmost group with the element ID " | ||
+ | In the SVG code the group with element ID " | ||
+ | CountryA, CountryB and CountryC is the data that will be passed on as a string to the Blocks variable. | ||
+ | This is also what returns from Blocks and used to find document elements that will get a class applied in order to highlight the element as currently selected. | ||
- | Tha graphict itself is stored inline as a | + | < |
- | where every country has a element ID named as the country | + | <svg> |
+ | | ||
+ | <g id=CountryA> | ||
+ | <path d= [vectordata here] | ||
+ | < | ||
+ | </ | ||
+ | <g id=" | ||
+ | < | ||
+ | < | ||
+ | </ | ||
+ | <path id=" | ||
+ | </ | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
- | < | + | ===Blocks Logic=== |
- | The styling | + | 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 " |
- | {{: | + | {{: |