Differences

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

--- blocks:app-note:interactivemap [2020-11-10 10:38] – [Installation] mattias
+++ blocks:app-note:interactivemap [2023-08-01 21:07] (current) – [Installation] admin
@@ Line 2: / Line 2: @@
 ===== 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.
@@ Line 13: / Line 13: @@
 We have prepared a PIXILAB-blocks-root folder containing everything you need to run the examples.
-{{ :blocks:app-note:audio-guide:audio-guide-rootrev1.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 31: / Line 31: @@
 Assign the Interactive map to the Visitor spot and the DisplaySpotIndex file to the display spot.
-{{:blocks:app-note:interactivemap:assignments.png?nolink&800|}}.
+{{:blocks:app-note:interactivemap:maingroupeditor.png?nolink&800|}}
 On the visitor spot you should see a map:
-{{:blocks:app-note:interactivemap:visitorspot.png?nolink&800|}}
+{{:blocks:app-note:interactivemap:mob1image.png?nolink&800|}}
-And if you go ahead and click on Algeria you should see this on the display sport:
+Go ahead and click on Tunisia you should see this on the display sport:
 {{:blocks:app-note:interactivemap:displayspot.png?nolink&800|}}
+Open the Task page in Blocks editor to see the variable change according to the selection made on the map.
+{{:blocks:app-note:interactivemap:blocksvariable.png?nolink&800|}}
 =====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|}}
-{{:blocks:app-note:interactivemap:webblock.png?nolink&800|}}
+In blocks the web page is displayed with a web block.
-The web page is made up from a html file //index.html.// containing the svg paths and some styling.
+{{:blocks:app-note:interactivemap:webblocksettings.png?nolink&800|}}
-There is also a javascript that is run from the index.html file.
+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.
-//main.js// that handles the particular logic from this example and the pub-sub-peer.js that provides a API that communicates with Blocks,
+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.
-If we look at the index.html file in more detail, there is a typical set of general tags like the<code><html><head><body> </code>
+ ===SVG file===
- ===Graphics===
+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 "TheMap" in the SVG content. Every country is a group of paths named after the country. Make sure to set a parent element ID to something sensible, in this case the Country name as this is what we pass on to the blocks variable. For this example, avoid element IDs on any child path.(Or adress any other requirements in the code.)
+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.
+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>
+<svg>
+  <g id="TheMap">
+    <g id=CountryA>
+      <path d= [vectordata here]  />
+      <path d= [more vectordata here]  />
+    </g>
+    <g id="CountryB">
+     <path d= [vectordata here] />
+     <path d= [more vectordata here]  />
+    </g>
+    <path id="CountryC" d=[a country consisting of only one single path doesn't require a group] />
+  </g>
+</svg>
+</code>
-The graphis itself is stored inline as a // svg//  element.
-where every country has a element ID named as the country represented. Some countrys are complex and is made up from a group of paths.
-<code><path id="Algeria" class="land dz" d="M95.3138,56.0625 L95.6198,49.5394"</path></code>
-The styling is declared inline inside the svg element tag.
-{{:blocks:app-note:styling.png?nolink&800|}}
+===Blocks Logic===
-As you can see there are styles for things like //path:hover// and //path:active//. This is the styles applied when hovering over the element with the cursor and when clicking on an  element. There are also styles for things like .land and .coast.
+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 "Reveal when at value" condition of the reveal is true the page will show on the display.
-The one that we use to indicate the currently active county in blocks is //.current//. This one is what sets the country to blue when it is currently set in the Country variable in Blocks.
- ===Logic===
+{{:blocks:app-note:interactivemap:revealbehaviourbinding.png?nolink&800|}}