# HG changeset patch
# User Edouard Tisserant
# Date 1666946555 -7200
# Node ID e3a29c5b74c4d05f3d01fc320fb28808ab9bdb8a
# Parent  9256c344c2da3db7be56dd0083d8e70678d27814
SVGHMI: update generated XSLT

diff -r 9256c344c2da -r e3a29c5b74c4 svghmi/gen_index_xhtml.xslt
--- a/svghmi/gen_index_xhtml.xslt	Fri Oct 28 09:44:33 2022 +0200
+++ b/svghmi/gen_index_xhtml.xslt	Fri Oct 28 10:42:35 2022 +0200
@@ -11289,7 +11289,1209 @@
 </xsl:text>
           <xsl:text>
 </xsl:text>
-          <xsl:text>var ws_url = 
+          <xsl:text>const dvgetters = {
+</xsl:text>
+          <xsl:text>    INT: (dv,offset) =&gt; [dv.getInt16(offset, true), 2],
+</xsl:text>
+          <xsl:text>    BOOL: (dv,offset) =&gt; [dv.getInt8(offset, true), 1],
+</xsl:text>
+          <xsl:text>    NODE: (dv,offset) =&gt; [dv.getInt8(offset, true), 1],
+</xsl:text>
+          <xsl:text>    REAL: (dv,offset) =&gt; [dv.getFloat32(offset, true), 4],
+</xsl:text>
+          <xsl:text>    STRING: (dv, offset) =&gt; {
+</xsl:text>
+          <xsl:text>        const size = dv.getInt8(offset);
+</xsl:text>
+          <xsl:text>        return [
+</xsl:text>
+          <xsl:text>            String.fromCharCode.apply(null, new Uint8Array(
+</xsl:text>
+          <xsl:text>                dv.buffer, /* original buffer */
+</xsl:text>
+          <xsl:text>                offset + 1, /* string starts after size*/
+</xsl:text>
+          <xsl:text>                size /* size of string */
+</xsl:text>
+          <xsl:text>            )), size + 1]; /* total increment */
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>// Called on requestAnimationFrame, modifies DOM
+</xsl:text>
+          <xsl:text>var requestAnimationFrameID = null;
+</xsl:text>
+          <xsl:text>function animate() {
+</xsl:text>
+          <xsl:text>    let rearm = true;
+</xsl:text>
+          <xsl:text>    do{
+</xsl:text>
+          <xsl:text>        if(page_fading == "pending" || page_fading == "forced"){
+</xsl:text>
+          <xsl:text>            if(page_fading == "pending")
+</xsl:text>
+          <xsl:text>                svg_root.classList.add("fade-out-page");
+</xsl:text>
+          <xsl:text>            page_fading = "in_progress";
+</xsl:text>
+          <xsl:text>            if(page_fading_args.length)
+</xsl:text>
+          <xsl:text>                setTimeout(function(){
+</xsl:text>
+          <xsl:text>                    switch_page(...page_fading_args);
+</xsl:text>
+          <xsl:text>                },1);
+</xsl:text>
+          <xsl:text>            break;
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        // Do the page swith if pending
+</xsl:text>
+          <xsl:text>        if(page_switch_in_progress){
+</xsl:text>
+          <xsl:text>            if(current_subscribed_page != current_visible_page){
+</xsl:text>
+          <xsl:text>                switch_visible_page(current_subscribed_page);
+</xsl:text>
+          <xsl:text>            }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>            page_switch_in_progress = false;
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>            if(page_fading == "in_progress"){
+</xsl:text>
+          <xsl:text>                svg_root.classList.remove("fade-out-page");
+</xsl:text>
+          <xsl:text>                page_fading = "off";
+</xsl:text>
+          <xsl:text>            }
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        if(jumps_need_update) update_jumps();
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        pending_widget_animates.forEach(widget =&gt; widget._animate());
+</xsl:text>
+          <xsl:text>        pending_widget_animates = [];
+</xsl:text>
+          <xsl:text>        rearm = false;
+</xsl:text>
+          <xsl:text>    } while(0);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    requestAnimationFrameID = null;
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    if(rearm) requestHMIAnimation();
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function requestHMIAnimation() {
+</xsl:text>
+          <xsl:text>    if(requestAnimationFrameID == null){
+</xsl:text>
+          <xsl:text>        requestAnimationFrameID = window.requestAnimationFrame(animate);
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>// Message reception handler
+</xsl:text>
+          <xsl:text>// Hash is verified and HMI values updates resulting from binary parsing
+</xsl:text>
+          <xsl:text>// are stored until browser can compute next frame, DOM is left untouched
+</xsl:text>
+          <xsl:text>function ws_onmessage(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>    try {
+</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>                throw new Error("Hash doesn't match");
+</xsl:text>
+          <xsl:text>            };
+</xsl:text>
+          <xsl:text>            i++;
+</xsl:text>
+          <xsl:text>        };
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        while(i &lt; data.byteLength){
+</xsl:text>
+          <xsl:text>            let index = dv.getUint32(i, true);
+</xsl:text>
+          <xsl:text>            i += 4;
+</xsl:text>
+          <xsl:text>            let iectype = hmitree_types[index];
+</xsl:text>
+          <xsl:text>            if(iectype != undefined){
+</xsl:text>
+          <xsl:text>                let dvgetter = dvgetters[iectype];
+</xsl:text>
+          <xsl:text>                let [value, bytesize] = dvgetter(dv,i);
+</xsl:text>
+          <xsl:text>                dispatch_value(index, value);
+</xsl:text>
+          <xsl:text>                i += bytesize;
+</xsl:text>
+          <xsl:text>            } else {
+</xsl:text>
+          <xsl:text>                throw new Error("Unknown index "+index);
+</xsl:text>
+          <xsl:text>            }
+</xsl:text>
+          <xsl:text>        };
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        // register for rendering on next frame, since there are updates
+</xsl:text>
+          <xsl:text>    } catch(err) {
+</xsl:text>
+          <xsl:text>        // 1003 is for "Unsupported Data"
+</xsl:text>
+          <xsl:text>        // ws.close(1003, err.message);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        // TODO : remove debug alert ?
+</xsl:text>
+          <xsl:text>        alert("Error : "+err.message+"\nHMI 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>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>hmi_hash_u8 = new Uint8Array(hmi_hash);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>var ws = null;
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function send_blob(data) {
+</xsl:text>
+          <xsl:text>    if(ws &amp;&amp; data.length &gt; 0) {
+</xsl:text>
+          <xsl:text>        ws.send(new Blob([hmi_hash_u8].concat(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: (number) =&gt; new Int16Array([number]),
+</xsl:text>
+          <xsl:text>    BOOL: (truth) =&gt; new Int8Array([truth]),
+</xsl:text>
+          <xsl:text>    NODE: (truth) =&gt; new Int8Array([truth]),
+</xsl:text>
+          <xsl:text>    REAL: (number) =&gt; new Float32Array([number]),
+</xsl:text>
+          <xsl:text>    STRING: (str) =&gt; {
+</xsl:text>
+          <xsl:text>        // beremiz default string max size is 128
+</xsl:text>
+          <xsl:text>        str = str.slice(0,128);
+</xsl:text>
+          <xsl:text>        binary = new Uint8Array(str.length + 1);
+</xsl:text>
+          <xsl:text>        binary[0] = str.length;
+</xsl:text>
+          <xsl:text>        for(let i = 0; i &lt; str.length; i++){
+</xsl:text>
+          <xsl:text>            binary[i+1] = str.charCodeAt(i);
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>        return binary;
+</xsl:text>
+          <xsl:text>    }
+</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>var subscriptions = [];
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function subscribers(index) {
+</xsl:text>
+          <xsl:text>    let entry = subscriptions[index];
+</xsl:text>
+          <xsl:text>    let res;
+</xsl:text>
+          <xsl:text>    if(entry == undefined){
+</xsl:text>
+          <xsl:text>        res = new Set();
+</xsl:text>
+          <xsl:text>        subscriptions[index] = [res,0];
+</xsl:text>
+          <xsl:text>    }else{
+</xsl:text>
+          <xsl:text>        [res, _ign] = entry;
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>    return res
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function get_subscription_period(index) {
+</xsl:text>
+          <xsl:text>    let entry = subscriptions[index];
+</xsl:text>
+          <xsl:text>    if(entry == undefined)
+</xsl:text>
+          <xsl:text>        return 0;
+</xsl:text>
+          <xsl:text>    let [_ign, period] = entry;
+</xsl:text>
+          <xsl:text>    return period;
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function set_subscription_period(index, period) {
+</xsl:text>
+          <xsl:text>    let entry = subscriptions[index];
+</xsl:text>
+          <xsl:text>    if(entry == undefined){
+</xsl:text>
+          <xsl:text>        subscriptions[index] = [new Set(), period];
+</xsl:text>
+          <xsl:text>    } else {
+</xsl:text>
+          <xsl:text>        entry[1] = period;
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function reset_subscription_periods() {
+</xsl:text>
+          <xsl:text>    for(let index in subscriptions)
+</xsl:text>
+          <xsl:text>        subscriptions[index][1] = 0;
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>if(has_watchdog){
+</xsl:text>
+          <xsl:text>    // artificially subscribe the watchdog widget to "/heartbeat" hmi variable
+</xsl:text>
+          <xsl:text>    // Since dispatch directly calls change_hmi_value,
+</xsl:text>
+          <xsl:text>    // PLC will periodically send variable at given frequency
+</xsl:text>
+          <xsl:text>    subscribers(heartbeat_index).add({
+</xsl:text>
+          <xsl:text>        /* type: "Watchdog", */
+</xsl:text>
+          <xsl:text>        frequency: 1,
+</xsl:text>
+          <xsl:text>        indexes: [heartbeat_index],
+</xsl:text>
+          <xsl:text>        new_hmi_value: function(index, value, oldval) {
+</xsl:text>
+          <xsl:text>            apply_hmi_value(heartbeat_index, value+1);
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>    });
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>var page_fading = "off";
+</xsl:text>
+          <xsl:text>var page_fading_args = "off";
+</xsl:text>
+          <xsl:text>function fading_page_switch(...args){
+</xsl:text>
+          <xsl:text>    if(page_fading == "in_progress")
+</xsl:text>
+          <xsl:text>        page_fading = "forced";
+</xsl:text>
+          <xsl:text>    else
+</xsl:text>
+          <xsl:text>        page_fading = "pending";
+</xsl:text>
+          <xsl:text>    page_fading_args = args;
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    requestHMIAnimation();
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>document.body.style.backgroundColor = "black";
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>// subscribe to per instance current page hmi variable
+</xsl:text>
+          <xsl:text>// PLC must prefix page name with "!" for page switch to happen
+</xsl:text>
+          <xsl:text>subscribers(current_page_var_index).add({
+</xsl:text>
+          <xsl:text>    frequency: 1,
+</xsl:text>
+          <xsl:text>    indexes: [current_page_var_index],
+</xsl:text>
+          <xsl:text>    new_hmi_value: function(index, value, oldval) {
+</xsl:text>
+          <xsl:text>        if(value.startsWith("!"))
+</xsl:text>
+          <xsl:text>            fading_page_switch(value.slice(1));
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>});
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function svg_text_to_multiline(elt) {
+</xsl:text>
+          <xsl:text>    return(Array.prototype.map.call(elt.children, x=&gt;x.textContent).join("\n")); 
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function multiline_to_svg_text(elt, str, blank) {
+</xsl:text>
+          <xsl:text>    str.split('\n').map((line,i) =&gt; {elt.children[i].textContent = blank?"":line;});
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function switch_langnum(langnum) {
+</xsl:text>
+          <xsl:text>    langnum = Math.max(0, Math.min(langs.length - 1, langnum));
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    for (let translation of translations) {
+</xsl:text>
+          <xsl:text>        let [objs, msgs] = translation;
+</xsl:text>
+          <xsl:text>        let msg = msgs[langnum];
+</xsl:text>
+          <xsl:text>        for (let obj of objs) {
+</xsl:text>
+          <xsl:text>            multiline_to_svg_text(obj, msg);
+</xsl:text>
+          <xsl:text>            obj.setAttribute("lang",langnum);
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>    return langnum;
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>// backup original texts
+</xsl:text>
+          <xsl:text>for (let translation of translations) {
+</xsl:text>
+          <xsl:text>    let [objs, msgs] = translation;
+</xsl:text>
+          <xsl:text>    msgs.unshift(svg_text_to_multiline(objs[0])); 
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>var lang_local_index = hmi_local_index("lang");
+</xsl:text>
+          <xsl:text>var langcode_local_index = hmi_local_index("lang_code");
+</xsl:text>
+          <xsl:text>var langname_local_index = hmi_local_index("lang_name");
+</xsl:text>
+          <xsl:text>subscribers(lang_local_index).add({
+</xsl:text>
+          <xsl:text>    indexes: [lang_local_index],
+</xsl:text>
+          <xsl:text>    new_hmi_value: function(index, value, oldval) {
+</xsl:text>
+          <xsl:text>        let current_lang =  switch_langnum(value);
+</xsl:text>
+          <xsl:text>        let [langname,langcode] = langs[current_lang];
+</xsl:text>
+          <xsl:text>        apply_hmi_value(langcode_local_index, langcode);
+</xsl:text>
+          <xsl:text>        apply_hmi_value(langname_local_index, langname);
+</xsl:text>
+          <xsl:text>        switch_page();
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>});
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>// returns en_US, fr_FR or en_UK depending on selected language
+</xsl:text>
+          <xsl:text>function get_current_lang_code(){
+</xsl:text>
+          <xsl:text>    return cache[langcode_local_index];
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function setup_lang(){
+</xsl:text>
+          <xsl:text>    let current_lang = cache[lang_local_index];
+</xsl:text>
+          <xsl:text>    let new_lang = switch_langnum(current_lang);
+</xsl:text>
+          <xsl:text>    if(current_lang != new_lang){
+</xsl:text>
+          <xsl:text>        apply_hmi_value(lang_local_index, new_lang);
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>setup_lang();
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function update_subscriptions() {
+</xsl:text>
+          <xsl:text>    let delta = [];
+</xsl:text>
+          <xsl:text>    if(!ws)
+</xsl:text>
+          <xsl:text>        // dont' change subscriptions if not connected
+</xsl:text>
+          <xsl:text>        return;
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    for(let index in subscriptions){
+</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 = get_subscription_period(index);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        // subscribing with a zero period is unsubscribing
+</xsl:text>
+          <xsl:text>        let new_period = 0;
+</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>                let wf = widget.frequency;
+</xsl:text>
+          <xsl:text>                if(wf != undefined &amp;&amp; maxfreq &lt; wf)
+</xsl:text>
+          <xsl:text>                    maxfreq = wf;
+</xsl:text>
+          <xsl:text>            }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>            if(maxfreq != 0)
+</xsl:text>
+          <xsl:text>                new_period = 1000/maxfreq;
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        if(previous_period != new_period) {
+</xsl:text>
+          <xsl:text>            set_subscription_period(index, new_period);
+</xsl:text>
+          <xsl:text>            if(index &lt;= last_remote_index){
+</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>    send_blob(delta);
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function send_hmi_value(index, value) {
+</xsl:text>
+          <xsl:text>    if(index &gt; last_remote_index){
+</xsl:text>
+          <xsl:text>        dispatch_value(index, value);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        if(persistent_indexes.has(index)){
+</xsl:text>
+          <xsl:text>            let varname = persistent_indexes.get(index);
+</xsl:text>
+          <xsl:text>            document.cookie = varname+"="+value+"; max-age=3153600000";
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>        return;
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    let iectype = hmitree_types[index];
+</xsl:text>
+          <xsl:text>    let tobinary = typedarray_types[iectype];
+</xsl:text>
+          <xsl:text>    send_blob([
+</xsl:text>
+          <xsl:text>        new Uint8Array([0]),  /* setval = 0 */
+</xsl:text>
+          <xsl:text>        new Uint32Array([index]),
+</xsl:text>
+          <xsl:text>        tobinary(value)]);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    // DON'T DO THAT unless read_iterator in svghmi.c modifies wbuf as well, not only rbuf
+</xsl:text>
+          <xsl:text>    // cache[index] = value;
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function apply_hmi_value(index, new_val) {
+</xsl:text>
+          <xsl:text>    // Similarly to previous comment, taking decision to update based 
+</xsl:text>
+          <xsl:text>    // on cache content is bad and can lead to inconsistency
+</xsl:text>
+          <xsl:text>    /*let old_val = cache[index];*/
+</xsl:text>
+          <xsl:text>    if(new_val != undefined /*&amp;&amp; old_val != new_val*/)
+</xsl:text>
+          <xsl:text>        send_hmi_value(index, new_val);
+</xsl:text>
+          <xsl:text>    return new_val;
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>const quotes = {"'":null, '"':null};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function eval_operation_string(old_val, opstr) {
+</xsl:text>
+          <xsl:text>    let op = opstr[0];
+</xsl:text>
+          <xsl:text>    let given_val;
+</xsl:text>
+          <xsl:text>    if(opstr.length &lt; 2) 
+</xsl:text>
+          <xsl:text>        return undefined;
+</xsl:text>
+          <xsl:text>    if(opstr[1] in quotes){
+</xsl:text>
+          <xsl:text>        if(opstr.length &lt; 3) 
+</xsl:text>
+          <xsl:text>            return undefined;
+</xsl:text>
+          <xsl:text>        if(opstr[opstr.length-1] == opstr[1]){
+</xsl:text>
+          <xsl:text>            given_val = opstr.slice(2,opstr.length-1);
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>    } else {
+</xsl:text>
+          <xsl:text>        given_val = Number(opstr.slice(1));
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>    let new_val;
+</xsl:text>
+          <xsl:text>    switch(op){
+</xsl:text>
+          <xsl:text>      case "=":
+</xsl:text>
+          <xsl:text>        new_val = given_val;
+</xsl:text>
+          <xsl:text>        break;
+</xsl:text>
+          <xsl:text>      case "+":
+</xsl:text>
+          <xsl:text>        new_val = old_val + given_val;
+</xsl:text>
+          <xsl:text>        break;
+</xsl:text>
+          <xsl:text>      case "-":
+</xsl:text>
+          <xsl:text>        new_val = old_val - given_val;
+</xsl:text>
+          <xsl:text>        break;
+</xsl:text>
+          <xsl:text>      case "*":
+</xsl:text>
+          <xsl:text>        new_val = old_val * given_val;
+</xsl:text>
+          <xsl:text>        break;
+</xsl:text>
+          <xsl:text>      case "/":
+</xsl:text>
+          <xsl:text>        new_val = old_val / given_val;
+</xsl:text>
+          <xsl:text>        break;
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>    return new_val;
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>var current_visible_page;
+</xsl:text>
+          <xsl:text>var current_subscribed_page;
+</xsl:text>
+          <xsl:text>var current_page_index;
+</xsl:text>
+          <xsl:text>var page_node_local_index = hmi_local_index("page_node");
+</xsl:text>
+          <xsl:text>var page_switch_in_progress = false;
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function toggleFullscreen() {
+</xsl:text>
+          <xsl:text>  let elem = document.documentElement;
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>  if (!document.fullscreenElement) {
+</xsl:text>
+          <xsl:text>    elem.requestFullscreen().catch(err =&gt; {
+</xsl:text>
+          <xsl:text>      console.log("Error attempting to enable full-screen mode: "+err.message+" ("+err.name+")");
+</xsl:text>
+          <xsl:text>    });
+</xsl:text>
+          <xsl:text>  } else {
+</xsl:text>
+          <xsl:text>    document.exitFullscreen();
+</xsl:text>
+          <xsl:text>  }
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>// prevents context menu from appearing on right click and long touch
+</xsl:text>
+          <xsl:text>document.body.addEventListener('contextmenu', e =&gt; {
+</xsl:text>
+          <xsl:text>    toggleFullscreen();
+</xsl:text>
+          <xsl:text>    e.preventDefault();
+</xsl:text>
+          <xsl:text>});
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function detach_detachables() {
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    for(let eltid in detachable_elements){
+</xsl:text>
+          <xsl:text>        let [element,parent] = detachable_elements[eltid];
+</xsl:text>
+          <xsl:text>        parent.removeChild(element);
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function switch_page(page_name, page_index) {
+</xsl:text>
+          <xsl:text>    if(page_switch_in_progress){
+</xsl:text>
+          <xsl:text>        /* page switch already going */
+</xsl:text>
+          <xsl:text>        /* TODO LOG ERROR */
+</xsl:text>
+          <xsl:text>        return false;
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>    page_switch_in_progress = true;
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    if(page_name == undefined)
+</xsl:text>
+          <xsl:text>        page_name = current_subscribed_page;
+</xsl:text>
+          <xsl:text>    else if(page_index == undefined){
+</xsl:text>
+          <xsl:text>        [page_name, page_index] = page_name.split('@')
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    let old_desc = page_desc[current_subscribed_page];
+</xsl:text>
+          <xsl:text>    let new_desc = page_desc[page_name];
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    if(new_desc == undefined){
+</xsl:text>
+          <xsl:text>        /* TODO LOG ERROR */
+</xsl:text>
+          <xsl:text>        return false;
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    if(page_index == undefined)
+</xsl:text>
+          <xsl:text>        page_index = new_desc.page_index;
+</xsl:text>
+          <xsl:text>    else if(typeof(page_index) == "string") {
+</xsl:text>
+          <xsl:text>        let hmitree_node = hmitree_nodes[page_index];
+</xsl:text>
+          <xsl:text>        if(hmitree_node !== undefined){
+</xsl:text>
+          <xsl:text>            let [int_index, hmiclass] = hmitree_node;
+</xsl:text>
+          <xsl:text>            if(hmiclass == new_desc.page_class)
+</xsl:text>
+          <xsl:text>                page_index = int_index;
+</xsl:text>
+          <xsl:text>            else
+</xsl:text>
+          <xsl:text>                page_index = new_desc.page_index;
+</xsl:text>
+          <xsl:text>        } else {
+</xsl:text>
+          <xsl:text>            page_index = new_desc.page_index;
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    if(old_desc){
+</xsl:text>
+          <xsl:text>        old_desc.widgets.map(([widget,relativeness])=&gt;widget.unsub());
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>    const new_offset = page_index == undefined ? 0 : page_index - new_desc.page_index;
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    const container_id = page_name + (page_index != undefined ? page_index : "");
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    new_desc.widgets.map(([widget,relativeness])=&gt;widget.sub(new_offset,relativeness,container_id));
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    update_subscriptions();
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    current_subscribed_page = page_name;
+</xsl:text>
+          <xsl:text>    current_page_index = page_index;
+</xsl:text>
+          <xsl:text>    let page_node;
+</xsl:text>
+          <xsl:text>    if(page_index != undefined){
+</xsl:text>
+          <xsl:text>        page_node = hmitree_paths[page_index];
+</xsl:text>
+          <xsl:text>    }else{
+</xsl:text>
+          <xsl:text>        page_node = "";
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>    apply_hmi_value(page_node_local_index, page_node);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    jumps_need_update = true;
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    requestHMIAnimation();
+</xsl:text>
+          <xsl:text>    jump_history.push([page_name, page_index]);
+</xsl:text>
+          <xsl:text>    if(jump_history.length &gt; 42)
+</xsl:text>
+          <xsl:text>        jump_history.shift();
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    apply_hmi_value(current_page_var_index, page_index == undefined
+</xsl:text>
+          <xsl:text>        ? page_name
+</xsl:text>
+          <xsl:text>        : page_name + "@" + hmitree_paths[page_index]);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    return true;
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function switch_visible_page(page_name) {
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    let old_desc = page_desc[current_visible_page];
+</xsl:text>
+          <xsl:text>    let new_desc = page_desc[page_name];
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    if(old_desc){
+</xsl:text>
+          <xsl:text>        for(let eltid in old_desc.required_detachables){
+</xsl:text>
+          <xsl:text>            if(!(eltid in new_desc.required_detachables)){
+</xsl:text>
+          <xsl:text>                let [element, parent] = old_desc.required_detachables[eltid];
+</xsl:text>
+          <xsl:text>                parent.removeChild(element);
+</xsl:text>
+          <xsl:text>            }
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>        for(let eltid in new_desc.required_detachables){
+</xsl:text>
+          <xsl:text>            if(!(eltid in old_desc.required_detachables)){
+</xsl:text>
+          <xsl:text>                let [element, parent] = new_desc.required_detachables[eltid];
+</xsl:text>
+          <xsl:text>                parent.appendChild(element);
+</xsl:text>
+          <xsl:text>            }
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>    }else{
+</xsl:text>
+          <xsl:text>        for(let eltid in new_desc.required_detachables){
+</xsl:text>
+          <xsl:text>            let [element, parent] = new_desc.required_detachables[eltid];
+</xsl:text>
+          <xsl:text>            parent.appendChild(element);
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    svg_root.setAttribute('viewBox',new_desc.bbox.join(" "));
+</xsl:text>
+          <xsl:text>    current_visible_page = page_name;
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>/* From https://jsfiddle.net/ibowankenobi/1mmh7rs6/6/ */
+</xsl:text>
+          <xsl:text>function getAbsoluteCTM(element){
+</xsl:text>
+          <xsl:text>	var height = svg_root.height.baseVal.value,
+</xsl:text>
+          <xsl:text>		width = svg_root.width.baseVal.value,
+</xsl:text>
+          <xsl:text>		viewBoxRect = svg_root.viewBox.baseVal,
+</xsl:text>
+          <xsl:text>		vHeight = viewBoxRect.height,
+</xsl:text>
+          <xsl:text>		vWidth = viewBoxRect.width;
+</xsl:text>
+          <xsl:text>	if(!vWidth || !vHeight){
+</xsl:text>
+          <xsl:text>		return element.getCTM();
+</xsl:text>
+          <xsl:text>	}
+</xsl:text>
+          <xsl:text>	var sH = height/vHeight,
+</xsl:text>
+          <xsl:text>		sW = width/vWidth,
+</xsl:text>
+          <xsl:text>		matrix = svg_root.createSVGMatrix();
+</xsl:text>
+          <xsl:text>	matrix.a = sW;
+</xsl:text>
+          <xsl:text>	matrix.d = sH
+</xsl:text>
+          <xsl:text>	var realCTM = element.getCTM().multiply(matrix.inverse());
+</xsl:text>
+          <xsl:text>	realCTM.e = realCTM.e/sW + viewBoxRect.x;
+</xsl:text>
+          <xsl:text>	realCTM.f = realCTM.f/sH + viewBoxRect.y;
+</xsl:text>
+          <xsl:text>	return realCTM;
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function apply_reference_frames(){
+</xsl:text>
+          <xsl:text>    const matches = svg_root.querySelectorAll("g[svghmi_x_offset]");
+</xsl:text>
+          <xsl:text>    matches.forEach((group) =&gt; {
+</xsl:text>
+          <xsl:text>        let [x,y] = ["x", "y"].map((axis) =&gt; Number(group.getAttribute("svghmi_"+axis+"_offset")));
+</xsl:text>
+          <xsl:text>        let ctm = getAbsoluteCTM(group);
+</xsl:text>
+          <xsl:text>        // zero translation part of CTM
+</xsl:text>
+          <xsl:text>        // to only apply rotation/skewing to offset vector
+</xsl:text>
+          <xsl:text>        ctm.e = 0;
+</xsl:text>
+          <xsl:text>        ctm.f = 0;
+</xsl:text>
+          <xsl:text>        let invctm = ctm.inverse();
+</xsl:text>
+          <xsl:text>        let vect = new DOMPoint(x, y);
+</xsl:text>
+          <xsl:text>        let newvect = vect.matrixTransform(invctm);
+</xsl:text>
+          <xsl:text>        let transform = svg_root.createSVGTransform();
+</xsl:text>
+          <xsl:text>        transform.setTranslate(newvect.x, newvect.y);
+</xsl:text>
+          <xsl:text>        group.transform.baseVal.appendItem(transform);
+</xsl:text>
+          <xsl:text>        ["x", "y"].forEach((axis) =&gt; group.removeAttribute("svghmi_"+axis+"_offset"));
+</xsl:text>
+          <xsl:text>    });
+</xsl:text>
+          <xsl:text>}
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>// prepare SVG
+</xsl:text>
+          <xsl:text>apply_reference_frames();
+</xsl:text>
+          <xsl:text>init_widgets();
+</xsl:text>
+          <xsl:text>detach_detachables();
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>// show main page
+</xsl:text>
+          <xsl:text>switch_page(default_page);
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>var reconnect_delay = 0;
+</xsl:text>
+          <xsl:text>var periodic_reconnect_timer;
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>// Once connection established
+</xsl:text>
+          <xsl:text>function ws_onopen(evt) {
+</xsl:text>
+          <xsl:text>    // Work around memory leak with websocket on QtWebEngine
+</xsl:text>
+          <xsl:text>    // reconnect every hour to force deallocate websocket garbage
+</xsl:text>
+          <xsl:text>    if(window.navigator.userAgent.includes("QtWebEngine")){
+</xsl:text>
+          <xsl:text>        if(periodic_reconnect_timer){
+</xsl:text>
+          <xsl:text>            window.clearTimeout(periodic_reconnect_timer);
+</xsl:text>
+          <xsl:text>        }
+</xsl:text>
+          <xsl:text>        periodic_reconnect_timer = window.setTimeout(() =&gt; {
+</xsl:text>
+          <xsl:text>            ws.close();
+</xsl:text>
+          <xsl:text>            periodic_reconnect_timer = null;
+</xsl:text>
+          <xsl:text>        }, 3600000);
+</xsl:text>
+          <xsl:text>    }
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    // forget subscriptions remotely
+</xsl:text>
+          <xsl:text>    send_reset();
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    // forget earlier subscriptions locally
+</xsl:text>
+          <xsl:text>    reset_subscription_periods();
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    // update PLC about subscriptions and current page
+</xsl:text>
+          <xsl:text>    switch_page();
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>    // at first try reconnect immediately
+</xsl:text>
+          <xsl:text>    reconnect_delay = 1;
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>function ws_onclose(evt) {
+</xsl:text>
+          <xsl:text>    console.log("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+" Reload in "+reconnect_delay+"ms.");
+</xsl:text>
+          <xsl:text>    ws = null;
+</xsl:text>
+          <xsl:text>    // reconect
+</xsl:text>
+          <xsl:text>    // TODO : add visible notification while waiting for reload
+</xsl:text>
+          <xsl:text>    window.setTimeout(create_ws, reconnect_delay);
+</xsl:text>
+          <xsl:text>    reconnect_delay += 500;
+</xsl:text>
+          <xsl:text>};
+</xsl:text>
+          <xsl:text>
+</xsl:text>
+          <xsl:text>var ws_url =
 </xsl:text>
           <xsl:text>    window.location.href.replace(/^http(s?:\/\/[^\/]*)\/.*$/, 'ws$1/ws')
 </xsl:text>
@@ -11297,1131 +12499,23 @@
 </xsl:text>
           <xsl:text>
 </xsl:text>
-          <xsl:text>var ws = new WebSocket(ws_url);
-</xsl:text>
-          <xsl:text>ws.binaryType = 'arraybuffer';
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>const dvgetters = {
-</xsl:text>
-          <xsl:text>    INT: (dv,offset) =&gt; [dv.getInt16(offset, true), 2],
-</xsl:text>
-          <xsl:text>    BOOL: (dv,offset) =&gt; [dv.getInt8(offset, true), 1],
-</xsl:text>
-          <xsl:text>    NODE: (dv,offset) =&gt; [dv.getInt8(offset, true), 1],
-</xsl:text>
-          <xsl:text>    REAL: (dv,offset) =&gt; [dv.getFloat32(offset, true), 4],
-</xsl:text>
-          <xsl:text>    STRING: (dv, offset) =&gt; {
-</xsl:text>
-          <xsl:text>        const size = dv.getInt8(offset);
-</xsl:text>
-          <xsl:text>        return [
-</xsl:text>
-          <xsl:text>            String.fromCharCode.apply(null, new Uint8Array(
-</xsl:text>
-          <xsl:text>                dv.buffer, /* original buffer */
-</xsl:text>
-          <xsl:text>                offset + 1, /* string starts after size*/
-</xsl:text>
-          <xsl:text>                size /* size of string */
-</xsl:text>
-          <xsl:text>            )), size + 1]; /* total increment */
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>};
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>// Called on requestAnimationFrame, modifies DOM
-</xsl:text>
-          <xsl:text>var requestAnimationFrameID = null;
-</xsl:text>
-          <xsl:text>function animate() {
-</xsl:text>
-          <xsl:text>    let rearm = true;
-</xsl:text>
-          <xsl:text>    do{
-</xsl:text>
-          <xsl:text>        if(page_fading == "pending" || page_fading == "forced"){
-</xsl:text>
-          <xsl:text>            if(page_fading == "pending")
-</xsl:text>
-          <xsl:text>                svg_root.classList.add("fade-out-page");
-</xsl:text>
-          <xsl:text>            page_fading = "in_progress";
-</xsl:text>
-          <xsl:text>            if(page_fading_args.length)
-</xsl:text>
-          <xsl:text>                setTimeout(function(){
-</xsl:text>
-          <xsl:text>                    switch_page(...page_fading_args);
-</xsl:text>
-          <xsl:text>                },1);
-</xsl:text>
-          <xsl:text>            break;
-</xsl:text>
-          <xsl:text>        }
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>        // Do the page swith if pending
-</xsl:text>
-          <xsl:text>        if(page_switch_in_progress){
-</xsl:text>
-          <xsl:text>            if(current_subscribed_page != current_visible_page){
-</xsl:text>
-          <xsl:text>                switch_visible_page(current_subscribed_page);
-</xsl:text>
-          <xsl:text>            }
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>            page_switch_in_progress = false;
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>            if(page_fading == "in_progress"){
-</xsl:text>
-          <xsl:text>                svg_root.classList.remove("fade-out-page");
-</xsl:text>
-          <xsl:text>                page_fading = "off";
-</xsl:text>
-          <xsl:text>            }
-</xsl:text>
-          <xsl:text>        }
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>        if(jumps_need_update) update_jumps();
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>        pending_widget_animates.forEach(widget =&gt; widget._animate());
-</xsl:text>
-          <xsl:text>        pending_widget_animates = [];
-</xsl:text>
-          <xsl:text>        rearm = false;
-</xsl:text>
-          <xsl:text>    } while(0);
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    requestAnimationFrameID = null;
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    if(rearm) requestHMIAnimation();
+          <xsl:text>function create_ws(){
+</xsl:text>
+          <xsl:text>    ws = new WebSocket(ws_url);
+</xsl:text>
+          <xsl:text>    ws.binaryType = 'arraybuffer';
+</xsl:text>
+          <xsl:text>    ws.onmessage = ws_onmessage;
+</xsl:text>
+          <xsl:text>    ws.onclose = ws_onclose;
+</xsl:text>
+          <xsl:text>    ws.onopen = ws_onopen;
 </xsl:text>
           <xsl:text>}
 </xsl:text>
           <xsl:text>
 </xsl:text>
-          <xsl:text>function requestHMIAnimation() {
-</xsl:text>
-          <xsl:text>    if(requestAnimationFrameID == null){
-</xsl:text>
-          <xsl:text>        requestAnimationFrameID = window.requestAnimationFrame(animate);
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>// Message reception handler
-</xsl:text>
-          <xsl:text>// Hash is verified and HMI values updates resulting from binary parsing
-</xsl:text>
-          <xsl:text>// are stored until browser can compute next frame, DOM is left untouched
-</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>    try {
-</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>                throw new Error("Hash doesn't match");
-</xsl:text>
-          <xsl:text>            };
-</xsl:text>
-          <xsl:text>            i++;
-</xsl:text>
-          <xsl:text>        };
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>        while(i &lt; data.byteLength){
-</xsl:text>
-          <xsl:text>            let index = dv.getUint32(i, true);
-</xsl:text>
-          <xsl:text>            i += 4;
-</xsl:text>
-          <xsl:text>            let iectype = hmitree_types[index];
-</xsl:text>
-          <xsl:text>            if(iectype != undefined){
-</xsl:text>
-          <xsl:text>                let dvgetter = dvgetters[iectype];
-</xsl:text>
-          <xsl:text>                let [value, bytesize] = dvgetter(dv,i);
-</xsl:text>
-          <xsl:text>                dispatch_value(index, value);
-</xsl:text>
-          <xsl:text>                i += bytesize;
-</xsl:text>
-          <xsl:text>            } else {
-</xsl:text>
-          <xsl:text>                throw new Error("Unknown index "+index);
-</xsl:text>
-          <xsl:text>            }
-</xsl:text>
-          <xsl:text>        };
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>        // register for rendering on next frame, since there are updates
-</xsl:text>
-          <xsl:text>    } catch(err) {
-</xsl:text>
-          <xsl:text>        // 1003 is for "Unsupported Data"
-</xsl:text>
-          <xsl:text>        // ws.close(1003, err.message);
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>        // TODO : remove debug alert ?
-</xsl:text>
-          <xsl:text>        alert("Error : "+err.message+"\nHMI 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>};
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>hmi_hash_u8 = new Uint8Array(hmi_hash);
-</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([hmi_hash_u8].concat(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: (number) =&gt; new Int16Array([number]),
-</xsl:text>
-          <xsl:text>    BOOL: (truth) =&gt; new Int16Array([truth]),
-</xsl:text>
-          <xsl:text>    NODE: (truth) =&gt; new Int16Array([truth]),
-</xsl:text>
-          <xsl:text>    REAL: (number) =&gt; new Float32Array([number]),
-</xsl:text>
-          <xsl:text>    STRING: (str) =&gt; {
-</xsl:text>
-          <xsl:text>        // beremiz default string max size is 128
-</xsl:text>
-          <xsl:text>        str = str.slice(0,128);
-</xsl:text>
-          <xsl:text>        binary = new Uint8Array(str.length + 1);
-</xsl:text>
-          <xsl:text>        binary[0] = str.length;
-</xsl:text>
-          <xsl:text>        for(let i = 0; i &lt; str.length; i++){
-</xsl:text>
-          <xsl:text>            binary[i+1] = str.charCodeAt(i);
-</xsl:text>
-          <xsl:text>        }
-</xsl:text>
-          <xsl:text>        return binary;
-</xsl:text>
-          <xsl:text>    }
-</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>var subscriptions = [];
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function subscribers(index) {
-</xsl:text>
-          <xsl:text>    let entry = subscriptions[index];
-</xsl:text>
-          <xsl:text>    let res;
-</xsl:text>
-          <xsl:text>    if(entry == undefined){
-</xsl:text>
-          <xsl:text>        res = new Set();
-</xsl:text>
-          <xsl:text>        subscriptions[index] = [res,0];
-</xsl:text>
-          <xsl:text>    }else{
-</xsl:text>
-          <xsl:text>        [res, _ign] = entry;
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>    return res
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function get_subscription_period(index) {
-</xsl:text>
-          <xsl:text>    let entry = subscriptions[index];
-</xsl:text>
-          <xsl:text>    if(entry == undefined)
-</xsl:text>
-          <xsl:text>        return 0;
-</xsl:text>
-          <xsl:text>    let [_ign, period] = entry;
-</xsl:text>
-          <xsl:text>    return period;
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function set_subscription_period(index, period) {
-</xsl:text>
-          <xsl:text>    let entry = subscriptions[index];
-</xsl:text>
-          <xsl:text>    if(entry == undefined){
-</xsl:text>
-          <xsl:text>        subscriptions[index] = [new Set(), period];
-</xsl:text>
-          <xsl:text>    } else {
-</xsl:text>
-          <xsl:text>        entry[1] = period;
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>if(has_watchdog){
-</xsl:text>
-          <xsl:text>    // artificially subscribe the watchdog widget to "/heartbeat" hmi variable
-</xsl:text>
-          <xsl:text>    // Since dispatch directly calls change_hmi_value,
-</xsl:text>
-          <xsl:text>    // PLC will periodically send variable at given frequency
-</xsl:text>
-          <xsl:text>    subscribers(heartbeat_index).add({
-</xsl:text>
-          <xsl:text>        /* type: "Watchdog", */
-</xsl:text>
-          <xsl:text>        frequency: 1,
-</xsl:text>
-          <xsl:text>        indexes: [heartbeat_index],
-</xsl:text>
-          <xsl:text>        new_hmi_value: function(index, value, oldval) {
-</xsl:text>
-          <xsl:text>            apply_hmi_value(heartbeat_index, value+1);
-</xsl:text>
-          <xsl:text>        }
-</xsl:text>
-          <xsl:text>    });
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>var page_fading = "off";
-</xsl:text>
-          <xsl:text>var page_fading_args = "off";
-</xsl:text>
-          <xsl:text>function fading_page_switch(...args){
-</xsl:text>
-          <xsl:text>    if(page_fading == "in_progress")
-</xsl:text>
-          <xsl:text>        page_fading = "forced";
-</xsl:text>
-          <xsl:text>    else
-</xsl:text>
-          <xsl:text>        page_fading = "pending";
-</xsl:text>
-          <xsl:text>    page_fading_args = args;
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    requestHMIAnimation();
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>document.body.style.backgroundColor = "black";
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>// subscribe to per instance current page hmi variable
-</xsl:text>
-          <xsl:text>// PLC must prefix page name with "!" for page switch to happen
-</xsl:text>
-          <xsl:text>subscribers(current_page_var_index).add({
-</xsl:text>
-          <xsl:text>    frequency: 1,
-</xsl:text>
-          <xsl:text>    indexes: [current_page_var_index],
-</xsl:text>
-          <xsl:text>    new_hmi_value: function(index, value, oldval) {
-</xsl:text>
-          <xsl:text>        if(value.startsWith("!"))
-</xsl:text>
-          <xsl:text>            fading_page_switch(value.slice(1));
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>});
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function svg_text_to_multiline(elt) {
-</xsl:text>
-          <xsl:text>    return(Array.prototype.map.call(elt.children, x=&gt;x.textContent).join("\n")); 
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function multiline_to_svg_text(elt, str, blank) {
-</xsl:text>
-          <xsl:text>    str.split('\n').map((line,i) =&gt; {elt.children[i].textContent = blank?"":line;});
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function switch_langnum(langnum) {
-</xsl:text>
-          <xsl:text>    langnum = Math.max(0, Math.min(langs.length - 1, langnum));
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    for (let translation of translations) {
-</xsl:text>
-          <xsl:text>        let [objs, msgs] = translation;
-</xsl:text>
-          <xsl:text>        let msg = msgs[langnum];
-</xsl:text>
-          <xsl:text>        for (let obj of objs) {
-</xsl:text>
-          <xsl:text>            multiline_to_svg_text(obj, msg);
-</xsl:text>
-          <xsl:text>            obj.setAttribute("lang",langnum);
-</xsl:text>
-          <xsl:text>        }
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>    return langnum;
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>// backup original texts
-</xsl:text>
-          <xsl:text>for (let translation of translations) {
-</xsl:text>
-          <xsl:text>    let [objs, msgs] = translation;
-</xsl:text>
-          <xsl:text>    msgs.unshift(svg_text_to_multiline(objs[0])); 
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>var lang_local_index = hmi_local_index("lang");
-</xsl:text>
-          <xsl:text>var langcode_local_index = hmi_local_index("lang_code");
-</xsl:text>
-          <xsl:text>var langname_local_index = hmi_local_index("lang_name");
-</xsl:text>
-          <xsl:text>subscribers(lang_local_index).add({
-</xsl:text>
-          <xsl:text>    indexes: [lang_local_index],
-</xsl:text>
-          <xsl:text>    new_hmi_value: function(index, value, oldval) {
-</xsl:text>
-          <xsl:text>        let current_lang =  switch_langnum(value);
-</xsl:text>
-          <xsl:text>        let [langname,langcode] = langs[current_lang];
-</xsl:text>
-          <xsl:text>        apply_hmi_value(langcode_local_index, langcode);
-</xsl:text>
-          <xsl:text>        apply_hmi_value(langname_local_index, langname);
-</xsl:text>
-          <xsl:text>        switch_page();
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>});
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>// returns en_US, fr_FR or en_UK depending on selected language
-</xsl:text>
-          <xsl:text>function get_current_lang_code(){
-</xsl:text>
-          <xsl:text>    return cache[langcode_local_index];
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function setup_lang(){
-</xsl:text>
-          <xsl:text>    let current_lang = cache[lang_local_index];
-</xsl:text>
-          <xsl:text>    let new_lang = switch_langnum(current_lang);
-</xsl:text>
-          <xsl:text>    if(current_lang != new_lang){
-</xsl:text>
-          <xsl:text>        apply_hmi_value(lang_local_index, new_lang);
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>setup_lang();
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function update_subscriptions() {
-</xsl:text>
-          <xsl:text>    let delta = [];
-</xsl:text>
-          <xsl:text>    for(let index in subscriptions){
-</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 = get_subscription_period(index);
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>        // subscribing with a zero period is unsubscribing
-</xsl:text>
-          <xsl:text>        let new_period = 0;
-</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>                let wf = widget.frequency;
-</xsl:text>
-          <xsl:text>                if(wf != undefined &amp;&amp; maxfreq &lt; wf)
-</xsl:text>
-          <xsl:text>                    maxfreq = wf;
-</xsl:text>
-          <xsl:text>            }
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>            if(maxfreq != 0)
-</xsl:text>
-          <xsl:text>                new_period = 1000/maxfreq;
-</xsl:text>
-          <xsl:text>        }
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>        if(previous_period != new_period) {
-</xsl:text>
-          <xsl:text>            set_subscription_period(index, new_period);
-</xsl:text>
-          <xsl:text>            if(index &lt;= last_remote_index){
-</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>    send_blob(delta);
-</xsl:text>
-          <xsl:text>};
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function send_hmi_value(index, value) {
-</xsl:text>
-          <xsl:text>    if(index &gt; last_remote_index){
-</xsl:text>
-          <xsl:text>        dispatch_value(index, value);
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>        if(persistent_indexes.has(index)){
-</xsl:text>
-          <xsl:text>            let varname = persistent_indexes.get(index);
-</xsl:text>
-          <xsl:text>            document.cookie = varname+"="+value+"; max-age=3153600000";
-</xsl:text>
-          <xsl:text>        }
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>        return;
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    let iectype = hmitree_types[index];
-</xsl:text>
-          <xsl:text>    let tobinary = typedarray_types[iectype];
-</xsl:text>
-          <xsl:text>    send_blob([
-</xsl:text>
-          <xsl:text>        new Uint8Array([0]),  /* setval = 0 */
-</xsl:text>
-          <xsl:text>        new Uint32Array([index]),
-</xsl:text>
-          <xsl:text>        tobinary(value)]);
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    // DON'T DO THAT unless read_iterator in svghmi.c modifies wbuf as well, not only rbuf
-</xsl:text>
-          <xsl:text>    // cache[index] = value;
-</xsl:text>
-          <xsl:text>};
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function apply_hmi_value(index, new_val) {
-</xsl:text>
-          <xsl:text>    // Similarly to previous comment, taking decision to update based 
-</xsl:text>
-          <xsl:text>    // on cache content is bad and can lead to inconsistency
-</xsl:text>
-          <xsl:text>    /*let old_val = cache[index];*/
-</xsl:text>
-          <xsl:text>    if(new_val != undefined /*&amp;&amp; old_val != new_val*/)
-</xsl:text>
-          <xsl:text>        send_hmi_value(index, new_val);
-</xsl:text>
-          <xsl:text>    return new_val;
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>const quotes = {"'":null, '"':null};
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function eval_operation_string(old_val, opstr) {
-</xsl:text>
-          <xsl:text>    let op = opstr[0];
-</xsl:text>
-          <xsl:text>    let given_val;
-</xsl:text>
-          <xsl:text>    if(opstr.length &lt; 2) 
-</xsl:text>
-          <xsl:text>        return undefined;
-</xsl:text>
-          <xsl:text>    if(opstr[1] in quotes){
-</xsl:text>
-          <xsl:text>        if(opstr.length &lt; 3) 
-</xsl:text>
-          <xsl:text>            return undefined;
-</xsl:text>
-          <xsl:text>        if(opstr[opstr.length-1] == opstr[1]){
-</xsl:text>
-          <xsl:text>            given_val = opstr.slice(2,opstr.length-1);
-</xsl:text>
-          <xsl:text>        }
-</xsl:text>
-          <xsl:text>    } else {
-</xsl:text>
-          <xsl:text>        given_val = Number(opstr.slice(1));
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>    let new_val;
-</xsl:text>
-          <xsl:text>    switch(op){
-</xsl:text>
-          <xsl:text>      case "=":
-</xsl:text>
-          <xsl:text>        new_val = given_val;
-</xsl:text>
-          <xsl:text>        break;
-</xsl:text>
-          <xsl:text>      case "+":
-</xsl:text>
-          <xsl:text>        new_val = old_val + given_val;
-</xsl:text>
-          <xsl:text>        break;
-</xsl:text>
-          <xsl:text>      case "-":
-</xsl:text>
-          <xsl:text>        new_val = old_val - given_val;
-</xsl:text>
-          <xsl:text>        break;
-</xsl:text>
-          <xsl:text>      case "*":
-</xsl:text>
-          <xsl:text>        new_val = old_val * given_val;
-</xsl:text>
-          <xsl:text>        break;
-</xsl:text>
-          <xsl:text>      case "/":
-</xsl:text>
-          <xsl:text>        new_val = old_val / given_val;
-</xsl:text>
-          <xsl:text>        break;
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>    return new_val;
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>var current_visible_page;
-</xsl:text>
-          <xsl:text>var current_subscribed_page;
-</xsl:text>
-          <xsl:text>var current_page_index;
-</xsl:text>
-          <xsl:text>var page_node_local_index = hmi_local_index("page_node");
-</xsl:text>
-          <xsl:text>var page_switch_in_progress = false;
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function toggleFullscreen() {
-</xsl:text>
-          <xsl:text>  let elem = document.documentElement;
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>  if (!document.fullscreenElement) {
-</xsl:text>
-          <xsl:text>    elem.requestFullscreen().catch(err =&gt; {
-</xsl:text>
-          <xsl:text>      console.log("Error attempting to enable full-screen mode: "+err.message+" ("+err.name+")");
-</xsl:text>
-          <xsl:text>    });
-</xsl:text>
-          <xsl:text>  } else {
-</xsl:text>
-          <xsl:text>    document.exitFullscreen();
-</xsl:text>
-          <xsl:text>  }
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function prepare_svg() {
-</xsl:text>
-          <xsl:text>    // prevents context menu from appearing on right click and long touch
-</xsl:text>
-          <xsl:text>    document.body.addEventListener('contextmenu', e =&gt; {
-</xsl:text>
-          <xsl:text>        toggleFullscreen();
-</xsl:text>
-          <xsl:text>        e.preventDefault();
-</xsl:text>
-          <xsl:text>    });
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    for(let eltid in detachable_elements){
-</xsl:text>
-          <xsl:text>        let [element,parent] = detachable_elements[eltid];
-</xsl:text>
-          <xsl:text>        parent.removeChild(element);
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>};
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function switch_page(page_name, page_index) {
-</xsl:text>
-          <xsl:text>    if(page_switch_in_progress){
-</xsl:text>
-          <xsl:text>        /* page switch already going */
-</xsl:text>
-          <xsl:text>        /* TODO LOG ERROR */
-</xsl:text>
-          <xsl:text>        return false;
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>    page_switch_in_progress = true;
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    if(page_name == undefined)
-</xsl:text>
-          <xsl:text>        page_name = current_subscribed_page;
-</xsl:text>
-          <xsl:text>    else if(page_index == undefined){
-</xsl:text>
-          <xsl:text>        [page_name, page_index] = page_name.split('@')
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    let old_desc = page_desc[current_subscribed_page];
-</xsl:text>
-          <xsl:text>    let new_desc = page_desc[page_name];
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    if(new_desc == undefined){
-</xsl:text>
-          <xsl:text>        /* TODO LOG ERROR */
-</xsl:text>
-          <xsl:text>        return false;
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    if(page_index == undefined)
-</xsl:text>
-          <xsl:text>        page_index = new_desc.page_index;
-</xsl:text>
-          <xsl:text>    else if(typeof(page_index) == "string") {
-</xsl:text>
-          <xsl:text>        let hmitree_node = hmitree_nodes[page_index];
-</xsl:text>
-          <xsl:text>        if(hmitree_node !== undefined){
-</xsl:text>
-          <xsl:text>            let [int_index, hmiclass] = hmitree_node;
-</xsl:text>
-          <xsl:text>            if(hmiclass == new_desc.page_class)
-</xsl:text>
-          <xsl:text>                page_index = int_index;
-</xsl:text>
-          <xsl:text>            else
-</xsl:text>
-          <xsl:text>                page_index = new_desc.page_index;
-</xsl:text>
-          <xsl:text>        } else {
-</xsl:text>
-          <xsl:text>            page_index = new_desc.page_index;
-</xsl:text>
-          <xsl:text>        }
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    if(old_desc){
-</xsl:text>
-          <xsl:text>        old_desc.widgets.map(([widget,relativeness])=&gt;widget.unsub());
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>    const new_offset = page_index == undefined ? 0 : page_index - new_desc.page_index;
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    const container_id = page_name + (page_index != undefined ? page_index : "");
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    new_desc.widgets.map(([widget,relativeness])=&gt;widget.sub(new_offset,relativeness,container_id));
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    update_subscriptions();
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    current_subscribed_page = page_name;
-</xsl:text>
-          <xsl:text>    current_page_index = page_index;
-</xsl:text>
-          <xsl:text>    let page_node;
-</xsl:text>
-          <xsl:text>    if(page_index != undefined){
-</xsl:text>
-          <xsl:text>        page_node = hmitree_paths[page_index];
-</xsl:text>
-          <xsl:text>    }else{
-</xsl:text>
-          <xsl:text>        page_node = "";
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>    apply_hmi_value(page_node_local_index, page_node);
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    jumps_need_update = true;
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    requestHMIAnimation();
-</xsl:text>
-          <xsl:text>    jump_history.push([page_name, page_index]);
-</xsl:text>
-          <xsl:text>    if(jump_history.length &gt; 42)
-</xsl:text>
-          <xsl:text>        jump_history.shift();
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    apply_hmi_value(current_page_var_index, page_index == undefined
-</xsl:text>
-          <xsl:text>        ? page_name
-</xsl:text>
-          <xsl:text>        : page_name + "@" + hmitree_paths[page_index]);
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    return true;
-</xsl:text>
-          <xsl:text>};
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function switch_visible_page(page_name) {
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    let old_desc = page_desc[current_visible_page];
-</xsl:text>
-          <xsl:text>    let new_desc = page_desc[page_name];
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    if(old_desc){
-</xsl:text>
-          <xsl:text>        for(let eltid in old_desc.required_detachables){
-</xsl:text>
-          <xsl:text>            if(!(eltid in new_desc.required_detachables)){
-</xsl:text>
-          <xsl:text>                let [element, parent] = old_desc.required_detachables[eltid];
-</xsl:text>
-          <xsl:text>                parent.removeChild(element);
-</xsl:text>
-          <xsl:text>            }
-</xsl:text>
-          <xsl:text>        }
-</xsl:text>
-          <xsl:text>        for(let eltid in new_desc.required_detachables){
-</xsl:text>
-          <xsl:text>            if(!(eltid in old_desc.required_detachables)){
-</xsl:text>
-          <xsl:text>                let [element, parent] = new_desc.required_detachables[eltid];
-</xsl:text>
-          <xsl:text>                parent.appendChild(element);
-</xsl:text>
-          <xsl:text>            }
-</xsl:text>
-          <xsl:text>        }
-</xsl:text>
-          <xsl:text>    }else{
-</xsl:text>
-          <xsl:text>        for(let eltid in new_desc.required_detachables){
-</xsl:text>
-          <xsl:text>            let [element, parent] = new_desc.required_detachables[eltid];
-</xsl:text>
-          <xsl:text>            parent.appendChild(element);
-</xsl:text>
-          <xsl:text>        }
-</xsl:text>
-          <xsl:text>    }
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>    svg_root.setAttribute('viewBox',new_desc.bbox.join(" "));
-</xsl:text>
-          <xsl:text>    current_visible_page = page_name;
-</xsl:text>
-          <xsl:text>};
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>/* From https://jsfiddle.net/ibowankenobi/1mmh7rs6/6/ */
-</xsl:text>
-          <xsl:text>function getAbsoluteCTM(element){
-</xsl:text>
-          <xsl:text>	var height = svg_root.height.baseVal.value,
-</xsl:text>
-          <xsl:text>		width = svg_root.width.baseVal.value,
-</xsl:text>
-          <xsl:text>		viewBoxRect = svg_root.viewBox.baseVal,
-</xsl:text>
-          <xsl:text>		vHeight = viewBoxRect.height,
-</xsl:text>
-          <xsl:text>		vWidth = viewBoxRect.width;
-</xsl:text>
-          <xsl:text>	if(!vWidth || !vHeight){
-</xsl:text>
-          <xsl:text>		return element.getCTM();
-</xsl:text>
-          <xsl:text>	}
-</xsl:text>
-          <xsl:text>	var sH = height/vHeight,
-</xsl:text>
-          <xsl:text>		sW = width/vWidth,
-</xsl:text>
-          <xsl:text>		matrix = svg_root.createSVGMatrix();
-</xsl:text>
-          <xsl:text>	matrix.a = sW;
-</xsl:text>
-          <xsl:text>	matrix.d = sH
-</xsl:text>
-          <xsl:text>	var realCTM = element.getCTM().multiply(matrix.inverse());
-</xsl:text>
-          <xsl:text>	realCTM.e = realCTM.e/sW + viewBoxRect.x;
-</xsl:text>
-          <xsl:text>	realCTM.f = realCTM.f/sH + viewBoxRect.y;
-</xsl:text>
-          <xsl:text>	return realCTM;
-</xsl:text>
-          <xsl:text>}
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>function apply_reference_frames(){
-</xsl:text>
-          <xsl:text>    const matches = svg_root.querySelectorAll("g[svghmi_x_offset]");
-</xsl:text>
-          <xsl:text>    matches.forEach((group) =&gt; {
-</xsl:text>
-          <xsl:text>        let [x,y] = ["x", "y"].map((axis) =&gt; Number(group.getAttribute("svghmi_"+axis+"_offset")));
-</xsl:text>
-          <xsl:text>        let ctm = getAbsoluteCTM(group);
-</xsl:text>
-          <xsl:text>        // zero translation part of CTM
-</xsl:text>
-          <xsl:text>        // to only apply rotation/skewing to offset vector
-</xsl:text>
-          <xsl:text>        ctm.e = 0;
-</xsl:text>
-          <xsl:text>        ctm.f = 0;
-</xsl:text>
-          <xsl:text>        let invctm = ctm.inverse();
-</xsl:text>
-          <xsl:text>        let vect = new DOMPoint(x, y);
-</xsl:text>
-          <xsl:text>        let newvect = vect.matrixTransform(invctm);
-</xsl:text>
-          <xsl:text>        let transform = svg_root.createSVGTransform();
-</xsl:text>
-          <xsl:text>        transform.setTranslate(newvect.x, newvect.y);
-</xsl:text>
-          <xsl:text>        group.transform.baseVal.appendItem(transform);
-</xsl:text>
-          <xsl:text>        ["x", "y"].forEach((axis) =&gt; group.removeAttribute("svghmi_"+axis+"_offset"));
-</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>    apply_reference_frames();
-</xsl:text>
-          <xsl:text>    init_widgets();
-</xsl:text>
-          <xsl:text>    send_reset();
-</xsl:text>
-          <xsl:text>    // show main page
-</xsl:text>
-          <xsl:text>    prepare_svg();
-</xsl:text>
-          <xsl:text>    switch_page(default_page);
-</xsl:text>
-          <xsl:text>};
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>ws.onclose = function (evt) {
-</xsl:text>
-          <xsl:text>    // TODO : add visible notification while waiting for reload
-</xsl:text>
-          <xsl:text>    console.log("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+" Reload in 10s.");
-</xsl:text>
-          <xsl:text>    // TODO : re-enable auto reload when not in debug
-</xsl:text>
-          <xsl:text>    //window.setTimeout(() =&gt; location.reload(true), 10000);
-</xsl:text>
-          <xsl:text>    alert("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+".");
-</xsl:text>
-          <xsl:text>
-</xsl:text>
-          <xsl:text>};
+          <xsl:text>create_ws()
 </xsl:text>
           <xsl:text>
 </xsl:text>