PIXILAB Wiki

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
blocks:app-note:interactivemap [2020-11-10 14:37]
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 demonstrates how you can use odd shaped buttons drawn as scalable vector graphics that can control and react to changes to properties in Blocks. 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. +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.  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.
-{{ :blocks:app-note:interactivemapofafrica.zip |Download this ZIP file and unpack it}}+{{ :blocks:app-note:interactivemap:interactivemapofafrica.zip |Download this ZIP file and unpack it}}
  
-If you don't know how to do this, read the instructions in the [[https://int.pixilab.se/docs/blocks/app-note/start|general setup section.]]+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 /public/html/SVGMap. In blocks this is displayed with a web block.+The interactive map itself is a custom web page that is stored under /public/html/SVGMap.  
 + 
 +{{:blocks:app-note:interactivemap:atomeditor.png?nolink&800|}} 
 + 
 +In blocks the web page is displayed with a web block.
  
 {{:blocks:app-note:interactivemap:webblocksettings.png?nolink&800|}} {{:blocks:app-note:interactivemap:webblocksettings.png?nolink&800|}}
  
 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 is a svg file that is picked up by script.js and applied to the html document in runtime. +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 valuea and subscripe to the Blocks variable.+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.
        
  
Line 64: Line 68:
 In the SVG code the group with element ID "TheMap" is used as scope for the click handler in the javascript.   In the SVG code the group with element ID "TheMap" is used as scope for the click handler in the javascript.  
 CountryA, CountryB and CountryC is the data that will be passed on as a string to the Blocks variable.  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 style the element as currently selected.+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.
    
 <code> <code>
Line 81: Line 85:
 </svg>   </svg>  
 </code> </code>
 +