--- a/svghmi/Makefile	Fri Oct 11 12:03:14 2019 +0200
+++ b/svghmi/Makefile	Tue Oct 15 17:14:48 2019 +0200
@@ -16,7 +16,7 @@
 
 all:$(xsltfiles)
 
-%.xslt: %.ysl2 ../yslt_noindent.yml2
+%.xslt: %.ysl2 svghmi.js ../yslt_noindent.yml2
 	$(yml2path)/yml2c -I $(yml2path):../ $< -o $@.tmp
 	xmlstarlet fo $@.tmp > $@
 	rm $@.tmp

--- a/svghmi/gen_index_xhtml.xslt	Fri Oct 11 12:03:14 2019 +0200
+++ b/svghmi/gen_index_xhtml.xslt	Tue Oct 15 17:14:48 2019 +0200
@@ -1,6 +1,6 @@
 <?xml version="1.0"?>
-<xsl:stylesheet xmlns:func="http://exslt.org/functions" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:svg="http://www.w3.org/2000/svg" xmlns:str="http://exslt.org/strings" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:exsl="http://exslt.org/common" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:ns="beremiz" xmlns:cc="http://creativecommons.org/ns#" xmlns:regexp="http://exslt.org/regular-expressions" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:dc="http://purl.org/dc/elements/1.1/" extension-element-prefixes="ns func" version="1.0" exclude-result-prefixes="ns str regexp exsl func">
-  <xsl:output method="xml" cdata-section-elements="script"/>
+<xsl:stylesheet xmlns:func="http://exslt.org/functions" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:svg="http://www.w3.org/2000/svg" xmlns:str="http://exslt.org/strings" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:exsl="http://exslt.org/common" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:ns="beremiz" xmlns:cc="http://creativecommons.org/ns#" xmlns:regexp="http://exslt.org/regular-expressions" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:dc="http://purl.org/dc/elements/1.1/" extension-element-prefixes="ns func" version="1.0" exclude-result-prefixes="ns str regexp exsl func">
+  <xsl:output method="xml" cdata-section-elements="xhtml:script"/>
   <xsl:variable name="geometry" select="ns:GetSVGGeometry()"/>
   <xsl:variable name="hmitree" select="ns:GetHMITree()"/>
   <xsl:variable name="hmi_elements" select="//svg:*[starts-with(@inkscape:label, 'HMI:')]"/>
@@ -179,6 +179,10 @@
     <func:result select="exsl:node-set($ast)"/>
   </func:function>
   <xsl:template name="scripts">
+    <xsl:text>(function(){
+</xsl:text>
+    <xsl:text>
+</xsl:text>
     <xsl:text>var hmi_hash = [</xsl:text>
     <xsl:value-of select="$hmitree/@hash"/>
     <xsl:text>]; 
@@ -212,7 +216,7 @@
       </xsl:for-each>
       <xsl:text>    ],
 </xsl:text>
-      <xsl:text>    paths: [
+      <xsl:text>    indexes: [
 </xsl:text>
       <xsl:for-each select="$widget/path">
         <xsl:variable name="hmipath" select="@value"/>
@@ -245,36 +249,16 @@
 </xsl:text>
     <xsl:text>
 </xsl:text>
-    <xsl:text>var hmi_index = [
-</xsl:text>
-    <xsl:variable name="svg" select="/"/>
+    <xsl:text>var hmitree_types = [
+</xsl:text>
     <xsl:for-each select="$indexed_hmitree/*">
-      <xsl:text>{   /* </xsl:text>
+      <xsl:text>/* </xsl:text>
       <xsl:value-of select="@index"/>
       <xsl:text>  </xsl:text>
       <xsl:value-of select="@hmipath"/>
-      <xsl:text> */
-</xsl:text>
-      <xsl:text>    type: "</xsl:text>
-      <xsl:value-of select="local-name()"/>
-      <xsl:text>",
-</xsl:text>
-      <xsl:text>    ids: [
-</xsl:text>
-      <xsl:variable name="hmipath" select="@hmipath"/>
-      <xsl:for-each select="$svg//*[substring-after(@inkscape:label,'@') = $hmipath]">
-        <xsl:text>        hmi_widgets["</xsl:text>
-        <xsl:value-of select="@id"/>
-        <xsl:text>"]</xsl:text>
-        <xsl:if test="position()!=last()">
-          <xsl:text>,</xsl:text>
-        </xsl:if>
-        <xsl:text>
-</xsl:text>
-      </xsl:for-each>
-      <xsl:text>    ]
-</xsl:text>
-      <xsl:text>}</xsl:text>
+      <xsl:text> */ "</xsl:text>
+      <xsl:value-of select="substring(local-name(), 5)"/>
+      <xsl:text>"</xsl:text>
       <xsl:if test="position()!=last()">
         <xsl:text>,</xsl:text>
       </xsl:if>
@@ -304,9 +288,8 @@
       <xsl:text>        widgets: [
 </xsl:text>
       <xsl:for-each select="$page_ids">
-        <xsl:text>            "</xsl:text>
+        <xsl:text>            hmi_widgets.</xsl:text>
         <xsl:value-of select="."/>
-        <xsl:text>"</xsl:text>
         <xsl:if test="position()!=last()">
           <xsl:text>,</xsl:text>
         </xsl:if>
@@ -315,24 +298,6 @@
       </xsl:for-each>
       <xsl:text>        ]
 </xsl:text>
-      <xsl:text>        subscriptions: [
-</xsl:text>
-      <xsl:for-each select="$page_elements">
-        <xsl:variable name="hmipaths" select="func:parselabel(@inkscape:label)/widget/path/@value"/>
-        <xsl:variable name="notlast" select="position()!=last()"/>
-        <xsl:for-each select="$hmipaths">
-          <xsl:variable name="hmipath" select="."/>
-          <xsl:text>            </xsl:text>
-          <xsl:value-of select="$indexed_hmitree/*[@hmipath = $hmipath]/@index"/>
-          <xsl:if test="$notlast or position()!=last()">
-            <xsl:text>,</xsl:text>
-          </xsl:if>
-          <xsl:text>
-</xsl:text>
-        </xsl:for-each>
-      </xsl:for-each>
-      <xsl:text>        ]
-</xsl:text>
       <xsl:text>    }</xsl:text>
       <xsl:if test="position()!=last()">
         <xsl:text>,</xsl:text>
@@ -352,147 +317,305 @@
 </xsl:text>
     <xsl:text>
 </xsl:text>
-    <xsl:text>(function(){
-</xsl:text>
-    <xsl:text>    // Open WebSocket to relative "/ws" address
-</xsl:text>
-    <xsl:text>    var ws = new WebSocket(window.location.href.replace(/^http(s?:\/\/[^\/]*)\/.*$/, 'ws$1/ws'));
-</xsl:text>
-    <xsl:text>
-</xsl:text>
-    <xsl:text>    // Register message reception handler 
-</xsl:text>
-    <xsl:text>    ws.onmessage = function (evt) {
-</xsl:text>
-    <xsl:text>        // TODO : dispatch and cache hmi tree updates
-</xsl:text>
-    <xsl:text>
-</xsl:text>
-    <xsl:text>        var received_msg = evt.data;
-</xsl:text>
-    <xsl:text>        // TODO : check for hmitree hash header
-</xsl:text>
-    <xsl:text>        //        if not matching, reload page
-</xsl:text>
-    <xsl:text>        alert("Message is received..."+received_msg); 
+    <xsl:text>function dispatch_value(index, value) {
+</xsl:text>
+    <xsl:text>    console.log("dispatch_value("+index+value+")");
+</xsl:text>
+    <xsl:text>};
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>// Open WebSocket to relative "/ws" address
+</xsl:text>
+    <xsl:text>var ws = new WebSocket(window.location.href.replace(/^http(s?:\/\/[^\/]*)\/.*$/, 'ws$1/ws'));
+</xsl:text>
+    <xsl:text>ws.binaryType = 'arraybuffer';
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>const dvgetters = {
+</xsl:text>
+    <xsl:text>    INT: [DataView.prototype.getInt16, 2],
+</xsl:text>
+    <xsl:text>    BOOL: [DataView.prototype.getInt8, 1]
+</xsl:text>
+    <xsl:text>    /* TODO */
+</xsl:text>
+    <xsl:text>};
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>// Register message reception handler 
+</xsl:text>
+    <xsl:text>ws.onmessage = function (evt) {
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    let data = evt.data;
+</xsl:text>
+    <xsl:text>    let dv = new DataView(data);
+</xsl:text>
+    <xsl:text>    let i = 0;
+</xsl:text>
+    <xsl:text>    for(let hash_int of hmi_hash) {
+</xsl:text>
+    <xsl:text>        if(hash_int != dv.getUint8(i)){
+</xsl:text>
+    <xsl:text>            console.log("Recv non maching hash. Reload.");
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            // 1003 is for "Unsupported Data"
+</xsl:text>
+    <xsl:text>            ws.close(1003,"Hash doesn't match");
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            // TODO : remove debug alert ?
+</xsl:text>
+    <xsl:text>            alert("HMI will be reloaded.");
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            // force reload ignoring cache
+</xsl:text>
+    <xsl:text>            location.reload(true);
+</xsl:text>
+    <xsl:text>        };
+</xsl:text>
+    <xsl:text>        i++;
 </xsl:text>
     <xsl:text>    };
 </xsl:text>
     <xsl:text>
 </xsl:text>
-    <xsl:text>    // Once connection established
-</xsl:text>
-    <xsl:text>    ws.onopen = function (evt) {
-</xsl:text>
-    <xsl:text>        // TODO : enable the HMI (was previously offline, or just starts)
-</xsl:text>
-    <xsl:text>        //        show main page
-</xsl:text>
-    <xsl:text>
-</xsl:text>
-    <xsl:text>
-</xsl:text>
-    <xsl:text>        // TODO : prefix with hmitree hash header
-</xsl:text>
-    <xsl:text>        ws.send("test");
+    <xsl:text>    while(i &lt; data.length){
+</xsl:text>
+    <xsl:text>        let index = dv.getUint32(i);
+</xsl:text>
+    <xsl:text>        i += 4;
+</xsl:text>
+    <xsl:text>        let iectype = hmitree_types[index];
+</xsl:text>
+    <xsl:text>        let [dvgetter, bytesize] = dvgetters[iectypes];
+</xsl:text>
+    <xsl:text>        value = dvgetter.call(dv,i);
+</xsl:text>
+    <xsl:text>        dispatch_value(index, value);
+</xsl:text>
+    <xsl:text>        i += bytesize;
 </xsl:text>
     <xsl:text>    };
 </xsl:text>
-    <xsl:text>
-</xsl:text>
-    <xsl:text>    var pending_updates = {};
-</xsl:text>
-    <xsl:text>    
-</xsl:text>
-    <xsl:text>    // subscription state, as it should be in hmi server
-</xsl:text>
-    <xsl:text>    // expected {index:period}
-</xsl:text>
-    <xsl:text>    const subscriptions = new Map();
-</xsl:text>
-    <xsl:text>
-</xsl:text>
-    <xsl:text>    // subscription state as needed by widget now
-</xsl:text>
-    <xsl:text>    // expected {index:[widgets]};
-</xsl:text>
-    <xsl:text>    var subscribers = new Map();
-</xsl:text>
-    <xsl:text>
-</xsl:text>
-    <xsl:text>    // return the diff in between curently subscribed and subscription
-</xsl:text>
-    <xsl:text>    function update_subscriptions() {
-</xsl:text>
-    <xsl:text>        let delta = [];
-</xsl:text>
-    <xsl:text>        for(let [index, widgets] in subscribers.entries()){
-</xsl:text>
-    <xsl:text>
-</xsl:text>
-    <xsl:text>            // periods are in ms
-</xsl:text>
-    <xsl:text>            let previous_period = subscriptions.get(index);
-</xsl:text>
-    <xsl:text>
-</xsl:text>
-    <xsl:text>            let new_period = Math.min(...widgets.map(widget =&gt; 1000/widget.frequency));
-</xsl:text>
-    <xsl:text>
-</xsl:text>
-    <xsl:text>            if(previous_period != new_period) {
-</xsl:text>
-    <xsl:text>                subscriptions.set(index, new_period);
-</xsl:text>
-    <xsl:text>                delta.push({index: index, period: new_period});
-</xsl:text>
-    <xsl:text>            }
-</xsl:text>
-    <xsl:text>            
-</xsl:text>
-    <xsl:text>        })
-</xsl:text>
-    <xsl:text>        return result;
+    <xsl:text>};
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>function send_blob(data) {
+</xsl:text>
+    <xsl:text>    if(data.length &gt; 0) {
+</xsl:text>
+    <xsl:text>        ws.send(new Blob([
+</xsl:text>
+    <xsl:text>            new Uint8Array(hmi_hash), 
+</xsl:text>
+    <xsl:text>            data]));
+</xsl:text>
+    <xsl:text>    };
+</xsl:text>
+    <xsl:text>};
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>const typedarray_types = {
+</xsl:text>
+    <xsl:text>    INT: Int16Array,
+</xsl:text>
+    <xsl:text>    BOOL: Uint8Array
+</xsl:text>
+    <xsl:text>    /* TODO */
+</xsl:text>
+    <xsl:text>};
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>function send_reset() {
+</xsl:text>
+    <xsl:text>    send_blob(new Uint8Array([1])); /* reset = 1 */
+</xsl:text>
+    <xsl:text>};
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>// subscription state, as it should be in hmi server
+</xsl:text>
+    <xsl:text>// hmitree indexed array of integers
+</xsl:text>
+    <xsl:text>var subscriptions =  hmitree_types.map(_ignored =&gt; 0);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>// subscription state as needed by widget now
+</xsl:text>
+    <xsl:text>// hmitree indexed array of Sets of widgets objects
+</xsl:text>
+    <xsl:text>var subscribers = hmitree_types.map(_ignored =&gt; new Set());
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>function update_subscriptions() {
+</xsl:text>
+    <xsl:text>    let delta = [];
+</xsl:text>
+    <xsl:text>    for(let index = 0; index &lt; subscribers.length; index++){
+</xsl:text>
+    <xsl:text>        let widgets = subscribers[index];
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        // periods are in ms
+</xsl:text>
+    <xsl:text>        let previous_period = subscriptions[index];
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        let new_period;
+</xsl:text>
+    <xsl:text>        if(widgets.size &gt; 0) {
+</xsl:text>
+    <xsl:text>            let maxfreq = 0;
+</xsl:text>
+    <xsl:text>            for(let widget of widgets)
+</xsl:text>
+    <xsl:text>                if(maxfreq &lt; widgets.frequency)
+</xsl:text>
+    <xsl:text>                    maxfreq = widgets.frequency;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>            new_period = 1000/maxfreq;
+</xsl:text>
+    <xsl:text>        } else {
+</xsl:text>
+    <xsl:text>            new_period = 0;
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>        if(previous_period != new_period) {
+</xsl:text>
+    <xsl:text>            subscriptions[index] = new_period;
+</xsl:text>
+    <xsl:text>            delta.push([
+</xsl:text>
+    <xsl:text>                new Uint8Array([2]), /* subscribe = 2 */
+</xsl:text>
+    <xsl:text>                new Uint32Array([index]), 
+</xsl:text>
+    <xsl:text>                new Uint16Array([new_period])]);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>        
 </xsl:text>
     <xsl:text>    }
 </xsl:text>
-    <xsl:text>
-</xsl:text>
-    <xsl:text>
-</xsl:text>
-    <xsl:text>    function update_value(index, value) {
-</xsl:text>
-    <xsl:text>
-</xsl:text>
-    <xsl:text>    };
-</xsl:text>
-    <xsl:text>
-</xsl:text>
-    <xsl:text>    var current_page = default_page;
-</xsl:text>
-    <xsl:text>
-</xsl:text>
-    <xsl:text>    function switch_page(page_name) {
-</xsl:text>
-    <xsl:text>        let new_desc = page_desc[page_name];
-</xsl:text>
-    <xsl:text>        let old_desc = page_desc[page_name];
-</xsl:text>
-    <xsl:text>        /* TODO hide / show widgets */
-</xsl:text>
-    <xsl:text>        /* TODO move viewport */
-</xsl:text>
-    <xsl:text>
-</xsl:text>
-    <xsl:text>        /* Update subscribers */
-</xsl:text>
-    <xsl:text>        /* Update subscriptions */
-</xsl:text>
-    <xsl:text>
-</xsl:text>
-    <xsl:text>
-</xsl:text>
-    <xsl:text>    };
+    <xsl:text>    send_blob(delta);
+</xsl:text>
+    <xsl:text>};
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>function update_value(index, value) {
+</xsl:text>
+    <xsl:text>    iectype = hmitree_types[index];
+</xsl:text>
+    <xsl:text>    jstype = typedarray_types[iectypes];
+</xsl:text>
+    <xsl:text>    send_blob([
+</xsl:text>
+    <xsl:text>        new Uint8Array([0]),  /* setval = 0 */
+</xsl:text>
+    <xsl:text>        new jstype([value])
+</xsl:text>
+    <xsl:text>        ]);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>};
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>var current_page;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>function switch_page(page_name) {
+</xsl:text>
+    <xsl:text>    let old_desc = page_desc[current_page];
+</xsl:text>
+    <xsl:text>    let new_desc = page_desc[page_name];
+</xsl:text>
+    <xsl:text>    /* TODO hide / show widgets */
+</xsl:text>
+    <xsl:text>    /* TODO move viewport */
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    /* remove subsribers of previous page if any */
+</xsl:text>
+    <xsl:text>    if(old_desc) for(let widget of old_desc.widgets){
+</xsl:text>
+    <xsl:text>        for(let index of widget.indexes){
+</xsl:text>
+    <xsl:text>            subscribers[index].delete(widget);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>    /* add new subsribers if any */
+</xsl:text>
+    <xsl:text>    if(new_desc) for(let widget of new_desc.widgets){
+</xsl:text>
+    <xsl:text>        for(let index of widget.indexes){
+</xsl:text>
+    <xsl:text>            subscribers[index].add(widget);
+</xsl:text>
+    <xsl:text>        }
+</xsl:text>
+    <xsl:text>    }
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    current_page = page_name;
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>    update_subscriptions();
+</xsl:text>
+    <xsl:text>};
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>// Once connection established
+</xsl:text>
+    <xsl:text>ws.onopen = function (evt) {
+</xsl:text>
+    <xsl:text>    send_reset();
+</xsl:text>
+    <xsl:text>    // show main page
+</xsl:text>
+    <xsl:text>    switch_page(default_page);
+</xsl:text>
+    <xsl:text>
+</xsl:text>
+    <xsl:text>};
 </xsl:text>
     <xsl:text>
 </xsl:text>

--- a/svghmi/gen_index_xhtml.ysl2	Fri Oct 11 12:03:14 2019 +0200
+++ b/svghmi/gen_index_xhtml.ysl2	Tue Oct 15 17:14:48 2019 +0200
@@ -1,7 +1,7 @@
 include yslt_noindent.yml2
 
 // overrides yslt's output function to set CDATA
-decl output(method, cdata-section-elements="script");
+decl output(method, cdata-section-elements="xhtml:script");
 
 istylesheet
             /* From Inkscape */
@@ -11,6 +11,7 @@
             xmlns:svg="http://www.w3.org/2000/svg"
             xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
             xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+            xmlns:xhtml="http://www.w3.org/1999/xhtml"
 
             /* Our namespace to invoke python code */
             xmlns:ns="beremiz"
@@ -163,7 +164,8 @@
 
     function "scripts"
     {
-        /* paste hmitree hash stored in hmi tree root node */
+        | (function(){
+        |
         | var hmi_hash = [«$hmitree/@hash»]; 
 
         /* TODO re-enable
@@ -194,7 +196,7 @@
             foreach "$widget/arg"
             |         "«@value»"`if "position()!=last()" > ,`
             |     ],
-            |     paths: [
+            |     indexes: [
             foreach "$widget/path" {
                 const "hmipath","@value";
                 const "hmitree_match","$indexed_hmitree/*[@hmipath = $hmipath]";
@@ -207,19 +209,10 @@
         }
         | }
         |
-        | var hmi_index = [
-
-        const "svg","/"; /* foreach loses document root */
+        | var hmitree_types = [
+
         foreach "$indexed_hmitree/*" {
-            | {   /* «@index»  «@hmipath» */
-            |     type: "«local-name()»",
-            |     ids: [
-            const "hmipath","@hmipath";
-            foreach "$svg//*[substring-after(@inkscape:label,'@') = $hmipath]" {
-            |         hmi_widgets["«@id»"]`if "position()!=last()" > ,`
-            }
-            |     ]
-            | }`if "position()!=last()" > ,`
+            | /* «@index»  «@hmipath» */ "«substring(local-name(), 5)»"`if "position()!=last()" > ,`
         }
 
         | ]
@@ -238,17 +231,7 @@
             |         id: "«@id»",
             |         widgets: [
             foreach "$page_ids" {
-            |             "«.»"`if "position()!=last()" > ,`
-            }
-            |         ]
-            |         subscriptions: [
-            foreach "$page_elements" {
-                const "hmipaths", "func:parselabel(@inkscape:label)/widget/path/@value";
-                const "notlast", "position()!=last()";
-                foreach "$hmipaths" {
-                    const "hmipath",".";
-            |             «$indexed_hmitree/*[@hmipath = $hmipath]/@index»`if "$notlast or position()!=last()" > ,`
-                }
+            |             hmi_widgets.«.»`if "position()!=last()" > ,`
             }
             |         ]
             |     }`if "position()!=last()" > ,`
@@ -259,6 +242,7 @@
         | var default_page = "«$default_page»";
 
         include text svghmi.js
+        | })();
     }
 
     /*

--- a/svghmi/svghmi.c	Fri Oct 11 12:03:14 2019 +0200
+++ b/svghmi/svghmi.c	Tue Oct 15 17:14:48 2019 +0200
@@ -242,8 +242,7 @@
 typedef enum {
     setval = 0,
     reset = 1,
-    subscribe = 2,
-    unsubscribe = 3
+    subscribe = 2
 } cmd_from_JS;
 
 int svghmi_recv_dispatch(uint32_t size, const uint8_t *ptr){
@@ -320,20 +319,6 @@
             }
             break;
 
-            case unsubscribe:
-            {
-                uint32_t index = *(uint32_t*)(cursor);
-
-                if(index < HMI_ITEM_COUNT)
-                {
-                    hmi_tree_item_t *dsc = &hmi_tree_item[index];
-                    reset_iterator(index, dsc);
-                }
-                else return -EINVAL;
-
-                progress = sizeof(uint32_t) /* index */;
-            }
-            break;
         }
         cursor += progress;
     }

--- a/svghmi/svghmi.js	Fri Oct 11 12:03:14 2019 +0200
+++ b/svghmi/svghmi.js	Tue Oct 15 17:14:48 2019 +0200
@@ -1,26 +1,153 @@
 // svghmi.js
 
-(function(){
-    // Open WebSocket to relative "/ws" address
-    var ws = new WebSocket(window.location.href.replace(/^http(s?:\/\/[^\/]*)\/.*$/, 'ws$1/ws'));
+function dispatch_value(index, value) {
+    console.log("dispatch_value("+index+value+")");
+};
 
-    // Register message reception handler 
-    ws.onmessage = function (evt) {
-        // TODO : dispatch and cache hmi tree updates
+// Open WebSocket to relative "/ws" address
+var ws = new WebSocket(window.location.href.replace(/^http(s?:\/\/[^\/]*)\/.*$/, 'ws$1/ws'));
+ws.binaryType = 'arraybuffer';
 
-        var received_msg = evt.data;
-        // TODO : check for hmitree hash header
-        //        if not matching, reload page
-        alert("Message is received..."+received_msg); 
+const dvgetters = {
+    INT: [DataView.prototype.getInt16, 2],
+    BOOL: [DataView.prototype.getInt8, 1]
+    /* TODO */
+};
+
+// Register message reception handler 
+ws.onmessage = function (evt) {
+
+    let data = evt.data;
+    let dv = new DataView(data);
+    let i = 0;
+    for(let hash_int of hmi_hash) {
+        if(hash_int != dv.getUint8(i)){
+            console.log("Recv non maching hash. Reload.");
+
+            // 1003 is for "Unsupported Data"
+            ws.close(1003,"Hash doesn't match");
+
+            // TODO : remove debug alert ?
+            alert("HMI will be reloaded.");
+
+            // force reload ignoring cache
+            location.reload(true);
+        };
+        i++;
     };
 
-    // Once connection established
-    ws.onopen = function (evt) {
-        // TODO : enable the HMI (was previously offline, or just starts)
-        //        show main page
+    while(i < data.length){
+        let index = dv.getUint32(i);
+        i += 4;
+        let iectype = hmitree_types[index];
+        let [dvgetter, bytesize] = dvgetters[iectypes];
+        value = dvgetter.call(dv,i);
+        dispatch_value(index, value);
+        i += bytesize;
+    };
+};
 
 
-        // TODO : prefix with hmitree hash header
-        ws.send("test");
+function send_blob(data) {
+    if(data.length > 0) {
+        ws.send(new Blob([
+            new Uint8Array(hmi_hash), 
+            data]));
     };
-})();
+};
+
+const typedarray_types = {
+    INT: Int16Array,
+    BOOL: Uint8Array
+    /* TODO */
+};
+
+function send_reset() {
+    send_blob(new Uint8Array([1])); /* reset = 1 */
+};
+
+// subscription state, as it should be in hmi server
+// hmitree indexed array of integers
+var subscriptions =  hmitree_types.map(_ignored => 0);
+
+// subscription state as needed by widget now
+// hmitree indexed array of Sets of widgets objects
+var subscribers = hmitree_types.map(_ignored => new Set());
+
+function update_subscriptions() {
+    let delta = [];
+    for(let index = 0; index < subscribers.length; index++){
+        let widgets = subscribers[index];
+
+        // periods are in ms
+        let previous_period = subscriptions[index];
+
+        let new_period;
+        if(widgets.size > 0) {
+            let maxfreq = 0;
+            for(let widget of widgets)
+                if(maxfreq < widgets.frequency)
+                    maxfreq = widgets.frequency;
+
+            new_period = 1000/maxfreq;
+        } else {
+            new_period = 0;
+        }
+
+        if(previous_period != new_period) {
+            subscriptions[index] = new_period;
+            delta.push([
+                new Uint8Array([2]), /* subscribe = 2 */
+                new Uint32Array([index]), 
+                new Uint16Array([new_period])]);
+        }
+        
+    }
+    send_blob(delta);
+};
+
+function update_value(index, value) {
+    iectype = hmitree_types[index];
+    jstype = typedarray_types[iectypes];
+    send_blob([
+        new Uint8Array([0]),  /* setval = 0 */
+        new jstype([value])
+        ]);
+
+};
+
+var current_page;
+
+function switch_page(page_name) {
+    let old_desc = page_desc[current_page];
+    let new_desc = page_desc[page_name];
+    /* TODO hide / show widgets */
+    /* TODO move viewport */
+
+    /* remove subsribers of previous page if any */
+    if(old_desc) for(let widget of old_desc.widgets){
+        for(let index of widget.indexes){
+            subscribers[index].delete(widget);
+        }
+    }
+    /* add new subsribers if any */
+    if(new_desc) for(let widget of new_desc.widgets){
+        for(let index of widget.indexes){
+            subscribers[index].add(widget);
+        }
+    }
+
+    current_page = page_name;
+
+    update_subscriptions();
+};
+
+
+// Once connection established
+ws.onopen = function (evt) {
+    send_reset();
+    // show main page
+    switch_page(default_page);
+
+};
+

--- a/svghmi/svghmi_server.py	Fri Oct 11 12:03:14 2019 +0200
+++ b/svghmi/svghmi_server.py	Tue Oct 15 17:14:48 2019 +0200
@@ -85,7 +85,7 @@
 
     def onMessage(self, msg, isBinary):
         self._hmi_session.onMessage(msg)
-        print msg
+        # print msg
         #self.sendMessage(msg, binary)
 
 class HMIWebSocketServerFactory(WebSocketServerFactory):