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:42]
mattias [Interactive map] 		blocks:app-note:interactivemap [2023-08-01 21:07] (current)
admin [Installation]
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>
 +