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
Last revision Both sides next revision
blocks:app-note:interactivemap [2020-11-10 14:47]
mattias [How does this work?] 		blocks:app-note:interactivemap [2020-11-15 07:11]
mattias [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 [[https://int.pixilab.se/docs/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.