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-10 13:12] mattias [How does this work?] |
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 selection done on the interactive map. | The Display Spot will change its content depending on the selection done on the interactive map. | ||
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 50: | Line 50: | ||
=====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 / |
+ | |||
+ | {{: | ||
+ | |||
+ | In blocks | ||
{{: | {{: | ||
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 of the svg file used for the project. | 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 of the svg file used for the project. | ||
- | The map itself | + | The map image is a .svg file that is picked up by script.js and applied to the html document in runtime. |
- | Script.js uses the Blocks javascript bridge API called pub_sub_peer.js to set values | + | Script.js |
- | ===Graphics=== | + | ===SVG file=== |
- | + | ||
- | 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 ID TheMap in the SVG content. Every country is a group of paths named after the country. Make sure to set a element ID to something sensible, in this case the Country name as this is what we pass on 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. | ||
+ | |||
< | < | ||
<svg> | <svg> | ||
- | <g id=TheMap> | + | <g id="TheMap"> |
<g id=CountryA> | <g id=CountryA> | ||
<path d= [vectordata here] /> | <path d= [vectordata here] /> | ||
<path d= [more vectordata here] /> | <path d= [more vectordata here] /> | ||
</g> | </g> | ||
- | <g id=CountryB> | + | <g id="CountryB"> |
< | < | ||
< | < | ||
</g> | </g> | ||
- | <path id=CountryC d=[a country consisting of only one single path doesn' | + | <path id="CountryC" |
</g> | </g> | ||
</ | </ | ||
Line 81: | Line 88: | ||
- | ==Logic=== | + | |
+ | ===Blocks | ||
+ | |||
+ | 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 " | ||
+ | |||
+ | {{: | ||