107   <xsl:template name="scripts">

   108     <xsl:text>var hmi_index = {

   109 </xsl:text>

   110     <xsl:variable name="svg" select="/"/>

   111     <xsl:for-each select="$indexed_hmitree/*">

   112       <xsl:value-of select="@index"/>

   113       <xsl:text>: {

   114 </xsl:text>

   115       <xsl:text>    name: "</xsl:text>

   116       <xsl:value-of select="@name"/>

   117       <xsl:text>",

   118 </xsl:text>

   119       <xsl:text>    hmipath: "</xsl:text>

   120       <xsl:value-of select="@hmipath"/>

   121       <xsl:text>"

   122 </xsl:text>

   123       <xsl:text>    ids: [

   124 </xsl:text>

   125       <xsl:variable name="hmipath" select="@hmipath"/>

   126       <xsl:for-each select="$svg//*[substring-after(@inkscape:label,'@') = $hmipath]">

   127         <xsl:text>        "</xsl:text>

   128         <xsl:value-of select="@id"/>

   129         <xsl:text>"</xsl:text>

   130         <xsl:if test="position()!=last()">

   131           <xsl:text>,</xsl:text>

   132         </xsl:if>

   133         <xsl:text>

   134 </xsl:text>

   135       </xsl:for-each>

   136       <xsl:text>    ]

   137 </xsl:text>

   138       <xsl:text>}</xsl:text>

   139       <xsl:if test="position()!=last()">

   140         <xsl:text>,</xsl:text>

   141       </xsl:if>

   142       <xsl:text>

   143 </xsl:text>

   144     </xsl:for-each>

   145     <xsl:text>}

   146 </xsl:text>

   147     <xsl:text>

   148 </xsl:text>

   149     <xsl:text>var page_desc = {

   150 </xsl:text>

   151     <xsl:for-each select="//*[starts-with(@inkscape:label,'HMI:')]">

   152       <xsl:value-of select="@inkscape:label"/>

   153       <xsl:text>

   154 </xsl:text>

   155       <xsl:variable name="ast">

   156         <xsl:call-template name="parse_label">

   157           <xsl:with-param name="label" select="@inkscape:label"/>

   158         </xsl:call-template>

   159       </xsl:variable>

   160       <xsl:apply-templates mode="testtree" select="exsl:node-set($ast)"/>

   161     </xsl:for-each>

   162     <xsl:text>}

   163 </xsl:text>

   164     <xsl:text>// svghmi.js

   165 </xsl:text>

   166     <xsl:text>

   167 </xsl:text>

   168     <xsl:text>(function(){

   169 </xsl:text>

   170     <xsl:text>    // Open WebSocket to relative "/ws" address

   171 </xsl:text>

   172     <xsl:text>    var ws = new WebSocket(window.location.href.replace(/^http(s?:\/\/[^\/]*)\/.*$/, 'ws$1/ws'));

   173 </xsl:text>

   174     <xsl:text>

   175 </xsl:text>

   176     <xsl:text>    // Register message reception handler 

   177 </xsl:text>

   178     <xsl:text>    ws.onmessage = function (evt) {

   179 </xsl:text>

   180     <xsl:text>        // TODO : dispatch and cache hmi tree updates

   181 </xsl:text>

   182     <xsl:text>

   183 </xsl:text>

   184     <xsl:text>        var received_msg = evt.data;

   185 </xsl:text>

   186     <xsl:text>        // TODO : check for hmitree hash header

   187 </xsl:text>

   188     <xsl:text>        //        if not matching, reload page

   189 </xsl:text>

   190     <xsl:text>        alert("Message is received..."+received_msg); 

   191 </xsl:text>

   192     <xsl:text>    };

   193 </xsl:text>

   194     <xsl:text>

   195 </xsl:text>

   196     <xsl:text>    // Once connection established

   197 </xsl:text>

   198     <xsl:text>    ws.onopen = function (evt) {

   199 </xsl:text>

   200     <xsl:text>        // TODO : enable the HMI (was previously offline, or just starts)

   201 </xsl:text>

   202     <xsl:text>        //        show main page

   203 </xsl:text>

   204     <xsl:text>

   205 </xsl:text>

   206     <xsl:text>

   207 </xsl:text>

   208     <xsl:text>        // TODO : prefix with hmitree hash header

   209 </xsl:text>

   210     <xsl:text>        ws.send("test");

   211 </xsl:text>

   212     <xsl:text>    };

   213 </xsl:text>

   214     <xsl:text>

   215 </xsl:text>

   216     <xsl:text>    var pending_updates = {};

   217 </xsl:text>

   218     <xsl:text>    

   219 </xsl:text>

   220     <xsl:text>    // subscription state, as it should be in hmi server

   221 </xsl:text>

   222     <xsl:text>    // expected {index:period}

   223 </xsl:text>

   224     <xsl:text>    const subscriptions = new Map();

   225 </xsl:text>

   226     <xsl:text>

   227 </xsl:text>

   228     <xsl:text>

   229 </xsl:text>

   230     <xsl:text>    // subscription state as needed by widget now

   231 </xsl:text>

   232     <xsl:text>    // expected {index:[widgets]};

   233 </xsl:text>

   234     <xsl:text>    var subscribers = {};

   235 </xsl:text>

   236     <xsl:text>

   237 </xsl:text>

   238     <xsl:text>    // return the diff in between curently subscribed and subscription

   239 </xsl:text>

   240     <xsl:text>    function update_subscriptions() {

   241 </xsl:text>

   242     <xsl:text>        let delta = [];

   243 </xsl:text>

   244     <xsl:text>        Object.keys(subscribers).forEach(index =&gt; {

   245 </xsl:text>

   246     <xsl:text>

   247 </xsl:text>

   248     <xsl:text>            let previous_period = subscriptions.get(index);

   249 </xsl:text>

   250     <xsl:text>            delete subscriptions[index];

   251 </xsl:text>

   252     <xsl:text>

   253 </xsl:text>

   254     <xsl:text>            let new_period = Math.min(...widgets.map(widget =&gt; widget.period));

   255 </xsl:text>

   256     <xsl:text>

   257 </xsl:text>

   258     <xsl:text>            if(previous_period != new_period) 

   259 </xsl:text>

   260     <xsl:text>                delta.push({index: index, period: new_period});

   261 </xsl:text>

   262     <xsl:text>        })

   263 </xsl:text>

   264     <xsl:text>        return result;

   265 </xsl:text>

   266     <xsl:text>    }

   267 </xsl:text>

   268     <xsl:text>

   269 </xsl:text>

   270     <xsl:text>

   271 </xsl:text>

   272     <xsl:text>    function update_value(index, value) {

   273 </xsl:text>

   274     <xsl:text>

   275 </xsl:text>

   276     <xsl:text>    };

   277 </xsl:text>

   278     <xsl:text>

   279 </xsl:text>

   280     <xsl:text>    function switch_page(page_name) {

   281 </xsl:text>

   282     <xsl:text>

   283 </xsl:text>

   284     <xsl:text>    };

   285 </xsl:text>

   286     <xsl:text>

   287 </xsl:text>

   288     <xsl:text>})();

   289 </xsl:text>

   290   </xsl:template>

   291   <xsl:template name="parse_label">

   292     <xsl:param name="label"/>

   293     <xsl:variable name="description" select="substring-after($label,'HMI:')"/>

   294     <xsl:variable name="_args" select="substring-before($description,'@')"/>

   295     <xsl:variable name="args">

   296       <xsl:choose>

   297         <xsl:when test="$_args">

   298           <xsl:value-of select="$_args"/>

   299         </xsl:when>

   300         <xsl:otherwise>

   301           <xsl:value-of select="$description"/>

   302         </xsl:otherwise>

   303       </xsl:choose>

   304     </xsl:variable>

   305     <xsl:variable name="_type" select="substring-before($args,':')"/>

   306     <xsl:variable name="type">

   307       <xsl:choose>

   308         <xsl:when test="$_type">

   309           <xsl:value-of select="$_type"/>

   310         </xsl:when>

   311         <xsl:otherwise>

   312           <xsl:value-of select="$args"/>

   313         </xsl:otherwise>

   314       </xsl:choose>

   315     </xsl:variable>

   316     <xsl:if test="$type">

   317       <widget>

   318         <xsl:attribute name="type">

   319           <xsl:value-of select="$type"/>

   320         </xsl:attribute>

   321         <xsl:for-each select="str:split($args, ':')">

   322           <arg>

   323             <xsl:attribute name="value">

   324               <xsl:value-of select="."/>

   325             </xsl:attribute>

   326           </arg>

   327         </xsl:for-each>

   328         <xsl:variable name="paths" select="substring-after($description,'@')"/>

   329         <xsl:for-each select="str:split($paths, '@')">

   330           <path>

   331             <xsl:attribute name="value">

   332               <xsl:value-of select="."/>

   333             </xsl:attribute>

   334           </path>

   335         </xsl:for-each>

   336       </widget>

   337     </xsl:if>

   338   </xsl:template>

   339   <xsl:template mode="page_desc" match="*"/>