Button, ToggleButton and slider updated. Error to warning when building
Button fixed so it doesn't release until it gets feedback from plc
Toggle button changed so it makes changes instantly. There was too big delay if we waited for feedback.
Slider added new features need some changes for final version.
<?xml version="1.0"?>
<xsl:stylesheet xmlns:ns="beremiz" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:exsl="http://exslt.org/common" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:preamble="preamble" xmlns:regexp="http://exslt.org/regular-expressions" xmlns:svg="http://www.w3.org/2000/svg" xmlns:debug="debug" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:definitions="definitions" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:cc="http://creativecommons.org/ns#" xmlns:declarations="declarations" xmlns:func="http://exslt.org/functions" xmlns:str="http://exslt.org/strings" xmlns:epilogue="epilogue" extension-element-prefixes="ns func exsl regexp str dyn" version="1.0" exclude-result-prefixes="ns func exsl regexp str dyn debug preamble epilogue declarations definitions">
<xsl:output cdata-section-elements="xhtml:script" method="xml"/>
<xsl:variable select="/svg:svg" name="svg"/>
<xsl:variable select="//svg:*[starts-with(@inkscape:label, 'HMI:')]" name="hmi_elements"/>
<xsl:variable select="ns:GetHMITree()" name="hmitree"/>
<xsl:variable name="_categories">
<noindex>
<xsl:text>HMI_PLC_STATUS</xsl:text>
</noindex>
<noindex>
<xsl:text>HMI_CURRENT_PAGE</xsl:text>
</noindex>
</xsl:variable>
<xsl:variable select="exsl:node-set($_categories)" name="categories"/>
<xsl:variable name="_indexed_hmitree">
<xsl:apply-templates mode="index" select="$hmitree"/>
</xsl:variable>
<xsl:variable select="exsl:node-set($_indexed_hmitree)" name="indexed_hmitree"/>
<preamble:hmi-tree/>
<xsl:template match="preamble:hmi-tree">
<xsl:text>
</xsl:text>
<xsl:text>/* </xsl:text>
<xsl:value-of select="local-name()"/>
<xsl:text> */
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>var hmi_hash = [</xsl:text>
<xsl:value-of select="$hmitree/@hash"/>
<xsl:text>];
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>var heartbeat_index = </xsl:text>
<xsl:value-of select="$indexed_hmitree/*[@hmipath = '/HEARTBEAT']/@index"/>
<xsl:text>;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>var hmitree_types = [
</xsl:text>
<xsl:for-each select="$indexed_hmitree/*">
<xsl:text> /* </xsl:text>
<xsl:value-of select="@index"/>
<xsl:text> </xsl:text>
<xsl:value-of select="@hmipath"/>
<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>
<xsl:text>
</xsl:text>
</xsl:for-each>
<xsl:text>]
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>
</xsl:text>
</xsl:template>
<xsl:template mode="index" match="*">
<xsl:param select="0" name="index"/>
<xsl:param select="''" name="parentpath"/>
<xsl:variable name="content">
<xsl:variable name="path">
<xsl:choose>
<xsl:when test="count(ancestor::*)=0">
<xsl:text>/</xsl:text>
</xsl:when>
<xsl:when test="count(ancestor::*)=1">
<xsl:text>/</xsl:text>
<xsl:value-of select="@name"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$parentpath"/>
<xsl:text>/</xsl:text>
<xsl:value-of select="@name"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<xsl:choose>
<xsl:when test="not(local-name() = $categories/noindex)">
<xsl:copy>
<xsl:attribute name="index">
<xsl:value-of select="$index"/>
</xsl:attribute>
<xsl:attribute name="hmipath">
<xsl:value-of select="$path"/>
</xsl:attribute>
<xsl:for-each select="@*">
<xsl:copy/>
</xsl:for-each>
</xsl:copy>
<xsl:apply-templates mode="index" select="*[1]">
<xsl:with-param select="$index + 1" name="index"/>
<xsl:with-param name="parentpath">
<xsl:value-of select="$path"/>
</xsl:with-param>
</xsl:apply-templates>
</xsl:when>
<xsl:otherwise>
<xsl:apply-templates mode="index" select="*[1]">
<xsl:with-param select="$index" name="index"/>
<xsl:with-param name="parentpath">
<xsl:value-of select="$path"/>
</xsl:with-param>
</xsl:apply-templates>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<xsl:copy-of select="$content"/>
<xsl:apply-templates mode="index" select="following-sibling::*[1]">
<xsl:with-param select="$index + count(exsl:node-set($content)/*)" name="index"/>
<xsl:with-param name="parentpath">
<xsl:value-of select="$parentpath"/>
</xsl:with-param>
</xsl:apply-templates>
</xsl:template>
<xsl:template mode="parselabel" match="*">
<xsl:variable select="@inkscape:label" name="label"/>
<xsl:variable select="substring-after($label,'HMI:')" name="description"/>
<xsl:variable select="substring-before($description,'@')" name="_args"/>
<xsl:variable name="args">
<xsl:choose>
<xsl:when test="$_args">
<xsl:value-of select="$_args"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$description"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<xsl:variable select="substring-before($args,':')" name="_type"/>
<xsl:variable name="type">
<xsl:choose>
<xsl:when test="$_type">
<xsl:value-of select="$_type"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$args"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<xsl:if test="$type">
<widget>
<xsl:attribute name="id">
<xsl:value-of select="@id"/>
</xsl:attribute>
<xsl:attribute name="type">
<xsl:value-of select="$type"/>
</xsl:attribute>
<xsl:for-each select="str:split(substring-after($args, ':'), ':')">
<arg>
<xsl:attribute name="value">
<xsl:value-of select="."/>
</xsl:attribute>
</arg>
</xsl:for-each>
<xsl:variable select="substring-after($description,'@')" name="paths"/>
<xsl:for-each select="str:split($paths, '@')">
<xsl:if test="string-length(.) > 0">
<path>
<xsl:attribute name="value">
<xsl:value-of select="."/>
</xsl:attribute>
<xsl:variable select="." name="path"/>
<xsl:variable select="$indexed_hmitree/*[@hmipath = $path]" name="item"/>
<xsl:choose>
<xsl:when test="count($item) = 1">
<xsl:attribute name="index">
<xsl:value-of select="$item/@index"/>
</xsl:attribute>
<xsl:attribute name="type">
<xsl:value-of select="local-name($item)"/>
</xsl:attribute>
</xsl:when>
<xsl:otherwise>
<xsl:choose>
<xsl:when test="regexp:test($path,'^\.[a-zA-Z0-9_]+')">
<xsl:attribute name="type">
<xsl:text>PAGE_LOCAL</xsl:text>
</xsl:attribute>
</xsl:when>
<xsl:when test="regexp:test($path,'^[a-zA-Z0-9_]+')">
<xsl:attribute name="type">
<xsl:text>HMI_LOCAL</xsl:text>
</xsl:attribute>
</xsl:when>
</xsl:choose>
</xsl:otherwise>
</xsl:choose>
</path>
</xsl:if>
</xsl:for-each>
</widget>
</xsl:if>
</xsl:template>
<xsl:variable name="_parsed_widgets">
<xsl:apply-templates mode="parselabel" select="$hmi_elements"/>
</xsl:variable>
<xsl:variable select="exsl:node-set($_parsed_widgets)" name="parsed_widgets"/>
<func:function name="func:widget">
<xsl:param name="id"/>
<func:result select="$parsed_widgets/widget[@id = $id]"/>
</func:function>
<func:function name="func:is_descendant_path">
<xsl:param name="descend"/>
<xsl:param name="ancest"/>
<func:result select="string-length($ancest) > 0 and starts-with($descend,$ancest)"/>
</func:function>
<func:function name="func:same_class_paths">
<xsl:param name="a"/>
<xsl:param name="b"/>
<xsl:variable select="$indexed_hmitree/*[@hmipath = $a]/@class" name="class_a"/>
<xsl:variable select="$indexed_hmitree/*[@hmipath = $b]/@class" name="class_b"/>
<func:result select="$class_a and $class_b and $class_a = $class_b"/>
</func:function>
<xsl:template mode="testtree" match="*">
<xsl:param select="''" name="indent"/>
<xsl:value-of select="$indent"/>
<xsl:text> </xsl:text>
<xsl:value-of select="local-name()"/>
<xsl:text> </xsl:text>
<xsl:for-each select="@*">
<xsl:value-of select="local-name()"/>
<xsl:text>="</xsl:text>
<xsl:value-of select="."/>
<xsl:text>" </xsl:text>
</xsl:for-each>
<xsl:text>
</xsl:text>
<xsl:apply-templates mode="testtree" select="*">
<xsl:with-param name="indent">
<xsl:value-of select="concat($indent,'>')"/>
</xsl:with-param>
</xsl:apply-templates>
</xsl:template>
<debug:hmi-tree/>
<xsl:template match="debug:hmi-tree">
<xsl:text>
</xsl:text>
<xsl:text>/* </xsl:text>
<xsl:value-of select="local-name()"/>
<xsl:text> */
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>Raw HMI tree
</xsl:text>
<xsl:apply-templates mode="testtree" select="$hmitree"/>
<xsl:text>
</xsl:text>
<xsl:text>Indexed HMI tree
</xsl:text>
<xsl:apply-templates mode="testtree" select="$indexed_hmitree"/>
<xsl:text>
</xsl:text>
<xsl:text>Parsed Widgets
</xsl:text>
<xsl:copy-of select="_parsed_widgets"/>
<xsl:apply-templates mode="testtree" select="$parsed_widgets"/>
<xsl:text>
</xsl:text>
</xsl:template>
<xsl:variable select="ns:GetSVGGeometry()" name="geometry"/>
<debug:geometry/>
<xsl:template match="debug:geometry">
<xsl:text>
</xsl:text>
<xsl:text>/* </xsl:text>
<xsl:value-of select="local-name()"/>
<xsl:text> */
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>ID, x, y, w, h
</xsl:text>
<xsl:for-each select="$geometry">
<xsl:text> </xsl:text>
<xsl:value-of select="@Id"/>
<xsl:text> </xsl:text>
<xsl:value-of select="@x"/>
<xsl:text> </xsl:text>
<xsl:value-of select="@y"/>
<xsl:text> </xsl:text>
<xsl:value-of select="@w"/>
<xsl:text> </xsl:text>
<xsl:value-of select="@h"/>
<xsl:text>
</xsl:text>
</xsl:for-each>
<xsl:text>
</xsl:text>
</xsl:template>
<func:function name="func:intersect_1d">
<xsl:param name="a0"/>
<xsl:param name="a1"/>
<xsl:param name="b0"/>
<xsl:param name="b1"/>
<xsl:variable select="$a0 >= $b0" name="d0"/>
<xsl:variable select="$a1 >= $b1" name="d1"/>
<xsl:choose>
<xsl:when test="not($d0) and $d1">
<func:result select="3"/>
</xsl:when>
<xsl:when test="$d0 and not($d1)">
<func:result select="2"/>
</xsl:when>
<xsl:when test="$d0 and $d1 and $a0 < $b1">
<func:result select="1"/>
</xsl:when>
<xsl:when test="not($d0) and not($d1) and $b0 < $a1">
<func:result select="1"/>
</xsl:when>
<xsl:otherwise>
<func:result select="0"/>
</xsl:otherwise>
</xsl:choose>
</func:function>
<func:function name="func:intersect">
<xsl:param name="a"/>
<xsl:param name="b"/>
<xsl:variable select="func:intersect_1d($a/@x, $a/@x+$a/@w, $b/@x, $b/@x+$b/@w)" name="x_intersect"/>
<xsl:choose>
<xsl:when test="$x_intersect != 0">
<xsl:variable select="func:intersect_1d($a/@y, $a/@y+$a/@h, $b/@y, $b/@y+$b/@h)" name="y_intersect"/>
<func:result select="$x_intersect * $y_intersect"/>
</xsl:when>
<xsl:otherwise>
<func:result select="0"/>
</xsl:otherwise>
</xsl:choose>
</func:function>
<func:function name="func:overlapping_geometry">
<xsl:param name="elt"/>
<xsl:variable select="/svg:svg | //svg:g" name="groups"/>
<xsl:variable select="$geometry[@Id = $elt/@id]" name="g"/>
<xsl:variable select="$geometry[@Id != $elt/@id]" name="candidates"/>
<func:result select="$candidates[(@Id = $groups/@id and (func:intersect($g, .) = 9)) or (not(@Id = $groups/@id) and (func:intersect($g, .) > 0 ))]"/>
</func:function>
<xsl:variable select="$parsed_widgets/widget[@type = 'Page']" name="hmi_pages_descs"/>
<xsl:variable select="$hmi_elements[@id = $hmi_pages_descs/@id]" name="hmi_pages"/>
<xsl:variable name="default_page">
<xsl:choose>
<xsl:when test="count($hmi_pages) > 1">
<xsl:choose>
<xsl:when test="$hmi_pages_descs/arg[1]/@value = 'Home'">
<xsl:text>Home</xsl:text>
</xsl:when>
<xsl:otherwise>
<xsl:message terminate="yes">No Home page defined!</xsl:message>
</xsl:otherwise>
</xsl:choose>
</xsl:when>
<xsl:when test="count($hmi_pages) = 0">
<xsl:message terminate="yes">No page defined!</xsl:message>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="func:widget($hmi_pages/@id)/arg[1]/@value"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<preamble:default-page/>
<xsl:template match="preamble:default-page">
<xsl:text>
</xsl:text>
<xsl:text>/* </xsl:text>
<xsl:value-of select="local-name()"/>
<xsl:text> */
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>var default_page = "</xsl:text>
<xsl:value-of select="$default_page"/>
<xsl:text>";
</xsl:text>
<xsl:text>
</xsl:text>
</xsl:template>
<xsl:variable select="$parsed_widgets/widget[@type = 'Keypad']" name="keypads_descs"/>
<xsl:variable select="$hmi_elements[@id = $keypads_descs/@id]" name="keypads"/>
<func:function name="func:refered_elements">
<xsl:param name="elems"/>
<xsl:variable select="$elems/descendant-or-self::svg:*" name="descend"/>
<xsl:variable select="$descend[self::svg:use]" name="clones"/>
<xsl:variable select="//svg:*[concat('#',@id) = $clones/@xlink:href]" name="originals"/>
<xsl:choose>
<xsl:when test="$originals">
<func:result select="$descend | func:refered_elements($originals)"/>
</xsl:when>
<xsl:otherwise>
<func:result select="$descend"/>
</xsl:otherwise>
</xsl:choose>
</func:function>
<func:function name="func:all_related_elements">
<xsl:param name="page"/>
<xsl:variable select="func:overlapping_geometry($page)" name="page_overlapping_geometry"/>
<xsl:variable select="//svg:*[@id = $page_overlapping_geometry/@Id]" name="page_overlapping_elements"/>
<xsl:variable select="func:refered_elements($page | $page_overlapping_elements)" name="page_sub_elements"/>
<func:result select="$page_sub_elements"/>
</func:function>
<func:function name="func:required_elements">
<xsl:param name="pages"/>
<xsl:choose>
<xsl:when test="$pages">
<func:result select="func:all_related_elements($pages[1]) | func:required_elements($pages[position()!=1])"/>
</xsl:when>
<xsl:otherwise>
<func:result select="/.."/>
</xsl:otherwise>
</xsl:choose>
</func:function>
<xsl:variable select="//svg:defs/descendant-or-self::svg:* | func:required_elements($hmi_pages | $keypads)/ancestor-or-self::svg:*" name="required_elements"/>
<xsl:variable select="//svg:*[not(@id = $required_elements/@id)]" name="discardable_elements"/>
<func:function name="func:sumarized_elements">
<xsl:param name="elements"/>
<xsl:variable select="$elements[not(ancestor::*/@id = $elements/@id)]" name="short_list"/>
<xsl:variable select="$short_list/parent::svg:*[ not(descendant::*[ not(self::svg:g) and not(@id = $discardable_elements/@id) and not(@id = $short_list/descendant-or-self::*[not(self::svg:g)]/@id) ])]" name="filled_groups"/>
<xsl:variable select="$filled_groups[not(ancestor::*/@id = $filled_groups/@id)]" name="groups_to_add"/>
<func:result select="$groups_to_add | $short_list[not(ancestor::svg:g/@id = $filled_groups/@id)]"/>
</func:function>
<func:function name="func:detachable_elements">
<xsl:param name="pages"/>
<xsl:choose>
<xsl:when test="$pages">
<func:result select="func:sumarized_elements(func:all_related_elements($pages[1])) | func:detachable_elements($pages[position()!=1])"/>
</xsl:when>
<xsl:otherwise>
<func:result select="/.."/>
</xsl:otherwise>
</xsl:choose>
</func:function>
<xsl:variable select="func:detachable_elements($hmi_pages | $keypads)" name="_detachable_elements"/>
<xsl:variable select="$_detachable_elements[not(ancestor::*/@id = $_detachable_elements/@id)]" name="detachable_elements"/>
<declarations:detachable-elements/>
<xsl:template match="declarations:detachable-elements">
<xsl:text>
</xsl:text>
<xsl:text>/* </xsl:text>
<xsl:value-of select="local-name()"/>
<xsl:text> */
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>var detachable_elements = {
</xsl:text>
<xsl:for-each select="$detachable_elements">
<xsl:text> "</xsl:text>
<xsl:value-of select="@id"/>
<xsl:text>":[id("</xsl:text>
<xsl:value-of select="@id"/>
<xsl:text>"), id("</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:template>
<xsl:variable select="$parsed_widgets/widget[@type = 'ForEach']/@id" name="forEach_widgets_ids"/>
<xsl:variable select="$hmi_elements[@id = $forEach_widgets_ids]" name="forEach_widgets"/>
<xsl:variable select="func:refered_elements($forEach_widgets)[not(@id = $forEach_widgets_ids)]/@id" name="in_forEach_widget_ids"/>
<xsl:template mode="page_desc" match="svg:*">
<xsl:variable select="func:widget(@id)" name="desc"/>
<xsl:variable select="." name="page"/>
<xsl:variable select="$geometry[@Id = $page/@id]" name="p"/>
<xsl:variable select="func:all_related_elements($page)" name="page_all_elements"/>
<xsl:variable select="$hmi_elements[@id = $page_all_elements/@id and @id != $page/@id]" name="all_page_widgets"/>
<xsl:variable select="$all_page_widgets[not(@id=$in_forEach_widget_ids)]" name="page_managed_widgets"/>
<xsl:variable select="$page_managed_widgets[func:is_descendant_path(func:widget(@id)/path/@value, $desc/path/@value)]" name="page_relative_widgets"/>
<xsl:variable select="func:sumarized_elements($page_all_elements)/ ancestor-or-self::*[@id = $detachable_elements/@id]" name="required_detachables"/>
<xsl:text> "</xsl:text>
<xsl:value-of select="$desc/arg[1]/@value"/>
<xsl:text>": {
</xsl:text>
<xsl:text> bbox: [</xsl:text>
<xsl:value-of select="$p/@x"/>
<xsl:text>, </xsl:text>
<xsl:value-of select="$p/@y"/>
<xsl:text>, </xsl:text>
<xsl:value-of select="$p/@w"/>
<xsl:text>, </xsl:text>
<xsl:value-of select="$p/@h"/>
<xsl:text>],
</xsl:text>
<xsl:if test="$desc/path/@value">
<xsl:if test="count($desc/path/@index)=0">
<xsl:message terminate="no">
<xsl:text>Page id="</xsl:text>
<xsl:value-of select="$page/@id"/>
<xsl:text>" : No match for path "</xsl:text>
<xsl:value-of select="$desc/path/@value"/>
<xsl:text>" in HMI tree</xsl:text>
</xsl:message>
</xsl:if>
<xsl:text> page_index: </xsl:text>
<xsl:value-of select="$desc/path/@index"/>
<xsl:text>,
</xsl:text>
</xsl:if>
<xsl:text> widgets: [
</xsl:text>
<xsl:for-each select="$page_managed_widgets">
<xsl:variable name="widget_paths_relativeness">
<xsl:for-each select="func:widget(@id)/path">
<xsl:value-of select="func:is_descendant_path(@value, $desc/path/@value)"/>
<xsl:if test="position()!=last()">
<xsl:text>,</xsl:text>
</xsl:if>
</xsl:for-each>
</xsl:variable>
<xsl:text> [hmi_widgets["</xsl:text>
<xsl:value-of select="@id"/>
<xsl:text>"], [</xsl:text>
<xsl:value-of select="$widget_paths_relativeness"/>
<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> jumps: [
</xsl:text>
<xsl:for-each select="$parsed_widgets/widget[@id = $all_page_widgets/@id and @type='Jump']">
<xsl:variable select="@id" name="_id"/>
<xsl:variable name="opts">
<xsl:call-template name="jump_widget_activity">
<xsl:with-param select="$hmi_elements[@id=$_id]" name="hmi_element"/>
</xsl:call-template>
</xsl:variable>
<xsl:if test="string-length($opts)>0">
<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:if>
</xsl:for-each>
<xsl:text> ],
</xsl:text>
<xsl:text> required_detachables: {
</xsl:text>
<xsl:for-each select="$required_detachables">
<xsl:text> "</xsl:text>
<xsl:value-of select="@id"/>
<xsl:text>": detachable_elements["</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:apply-templates mode="per_page_widget_template" select="$parsed_widgets/widget[@id = $all_page_widgets/@id]">
<xsl:with-param select="$desc" name="page_desc"/>
</xsl:apply-templates>
<xsl:text> }</xsl:text>
<xsl:if test="position()!=last()">
<xsl:text>,</xsl:text>
</xsl:if>
<xsl:text>
</xsl:text>
</xsl:template>
<definitions:page-desc/>
<xsl:template match="definitions:page-desc">
<xsl:text>
</xsl:text>
<xsl:text>/* </xsl:text>
<xsl:value-of select="local-name()"/>
<xsl:text> */
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>var page_desc = {
</xsl:text>
<xsl:apply-templates mode="page_desc" select="$hmi_pages"/>
<xsl:text>}
</xsl:text>
<xsl:text>
</xsl:text>
</xsl:template>
<xsl:template mode="per_page_widget_template" match="*"/>
<debug:detachable-pages/>
<xsl:template match="debug:detachable-pages">
<xsl:text>
</xsl:text>
<xsl:text>/* </xsl:text>
<xsl:value-of select="local-name()"/>
<xsl:text> */
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>DETACHABLES:
</xsl:text>
<xsl:for-each select="$detachable_elements">
<xsl:text> </xsl:text>
<xsl:value-of select="@id"/>
<xsl:text>
</xsl:text>
</xsl:for-each>
<xsl:text>In Foreach:
</xsl:text>
<xsl:for-each select="$in_forEach_widget_ids">
<xsl:text> </xsl:text>
<xsl:value-of select="."/>
<xsl:text>
</xsl:text>
</xsl:for-each>
<xsl:text>
</xsl:text>
</xsl:template>
<xsl:template mode="inline_svg" match="@* | node()">
<xsl:if test="not(@id = $discardable_elements/@id)">
<xsl:copy>
<xsl:apply-templates mode="inline_svg" select="@* | node()"/>
</xsl:copy>
</xsl:if>
</xsl:template>
<xsl:template mode="inline_svg" match="svg:svg/@width"/>
<xsl:template mode="inline_svg" match="svg:svg/@height"/>
<xsl:template xmlns="http://www.w3.org/2000/svg" mode="inline_svg" match="svg:svg">
<svg>
<xsl:attribute name="preserveAspectRatio">
<xsl:text>none</xsl:text>
</xsl:attribute>
<xsl:attribute name="height">
<xsl:text>100vh</xsl:text>
</xsl:attribute>
<xsl:attribute name="width">
<xsl:text>100vw</xsl:text>
</xsl:attribute>
<xsl:apply-templates mode="inline_svg" select="@* | node()"/>
</svg>
</xsl:template>
<xsl:template mode="inline_svg" match="svg:svg[@viewBox!=concat('0 0 ', @width, ' ', @height)]">
<xsl:message terminate="yes">
<xsl:text>ViewBox settings other than X=0, Y=0 and Scale=1 are not supported</xsl:text>
</xsl:message>
</xsl:template>
<xsl:template mode="inline_svg" match="sodipodi:namedview[@units!='px' or @inkscape:document-units!='px']">
<xsl:message terminate="yes">
<xsl:text>All units must be set to "px" in Inkscape's document properties</xsl:text>
</xsl:message>
</xsl:template>
<xsl:variable select="$parsed_widgets/widget[@type = 'List']" name="hmi_lists_descs"/>
<xsl:variable select="$hmi_elements[@id = $hmi_lists_descs/@id]" name="hmi_lists"/>
<xsl:variable select="$hmi_lists/descendant-or-self::svg:*" name="targets_not_to_unlink"/>
<xsl:variable select="$hmi_elements[not(@id = $hmi_pages/@id)]/descendant-or-self::svg:use" name="to_unlink"/>
<xsl:template xmlns="http://www.w3.org/2000/svg" mode="inline_svg" match="svg:use">
<xsl:param name="seed"/>
<xsl:variable select="substring-after(@xlink:href,'#')" name="targetid"/>
<xsl:choose>
<xsl:when test="@id = $to_unlink/@id and not($targetid = $targets_not_to_unlink/@id)">
<xsl:call-template name="unlink_clone">
<xsl:with-param select="$targetid" name="targetid"/>
<xsl:with-param select="$seed" name="seed"/>
</xsl:call-template>
</xsl:when>
<xsl:otherwise>
<xsl:copy>
<xsl:apply-templates mode="inline_svg" select="@* | node()"/>
</xsl:copy>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<xsl:variable name="_excluded_use_attrs">
<name>
<xsl:text>href</xsl:text>
</name>
<name>
<xsl:text>width</xsl:text>
</name>
<name>
<xsl:text>height</xsl:text>
</name>
<name>
<xsl:text>x</xsl:text>
</name>
<name>
<xsl:text>y</xsl:text>
</name>
<name>
<xsl:text>id</xsl:text>
</name>
</xsl:variable>
<xsl:variable select="exsl:node-set($_excluded_use_attrs)" name="excluded_use_attrs"/>
<xsl:variable name="_merge_use_attrs">
<name>
<xsl:text>transform</xsl:text>
</name>
<name>
<xsl:text>style</xsl:text>
</name>
</xsl:variable>
<xsl:variable select="exsl:node-set($_merge_use_attrs)" name="merge_use_attrs"/>
<xsl:template xmlns="http://www.w3.org/2000/svg" name="unlink_clone">
<xsl:param name="targetid"/>
<xsl:param name="seed"/>
<xsl:variable select="//svg:*[@id = $targetid]" name="target"/>
<xsl:variable select="concat($seed, @id)" name="seeded_id"/>
<g>
<xsl:attribute name="id">
<xsl:value-of select="$seeded_id"/>
</xsl:attribute>
<xsl:choose>
<xsl:when test="$target[self::svg:g]">
<xsl:for-each select="@*[not(local-name() = $excluded_use_attrs/name | $merge_use_attrs)]">
<xsl:attribute name="{name()}">
<xsl:value-of select="."/>
</xsl:attribute>
</xsl:for-each>
<xsl:if test="@style | $target/@style">
<xsl:attribute name="style">
<xsl:value-of select="@style"/>
<xsl:if test="@style and $target/@style">
<xsl:text>;</xsl:text>
</xsl:if>
<xsl:value-of select="$target/@style"/>
</xsl:attribute>
</xsl:if>
<xsl:if test="@transform | $target/@transform">
<xsl:attribute name="transform">
<xsl:value-of select="@transform"/>
<xsl:if test="@transform and $target/@transform">
<xsl:text> </xsl:text>
</xsl:if>
<xsl:value-of select="$target/@transform"/>
</xsl:attribute>
</xsl:if>
<xsl:apply-templates mode="unlink_clone" select="$target/*">
<xsl:with-param select="concat($seed, @id)" name="seed"/>
</xsl:apply-templates>
</xsl:when>
<xsl:otherwise>
<xsl:for-each select="@*[not(local-name() = $excluded_use_attrs/name)]">
<xsl:attribute name="{name()}">
<xsl:value-of select="."/>
</xsl:attribute>
</xsl:for-each>
<xsl:apply-templates mode="unlink_clone" select="$target">
<xsl:with-param select="concat($seed, @id)" name="seed"/>
</xsl:apply-templates>
</xsl:otherwise>
</xsl:choose>
</g>
</xsl:template>
<xsl:template xmlns="http://www.w3.org/2000/svg" mode="unlink_clone" match="@id">
<xsl:param name="seed"/>
<xsl:attribute name="id">
<xsl:value-of select="$seed"/>
<xsl:text>_</xsl:text>
<xsl:value-of select="."/>
</xsl:attribute>
</xsl:template>
<xsl:template xmlns="http://www.w3.org/2000/svg" mode="unlink_clone" match="@*">
<xsl:copy/>
</xsl:template>
<xsl:template xmlns="http://www.w3.org/2000/svg" mode="unlink_clone" match="svg:use">
<xsl:param name="seed"/>
<xsl:apply-templates mode="inline_svg" select=".">
<xsl:with-param select="concat($seed, '_')" name="seed"/>
</xsl:apply-templates>
</xsl:template>
<xsl:template xmlns="http://www.w3.org/2000/svg" mode="unlink_clone" match="svg:*">
<xsl:param name="seed"/>
<xsl:choose>
<xsl:when test="@id = $hmi_elements/@id">
<use>
<xsl:attribute name="xlink:href">
<xsl:value-of select="concat('#',@id)"/>
</xsl:attribute>
</use>
</xsl:when>
<xsl:otherwise>
<xsl:copy>
<xsl:apply-templates mode="unlink_clone" select="@* | node()">
<xsl:with-param select="$seed" name="seed"/>
</xsl:apply-templates>
</xsl:copy>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<xsl:variable name="result_svg">
<xsl:apply-templates mode="inline_svg" select="/"/>
</xsl:variable>
<xsl:variable select="exsl:node-set($result_svg)" name="result_svg_ns"/>
<preamble:inline-svg/>
<xsl:template match="preamble:inline-svg">
<xsl:text>
</xsl:text>
<xsl:text>/* </xsl:text>
<xsl:value-of select="local-name()"/>
<xsl:text> */
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>let id = document.getElementById.bind(document);
</xsl:text>
<xsl:text>var svg_root = id("</xsl:text>
<xsl:value-of select="$svg/@id"/>
<xsl:text>");
</xsl:text>
<xsl:text>
</xsl:text>
</xsl:template>
<debug:clone-unlinking/>
<xsl:template match="debug:clone-unlinking">
<xsl:text>
</xsl:text>
<xsl:text>/* </xsl:text>
<xsl:value-of select="local-name()"/>
<xsl:text> */
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>Unlinked :
</xsl:text>
<xsl:for-each select="$to_unlink">
<xsl:value-of select="@id"/>
<xsl:text>
</xsl:text>
</xsl:for-each>
<xsl:text>Not to unlink :
</xsl:text>
<xsl:for-each select="$targets_not_to_unlink">
<xsl:value-of select="@id"/>
<xsl:text>
</xsl:text>
</xsl:for-each>
<xsl:text>
</xsl:text>
</xsl:template>
<xsl:template mode="hmi_widgets" match="svg:*">
<xsl:variable select="func:widget(@id)" name="widget"/>
<xsl:variable select="@id" name="eltid"/>
<xsl:variable name="args">
<xsl:for-each select="$widget/arg">
<xsl:text>"</xsl:text>
<xsl:value-of select="func:escape_quotes(@value)"/>
<xsl:text>"</xsl:text>
<xsl:if test="position()!=last()">
<xsl:text>,</xsl:text>
</xsl:if>
</xsl:for-each>
</xsl:variable>
<xsl:variable name="indexes">
<xsl:for-each select="$widget/path">
<xsl:choose>
<xsl:when test="not(@index)">
<xsl:choose>
<xsl:when test="not(@type)">
<xsl:message terminate="yes">
<xsl:text>Widget </xsl:text>
<xsl:value-of select="$widget/@type"/>
<xsl:text> id="</xsl:text>
<xsl:value-of select="$eltid"/>
<xsl:text>" : No match for path "</xsl:text>
<xsl:value-of select="@value"/>
<xsl:text>" in HMI tree</xsl:text>
</xsl:message>
</xsl:when>
<xsl:when test="@type = 'PAGE_LOCAL'">
<xsl:text>"</xsl:text>
<xsl:value-of select="@value"/>
<xsl:text>"</xsl:text>
<xsl:if test="position()!=last()">
<xsl:text>,</xsl:text>
</xsl:if>
</xsl:when>
<xsl:when test="@type = 'HMI_LOCAL'">
<xsl:text>hmi_local_index("</xsl:text>
<xsl:value-of select="@value"/>
<xsl:text>")</xsl:text>
<xsl:if test="position()!=last()">
<xsl:text>,</xsl:text>
</xsl:if>
</xsl:when>
</xsl:choose>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="@index"/>
<xsl:if test="position()!=last()">
<xsl:text>,</xsl:text>
</xsl:if>
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
</xsl:variable>
<xsl:text> "</xsl:text>
<xsl:value-of select="@id"/>
<xsl:text>": new </xsl:text>
<xsl:value-of select="$widget/@type"/>
<xsl:text>Widget ("</xsl:text>
<xsl:value-of select="@id"/>
<xsl:text>",[</xsl:text>
<xsl:value-of select="$args"/>
<xsl:text>],[</xsl:text>
<xsl:value-of select="$indexes"/>
<xsl:text>],{
</xsl:text>
<xsl:apply-templates mode="widget_defs" select="$widget">
<xsl:with-param select="." name="hmi_element"/>
</xsl:apply-templates>
<xsl:text> })</xsl:text>
<xsl:if test="position()!=last()">
<xsl:text>,</xsl:text>
</xsl:if>
<xsl:text>
</xsl:text>
</xsl:template>
<func:function name="func:unique_types">
<xsl:param name="elts_with_type"/>
<xsl:choose>
<xsl:when test="count($elts_with_type) > 1">
<xsl:variable select="func:unique_types($elts_with_type[position()!=last()])" name="prior_results"/>
<xsl:choose>
<xsl:when test="$elts_with_type[last()][@type = $prior_results/@type]">
<func:result select="$prior_results"/>
</xsl:when>
<xsl:otherwise>
<func:result select="$prior_results | $elts_with_type[last()]"/>
</xsl:otherwise>
</xsl:choose>
</xsl:when>
<xsl:otherwise>
<func:result select="$elts_with_type"/>
</xsl:otherwise>
</xsl:choose>
</func:function>
<preamble:local-variable-indexes/>
<xsl:template match="preamble:local-variable-indexes">
<xsl:text>
</xsl:text>
<xsl:text>/* </xsl:text>
<xsl:value-of select="local-name()"/>
<xsl:text> */
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>let hmi_locals = {};
</xsl:text>
<xsl:text>var last_remote_index = hmitree_types.length - 1;
</xsl:text>
<xsl:text>var next_available_index = hmitree_types.length;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>const local_defaults = {
</xsl:text>
<xsl:for-each select="$parsed_widgets/widget[@type = 'VarInit']">
<xsl:if test="count(path) != 1">
<xsl:message terminate="yes">
<xsl:text>VarInit </xsl:text>
<xsl:value-of select="@id"/>
<xsl:text> must have only one variable given.</xsl:text>
</xsl:message>
</xsl:if>
<xsl:if test="path/@type != 'PAGE_LOCAL' and path/@type != 'HMI_LOCAL'">
<xsl:message terminate="yes">
<xsl:text>VarInit </xsl:text>
<xsl:value-of select="@id"/>
<xsl:text> only applies to HMI variable.</xsl:text>
</xsl:message>
</xsl:if>
<xsl:text>"</xsl:text>
<xsl:value-of select="path/@value"/>
<xsl:text>":</xsl:text>
<xsl:value-of select="arg[1]/@value"/>
<xsl:if test="position()!=last()">
<xsl:text>,</xsl:text>
</xsl:if>
<xsl:text>
</xsl:text>
</xsl:for-each>
<xsl:text>};
</xsl:text>
<xsl:text>var cache = hmitree_types.map(_ignored => undefined);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>function page_local_index(varname, pagename){
</xsl:text>
<xsl:text> let pagevars = hmi_locals[pagename];
</xsl:text>
<xsl:text> let new_index;
</xsl:text>
<xsl:text> if(pagevars == undefined){
</xsl:text>
<xsl:text> new_index = next_available_index++;
</xsl:text>
<xsl:text> hmi_locals[pagename] = {[varname]:new_index}
</xsl:text>
<xsl:text> } else {
</xsl:text>
<xsl:text> let result = pagevars[varname];
</xsl:text>
<xsl:text> if(result != undefined) {
</xsl:text>
<xsl:text> return result;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> new_index = next_available_index++;
</xsl:text>
<xsl:text> pagevars[varname] = new_index;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> let defaultval = local_defaults[varname];
</xsl:text>
<xsl:text> if(defaultval != undefined)
</xsl:text>
<xsl:text> cache[new_index] = defaultval;
</xsl:text>
<xsl:text> return new_index;
</xsl:text>
<xsl:text>}
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>function hmi_local_index(varname){
</xsl:text>
<xsl:text> return page_local_index(varname, "HMI_LOCAL");
</xsl:text>
<xsl:text>}
</xsl:text>
<xsl:text>
</xsl:text>
</xsl:template>
<preamble:widget-base-class/>
<xsl:template match="preamble:widget-base-class">
<xsl:text>
</xsl:text>
<xsl:text>/* </xsl:text>
<xsl:value-of select="local-name()"/>
<xsl:text> */
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>var pending_widget_animates = [];
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>class Widget {
</xsl:text>
<xsl:text> offset = 0;
</xsl:text>
<xsl:text> frequency = 10; /* FIXME arbitrary default max freq. Obtain from config ? */
</xsl:text>
<xsl:text> unsubscribable = false;
</xsl:text>
<xsl:text> pending_animate = false;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> constructor(elt_id,args,indexes,members){
</xsl:text>
<xsl:text> this.element_id = elt_id;
</xsl:text>
<xsl:text> this.element = id(elt_id);
</xsl:text>
<xsl:text> this.args = args;
</xsl:text>
<xsl:text> this.indexes = indexes;
</xsl:text>
<xsl:text> Object.keys(members).forEach(prop => this[prop]=members[prop]);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> unsub(){
</xsl:text>
<xsl:text> /* remove subsribers */
</xsl:text>
<xsl:text> if(!this.unsubscribable)
</xsl:text>
<xsl:text> for(let i = 0; i < this.indexes.length; i++) {
</xsl:text>
<xsl:text> let index = this.indexes[i];
</xsl:text>
<xsl:text> if(this.relativeness[i])
</xsl:text>
<xsl:text> index += this.offset;
</xsl:text>
<xsl:text> subscribers(index).delete(this);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> this.offset = 0;
</xsl:text>
<xsl:text> this.relativeness = undefined;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> sub(new_offset=0, relativeness, container_id){
</xsl:text>
<xsl:text> this.offset = new_offset;
</xsl:text>
<xsl:text> this.relativeness = relativeness;
</xsl:text>
<xsl:text> this.container_id = container_id ;
</xsl:text>
<xsl:text> /* add this's subsribers */
</xsl:text>
<xsl:text> if(!this.unsubscribable)
</xsl:text>
<xsl:text> for(let i = 0; i < this.indexes.length; i++) {
</xsl:text>
<xsl:text> let index = this.get_variable_index(i);
</xsl:text>
<xsl:text> subscribers(index).add(this);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> need_cache_apply.push(this);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> apply_cache() {
</xsl:text>
<xsl:text> if(!this.unsubscribable) for(let index in this.indexes){
</xsl:text>
<xsl:text> /* dispatch current cache in newly opened page widgets */
</xsl:text>
<xsl:text> let realindex = this.get_variable_index(index);
</xsl:text>
<xsl:text> let cached_val = cache[realindex];
</xsl:text>
<xsl:text> if(cached_val != undefined)
</xsl:text>
<xsl:text> this._dispatch(cached_val, cached_val, index);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> get_variable_index(varnum) {
</xsl:text>
<xsl:text> let index = this.indexes[varnum];
</xsl:text>
<xsl:text> if(typeof(index) == "string"){
</xsl:text>
<xsl:text> index = page_local_index(index, this.container_id);
</xsl:text>
<xsl:text> } else {
</xsl:text>
<xsl:text> if(this.relativeness[varnum]){
</xsl:text>
<xsl:text> index += this.offset;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> return index;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> change_hmi_value(index,opstr) {
</xsl:text>
<xsl:text> return change_hmi_value(this.get_variable_index(index), opstr);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> apply_hmi_value(index, new_val) {
</xsl:text>
<xsl:text> return apply_hmi_value(this.get_variable_index(0), new_val);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> new_hmi_value(index, value, oldval) {
</xsl:text>
<xsl:text> // TODO avoid searching, store index at sub()
</xsl:text>
<xsl:text> for(let i = 0; i < this.indexes.length; i++) {
</xsl:text>
<xsl:text> let refindex = this.get_variable_index(i);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> if(index == refindex) {
</xsl:text>
<xsl:text> this._dispatch(value, oldval, i);
</xsl:text>
<xsl:text> break;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> _dispatch(value, oldval, varnum) {
</xsl:text>
<xsl:text> let dispatch = this.dispatch;
</xsl:text>
<xsl:text> if(dispatch != undefined){
</xsl:text>
<xsl:text> try {
</xsl:text>
<xsl:text> dispatch.call(this, value, oldval, varnum);
</xsl:text>
<xsl:text> } catch(err) {
</xsl:text>
<xsl:text> console.log(err);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> _animate(){
</xsl:text>
<xsl:text> this.animate();
</xsl:text>
<xsl:text> this.pending_animate = false;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> request_animate(){
</xsl:text>
<xsl:text> if(!this.pending_animate){
</xsl:text>
<xsl:text> pending_widget_animates.push(this);
</xsl:text>
<xsl:text> this.pending_animate = true;
</xsl:text>
<xsl:text> requestHMIAnimation();
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>}
</xsl:text>
<xsl:text>
</xsl:text>
</xsl:template>
<declarations:hmi-classes/>
<xsl:template match="declarations:hmi-classes">
<xsl:text>
</xsl:text>
<xsl:text>/* </xsl:text>
<xsl:value-of select="local-name()"/>
<xsl:text> */
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:variable select="func:unique_types($parsed_widgets/widget)" name="used_widget_types"/>
<xsl:apply-templates mode="widget_class" select="$used_widget_types"/>
<xsl:text>
</xsl:text>
</xsl:template>
<xsl:template mode="widget_class" match="widget">
<xsl:text>class </xsl:text>
<xsl:value-of select="@type"/>
<xsl:text>Widget extends Widget{
</xsl:text>
<xsl:text> /* empty class, as </xsl:text>
<xsl:value-of select="@type"/>
<xsl:text> widget didn't provide any */
</xsl:text>
<xsl:text>}
</xsl:text>
</xsl:template>
<xsl:variable select="str:split('Page Lang VarInit')" name="excluded_types"/>
<xsl:variable select="$parsed_widgets/widget[not(@type = $excluded_types)]/@id" name="included_ids"/>
<declarations:hmi-elements/>
<xsl:template match="declarations:hmi-elements">
<xsl:text>
</xsl:text>
<xsl:text>/* </xsl:text>
<xsl:value-of select="local-name()"/>
<xsl:text> */
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>var hmi_widgets = {
</xsl:text>
<xsl:apply-templates mode="hmi_widgets" select="$hmi_elements[@id = $included_ids]"/>
<xsl:text>}
</xsl:text>
<xsl:text>
</xsl:text>
</xsl:template>
<xsl:template name="defs_by_labels">
<xsl:param select="''" name="labels"/>
<xsl:param select="'yes'" name="mandatory"/>
<xsl:param select="/.." name="subelements"/>
<xsl:param name="hmi_element"/>
<xsl:variable select="@type" name="widget_type"/>
<xsl:for-each select="str:split($labels)">
<xsl:variable select="." name="name"/>
<xsl:variable select="$result_svg_ns//*[@id = $hmi_element/@id]//*[@inkscape:label=$name][1]" name="elt"/>
<xsl:choose>
<xsl:when test="not($elt/@id)">
<xsl:if test="$mandatory='yes'">
<xsl:message terminate="yes">
<xsl:value-of select="$widget_type"/>
<xsl:text> widget must have a </xsl:text>
<xsl:value-of select="$name"/>
<xsl:text> element</xsl:text>
</xsl:message>
</xsl:if>
</xsl:when>
<xsl:otherwise>
<xsl:text> </xsl:text>
<xsl:value-of select="$name"/>
<xsl:text>_elt: id("</xsl:text>
<xsl:value-of select="$elt/@id"/>
<xsl:text>"),
</xsl:text>
<xsl:if test="$subelements">
<xsl:text> </xsl:text>
<xsl:value-of select="$name"/>
<xsl:text>_sub: {
</xsl:text>
<xsl:for-each select="str:split($subelements)">
<xsl:variable select="." name="subname"/>
<xsl:variable select="$elt/*[@inkscape:label=$subname][1]" name="subelt"/>
<xsl:choose>
<xsl:when test="not($subelt/@id)">
<xsl:if test="$mandatory='yes'">
<xsl:message terminate="yes">
<xsl:value-of select="$widget_type"/>
<xsl:text> widget must have a </xsl:text>
<xsl:value-of select="$name"/>
<xsl:text>/</xsl:text>
<xsl:value-of select="$subname"/>
<xsl:text> element</xsl:text>
</xsl:message>
</xsl:if>
<xsl:text> /* missing </xsl:text>
<xsl:value-of select="$name"/>
<xsl:text>/</xsl:text>
<xsl:value-of select="$subname"/>
<xsl:text> element */
</xsl:text>
</xsl:when>
<xsl:otherwise>
<xsl:text> "</xsl:text>
<xsl:value-of select="$subname"/>
<xsl:text>": id("</xsl:text>
<xsl:value-of select="$subelt/@id"/>
<xsl:text>")</xsl:text>
<xsl:if test="position()!=last()">
<xsl:text>,</xsl:text>
</xsl:if>
<xsl:text>
</xsl:text>
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
<xsl:text> },
</xsl:text>
</xsl:if>
</xsl:otherwise>
</xsl:choose>
</xsl:for-each>
</xsl:template>
<func:function name="func:escape_quotes">
<xsl:param name="txt"/>
<xsl:choose>
<xsl:when test="contains($txt,'"')">
<func:result select="concat(substring-before($txt,'"'),'\"',func:escape_quotes(substring-after($txt,'"')))"/>
</xsl:when>
<xsl:otherwise>
<func:result select="$txt"/>
</xsl:otherwise>
</xsl:choose>
</func:function>
<xsl:template mode="widget_class" match="widget[@type='Back']">
<xsl:text>class BackWidget extends Widget{
</xsl:text>
<xsl:text> on_click(evt) {
</xsl:text>
<xsl:text> if(jump_history.length > 1){
</xsl:text>
<xsl:text> jump_history.pop();
</xsl:text>
<xsl:text> let [page_name, index] = jump_history.pop();
</xsl:text>
<xsl:text> switch_page(page_name, index);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> init() {
</xsl:text>
<xsl:text> this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)");
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>}
</xsl:text>
</xsl:template>
<xsl:template mode="widget_class" match="widget[@type='Button']">
<xsl:text>class ButtonWidget extends Widget{
</xsl:text>
<xsl:text> frequency = 5;
</xsl:text>
<xsl:text> state = 0;
</xsl:text>
<xsl:text> active_style = undefined;
</xsl:text>
<xsl:text> inactive_style = undefined;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> on_mouse_down(evt) {
</xsl:text>
<xsl:text> if (this.active_style && this.inactive_style) {
</xsl:text>
<xsl:text> this.active_elt.setAttribute("style", this.active_style);
</xsl:text>
<xsl:text> this.inactive_elt.setAttribute("style", "display:none");
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> this.apply_hmi_value(0, 1);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> on_mouse_up(evt) {
</xsl:text>
<xsl:text> if (this.active_style && this.inactive_style) {
</xsl:text>
<xsl:text> this.active_elt.setAttribute("style", "display:none");
</xsl:text>
<xsl:text> this.inactive_elt.setAttribute("style", this.inactive_style);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> this.apply_hmi_value(0, 0);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> init() {
</xsl:text>
<xsl:text> this.active_style = this.active_elt ? this.active_elt.style.cssText : undefined;
</xsl:text>
<xsl:text> this.inactive_style = this.inactive_elt ? this.inactive_elt.style.cssText : undefined;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> if (this.active_style && this.inactive_style) {
</xsl:text>
<xsl:text> this.active_elt.setAttribute("style", "display:none");
</xsl:text>
<xsl:text> this.inactive_elt.setAttribute("style", this.inactive_style);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> this.element.setAttribute("onmousedown", "hmi_widgets["+this.element_id+"].on_mouse_down(evt)");
</xsl:text>
<xsl:text> this.element.setAttribute("onmouseup", "hmi_widgets["+this.element_id+"].on_mouse_up(evt)");
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>}
</xsl:text>
</xsl:template>
<xsl:template mode="widget_defs" match="widget[@type='Button']">
<xsl:param name="hmi_element"/>
<xsl:call-template name="defs_by_labels">
<xsl:with-param select="$hmi_element" name="hmi_element"/>
<xsl:with-param name="labels">
<xsl:text>active inactive</xsl:text>
</xsl:with-param>
<xsl:with-param select="'no'" name="mandatory"/>
</xsl:call-template>
<xsl:text>
</xsl:text>
</xsl:template>
<xsl:template mode="widget_class" match="widget[@type='CircularBar']">
<xsl:text>class CircularBarWidget extends Widget{
</xsl:text>
<xsl:text> frequency = 10;
</xsl:text>
<xsl:text> range = undefined;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> dispatch(value) {
</xsl:text>
<xsl:text> if(this.value_elt)
</xsl:text>
<xsl:text> this.value_elt.textContent = String(value);
</xsl:text>
<xsl:text> let [min,max,start,end] = this.range;
</xsl:text>
<xsl:text> let [cx,cy] = this.center;
</xsl:text>
<xsl:text> let [rx,ry] = this.proportions;
</xsl:text>
<xsl:text> let tip = start + (end-start)*Number(value)/(max-min);
</xsl:text>
<xsl:text> let size = 0;
</xsl:text>
<xsl:text> if (tip-start > Math.PI) {
</xsl:text>
<xsl:text> size = 1;
</xsl:text>
<xsl:text> } else {
</xsl:text>
<xsl:text> size = 0;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> this.path_elt.setAttribute('d', "M "+(cx+rx*Math.cos(start))+","+(cy+ry*Math.sin(start))+" A "+rx+","+ry+" 0 "+size+" 1 "+(cx+rx*Math.cos(tip))+","+(cy+ry*Math.sin(tip)));
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> init() {
</xsl:text>
<xsl:text> let start = Number(this.path_elt.getAttribute('sodipodi:start'));
</xsl:text>
<xsl:text> let end = Number(this.path_elt.getAttribute('sodipodi:end'));
</xsl:text>
<xsl:text> let cx = Number(this.path_elt.getAttribute('sodipodi:cx'));
</xsl:text>
<xsl:text> let cy = Number(this.path_elt.getAttribute('sodipodi:cy'));
</xsl:text>
<xsl:text> let rx = Number(this.path_elt.getAttribute('sodipodi:rx'));
</xsl:text>
<xsl:text> let ry = Number(this.path_elt.getAttribute('sodipodi:ry'));
</xsl:text>
<xsl:text> if (ry == 0) {
</xsl:text>
<xsl:text> ry = rx;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> if (start > end) {
</xsl:text>
<xsl:text> end = end + 2*Math.PI;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> let min = this.min_elt ?
</xsl:text>
<xsl:text> Number(this.min_elt.textContent) :
</xsl:text>
<xsl:text> this.args.length >= 1 ? this.args[0] : 0;
</xsl:text>
<xsl:text> let max = this.max_elt ?
</xsl:text>
<xsl:text> Number(this.max_elt.textContent) :
</xsl:text>
<xsl:text> this.args.length >= 2 ? this.args[1] : 100;
</xsl:text>
<xsl:text> this.range = [min, max, start, end];
</xsl:text>
<xsl:text> this.center = [cx, cy];
</xsl:text>
<xsl:text> this.proportions = [rx, ry];
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>}
</xsl:text>
</xsl:template>
<xsl:template mode="widget_defs" match="widget[@type='CircularBar']">
<xsl:param name="hmi_element"/>
<xsl:call-template name="defs_by_labels">
<xsl:with-param select="$hmi_element" name="hmi_element"/>
<xsl:with-param name="labels">
<xsl:text>path</xsl:text>
</xsl:with-param>
</xsl:call-template>
<xsl:call-template name="defs_by_labels">
<xsl:with-param select="$hmi_element" name="hmi_element"/>
<xsl:with-param name="labels">
<xsl:text>value min max</xsl:text>
</xsl:with-param>
<xsl:with-param select="'no'" name="mandatory"/>
</xsl:call-template>
<xsl:text>
</xsl:text>
</xsl:template>
<xsl:template mode="widget_class" match="widget[@type='CircularSlider']">
<xsl:text>class CircularSliderWidget extends Widget{
</xsl:text>
<xsl:text> frequency = 5;
</xsl:text>
<xsl:text> range = undefined;
</xsl:text>
<xsl:text> circle = undefined;
</xsl:text>
<xsl:text> handle_pos = undefined;
</xsl:text>
<xsl:text> svg_dist = undefined;
</xsl:text>
<xsl:text> drag = false;
</xsl:text>
<xsl:text> enTimer = false;
</xsl:text>
<xsl:text> last_drag = false;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> dispatch(value) {
</xsl:text>
<xsl:text> if(this.value_elt)
</xsl:text>
<xsl:text> this.value_elt.textContent = String(value);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> this.update_DOM(value, this.handle_elt);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> update_DOM(value, elt){
</xsl:text>
<xsl:text> let [min,max,totalDistance] = this.range;
</xsl:text>
<xsl:text> let length = Math.max(0,Math.min((totalDistance),(Number(value)-min)/(max-min)*(totalDistance)));
</xsl:text>
<xsl:text> let tip = this.range_elt.getPointAtLength(length);
</xsl:text>
<xsl:text> elt.setAttribute('transform',"translate("+(tip.x-this.handle_pos.x)+","+(tip.y-this.handle_pos.y)+")");
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> if(this.setpoint_elt != undefined){
</xsl:text>
<xsl:text> if(this.last_drag!= this.drag){
</xsl:text>
<xsl:text> if(this.drag){
</xsl:text>
<xsl:text> this.setpoint_elt.setAttribute("style", this.setpoint_style);
</xsl:text>
<xsl:text> }else{
</xsl:text>
<xsl:text> this.setpoint_elt.setAttribute("style", "display:none");
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> this.last_drag = this.drag;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> on_release(evt) {
</xsl:text>
<xsl:text> window.removeEventListener("touchmove", this.on_bound_drag, true);
</xsl:text>
<xsl:text> window.removeEventListener("mousemove", this.on_bound_drag, true);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> window.removeEventListener("mouseup", this.bound_on_release, true)
</xsl:text>
<xsl:text> window.removeEventListener("touchend", this.bound_on_release, true);
</xsl:text>
<xsl:text> window.removeEventListener("touchcancel", this.bound_on_release, true);
</xsl:text>
<xsl:text> if(this.drag){
</xsl:text>
<xsl:text> this.drag = false;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> this.update_position(evt);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> on_drag(evt){
</xsl:text>
<xsl:text> if(this.enTimer && this.drag){
</xsl:text>
<xsl:text> this.update_position(evt);
</xsl:text>
<xsl:text> //reset timer
</xsl:text>
<xsl:text> this.enTimer = false;
</xsl:text>
<xsl:text> setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> update_position(evt){
</xsl:text>
<xsl:text> if(this.drag && this.enTimer){
</xsl:text>
<xsl:text> var svg_dist = 0;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> //calculate center of widget in html
</xsl:text>
<xsl:text> // --TODO maybe it would be better to bind this part to window change size event ???
</xsl:text>
<xsl:text> let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox;
</xsl:text>
<xsl:text> let [cX, cY,fiStart,fiEnd,minMax,x1,y1,width,height] = this.circle;
</xsl:text>
<xsl:text> let htmlCirc = this.range_elt.getBoundingClientRect();
</xsl:text>
<xsl:text> let cxHtml = ((htmlCirc.right-htmlCirc.left)/(width)*(cX-x1))+htmlCirc.left;
</xsl:text>
<xsl:text> let cyHtml = ((htmlCirc.bottom-htmlCirc.top)/(height)*(cY-y1))+htmlCirc.top;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> //get mouse coordinates
</xsl:text>
<xsl:text> let mouseX = undefined;
</xsl:text>
<xsl:text> let mouseY = undefined;
</xsl:text>
<xsl:text> if (evt.type.startsWith("touch")){
</xsl:text>
<xsl:text> mouseX = Math.ceil(evt.touches[0].clientX);
</xsl:text>
<xsl:text> mouseY = Math.ceil(evt.touches[0].clientY);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> else{
</xsl:text>
<xsl:text> mouseX = evt.pageX;
</xsl:text>
<xsl:text> mouseY = evt.pageY;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> //calculate angle
</xsl:text>
<xsl:text> let fi = Math.atan2(cyHtml-mouseY, mouseX-cxHtml);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> // transform from 0 to 2PI
</xsl:text>
<xsl:text> if (fi > 0){
</xsl:text>
<xsl:text> fi = 2*Math.PI-fi;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> else{
</xsl:text>
<xsl:text> fi = -fi;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> //offset it to 0
</xsl:text>
<xsl:text> fi = fi - fiStart;
</xsl:text>
<xsl:text> if (fi < 0){
</xsl:text>
<xsl:text> fi = fi + 2*Math.PI;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> //get handle distance from mouse position
</xsl:text>
<xsl:text> if(fi<fiEnd){
</xsl:text>
<xsl:text> this.svg_dist=(fi)/(fiEnd)*(this.range[1]-this.range[0]);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> else if(fiEnd<fi && fi<fiEnd+minMax){
</xsl:text>
<xsl:text> this.svg_dist = this.range[1];
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> else{
</xsl:text>
<xsl:text> this.svg_dist = this.range[0];
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> this.apply_hmi_value(0, Math.ceil(this.svg_dist));
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> // update ghost cursor
</xsl:text>
<xsl:text> if(this.setpoint_elt != undefined){
</xsl:text>
<xsl:text> this.request_animate();
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> animate(){
</xsl:text>
<xsl:text> this.update_DOM(this.svg_dist, this.setpoint_elt);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> on_select(evt){
</xsl:text>
<xsl:text> this.drag = true;
</xsl:text>
<xsl:text> this.enTimer = true;
</xsl:text>
<xsl:text> window.addEventListener("touchmove", this.on_bound_drag, true);
</xsl:text>
<xsl:text> window.addEventListener("mousemove", this.on_bound_drag, true);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> window.addEventListener("mouseup", this.bound_on_release, true)
</xsl:text>
<xsl:text> window.addEventListener("touchend", this.bound_on_release, true);
</xsl:text>
<xsl:text> window.addEventListener("touchcancel", this.bound_on_release, true);
</xsl:text>
<xsl:text> this.update_position(evt);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> init() {
</xsl:text>
<xsl:text> //get min max
</xsl:text>
<xsl:text> let min = this.min_elt ?
</xsl:text>
<xsl:text> Number(this.min_elt.textContent) :
</xsl:text>
<xsl:text> this.args.length >= 1 ? this.args[0] : 0;
</xsl:text>
<xsl:text> let max = this.max_elt ?
</xsl:text>
<xsl:text> Number(this.max_elt.textContent) :
</xsl:text>
<xsl:text> this.args.length >= 2 ? this.args[1] : 100;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> //fiStart ==> offset
</xsl:text>
<xsl:text> let fiStart = Number(this.range_elt.getAttribute('sodipodi:start'));
</xsl:text>
<xsl:text> let fiEnd = Number(this.range_elt.getAttribute('sodipodi:end'));
</xsl:text>
<xsl:text> fiEnd = fiEnd - fiStart;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> //fiEnd ==> size of angle
</xsl:text>
<xsl:text> if (fiEnd < 0){
</xsl:text>
<xsl:text> fiEnd = 2*Math.PI + fiEnd;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> //min max barrier angle
</xsl:text>
<xsl:text> let minMax = (2*Math.PI - fiEnd)/2;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> //get parameters from svg
</xsl:text>
<xsl:text> let cX = Number(this.range_elt.getAttribute('sodipodi:cx'));
</xsl:text>
<xsl:text> let cY = Number(this.range_elt.getAttribute('sodipodi:cy'));
</xsl:text>
<xsl:text> this.range_elt.style.strokeMiterlimit="0"; //eliminates some weird border around html object
</xsl:text>
<xsl:text> this.range = [min, max,this.range_elt.getTotalLength()];
</xsl:text>
<xsl:text> let cPos = this.range_elt.getBBox();
</xsl:text>
<xsl:text> this.handle_pos = this.range_elt.getPointAtLength(0);
</xsl:text>
<xsl:text> this.circle = [cX, cY,fiStart,fiEnd,minMax,cPos.x,cPos.y,cPos.width,cPos.height];
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> //bind functions
</xsl:text>
<xsl:text> this.bound_on_select = this.on_select.bind(this);
</xsl:text>
<xsl:text> this.bound_on_release = this.on_release.bind(this);
</xsl:text>
<xsl:text> this.on_bound_drag = this.on_drag.bind(this);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> //init events
</xsl:text>
<xsl:text> this.element.addEventListener("mousedown", this.bound_on_select);
</xsl:text>
<xsl:text> this.element.addEventListener("touchstart", this.bound_on_select);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> if(this.setpoint_elt != undefined){
</xsl:text>
<xsl:text> this.setpoint_style = this.setpoint_elt.getAttribute("style");
</xsl:text>
<xsl:text> this.setpoint_elt.setAttribute("style", "display:none");
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> window.addEventListener("touchmove", hmi_widgets[this.element_id].update_position.bind(this));
</xsl:text>
<xsl:text> window.addEventListener("mousemove", hmi_widgets[this.element_id].update_position.bind(this));
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> window.addEventListener("mouseup", hmi_widgets[this.element_id].on_release.bind(this))
</xsl:text>
<xsl:text> window.addEventListener("touchend", hmi_widgets[this.element_id].on_release.bind(this));
</xsl:text>
<xsl:text> window.addEventListener("touchcancel", hmi_widgets[this.element_id].on_release.bind(this));
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>}
</xsl:text>
</xsl:template>
<xsl:template mode="widget_defs" match="widget[@type='CircularSlider']">
<xsl:param name="hmi_element"/>
<xsl:call-template name="defs_by_labels">
<xsl:with-param select="$hmi_element" name="hmi_element"/>
<xsl:with-param name="labels">
<xsl:text>handle range</xsl:text>
</xsl:with-param>
</xsl:call-template>
<xsl:call-template name="defs_by_labels">
<xsl:with-param select="$hmi_element" name="hmi_element"/>
<xsl:with-param name="labels">
<xsl:text>value min max</xsl:text>
</xsl:with-param>
<xsl:with-param select="'no'" name="mandatory"/>
</xsl:call-template>
<xsl:text>
</xsl:text>
</xsl:template>
<xsl:template mode="widget_class" match="widget[@type='Display']">
<xsl:text>class DisplayWidget extends Widget{
</xsl:text>
<xsl:text> frequency = 5;
</xsl:text>
<xsl:text> dispatch(value, oldval, index) {
</xsl:text>
<xsl:text> this.fields[index] = value;
</xsl:text>
<xsl:text> console.log(value, index);
</xsl:text>
<xsl:text> this.element.textContent = this.args.length == 1 ? vsprintf(this.args[0],this.fields) : this.fields.join(' ');
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>}
</xsl:text>
</xsl:template>
<xsl:template mode="widget_defs" match="widget[@type='Display']">
<xsl:param name="hmi_element"/>
<xsl:if test="$hmi_element[not(self::svg:text)]">
<xsl:message terminate="yes">
<xsl:text>Display Widget id="</xsl:text>
<xsl:value-of select="$hmi_element/@id"/>
<xsl:text>" is not a svg::text element</xsl:text>
</xsl:message>
</xsl:if>
<xsl:variable name="field_initializer">
<xsl:for-each select="path">
<xsl:choose>
<xsl:when test="@type='HMI_STRING'">
<xsl:text>""</xsl:text>
</xsl:when>
<xsl:otherwise>0</xsl:otherwise>
</xsl:choose>
<xsl:if test="position()!=last()">
<xsl:text>,</xsl:text>
</xsl:if>
</xsl:for-each>
</xsl:variable>
<xsl:text> fields: [</xsl:text>
<xsl:value-of select="$field_initializer"/>
<xsl:text>],
</xsl:text>
</xsl:template>
<preamble:display/>
<xsl:template match="preamble:display">
<xsl:text>
</xsl:text>
<xsl:text>/* </xsl:text>
<xsl:value-of select="local-name()"/>
<xsl:text> */
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>/* https://github.com/alexei/sprintf.js/blob/master/src/sprintf.js */
</xsl:text>
<xsl:text>/* global window, exports, define */
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>!function() {
</xsl:text>
<xsl:text> 'use strict'
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> var re = {
</xsl:text>
<xsl:text> not_string: /[^s]/,
</xsl:text>
<xsl:text> not_bool: /[^t]/,
</xsl:text>
<xsl:text> not_type: /[^T]/,
</xsl:text>
<xsl:text> not_primitive: /[^v]/,
</xsl:text>
<xsl:text> number: /[diefg]/,
</xsl:text>
<xsl:text> numeric_arg: /[bcdiefguxX]/,
</xsl:text>
<xsl:text> json: /[j]/,
</xsl:text>
<xsl:text> not_json: /[^j]/,
</xsl:text>
<xsl:text> text: /^[^%]+/,
</xsl:text>
<xsl:text> modulo: /^%{2}/,
</xsl:text>
<xsl:text> placeholder: /^%(?:([1-9]\d*)\$|\(([^)]+)\))?(\+)?(0|'[^$])?(-)?(\d+)?(?:\.(\d+))?([b-gijostTuvxX])/,
</xsl:text>
<xsl:text> key: /^([a-z_][a-z_\d]*)/i,
</xsl:text>
<xsl:text> key_access: /^\.([a-z_][a-z_\d]*)/i,
</xsl:text>
<xsl:text> index_access: /^\[(\d+)\]/,
</xsl:text>
<xsl:text> sign: /^[+-]/
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> function sprintf(key) {
</xsl:text>
<xsl:text> // </xsl:text>
<arguments/>
<xsl:text> is not an array, but should be fine for this call
</xsl:text>
<xsl:text> return sprintf_format(sprintf_parse(key), arguments)
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> function vsprintf(fmt, argv) {
</xsl:text>
<xsl:text> return sprintf.apply(null, [fmt].concat(argv || []))
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> function sprintf_format(parse_tree, argv) {
</xsl:text>
<xsl:text> var cursor = 1, tree_length = parse_tree.length, arg, output = '', i, k, ph, pad, pad_character, pad_length, is_positive, sign
</xsl:text>
<xsl:text> for (i = 0; i < tree_length; i++) {
</xsl:text>
<xsl:text> if (typeof parse_tree[i] === 'string') {
</xsl:text>
<xsl:text> output += parse_tree[i]
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> else if (typeof parse_tree[i] === 'object') {
</xsl:text>
<xsl:text> ph = parse_tree[i] // convenience purposes only
</xsl:text>
<xsl:text> if (ph.keys) { // keyword argument
</xsl:text>
<xsl:text> arg = argv[cursor]
</xsl:text>
<xsl:text> for (k = 0; k < ph.keys.length; k++) {
</xsl:text>
<xsl:text> if (arg == undefined) {
</xsl:text>
<xsl:text> throw new Error(sprintf('[sprintf] Cannot access property "%s" of undefined value "%s"', ph.keys[k], ph.keys[k-1]))
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> arg = arg[ph.keys[k]]
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> else if (ph.param_no) { // positional argument (explicit)
</xsl:text>
<xsl:text> arg = argv[ph.param_no]
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> else { // positional argument (implicit)
</xsl:text>
<xsl:text> arg = argv[cursor++]
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> if (re.not_type.test(ph.type) && re.not_primitive.test(ph.type) && arg instanceof Function) {
</xsl:text>
<xsl:text> arg = arg()
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> if (re.numeric_arg.test(ph.type) && (typeof arg !== 'number' && isNaN(arg))) {
</xsl:text>
<xsl:text> throw new TypeError(sprintf('[sprintf] expecting number but found %T', arg))
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> if (re.number.test(ph.type)) {
</xsl:text>
<xsl:text> is_positive = arg >= 0
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> switch (ph.type) {
</xsl:text>
<xsl:text> case 'b':
</xsl:text>
<xsl:text> arg = parseInt(arg, 10).toString(2)
</xsl:text>
<xsl:text> break
</xsl:text>
<xsl:text> case 'c':
</xsl:text>
<xsl:text> arg = String.fromCharCode(parseInt(arg, 10))
</xsl:text>
<xsl:text> break
</xsl:text>
<xsl:text> case 'd':
</xsl:text>
<xsl:text> case 'i':
</xsl:text>
<xsl:text> arg = parseInt(arg, 10)
</xsl:text>
<xsl:text> break
</xsl:text>
<xsl:text> case 'j':
</xsl:text>
<xsl:text> arg = JSON.stringify(arg, null, ph.width ? parseInt(ph.width) : 0)
</xsl:text>
<xsl:text> break
</xsl:text>
<xsl:text> case 'e':
</xsl:text>
<xsl:text> arg = ph.precision ? parseFloat(arg).toExponential(ph.precision) : parseFloat(arg).toExponential()
</xsl:text>
<xsl:text> break
</xsl:text>
<xsl:text> case 'f':
</xsl:text>
<xsl:text> arg = ph.precision ? parseFloat(arg).toFixed(ph.precision) : parseFloat(arg)
</xsl:text>
<xsl:text> break
</xsl:text>
<xsl:text> case 'g':
</xsl:text>
<xsl:text> arg = ph.precision ? String(Number(arg.toPrecision(ph.precision))) : parseFloat(arg)
</xsl:text>
<xsl:text> break
</xsl:text>
<xsl:text> case 'o':
</xsl:text>
<xsl:text> arg = (parseInt(arg, 10) >>> 0).toString(8)
</xsl:text>
<xsl:text> break
</xsl:text>
<xsl:text> case 's':
</xsl:text>
<xsl:text> arg = String(arg)
</xsl:text>
<xsl:text> arg = (ph.precision ? arg.substring(0, ph.precision) : arg)
</xsl:text>
<xsl:text> break
</xsl:text>
<xsl:text> case 't':
</xsl:text>
<xsl:text> arg = String(!!arg)
</xsl:text>
<xsl:text> arg = (ph.precision ? arg.substring(0, ph.precision) : arg)
</xsl:text>
<xsl:text> break
</xsl:text>
<xsl:text> case 'T':
</xsl:text>
<xsl:text> arg = Object.prototype.toString.call(arg).slice(8, -1).toLowerCase()
</xsl:text>
<xsl:text> arg = (ph.precision ? arg.substring(0, ph.precision) : arg)
</xsl:text>
<xsl:text> break
</xsl:text>
<xsl:text> case 'u':
</xsl:text>
<xsl:text> arg = parseInt(arg, 10) >>> 0
</xsl:text>
<xsl:text> break
</xsl:text>
<xsl:text> case 'v':
</xsl:text>
<xsl:text> arg = arg.valueOf()
</xsl:text>
<xsl:text> arg = (ph.precision ? arg.substring(0, ph.precision) : arg)
</xsl:text>
<xsl:text> break
</xsl:text>
<xsl:text> case 'x':
</xsl:text>
<xsl:text> arg = (parseInt(arg, 10) >>> 0).toString(16)
</xsl:text>
<xsl:text> break
</xsl:text>
<xsl:text> case 'X':
</xsl:text>
<xsl:text> arg = (parseInt(arg, 10) >>> 0).toString(16).toUpperCase()
</xsl:text>
<xsl:text> break
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> if (re.json.test(ph.type)) {
</xsl:text>
<xsl:text> output += arg
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> else {
</xsl:text>
<xsl:text> if (re.number.test(ph.type) && (!is_positive || ph.sign)) {
</xsl:text>
<xsl:text> sign = is_positive ? '+' : '-'
</xsl:text>
<xsl:text> arg = arg.toString().replace(re.sign, '')
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> else {
</xsl:text>
<xsl:text> sign = ''
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> pad_character = ph.pad_char ? ph.pad_char === '0' ? '0' : ph.pad_char.charAt(1) : ' '
</xsl:text>
<xsl:text> pad_length = ph.width - (sign + arg).length
</xsl:text>
<xsl:text> pad = ph.width ? (pad_length > 0 ? pad_character.repeat(pad_length) : '') : ''
</xsl:text>
<xsl:text> output += ph.align ? sign + arg + pad : (pad_character === '0' ? sign + pad + arg : pad + sign + arg)
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> return output
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> var sprintf_cache = Object.create(null)
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> function sprintf_parse(fmt) {
</xsl:text>
<xsl:text> if (sprintf_cache[fmt]) {
</xsl:text>
<xsl:text> return sprintf_cache[fmt]
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> var _fmt = fmt, match, parse_tree = [], arg_names = 0
</xsl:text>
<xsl:text> while (_fmt) {
</xsl:text>
<xsl:text> if ((match = re.text.exec(_fmt)) !== null) {
</xsl:text>
<xsl:text> parse_tree.push(match[0])
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> else if ((match = re.modulo.exec(_fmt)) !== null) {
</xsl:text>
<xsl:text> parse_tree.push('%')
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> else if ((match = re.placeholder.exec(_fmt)) !== null) {
</xsl:text>
<xsl:text> if (match[2]) {
</xsl:text>
<xsl:text> arg_names |= 1
</xsl:text>
<xsl:text> var field_list = [], replacement_field = match[2], field_match = []
</xsl:text>
<xsl:text> if ((field_match = re.key.exec(replacement_field)) !== null) {
</xsl:text>
<xsl:text> field_list.push(field_match[1])
</xsl:text>
<xsl:text> while ((replacement_field = replacement_field.substring(field_match[0].length)) !== '') {
</xsl:text>
<xsl:text> if ((field_match = re.key_access.exec(replacement_field)) !== null) {
</xsl:text>
<xsl:text> field_list.push(field_match[1])
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> else if ((field_match = re.index_access.exec(replacement_field)) !== null) {
</xsl:text>
<xsl:text> field_list.push(field_match[1])
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> else {
</xsl:text>
<xsl:text> throw new SyntaxError('[sprintf] failed to parse named argument key')
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> else {
</xsl:text>
<xsl:text> throw new SyntaxError('[sprintf] failed to parse named argument key')
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> match[2] = field_list
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> else {
</xsl:text>
<xsl:text> arg_names |= 2
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> if (arg_names === 3) {
</xsl:text>
<xsl:text> throw new Error('[sprintf] mixing positional and named placeholders is not (yet) supported')
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> parse_tree.push(
</xsl:text>
<xsl:text> {
</xsl:text>
<xsl:text> placeholder: match[0],
</xsl:text>
<xsl:text> param_no: match[1],
</xsl:text>
<xsl:text> keys: match[2],
</xsl:text>
<xsl:text> sign: match[3],
</xsl:text>
<xsl:text> pad_char: match[4],
</xsl:text>
<xsl:text> align: match[5],
</xsl:text>
<xsl:text> width: match[6],
</xsl:text>
<xsl:text> precision: match[7],
</xsl:text>
<xsl:text> type: match[8]
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> )
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> else {
</xsl:text>
<xsl:text> throw new SyntaxError('[sprintf] unexpected placeholder')
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> _fmt = _fmt.substring(match[0].length)
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> return sprintf_cache[fmt] = parse_tree
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> /**
</xsl:text>
<xsl:text> * export to either browser or node.js
</xsl:text>
<xsl:text> */
</xsl:text>
<xsl:text> /* eslint-disable quote-props */
</xsl:text>
<xsl:text> if (typeof exports !== 'undefined') {
</xsl:text>
<xsl:text> exports['sprintf'] = sprintf
</xsl:text>
<xsl:text> exports['vsprintf'] = vsprintf
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> if (typeof window !== 'undefined') {
</xsl:text>
<xsl:text> window['sprintf'] = sprintf
</xsl:text>
<xsl:text> window['vsprintf'] = vsprintf
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> if (typeof define === 'function' && define['amd']) {
</xsl:text>
<xsl:text> define(function() {
</xsl:text>
<xsl:text> return {
</xsl:text>
<xsl:text> 'sprintf': sprintf,
</xsl:text>
<xsl:text> 'vsprintf': vsprintf
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> })
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> /* eslint-enable quote-props */
</xsl:text>
<xsl:text>}(); // eslint-disable-line
</xsl:text>
<xsl:text>
</xsl:text>
</xsl:template>
<xsl:template mode="widget_defs" match="widget[@type='DropDown']">
<xsl:param name="hmi_element"/>
<xsl:call-template name="defs_by_labels">
<xsl:with-param select="$hmi_element" name="hmi_element"/>
<xsl:with-param name="labels">
<xsl:text>text box button</xsl:text>
</xsl:with-param>
</xsl:call-template>
<xsl:text> dispatch: function(value) {
</xsl:text>
<xsl:text> if(!this.opened) this.set_selection(value);
</xsl:text>
<xsl:text> },
</xsl:text>
<xsl:text> init: function() {
</xsl:text>
<xsl:text> this.button_elt.setAttribute("onclick", "hmi_widgets['</xsl:text>
<xsl:value-of select="$hmi_element/@id"/>
<xsl:text>'].on_button_click()");
</xsl:text>
<xsl:text> // Save original size of rectangle
</xsl:text>
<xsl:text> this.box_bbox = this.box_elt.getBBox()
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> // Compute margins
</xsl:text>
<xsl:text> text_bbox = this.text_elt.getBBox()
</xsl:text>
<xsl:text> lmargin = text_bbox.x - this.box_bbox.x;
</xsl:text>
<xsl:text> tmargin = text_bbox.y - this.box_bbox.y;
</xsl:text>
<xsl:text> this.margins = [lmargin, tmargin].map(x => Math.max(x,0));
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> // It is assumed that list content conforms to Array interface.
</xsl:text>
<xsl:text> this.content = [
</xsl:text>
<xsl:for-each select="arg">
<xsl:text>"</xsl:text>
<xsl:value-of select="@value"/>
<xsl:text>",
</xsl:text>
</xsl:for-each>
<xsl:text> ];
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> // Index of first visible element in the menu, when opened
</xsl:text>
<xsl:text> this.menu_offset = 0;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> // How mutch to lift the menu vertically so that it does not cross bottom border
</xsl:text>
<xsl:text> this.lift = 0;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> // Event handlers cannot be object method ('this' is unknown)
</xsl:text>
<xsl:text> // as a workaround, handler given to addEventListener is bound in advance.
</xsl:text>
<xsl:text> this.bound_close_on_click_elsewhere = this.close_on_click_elsewhere.bind(this);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> this.opened = false;
</xsl:text>
<xsl:text> },
</xsl:text>
<xsl:text> // Called when a menu entry is clicked
</xsl:text>
<xsl:text> on_selection_click: function(selection) {
</xsl:text>
<xsl:text> this.close();
</xsl:text>
<xsl:text> this.apply_hmi_value(0, selection);
</xsl:text>
<xsl:text> },
</xsl:text>
<xsl:text> on_button_click: function() {
</xsl:text>
<xsl:text> this.open();
</xsl:text>
<xsl:text> },
</xsl:text>
<xsl:text> on_backward_click: function(){
</xsl:text>
<xsl:text> this.scroll(false);
</xsl:text>
<xsl:text> },
</xsl:text>
<xsl:text> on_forward_click:function(){
</xsl:text>
<xsl:text> this.scroll(true);
</xsl:text>
<xsl:text> },
</xsl:text>
<xsl:text> set_selection: function(value) {
</xsl:text>
<xsl:text> let display_str;
</xsl:text>
<xsl:text> if(value >= 0 && value < this.content.length){
</xsl:text>
<xsl:text> // if valid selection resolve content
</xsl:text>
<xsl:text> display_str = this.content[value];
</xsl:text>
<xsl:text> this.last_selection = value;
</xsl:text>
<xsl:text> } else {
</xsl:text>
<xsl:text> // otherwise show problem
</xsl:text>
<xsl:text> display_str = "?"+String(value)+"?";
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> // It is assumed that first span always stays,
</xsl:text>
<xsl:text> // and contains selection when menu is closed
</xsl:text>
<xsl:text> this.text_elt.firstElementChild.textContent = display_str;
</xsl:text>
<xsl:text> },
</xsl:text>
<xsl:text> grow_text: function(up_to) {
</xsl:text>
<xsl:text> let count = 1;
</xsl:text>
<xsl:text> let txt = this.text_elt;
</xsl:text>
<xsl:text> let first = txt.firstElementChild;
</xsl:text>
<xsl:text> // Real world (pixels) boundaries of current page
</xsl:text>
<xsl:text> let bounds = svg_root.getBoundingClientRect();
</xsl:text>
<xsl:text> this.lift = 0;
</xsl:text>
<xsl:text> while(count < up_to) {
</xsl:text>
<xsl:text> let next = first.cloneNode();
</xsl:text>
<xsl:text> // relative line by line text flow instead of absolute y coordinate
</xsl:text>
<xsl:text> next.removeAttribute("y");
</xsl:text>
<xsl:text> next.setAttribute("dy", "1.1em");
</xsl:text>
<xsl:text> // default content to allow computing text element bbox
</xsl:text>
<xsl:text> next.textContent = "...";
</xsl:text>
<xsl:text> // append new span to text element
</xsl:text>
<xsl:text> txt.appendChild(next);
</xsl:text>
<xsl:text> // now check if text extended by one row fits to page
</xsl:text>
<xsl:text> // FIXME : exclude margins to be more accurate on box size
</xsl:text>
<xsl:text> let rect = txt.getBoundingClientRect();
</xsl:text>
<xsl:text> if(rect.bottom > bounds.bottom){
</xsl:text>
<xsl:text> // in case of overflow at the bottom, lift up one row
</xsl:text>
<xsl:text> let backup = first.getAttribute("dy");
</xsl:text>
<xsl:text> // apply lift asr a dy added too first span (y attrib stays)
</xsl:text>
<xsl:text> first.setAttribute("dy", "-"+String((this.lift+1)*1.1)+"em");
</xsl:text>
<xsl:text> rect = txt.getBoundingClientRect();
</xsl:text>
<xsl:text> if(rect.top > bounds.top){
</xsl:text>
<xsl:text> this.lift += 1;
</xsl:text>
<xsl:text> } else {
</xsl:text>
<xsl:text> // if it goes over the top, then backtrack
</xsl:text>
<xsl:text> // restore dy attribute on first span
</xsl:text>
<xsl:text> if(backup)
</xsl:text>
<xsl:text> first.setAttribute("dy", backup);
</xsl:text>
<xsl:text> else
</xsl:text>
<xsl:text> first.removeAttribute("dy");
</xsl:text>
<xsl:text> // remove unwanted child
</xsl:text>
<xsl:text> txt.removeChild(next);
</xsl:text>
<xsl:text> return count;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> count++;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> return count;
</xsl:text>
<xsl:text> },
</xsl:text>
<xsl:text> close_on_click_elsewhere: function(e) {
</xsl:text>
<xsl:text> // inhibit events not targetting spans (menu items)
</xsl:text>
<xsl:text> if(e.target.parentNode !== this.text_elt){
</xsl:text>
<xsl:text> e.stopPropagation();
</xsl:text>
<xsl:text> // close menu in case click is outside box
</xsl:text>
<xsl:text> if(e.target !== this.box_elt)
</xsl:text>
<xsl:text> this.close();
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> },
</xsl:text>
<xsl:text> close: function(){
</xsl:text>
<xsl:text> // Stop hogging all click events
</xsl:text>
<xsl:text> svg_root.removeEventListener("click", this.bound_close_on_click_elsewhere, true);
</xsl:text>
<xsl:text> // Restore position and sixe of widget elements
</xsl:text>
<xsl:text> this.reset_text();
</xsl:text>
<xsl:text> this.reset_box();
</xsl:text>
<xsl:text> // Put the button back in place
</xsl:text>
<xsl:text> this.element.appendChild(this.button_elt);
</xsl:text>
<xsl:text> // Mark as closed (to allow dispatch)
</xsl:text>
<xsl:text> this.opened = false;
</xsl:text>
<xsl:text> // Dispatch last cached value
</xsl:text>
<xsl:text> this.apply_cache();
</xsl:text>
<xsl:text> },
</xsl:text>
<xsl:text> // Set text content when content is smaller than menu (no scrolling)
</xsl:text>
<xsl:text> set_complete_text: function(){
</xsl:text>
<xsl:text> let spans = this.text_elt.children;
</xsl:text>
<xsl:text> let c = 0;
</xsl:text>
<xsl:text> for(let item of this.content){
</xsl:text>
<xsl:text> let span=spans[c];
</xsl:text>
<xsl:text> span.textContent = item;
</xsl:text>
<xsl:text> span.setAttribute("onclick", "hmi_widgets['</xsl:text>
<xsl:value-of select="$hmi_element/@id"/>
<xsl:text>'].on_selection_click("+c+")");
</xsl:text>
<xsl:text> c++;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> },
</xsl:text>
<xsl:text> // Move partial view :
</xsl:text>
<xsl:text> // false : upward, lower value
</xsl:text>
<xsl:text> // true : downward, higher value
</xsl:text>
<xsl:text> scroll: function(forward){
</xsl:text>
<xsl:text> let contentlength = this.content.length;
</xsl:text>
<xsl:text> let spans = this.text_elt.children;
</xsl:text>
<xsl:text> let spanslength = spans.length;
</xsl:text>
<xsl:text> // reduce accounted menu size according to jumps
</xsl:text>
<xsl:text> if(this.menu_offset != 0) spanslength--;
</xsl:text>
<xsl:text> if(this.menu_offset < contentlength - 1) spanslength--;
</xsl:text>
<xsl:text> if(forward){
</xsl:text>
<xsl:text> this.menu_offset = Math.min(
</xsl:text>
<xsl:text> contentlength - spans.length + 1,
</xsl:text>
<xsl:text> this.menu_offset + spanslength);
</xsl:text>
<xsl:text> }else{
</xsl:text>
<xsl:text> this.menu_offset = Math.max(
</xsl:text>
<xsl:text> 0,
</xsl:text>
<xsl:text> this.menu_offset - spanslength);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> console.log(this.menu_offset);
</xsl:text>
<xsl:text> this.set_partial_text();
</xsl:text>
<xsl:text> },
</xsl:text>
<xsl:text> // Setup partial view text content
</xsl:text>
<xsl:text> // with jumps at first and last entry when appropriate
</xsl:text>
<xsl:text> set_partial_text: function(){
</xsl:text>
<xsl:text> let spans = this.text_elt.children;
</xsl:text>
<xsl:text> let contentlength = this.content.length;
</xsl:text>
<xsl:text> let spanslength = spans.length;
</xsl:text>
<xsl:text> let i = this.menu_offset, c = 0;
</xsl:text>
<xsl:text> while(c < spanslength){
</xsl:text>
<xsl:text> let span=spans[c];
</xsl:text>
<xsl:text> // backward jump only present if not exactly at start
</xsl:text>
<xsl:text> if(c == 0 && i != 0){
</xsl:text>
<xsl:text> span.textContent = "↑ ↑ ↑";
</xsl:text>
<xsl:text> span.setAttribute("onclick", "hmi_widgets['</xsl:text>
<xsl:value-of select="$hmi_element/@id"/>
<xsl:text>'].on_backward_click()");
</xsl:text>
<xsl:text> // presence of forward jump when not right at the end
</xsl:text>
<xsl:text> }else if(c == spanslength-1 && i < contentlength - 1){
</xsl:text>
<xsl:text> span.textContent = "↓ ↓ ↓";
</xsl:text>
<xsl:text> span.setAttribute("onclick", "hmi_widgets['</xsl:text>
<xsl:value-of select="$hmi_element/@id"/>
<xsl:text>'].on_forward_click()");
</xsl:text>
<xsl:text> // otherwise normal content
</xsl:text>
<xsl:text> }else{
</xsl:text>
<xsl:text> span.textContent = this.content[i];
</xsl:text>
<xsl:text> span.setAttribute("onclick", "hmi_widgets['</xsl:text>
<xsl:value-of select="$hmi_element/@id"/>
<xsl:text>'].on_selection_click("+i+")");
</xsl:text>
<xsl:text> i++;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> c++;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> },
</xsl:text>
<xsl:text> open: function(){
</xsl:text>
<xsl:text> let length = this.content.length;
</xsl:text>
<xsl:text> // systematically reset text, to strip eventual whitespace spans
</xsl:text>
<xsl:text> this.reset_text();
</xsl:text>
<xsl:text> // grow as much as needed or possible
</xsl:text>
<xsl:text> let slots = this.grow_text(length);
</xsl:text>
<xsl:text> // Depending on final size
</xsl:text>
<xsl:text> if(slots == length) {
</xsl:text>
<xsl:text> // show all at once
</xsl:text>
<xsl:text> this.set_complete_text();
</xsl:text>
<xsl:text> } else {
</xsl:text>
<xsl:text> // eventualy align menu to current selection, compensating for lift
</xsl:text>
<xsl:text> let offset = this.last_selection - this.lift;
</xsl:text>
<xsl:text> if(offset > 0)
</xsl:text>
<xsl:text> this.menu_offset = Math.min(offset + 1, length - slots + 1);
</xsl:text>
<xsl:text> else
</xsl:text>
<xsl:text> this.menu_offset = 0;
</xsl:text>
<xsl:text> // show surrounding values
</xsl:text>
<xsl:text> this.set_partial_text();
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> // Now that text size is known, we can set the box around it
</xsl:text>
<xsl:text> this.adjust_box_to_text();
</xsl:text>
<xsl:text> // Take button out until menu closed
</xsl:text>
<xsl:text> this.element.removeChild(this.button_elt);
</xsl:text>
<xsl:text> // Rise widget to top by moving it to last position among siblings
</xsl:text>
<xsl:text> this.element.parentNode.appendChild(this.element.parentNode.removeChild(this.element));
</xsl:text>
<xsl:text> // disable interaction with background
</xsl:text>
<xsl:text> svg_root.addEventListener("click", this.bound_close_on_click_elsewhere, true);
</xsl:text>
<xsl:text> // mark as open
</xsl:text>
<xsl:text> this.opened = true;
</xsl:text>
<xsl:text> },
</xsl:text>
<xsl:text> // Put text element in normalized state
</xsl:text>
<xsl:text> reset_text: function(){
</xsl:text>
<xsl:text> let txt = this.text_elt;
</xsl:text>
<xsl:text> let first = txt.firstElementChild;
</xsl:text>
<xsl:text> // remove attribute eventually added to first text line while opening
</xsl:text>
<xsl:text> first.removeAttribute("onclick");
</xsl:text>
<xsl:text> first.removeAttribute("dy");
</xsl:text>
<xsl:text> // keep only the first line of text
</xsl:text>
<xsl:text> for(let span of Array.from(txt.children).slice(1)){
</xsl:text>
<xsl:text> txt.removeChild(span)
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> },
</xsl:text>
<xsl:text> // Put rectangle element in saved original state
</xsl:text>
<xsl:text> reset_box: function(){
</xsl:text>
<xsl:text> let m = this.box_bbox;
</xsl:text>
<xsl:text> let b = this.box_elt;
</xsl:text>
<xsl:text> b.x.baseVal.value = m.x;
</xsl:text>
<xsl:text> b.y.baseVal.value = m.y;
</xsl:text>
<xsl:text> b.width.baseVal.value = m.width;
</xsl:text>
<xsl:text> b.height.baseVal.value = m.height;
</xsl:text>
<xsl:text> },
</xsl:text>
<xsl:text> // Use margin and text size to compute box size
</xsl:text>
<xsl:text> adjust_box_to_text: function(){
</xsl:text>
<xsl:text> let [lmargin, tmargin] = this.margins;
</xsl:text>
<xsl:text> let m = this.text_elt.getBBox();
</xsl:text>
<xsl:text> let b = this.box_elt;
</xsl:text>
<xsl:text> b.x.baseVal.value = m.x - lmargin;
</xsl:text>
<xsl:text> b.y.baseVal.value = m.y - tmargin;
</xsl:text>
<xsl:text> b.width.baseVal.value = 2 * lmargin + m.width;
</xsl:text>
<xsl:text> b.height.baseVal.value = 2 * tmargin + m.height;
</xsl:text>
<xsl:text> },
</xsl:text>
</xsl:template>
<xsl:template mode="widget_defs" match="widget[@type='ForEach']">
<xsl:param name="hmi_element"/>
<xsl:if test="count(path) != 1">
<xsl:message terminate="yes">
<xsl:text>ForEach widget </xsl:text>
<xsl:value-of select="$hmi_element/@id"/>
<xsl:text> must have one HMI path given.</xsl:text>
</xsl:message>
</xsl:if>
<xsl:if test="count(arg) != 1">
<xsl:message terminate="yes">
<xsl:text>ForEach widget </xsl:text>
<xsl:value-of select="$hmi_element/@id"/>
<xsl:text> must have one argument given : a class name.</xsl:text>
</xsl:message>
</xsl:if>
<xsl:variable select="arg[1]/@value" name="class"/>
<xsl:variable select="path/@value" name="base_path"/>
<xsl:variable select="$indexed_hmitree/*[@hmipath = $base_path]" name="hmi_index_base"/>
<xsl:variable select="$hmitree/descendant-or-self::*[@path = $hmi_index_base/@path]" name="hmi_tree_base"/>
<xsl:variable select="$hmi_tree_base/*[@class = $class]" name="hmi_tree_items"/>
<xsl:variable select="$indexed_hmitree/*[@path = $hmi_tree_items/@path]" name="hmi_index_items"/>
<xsl:variable select="$hmi_index_items/@hmipath" name="items_paths"/>
<xsl:text> index_pool: [
</xsl:text>
<xsl:for-each select="$hmi_index_items">
<xsl:text> </xsl:text>
<xsl:value-of select="@index"/>
<xsl:if test="position()!=last()">
<xsl:text>,</xsl:text>
</xsl:if>
<xsl:text>
</xsl:text>
</xsl:for-each>
<xsl:text> ],
</xsl:text>
<xsl:text> init: function() {
</xsl:text>
<xsl:variable select="concat($class,':')" name="prefix"/>
<xsl:variable select="concat('^',$prefix,'[+\-][0-9]+')" name="buttons_regex"/>
<xsl:variable select="$hmi_element/*[regexp:test(@inkscape:label, $buttons_regex)]" name="buttons"/>
<xsl:for-each select="$buttons">
<xsl:variable select="substring-after(@inkscape:label, $prefix)" name="op"/>
<xsl:text> id("</xsl:text>
<xsl:value-of select="@id"/>
<xsl:text>").setAttribute("onclick", "hmi_widgets['</xsl:text>
<xsl:value-of select="$hmi_element/@id"/>
<xsl:text>'].on_click('</xsl:text>
<xsl:value-of select="$op"/>
<xsl:text>', evt)");
</xsl:text>
</xsl:for-each>
<xsl:text>
</xsl:text>
<xsl:text> this.items = [
</xsl:text>
<xsl:variable select="concat('^',$prefix,'[0-9]+')" name="items_regex"/>
<xsl:variable select="$hmi_element//*[regexp:test(@inkscape:label, $items_regex)]" name="unordered_items"/>
<xsl:for-each select="$unordered_items">
<xsl:variable select="concat($prefix, string(position()))" name="elt_label"/>
<xsl:variable select="$unordered_items[@inkscape:label = $elt_label]" name="elt"/>
<xsl:variable select="position()" name="pos"/>
<xsl:variable select="$items_paths[$pos]" name="item_path"/>
<xsl:text> [ /* item="</xsl:text>
<xsl:value-of select="$elt_label"/>
<xsl:text>" path="</xsl:text>
<xsl:value-of select="$item_path"/>
<xsl:text>" */
</xsl:text>
<xsl:if test="count($elt)=0">
<xsl:message terminate="yes">
<xsl:text>Missing item labeled </xsl:text>
<xsl:value-of select="$elt_label"/>
<xsl:text> in ForEach widget </xsl:text>
<xsl:value-of select="$hmi_element/@id"/>
</xsl:message>
</xsl:if>
<xsl:for-each select="func:refered_elements($elt)[@id = $hmi_elements/@id][not(@id = $elt/@id)]">
<xsl:if test="not(func:is_descendant_path(func:widget(@id)/path/@value, $item_path))">
<xsl:message terminate="yes">
<xsl:text>Widget id="</xsl:text>
<xsl:value-of select="@id"/>
<xsl:text>" label="</xsl:text>
<xsl:value-of select="@inkscape:label"/>
<xsl:text>" is having wrong path. Accroding to ForEach widget ancestor id="</xsl:text>
<xsl:value-of select="$hmi_element/@id"/>
<xsl:text>", path should be descendant of "</xsl:text>
<xsl:value-of select="$item_path"/>
<xsl:text>".</xsl:text>
</xsl:message>
</xsl:if>
<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: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> item_offset: 0,
</xsl:text>
</xsl:template>
<xsl:template mode="widget_class" match="widget[@type='ForEach']">
<xsl:text>class ForEachWidget extends Widget{
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> unsub_items(){
</xsl:text>
<xsl:text> for(let item of this.items){
</xsl:text>
<xsl:text> for(let widget of item) {
</xsl:text>
<xsl:text> widget.unsub();
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> unsub(){
</xsl:text>
<xsl:text> this.unsub_items();
</xsl:text>
<xsl:text> this.offset = 0;
</xsl:text>
<xsl:text> this.relativeness = undefined;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> sub_items(){
</xsl:text>
<xsl:text> for(let i = 0; i < this.items.length; i++) {
</xsl:text>
<xsl:text> let item = this.items[i];
</xsl:text>
<xsl:text> let orig_item_index = this.index_pool[i];
</xsl:text>
<xsl:text> let item_index = this.index_pool[i+this.item_offset];
</xsl:text>
<xsl:text> let item_index_offset = item_index - orig_item_index;
</xsl:text>
<xsl:text> if(this.relativeness[0])
</xsl:text>
<xsl:text> item_index_offset += this.offset;
</xsl:text>
<xsl:text> for(let widget of item) {
</xsl:text>
<xsl:text> /* all variables of all widgets in a ForEach are all relative.
</xsl:text>
<xsl:text> Really.
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> TODO: allow absolute variables in ForEach widgets
</xsl:text>
<xsl:text> */
</xsl:text>
<xsl:text> widget.sub(item_index_offset, widget.indexes.map(_=>true));
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> sub(new_offset=0, relativeness=[]){
</xsl:text>
<xsl:text> this.offset = new_offset;
</xsl:text>
<xsl:text> this.relativeness = relativeness;
</xsl:text>
<xsl:text> this.sub_items();
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> apply_cache() {
</xsl:text>
<xsl:text> this.items.forEach(item=>item.forEach(widget=>widget.apply_cache()));
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> on_click(opstr, evt) {
</xsl:text>
<xsl:text> let new_item_offset = eval(String(this.item_offset)+opstr);
</xsl:text>
<xsl:text> if(new_item_offset + this.items.length > this.index_pool.length) {
</xsl:text>
<xsl:text> if(this.item_offset + this.items.length == this.index_pool.length)
</xsl:text>
<xsl:text> new_item_offset = 0;
</xsl:text>
<xsl:text> else
</xsl:text>
<xsl:text> new_item_offset = this.index_pool.length - this.items.length;
</xsl:text>
<xsl:text> } else if(new_item_offset < 0) {
</xsl:text>
<xsl:text> if(this.item_offset == 0)
</xsl:text>
<xsl:text> new_item_offset = this.index_pool.length - this.items.length;
</xsl:text>
<xsl:text> else
</xsl:text>
<xsl:text> new_item_offset = 0;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> this.item_offset = new_item_offset;
</xsl:text>
<xsl:text> this.unsub_items();
</xsl:text>
<xsl:text> this.sub_items();
</xsl:text>
<xsl:text> update_subscriptions();
</xsl:text>
<xsl:text> need_cache_apply.push(this);
</xsl:text>
<xsl:text> jumps_need_update = true;
</xsl:text>
<xsl:text> requestHMIAnimation();
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>}
</xsl:text>
</xsl:template>
<xsl:template mode="widget_defs" match="widget[@type='Input']">
<xsl:param name="hmi_element"/>
<xsl:call-template name="defs_by_labels">
<xsl:with-param select="$hmi_element" name="hmi_element"/>
<xsl:with-param name="labels">
<xsl:text>key_pos</xsl:text>
</xsl:with-param>
<xsl:with-param select="'no'" name="mandatory"/>
</xsl:call-template>
<xsl:variable name="value_elt">
<xsl:call-template name="defs_by_labels">
<xsl:with-param select="$hmi_element" name="hmi_element"/>
<xsl:with-param name="labels">
<xsl:text>value</xsl:text>
</xsl:with-param>
<xsl:with-param select="'no'" name="mandatory"/>
</xsl:call-template>
</xsl:variable>
<xsl:variable select="string-length($value_elt)>0" name="have_value"/>
<xsl:value-of select="$value_elt"/>
<xsl:if test="$have_value">
<xsl:text> frequency: 5,
</xsl:text>
</xsl:if>
<xsl:text> last_val: undefined,
</xsl:text>
<xsl:text> dispatch: function(value) {
</xsl:text>
<xsl:text> this.last_val = value;
</xsl:text>
<xsl:if test="$have_value">
<xsl:text> this.value_elt.textContent = String(value);
</xsl:text>
</xsl:if>
<xsl:text> },
</xsl:text>
<xsl:variable select="$hmi_element/*[@inkscape:label='edit'][1]/@id" name="edit_elt_id"/>
<xsl:text> init: function() {
</xsl:text>
<xsl:if test="$edit_elt_id">
<xsl:text> id("</xsl:text>
<xsl:value-of select="$edit_elt_id"/>
<xsl:text>").setAttribute("onclick", "hmi_widgets['</xsl:text>
<xsl:value-of select="$hmi_element/@id"/>
<xsl:text>'].on_edit_click()");
</xsl:text>
</xsl:if>
<xsl:for-each select="$hmi_element/*[regexp:test(@inkscape:label,'^[=+\-].+')]">
<xsl:text> id("</xsl:text>
<xsl:value-of select="@id"/>
<xsl:text>").setAttribute("onclick", "hmi_widgets['</xsl:text>
<xsl:value-of select="$hmi_element/@id"/>
<xsl:text>'].on_op_click('</xsl:text>
<xsl:value-of select="func:escape_quotes(@inkscape:label)"/>
<xsl:text>')");
</xsl:text>
</xsl:for-each>
<xsl:text> },
</xsl:text>
<xsl:text> on_op_click: function(opstr) {
</xsl:text>
<xsl:text> let new_val = this.change_hmi_value(0, opstr);
</xsl:text>
<xsl:text> },
</xsl:text>
<xsl:text> on_edit_click: function(opstr) {
</xsl:text>
<xsl:text> var size = (typeof this.key_pos_elt !== 'undefined') ? this.key_pos_elt.getBBox() : undefined
</xsl:text>
<xsl:text> edit_value("</xsl:text>
<xsl:value-of select="path/@value"/>
<xsl:text>", "</xsl:text>
<xsl:value-of select="path/@type"/>
<xsl:text>", this, this.last_val,size);
</xsl:text>
<xsl:text> },
</xsl:text>
<xsl:text> edit_callback: function(new_val) {
</xsl:text>
<xsl:text> this.apply_hmi_value(0, new_val);
</xsl:text>
<xsl:text> },
</xsl:text>
</xsl:template>
<xsl:template mode="widget_class" match="widget[@type='JsonTable']">
<xsl:text>class JsonTableWidget extends Widget{
</xsl:text>
<xsl:text> do_http_request() {
</xsl:text>
<xsl:text> const query = {
</xsl:text>
<xsl:text> offset: '42',
</xsl:text>
<xsl:text> filter: '*powerloss*',
</xsl:text>
<xsl:text> args: this.args
</xsl:text>
<xsl:text> };
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> const options = {
</xsl:text>
<xsl:text> method: 'POST',
</xsl:text>
<xsl:text> body: JSON.stringify(query),
</xsl:text>
<xsl:text> headers: {'Content-Type': 'application/json'}
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> fetch(this.args[0], options)
</xsl:text>
<xsl:text> .then(res => res.json())
</xsl:text>
<xsl:text> .then(this.spread_json_data);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> dispatch(value) {
</xsl:text>
<xsl:text> this.do_http_request();
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> on_click(evt) {
</xsl:text>
<xsl:text> this.do_http_request();
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> init() {
</xsl:text>
<xsl:text> this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)");
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>}
</xsl:text>
</xsl:template>
<xsl:template mode="json_table_elt_render" match="svg:*">
<xsl:message terminate="yes">
<xsl:text>JsonTable Widget can't contain element of type </xsl:text>
<xsl:value-of select="local-name()"/>
<xsl:text>.</xsl:text>
</xsl:message>
</xsl:template>
<xsl:variable select="$parsed_widgets/widget[@type = 'TextStyleList']" name="hmi_textstylelists_descs"/>
<xsl:variable select="$hmi_elements[@id = $hmi_textstylelists_descs/@id]" name="hmi_textstylelists"/>
<xsl:template mode="json_table_elt_render" match="svg:use">
<xsl:param name="value_expr"/>
<xsl:variable select="substring-after(@xlink:href,'#')" name="targetid"/>
<xsl:variable select="$hmi_lists[(@id | */@id) = $targetid]" name="from_list"/>
<xsl:variable select="$hmi_textstylelists[(@id | */@id) = $targetid]" name="from_textstylelist"/>
<xsl:choose>
<xsl:when test="count($from_list) > 0">
<xsl:text> id("</xsl:text>
<xsl:value-of select="@id"/>
<xsl:text>").setAttribute("xlink:href",
</xsl:text>
<xsl:text> "#"+hmi_widgets["</xsl:text>
<xsl:value-of select="$from_list/@id"/>
<xsl:text>"].items[</xsl:text>
<xsl:value-of select="$value_expr"/>
<xsl:text>]);
</xsl:text>
</xsl:when>
<xsl:when test="count($from_textstylelist) > 0">
<xsl:text> console.log("from_textsylelist","</xsl:text>
<xsl:value-of select="@id"/>
<xsl:text>", "</xsl:text>
<xsl:value-of select="$value_expr"/>
<xsl:text>", </xsl:text>
<xsl:value-of select="$value_expr"/>
<xsl:text>,
</xsl:text>
<xsl:text> hmi_widgets["</xsl:text>
<xsl:value-of select="$from_textstylelist/@id"/>
<xsl:text>"].items[</xsl:text>
<xsl:value-of select="$value_expr"/>
<xsl:text>]);
</xsl:text>
</xsl:when>
<xsl:otherwise>
<xsl:message terminate="no">
<xsl:text>Clones (svg:use) in JsonTable Widget must point to a valid HMI:List or HMI:TextStyleList widget or item. Reference "</xsl:text>
<xsl:value-of select="@xlink:href"/>
<xsl:text>" is not valid and will not be updated.</xsl:text>
</xsl:message>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
<xsl:template mode="json_table_elt_render" match="svg:text">
<xsl:param name="value_expr"/>
<xsl:text> id("</xsl:text>
<xsl:value-of select="@id"/>
<xsl:text>").textContent = String(</xsl:text>
<xsl:value-of select="$value_expr"/>
<xsl:text>);
</xsl:text>
</xsl:template>
<xsl:template mode="json_table_render" match="svg:*">
<xsl:param name="objname"/>
<xsl:apply-templates mode="json_table_elt_render" select=".">
<xsl:with-param name="value_expr">
<xsl:value-of select="$objname"/>
<xsl:value-of select="substring-before(@inkscape:label, ' ')"/>
</xsl:with-param>
</xsl:apply-templates>
</xsl:template>
<xsl:template mode="json_table_render" match="svg:g">
<xsl:param name="objname"/>
<xsl:text> let obj_</xsl:text>
<xsl:value-of select="@id"/>
<xsl:text> = </xsl:text>
<xsl:value-of select="$objname"/>
<xsl:value-of select="substring-before(@inkscape:label, ' ')"/>
<xsl:text>;
</xsl:text>
<xsl:apply-templates mode="json_table_render" select="*[@inkscape:label]">
<xsl:with-param name="objname">
<xsl:text>obj_</xsl:text>
<xsl:value-of select="@id"/>
</xsl:with-param>
</xsl:apply-templates>
</xsl:template>
<xsl:template mode="widget_defs" match="widget[@type='JsonTable']">
<xsl:param name="hmi_element"/>
<xsl:call-template name="defs_by_labels">
<xsl:with-param select="$hmi_element" name="hmi_element"/>
<xsl:with-param name="labels">
<xsl:text>data</xsl:text>
</xsl:with-param>
</xsl:call-template>
<xsl:call-template name="defs_by_labels">
<xsl:with-param select="$hmi_element" name="hmi_element"/>
<xsl:with-param name="labels">
<xsl:text>forward backward cursor</xsl:text>
</xsl:with-param>
<xsl:with-param select="'no'" name="mandatory"/>
</xsl:call-template>
<xsl:variable select="$result_svg_ns//*[@id = $hmi_element/@id]/*[@inkscape:label = 'data']" name="data_elt"/>
<xsl:text> spread_json_data: function(jdata) {
</xsl:text>
<xsl:apply-templates mode="json_table_render" select="$data_elt/*">
<xsl:with-param select="'jdata'" name="objname"/>
</xsl:apply-templates>
<xsl:text> }
</xsl:text>
</xsl:template>
<xsl:template name="jump_widget_activity">
<xsl:param name="hmi_element"/>
<xsl:call-template name="defs_by_labels">
<xsl:with-param select="$hmi_element" name="hmi_element"/>
<xsl:with-param name="labels">
<xsl:text>active inactive</xsl:text>
</xsl:with-param>
<xsl:with-param select="'no'" name="mandatory"/>
</xsl:call-template>
</xsl:template>
<xsl:template name="jump_widget_disability">
<xsl:param name="hmi_element"/>
<xsl:call-template name="defs_by_labels">
<xsl:with-param select="$hmi_element" name="hmi_element"/>
<xsl:with-param name="labels">
<xsl:text>disabled</xsl:text>
</xsl:with-param>
<xsl:with-param select="'no'" name="mandatory"/>
</xsl:call-template>
</xsl:template>
<xsl:template mode="widget_defs" match="widget[@type='Jump']">
<xsl:param name="hmi_element"/>
<xsl:variable name="activity">
<xsl:call-template name="jump_widget_activity">
<xsl:with-param select="$hmi_element" name="hmi_element"/>
</xsl:call-template>
</xsl:variable>
<xsl:variable select="string-length($activity)>0" name="have_activity"/>
<xsl:value-of select="$activity"/>
<xsl:variable name="disability">
<xsl:call-template name="jump_widget_disability">
<xsl:with-param select="$hmi_element" name="hmi_element"/>
</xsl:call-template>
</xsl:variable>
<xsl:variable select="$have_activity and string-length($disability)>0" name="have_disability"/>
<xsl:value-of select="$disability"/>
<xsl:if test="$have_activity">
<xsl:text> active: false,
</xsl:text>
<xsl:if test="$have_disability">
<xsl:text> disabled: false,
</xsl:text>
<xsl:text> frequency: 2,
</xsl:text>
<xsl:text> dispatch: function(value) {
</xsl:text>
<xsl:text> this.disabled = !Number(value);
</xsl:text>
<xsl:text> this.update();
</xsl:text>
<xsl:text> },
</xsl:text>
</xsl:if>
<xsl:text> update: function(){
</xsl:text>
<xsl:if test="$have_disability">
<xsl:text> if(this.disabled) {
</xsl:text>
<xsl:text> /* show disabled */
</xsl:text>
<xsl:text> this.disabled_elt.setAttribute("style", this.active_elt_style);
</xsl:text>
<xsl:text> /* hide inactive */
</xsl:text>
<xsl:text> this.inactive_elt.setAttribute("style", "display:none");
</xsl:text>
<xsl:text> /* hide active */
</xsl:text>
<xsl:text> this.active_elt.setAttribute("style", "display:none");
</xsl:text>
<xsl:text> } else {
</xsl:text>
<xsl:text> /* hide disabled */
</xsl:text>
<xsl:text> this.disabled_elt.setAttribute("style", "display:none");
</xsl:text>
</xsl:if>
<xsl:text> if(this.active) {
</xsl:text>
<xsl:text> /* show active */
</xsl:text>
<xsl:text> this.active_elt.setAttribute("style", this.active_elt_style);
</xsl:text>
<xsl:text> /* hide inactive */
</xsl:text>
<xsl:text> this.inactive_elt.setAttribute("style", "display:none");
</xsl:text>
<xsl:text> } else {
</xsl:text>
<xsl:text> /* show inactive */
</xsl:text>
<xsl:text> this.inactive_elt.setAttribute("style", this.inactive_elt_style);
</xsl:text>
<xsl:text> /* hide active */
</xsl:text>
<xsl:text> this.active_elt.setAttribute("style", "display:none");
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:if test="$have_disability">
<xsl:text> }
</xsl:text>
</xsl:if>
<xsl:text> },
</xsl:text>
</xsl:if>
<xsl:text> on_click: function(evt) {
</xsl:text>
<xsl:text> const index = this.indexes.length > 0 ? this.indexes[0] + this.offset : undefined;
</xsl:text>
<xsl:text> const name = this.args[0];
</xsl:text>
<xsl:text> switch_page(name, index);
</xsl:text>
<xsl:text> },
</xsl:text>
<xsl:if test="$have_activity">
<xsl:text> notify_page_change: function(page_name, index){
</xsl:text>
<xsl:text> const ref_index = this.indexes.length > 0 ? this.indexes[0] + this.offset : undefined;
</xsl:text>
<xsl:text> const ref_name = this.args[0];
</xsl:text>
<xsl:text> this.active =((ref_name == undefined || ref_name == page_name) && index == ref_index);
</xsl:text>
<xsl:text> this.update();
</xsl:text>
<xsl:text> },
</xsl:text>
</xsl:if>
<xsl:text> init: function() {
</xsl:text>
<xsl:text> this.element.setAttribute("onclick", "hmi_widgets['</xsl:text>
<xsl:value-of select="$hmi_element/@id"/>
<xsl:text>'].on_click(evt)");
</xsl:text>
<xsl:if test="$have_activity">
<xsl:text> this.active_elt_style = this.active_elt.getAttribute("style");
</xsl:text>
<xsl:text> this.inactive_elt_style = this.inactive_elt.getAttribute("style");
</xsl:text>
</xsl:if>
<xsl:choose>
<xsl:when test="$have_disability">
<xsl:text> this.disabled_elt_style = this.disabled_elt.getAttribute("style");
</xsl:text>
</xsl:when>
<xsl:otherwise>
<xsl:text> this.unsubscribable = true;
</xsl:text>
</xsl:otherwise>
</xsl:choose>
<xsl:text> },
</xsl:text>
</xsl:template>
<xsl:template mode="per_page_widget_template" match="widget[@type='Jump']">
<xsl:param name="page_desc"/>
<xsl:if test="path">
<xsl:variable name="target_page_name">
<xsl:choose>
<xsl:when test="arg">
<xsl:value-of select="arg[1]/@value"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$page_desc/arg[1]/@value"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<xsl:variable name="target_page_path">
<xsl:choose>
<xsl:when test="arg">
<xsl:value-of select="$hmi_pages_descs[arg[1]/@value = $target_page_name]/path[1]/@value"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$page_desc/path[1]/@value"/>
</xsl:otherwise>
</xsl:choose>
</xsl:variable>
<xsl:if test="not(func:same_class_paths($target_page_path, path[1]/@value))">
<xsl:message terminate="yes">
<xsl:text>Jump id="</xsl:text>
<xsl:value-of select="@id"/>
<xsl:text>" to page "</xsl:text>
<xsl:value-of select="$target_page_name"/>
<xsl:text>" with incompatible path "</xsl:text>
<xsl:value-of select="path[1]/@value"/>
<xsl:text> (must be same class as "</xsl:text>
<xsl:value-of select="$target_page_path"/>
<xsl:text>")</xsl:text>
</xsl:message>
</xsl:if>
</xsl:if>
</xsl:template>
<declarations:jump/>
<xsl:template match="declarations:jump">
<xsl:text>
</xsl:text>
<xsl:text>/* </xsl:text>
<xsl:value-of select="local-name()"/>
<xsl:text> */
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>var jumps_need_update = false;
</xsl:text>
<xsl:text>var jump_history = [[default_page, undefined]];
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>function update_jumps() {
</xsl:text>
<xsl:text> page_desc[current_visible_page].jumps.map(w=>w.notify_page_change(current_visible_page,current_page_index));
</xsl:text>
<xsl:text> jumps_need_update = false;
</xsl:text>
<xsl:text>};
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>
</xsl:text>
</xsl:template>
<declarations:keypad/>
<xsl:template match="declarations:keypad">
<xsl:text>
</xsl:text>
<xsl:text>/* </xsl:text>
<xsl:value-of select="local-name()"/>
<xsl:text> */
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>var keypads = {
</xsl:text>
<xsl:for-each select="$keypads_descs">
<xsl:variable select="@id" name="keypad_id"/>
<xsl:for-each select="arg">
<xsl:variable select="$geometry[@Id = $keypad_id]" name="g"/>
<xsl:text> "</xsl:text>
<xsl:value-of select="@value"/>
<xsl:text>":["</xsl:text>
<xsl:value-of select="$keypad_id"/>
<xsl:text>", </xsl:text>
<xsl:value-of select="$g/@x"/>
<xsl:text>, </xsl:text>
<xsl:value-of select="$g/@y"/>
<xsl:text>],
</xsl:text>
</xsl:for-each>
</xsl:for-each>
<xsl:text>}
</xsl:text>
<xsl:text>
</xsl:text>
</xsl:template>
<xsl:template mode="widget_class" match="widget[@type='Keypad']">
<xsl:text>class KeypadWidget extends Widget{
</xsl:text>
<xsl:text> moving = undefined;
</xsl:text>
<xsl:text> click = undefined;
</xsl:text>
<xsl:text> offset = undefined;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> on_position_click(evt) {
</xsl:text>
<xsl:text> this.moving = true;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> // chatch window events
</xsl:text>
<xsl:text> window.addEventListener("touchmove", this.bound_on_drag, true);
</xsl:text>
<xsl:text> window.addEventListener("mousemove", this.bound_on_drag, true);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> window.addEventListener("mouseup", this.bound_on_release, true)
</xsl:text>
<xsl:text> window.addEventListener("touchend", this.bound_on_release, true);
</xsl:text>
<xsl:text> window.addEventListener("touchcancel", this.bound_on_release, true);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> // get click position offset from widget x,y and save it to variable
</xsl:text>
<xsl:text> var keypad_borders = this.position_elt.getBoundingClientRect();
</xsl:text>
<xsl:text> var clickX = undefined;
</xsl:text>
<xsl:text> var clickY = undefined;
</xsl:text>
<xsl:text> if (evt.type == "touchstart"){
</xsl:text>
<xsl:text> clickX = Math.ceil(evt.touches[0].clientX);
</xsl:text>
<xsl:text> clickY = Math.ceil(evt.touches[0].clientY);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> else{
</xsl:text>
<xsl:text> clickX = evt.pageX;
</xsl:text>
<xsl:text> clickY = evt.pageY;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> this.offset=[clickX-keypad_borders.left,clickY-keypad_borders.top]
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> on_release(evt) {
</xsl:text>
<xsl:text> //relase binds
</xsl:text>
<xsl:text> window.removeEventListener("touchmove", this.bound_on_drag, true);
</xsl:text>
<xsl:text> window.removeEventListener("mousemove", this.bound_on_drag, true);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> window.removeEventListener("mouseup", this.bound_on_release, true)
</xsl:text>
<xsl:text> window.removeEventListener("touchend", this.bound_on_release, true);
</xsl:text>
<xsl:text> window.removeEventListener("touchcancel", this.bound_on_release, true);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> if(this.moving)
</xsl:text>
<xsl:text> this.moving = false;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> on_drag(evt) {
</xsl:text>
<xsl:text> if(this.moving)
</xsl:text>
<xsl:text> //get mouse coordinates
</xsl:text>
<xsl:text> var clickX = undefined;
</xsl:text>
<xsl:text> var clickY = undefined;
</xsl:text>
<xsl:text> if (evt.type == "touchmove"){
</xsl:text>
<xsl:text> clickX = Math.ceil(evt.touches[0].clientX);
</xsl:text>
<xsl:text> clickY = Math.ceil(evt.touches[0].clientY);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> else{
</xsl:text>
<xsl:text> clickX = evt.pageX;
</xsl:text>
<xsl:text> clickY = evt.pageY;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> this.click = [clickX,clickY]
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> //requeset redraw
</xsl:text>
<xsl:text> this.request_animate();
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> animate(){
</xsl:text>
<xsl:text> //get keyboard pos in html
</xsl:text>
<xsl:text> let [eltid, tmpgrp] = current_modal;
</xsl:text>
<xsl:text> let [xcoord,ycoord] = this.coordinates;
</xsl:text>
<xsl:text> let [clickX,clickY] = this.click;
</xsl:text>
<xsl:text> let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> //translate keyboard position
</xsl:text>
<xsl:text> let mouseX = ((clickX-this.offset[0])/window.innerWidth)*svgWidth;
</xsl:text>
<xsl:text> let mouseY = ((clickY-this.offset[1])/window.innerHeight)*svgHeight;
</xsl:text>
<xsl:text> tmpgrp.setAttribute("transform","translate("+String(xdest-xcoord+mouseX)+","+String(ydest-ycoord+mouseY)+")");
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> on_key_click(symbols) {
</xsl:text>
<xsl:text> var syms = symbols.split(" ");
</xsl:text>
<xsl:text> this.shift |= this.caps;
</xsl:text>
<xsl:text> this.editstr += syms[this.shift?syms.length-1:0];
</xsl:text>
<xsl:text> this.shift = false;
</xsl:text>
<xsl:text> this.update();
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> on_Esc_click() {
</xsl:text>
<xsl:text> end_modal.call(this);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> on_Enter_click() {
</xsl:text>
<xsl:text> end_modal.call(this);
</xsl:text>
<xsl:text> let callback_obj = this.result_callback_obj;
</xsl:text>
<xsl:text> callback_obj.edit_callback(this.editstr);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> on_BackSpace_click() {
</xsl:text>
<xsl:text> this.editstr = this.editstr.slice(0,this.editstr.length-1);
</xsl:text>
<xsl:text> this.update();
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> on_Sign_click() {
</xsl:text>
<xsl:text> if(this.editstr[0] == "-")
</xsl:text>
<xsl:text> this.editstr = this.editstr.slice(1,this.editstr.length);
</xsl:text>
<xsl:text> else
</xsl:text>
<xsl:text> this.editstr = "-" + this.editstr;
</xsl:text>
<xsl:text> this.update();
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> on_NumDot_click() {
</xsl:text>
<xsl:text> if(this.editstr.indexOf(".") == "-1"){
</xsl:text>
<xsl:text> this.editstr += ".";
</xsl:text>
<xsl:text> this.update();
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> on_Space_click() {
</xsl:text>
<xsl:text> this.editstr += " ";
</xsl:text>
<xsl:text> this.update();
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> caps = false;
</xsl:text>
<xsl:text> _caps = undefined;
</xsl:text>
<xsl:text> on_CapsLock_click() {
</xsl:text>
<xsl:text> this.caps = !this.caps;
</xsl:text>
<xsl:text> this.update();
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> shift = false;
</xsl:text>
<xsl:text> _shift = undefined;
</xsl:text>
<xsl:text> on_Shift_click() {
</xsl:text>
<xsl:text> this.shift = !this.shift;
</xsl:text>
<xsl:text> this.caps = false;
</xsl:text>
<xsl:text> this.update();
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> editstr = "";
</xsl:text>
<xsl:text> _editstr = undefined;
</xsl:text>
<xsl:text> result_callback_obj = undefined;
</xsl:text>
<xsl:text> start_edit(info, valuetype, callback_obj, initial,size) {
</xsl:text>
<xsl:text> show_modal.call(this,size);
</xsl:text>
<xsl:text> this.editstr = initial;
</xsl:text>
<xsl:text> this.result_callback_obj = callback_obj;
</xsl:text>
<xsl:text> this.Info_elt.textContent = info;
</xsl:text>
<xsl:text> this.shift = false;
</xsl:text>
<xsl:text> this.caps = false;
</xsl:text>
<xsl:text> this.update();
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> update() {
</xsl:text>
<xsl:text> if(this.editstr != this._editstr){
</xsl:text>
<xsl:text> this._editstr = this.editstr;
</xsl:text>
<xsl:text> this.Value_elt.textContent = this.editstr;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> if(this.shift != this._shift){
</xsl:text>
<xsl:text> this._shift = this.shift;
</xsl:text>
<xsl:text> (this.shift?widget_active_activable:widget_inactive_activable)(this.Shift_sub);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> if(this.caps != this._caps){
</xsl:text>
<xsl:text> this._caps = this.caps;
</xsl:text>
<xsl:text> (this.caps?widget_active_activable:widget_inactive_activable)(this.CapsLock_sub);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>}
</xsl:text>
</xsl:template>
<xsl:template mode="widget_defs" match="widget[@type='Keypad']">
<xsl:param name="hmi_element"/>
<xsl:call-template name="defs_by_labels">
<xsl:with-param select="$hmi_element" name="hmi_element"/>
<xsl:with-param name="labels">
<xsl:text>Esc Enter BackSpace Keys Info Value</xsl:text>
</xsl:with-param>
</xsl:call-template>
<xsl:call-template name="defs_by_labels">
<xsl:with-param select="$hmi_element" name="hmi_element"/>
<xsl:with-param name="labels">
<xsl:text>Sign Space NumDot position</xsl:text>
</xsl:with-param>
<xsl:with-param select="'no'" name="mandatory"/>
</xsl:call-template>
<xsl:call-template name="defs_by_labels">
<xsl:with-param select="$hmi_element" name="hmi_element"/>
<xsl:with-param name="labels">
<xsl:text>CapsLock Shift</xsl:text>
</xsl:with-param>
<xsl:with-param select="'no'" name="mandatory"/>
<xsl:with-param select="'active inactive'" name="subelements"/>
</xsl:call-template>
<xsl:text> init: function() {
</xsl:text>
<xsl:for-each select="$hmi_element/*[@inkscape:label = 'Keys']/*">
<xsl:text> id("</xsl:text>
<xsl:value-of select="@id"/>
<xsl:text>").setAttribute("onclick", "hmi_widgets['</xsl:text>
<xsl:value-of select="$hmi_element/@id"/>
<xsl:text>'].on_key_click('</xsl:text>
<xsl:value-of select="func:escape_quotes(@inkscape:label)"/>
<xsl:text>')");
</xsl:text>
</xsl:for-each>
<xsl:for-each select="str:split('Esc Enter BackSpace Sign Space NumDot CapsLock Shift')">
<xsl:text> if(this.</xsl:text>
<xsl:value-of select="."/>
<xsl:text>_elt)
</xsl:text>
<xsl:text> this.</xsl:text>
<xsl:value-of select="."/>
<xsl:text>_elt.setAttribute("onclick", "hmi_widgets['</xsl:text>
<xsl:value-of select="$hmi_element/@id"/>
<xsl:text>'].on_</xsl:text>
<xsl:value-of select="."/>
<xsl:text>_click()");
</xsl:text>
</xsl:for-each>
<xsl:text> if(this.position_elt){
</xsl:text>
<xsl:text> this.bound_on_release = this.on_release.bind(this);
</xsl:text>
<xsl:text> this.bound_on_drag = this.on_drag.bind(this);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> this.position_elt.setAttribute("onmousedown", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)");
</xsl:text>
<xsl:text> this.position_elt.setAttribute("ontouchstart", "hmi_widgets['"+this.element_id+"'].on_position_click(evt)");
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> },
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:variable select="$geometry[@Id = $hmi_element/@id]" name="g"/>
<xsl:text> coordinates: [</xsl:text>
<xsl:value-of select="$g/@x"/>
<xsl:text>, </xsl:text>
<xsl:value-of select="$g/@y"/>
<xsl:text>],
</xsl:text>
</xsl:template>
<xsl:template mode="widget_defs" match="widget[@type='List' or @type='TextStyleList']">
<xsl:param name="hmi_element"/>
<xsl:text> items: {
</xsl:text>
<xsl:for-each select="$hmi_element/*[@inkscape:label]">
<xsl:text> </xsl:text>
<xsl:value-of select="func:escape_quotes(@inkscape:label)"/>
<xsl:text>: "</xsl:text>
<xsl:value-of select="@id"/>
<xsl:text>",
</xsl:text>
</xsl:for-each>
<xsl:text> },
</xsl:text>
</xsl:template>
<xsl:template mode="widget_class" match="widget[@type='Meter']">
<xsl:text>class MeterWidget extends Widget{
</xsl:text>
<xsl:text> frequency = 10;
</xsl:text>
<xsl:text> origin = undefined;
</xsl:text>
<xsl:text> range = undefined;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> dispatch(value) {
</xsl:text>
<xsl:text> if(this.value_elt)
</xsl:text>
<xsl:text> this.value_elt.textContent = String(value);
</xsl:text>
<xsl:text> let [min,max,totallength] = this.range;
</xsl:text>
<xsl:text> let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min)));
</xsl:text>
<xsl:text> let tip = this.range_elt.getPointAtLength(length);
</xsl:text>
<xsl:text> this.needle_elt.setAttribute('d', "M "+this.origin.x+","+this.origin.y+" "+tip.x+","+tip.y);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> init() {
</xsl:text>
<xsl:text> let min = this.min_elt ?
</xsl:text>
<xsl:text> Number(this.min_elt.textContent) :
</xsl:text>
<xsl:text> this.args.length >= 1 ? this.args[0] : 0;
</xsl:text>
<xsl:text> let max = this.max_elt ?
</xsl:text>
<xsl:text> Number(this.max_elt.textContent) :
</xsl:text>
<xsl:text> this.args.length >= 2 ? this.args[1] : 100;
</xsl:text>
<xsl:text> this.range = [min, max, this.range_elt.getTotalLength()]
</xsl:text>
<xsl:text> this.origin = this.needle_elt.getPointAtLength(0);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>}
</xsl:text>
</xsl:template>
<xsl:template mode="widget_defs" match="widget[@type='Meter']">
<xsl:param name="hmi_element"/>
<xsl:call-template name="defs_by_labels">
<xsl:with-param select="$hmi_element" name="hmi_element"/>
<xsl:with-param name="labels">
<xsl:text>needle range</xsl:text>
</xsl:with-param>
</xsl:call-template>
<xsl:call-template name="defs_by_labels">
<xsl:with-param select="$hmi_element" name="hmi_element"/>
<xsl:with-param name="labels">
<xsl:text>value min max</xsl:text>
</xsl:with-param>
<xsl:with-param select="'no'" name="mandatory"/>
</xsl:call-template>
<xsl:text>
</xsl:text>
</xsl:template>
<xsl:template mode="widget_class" match="widget[@type='MultiState']">
<xsl:text>class MultiStateWidget extends Widget{
</xsl:text>
<xsl:text> frequency = 5;
</xsl:text>
<xsl:text> state = 0;
</xsl:text>
<xsl:text> dispatch(value) {
</xsl:text>
<xsl:text> this.state = value;
</xsl:text>
<xsl:text> for(let choice of this.choices){
</xsl:text>
<xsl:text> if(this.state != choice.value){
</xsl:text>
<xsl:text> choice.elt.setAttribute("style", "display:none");
</xsl:text>
<xsl:text> } else {
</xsl:text>
<xsl:text> choice.elt.setAttribute("style", choice.style);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> on_click(evt) {
</xsl:text>
<xsl:text> //get current selected value
</xsl:text>
<xsl:text> let next_ind;
</xsl:text>
<xsl:text> for(next_ind=0; next_ind<this.choices.length; next_ind++){
</xsl:text>
<xsl:text> if(this.state == this.choices[next_ind].value){
</xsl:text>
<xsl:text> next_ind = next_ind + 1;
</xsl:text>
<xsl:text> break;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> //get next selected value
</xsl:text>
<xsl:text> if(this.choices.length > next_ind){
</xsl:text>
<xsl:text> this.state = this.choices[next_ind].value;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> else{
</xsl:text>
<xsl:text> this.state = this.choices[0].value;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> //post value to plc
</xsl:text>
<xsl:text> this.apply_hmi_value(0, this.state);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> init() {
</xsl:text>
<xsl:text> this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)");
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>}
</xsl:text>
</xsl:template>
<xsl:template mode="widget_defs" match="widget[@type='MultiState']">
<xsl:param name="hmi_element"/>
<xsl:text> choices: [
</xsl:text>
<xsl:variable select="'^("[^"].*"|\-?[0-9]+|false|true)(#.*)?$'" name="regex"/>
<xsl:for-each select="$result_svg_ns//*[@id = $hmi_element/@id]//*[regexp:test(@inkscape:label,$regex)]">
<xsl:variable select="regexp:match(@inkscape:label,$regex)[2]" name="literal"/>
<xsl:text> {
</xsl:text>
<xsl:text> elt:id("</xsl:text>
<xsl:value-of select="@id"/>
<xsl:text>"),
</xsl:text>
<xsl:text> style:"</xsl:text>
<xsl:value-of select="@style"/>
<xsl:text>",
</xsl:text>
<xsl:text> value:</xsl:text>
<xsl:value-of select="$literal"/>
<xsl:text>
</xsl:text>
<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:template>
<xsl:template mode="widget_class" match="widget[@type='Slider']">
<xsl:text>class SliderWidget extends Widget{
</xsl:text>
<xsl:text> frequency = 5;
</xsl:text>
<xsl:text> range = undefined;
</xsl:text>
<xsl:text> fi = undefined;
</xsl:text>
<xsl:text> svg_dist = undefined;
</xsl:text>
<xsl:text> drag = false;
</xsl:text>
<xsl:text> enTimer = false;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> dispatch(value) {
</xsl:text>
<xsl:text> if(this.value_elt)
</xsl:text>
<xsl:text> this.value_elt.textContent = String(value);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> this.update_DOM(value, this.handle_elt);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> last_drag = false;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> update_DOM(value, elt){
</xsl:text>
<xsl:text> let [min,max,start,totallength] = this.range;
</xsl:text>
<xsl:text> let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min)));
</xsl:text>
<xsl:text> let tip = this.range_elt.getPointAtLength(length);
</xsl:text>
<xsl:text> elt.setAttribute('transform',"translate("+(tip.x-start.x)+","+(tip.y-start.y)+")");
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> if(this.setpoint_elt != undefined){
</xsl:text>
<xsl:text> if(this.last_drag!= this.drag){
</xsl:text>
<xsl:text> if(this.drag){
</xsl:text>
<xsl:text> this.setpoint_elt.setAttribute("style", this.setpoint_style);
</xsl:text>
<xsl:text> }else{
</xsl:text>
<xsl:text> this.setpoint_elt.setAttribute("style", "display:none");
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> this.last_drag = this.drag;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> on_release(evt) {
</xsl:text>
<xsl:text> window.removeEventListener("touchmove", this.on_bound_drag, true);
</xsl:text>
<xsl:text> window.removeEventListener("mousemove", this.on_bound_drag, true);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> window.removeEventListener("mouseup", this.bound_on_release, true)
</xsl:text>
<xsl:text> window.removeEventListener("touchend", this.bound_on_release, true);
</xsl:text>
<xsl:text> window.removeEventListener("touchcancel", this.bound_on_release, true);
</xsl:text>
<xsl:text> if(this.drag){
</xsl:text>
<xsl:text> this.drag = false;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> this.update_position(evt);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> on_drag(evt){
</xsl:text>
<xsl:text> if(this.enTimer && this.drag){
</xsl:text>
<xsl:text> this.update_position(evt);
</xsl:text>
<xsl:text> //reset timer
</xsl:text>
<xsl:text> this.enTimer = false;
</xsl:text>
<xsl:text> setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> update_position(evt){
</xsl:text>
<xsl:text> var html_dist = 0;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> //calculate size of widget in html
</xsl:text>
<xsl:text> var range_borders = this.range_elt.getBoundingClientRect();
</xsl:text>
<xsl:text> var range_length = Math.sqrt( range_borders.height*range_borders.height + range_borders.width*range_borders.width );
</xsl:text>
<xsl:text> var [minX,minY,maxX,maxY] = [range_borders.left,range_borders.bottom,range_borders.right,range_borders.top];
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> //get range and mouse coordinates
</xsl:text>
<xsl:text> var mouseX = undefined;
</xsl:text>
<xsl:text> var mouseY = undefined;
</xsl:text>
<xsl:text> if (evt.type.startsWith("touch")){
</xsl:text>
<xsl:text> mouseX = Math.ceil(evt.touches[0].clientX);
</xsl:text>
<xsl:text> mouseY = Math.ceil(evt.touches[0].clientY);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> else{
</xsl:text>
<xsl:text> mouseX = evt.pageX;
</xsl:text>
<xsl:text> mouseY = evt.pageY;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> //get handle distance from mouse position
</xsl:text>
<xsl:text> if (minX > mouseX && minY < mouseY){
</xsl:text>
<xsl:text> html_dist = 0;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> else if (maxX < mouseX && maxY > mouseY){
</xsl:text>
<xsl:text> html_dist = range_length;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> else{
</xsl:text>
<xsl:text> // calculate distace
</xsl:text>
<xsl:text> if(this.fi > 0.7){
</xsl:text>
<xsl:text> html_dist = (minY - mouseY)/Math.sin(this.fi);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> else{
</xsl:text>
<xsl:text> html_dist = (mouseX - minX)/Math.cos(this.fi);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> //check if in range
</xsl:text>
<xsl:text> if (html_dist > range_length){
</xsl:text>
<xsl:text> html_dist = range_length;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> else if (html_dist < 0){
</xsl:text>
<xsl:text> html_dist = 0;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> this.svg_dist=Math.ceil((html_dist/range_length)*this.range[1]);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> this.apply_hmi_value(0, this.svg_dist);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> // update ghost cursor
</xsl:text>
<xsl:text> if(this.setpoint_elt != undefined){
</xsl:text>
<xsl:text> this.request_animate();
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> animate(){
</xsl:text>
<xsl:text> this.update_DOM(this.svg_dist, this.setpoint_elt);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> on_select(evt){
</xsl:text>
<xsl:text> this.drag = true;
</xsl:text>
<xsl:text> this.enTimer = true;
</xsl:text>
<xsl:text> window.addEventListener("touchmove", this.on_bound_drag, true);
</xsl:text>
<xsl:text> window.addEventListener("mousemove", this.on_bound_drag, true);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> window.addEventListener("mouseup", this.bound_on_release, true)
</xsl:text>
<xsl:text> window.addEventListener("touchend", this.bound_on_release, true);
</xsl:text>
<xsl:text> window.addEventListener("touchcancel", this.bound_on_release, true);
</xsl:text>
<xsl:text> this.update_position(evt);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> init() {
</xsl:text>
<xsl:text> let min = this.min_elt ?
</xsl:text>
<xsl:text> Number(this.min_elt.textContent) :
</xsl:text>
<xsl:text> this.args.length >= 1 ? this.args[0] : 0;
</xsl:text>
<xsl:text> let max = this.max_elt ?
</xsl:text>
<xsl:text> Number(this.max_elt.textContent) :
</xsl:text>
<xsl:text> this.args.length >= 2 ? this.args[1] : 100;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> this.range = [min, max, this.range_elt.getPointAtLength(0),this.range_elt.getTotalLength()];
</xsl:text>
<xsl:text> let start = this.range_elt.getPointAtLength(0);
</xsl:text>
<xsl:text> let end = this.range_elt.getPointAtLength(this.range_elt.getTotalLength());
</xsl:text>
<xsl:text> this.fi = Math.atan2(start.y-end.y, end.x-start.x);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> this.bound_on_select = this.on_select.bind(this);
</xsl:text>
<xsl:text> this.bound_on_release = this.on_release.bind(this);
</xsl:text>
<xsl:text> this.on_bound_drag = this.on_drag.bind(this);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> this.element.addEventListener("mousedown", this.bound_on_select);
</xsl:text>
<xsl:text> this.element.addEventListener("touchstart", this.bound_on_select);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> if(this.setpoint_elt != undefined){
</xsl:text>
<xsl:text> this.setpoint_style = this.setpoint_elt.getAttribute("style");
</xsl:text>
<xsl:text> this.setpoint_elt.setAttribute("style", "display:none");
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>}
</xsl:text>
</xsl:template>
<xsl:template mode="widget_defs" match="widget[@type='Slider']">
<xsl:param name="hmi_element"/>
<xsl:call-template name="defs_by_labels">
<xsl:with-param select="$hmi_element" name="hmi_element"/>
<xsl:with-param name="labels">
<xsl:text>handle range</xsl:text>
</xsl:with-param>
</xsl:call-template>
<xsl:call-template name="defs_by_labels">
<xsl:with-param select="$hmi_element" name="hmi_element"/>
<xsl:with-param name="labels">
<xsl:text>value min max setpoint</xsl:text>
</xsl:with-param>
<xsl:with-param select="'no'" name="mandatory"/>
</xsl:call-template>
<xsl:text>
</xsl:text>
</xsl:template>
<xsl:template mode="widget_class" match="widget[@type='Switch']">
<xsl:text>class SwitchWidget extends Widget{
</xsl:text>
<xsl:text> frequency = 5;
</xsl:text>
<xsl:text> dispatch(value) {
</xsl:text>
<xsl:text> for(let choice of this.choices){
</xsl:text>
<xsl:text> if(value != choice.value){
</xsl:text>
<xsl:text> choice.elt.setAttribute("style", "display:none");
</xsl:text>
<xsl:text> } else {
</xsl:text>
<xsl:text> choice.elt.setAttribute("style", choice.style);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>}
</xsl:text>
</xsl:template>
<xsl:template mode="widget_defs" match="widget[@type='Switch']">
<xsl:param name="hmi_element"/>
<xsl:text> choices: [
</xsl:text>
<xsl:variable select="'^("[^"].*"|\-?[0-9]+|false|true)(#.*)?$'" name="regex"/>
<xsl:for-each select="$result_svg_ns//*[@id = $hmi_element/@id]//*[regexp:test(@inkscape:label,$regex)]">
<xsl:variable select="regexp:match(@inkscape:label,$regex)[2]" name="literal"/>
<xsl:text> {
</xsl:text>
<xsl:text> elt:id("</xsl:text>
<xsl:value-of select="@id"/>
<xsl:text>"),
</xsl:text>
<xsl:text> style:"</xsl:text>
<xsl:value-of select="@style"/>
<xsl:text>",
</xsl:text>
<xsl:text> value:</xsl:text>
<xsl:value-of select="$literal"/>
<xsl:text>
</xsl:text>
<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:template>
<xsl:template mode="widget_class" match="widget[@type='ToggleButton']">
<xsl:text>class ToggleButtonWidget extends Widget{
</xsl:text>
<xsl:text> frequency = 5;
</xsl:text>
<xsl:text> state = 0;
</xsl:text>
<xsl:text> active_style = undefined;
</xsl:text>
<xsl:text> inactive_style = undefined;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> dispatch(value) {
</xsl:text>
<xsl:text> this.state = value;
</xsl:text>
<xsl:text> if (this.state) {
</xsl:text>
<xsl:text> this.active_elt.setAttribute("style", this.active_style);
</xsl:text>
<xsl:text> this.inactive_elt.setAttribute("style", "display:none");
</xsl:text>
<xsl:text> this.state = 0;
</xsl:text>
<xsl:text> } else {
</xsl:text>
<xsl:text> this.inactive_elt.setAttribute("style", this.inactive_style);
</xsl:text>
<xsl:text> this.active_elt.setAttribute("style", "display:none");
</xsl:text>
<xsl:text> this.state = 1;
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> on_click(evt) {
</xsl:text>
<xsl:text> this.apply_hmi_value(0, this.state);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> init() {
</xsl:text>
<xsl:text> this.active_style = this.active_elt.style.cssText;
</xsl:text>
<xsl:text> this.inactive_style = this.inactive_elt.style.cssText;
</xsl:text>
<xsl:text> this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)");
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>}
</xsl:text>
</xsl:template>
<xsl:template mode="widget_defs" match="widget[@type='ToggleButton']">
<xsl:param name="hmi_element"/>
<xsl:call-template name="defs_by_labels">
<xsl:with-param select="$hmi_element" name="hmi_element"/>
<xsl:with-param name="labels">
<xsl:text>active inactive</xsl:text>
</xsl:with-param>
</xsl:call-template>
<xsl:text>
</xsl:text>
</xsl:template>
<xsl:template match="/">
<xsl:comment>
<xsl:text>Made with SVGHMI. https://beremiz.org</xsl:text>
</xsl:comment>
<xsl:comment>
<xsl:apply-templates select="document('')/*/debug:*"/>
</xsl:comment>
<html xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/1999/xhtml">
<head/>
<body style="margin:0;overflow:hidden;">
<xsl:copy-of select="$result_svg"/>
<script>
<xsl:text>
//
//
// Early independent declarations
//
//
</xsl:text>
<xsl:apply-templates select="document('')/*/preamble:*"/>
<xsl:text>
//
//
// Declarations depending on preamble
//
//
</xsl:text>
<xsl:apply-templates select="document('')/*/declarations:*"/>
<xsl:text>
//
//
// Order independent declaration and code
//
//
</xsl:text>
<xsl:apply-templates select="document('')/*/definitions:*"/>
<xsl:text>
//
//
// Statements that needs to be at the end
//
//
</xsl:text>
<xsl:apply-templates select="document('')/*/epilogue:*"/>
<xsl:text>// svghmi.js
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>var updates = {};
</xsl:text>
<xsl:text>var need_cache_apply = [];
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>function dispatch_value(index, value) {
</xsl:text>
<xsl:text> let widgets = subscribers(index);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> let oldval = cache[index];
</xsl:text>
<xsl:text> cache[index] = value;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> if(widgets.size > 0) {
</xsl:text>
<xsl:text> for(let widget of widgets){
</xsl:text>
<xsl:text> widget.new_hmi_value(index, value, oldval);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>};
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>function init_widgets() {
</xsl:text>
<xsl:text> Object.keys(hmi_widgets).forEach(function(id) {
</xsl:text>
<xsl:text> let widget = hmi_widgets[id];
</xsl:text>
<xsl:text> let init = widget.init;
</xsl:text>
<xsl:text> if(typeof(init) == "function"){
</xsl:text>
<xsl:text> try {
</xsl:text>
<xsl:text> init.call(widget);
</xsl:text>
<xsl:text> } catch(err) {
</xsl:text>
<xsl:text> console.log(err);
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> });
</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: (dv,offset) => [dv.getInt16(offset, true), 2],
</xsl:text>
<xsl:text> BOOL: (dv,offset) => [dv.getInt8(offset, true), 1],
</xsl:text>
<xsl:text> NODE: (dv,offset) => [dv.getInt8(offset, true), 1],
</xsl:text>
<xsl:text> STRING: (dv, offset) => {
</xsl:text>
<xsl:text> 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>// Apply updates recieved through ws.onmessage to subscribed widgets
</xsl:text>
<xsl:text>function apply_updates() {
</xsl:text>
<xsl:text> for(let index in updates){
</xsl:text>
<xsl:text> // serving as a key, index becomes a string
</xsl:text>
<xsl:text> // -> pass Number(index) instead
</xsl:text>
<xsl:text> dispatch_value(Number(index), updates[index]);
</xsl:text>
<xsl:text> delete updates[index];
</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> // Do the page swith if any one pending
</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> while(widget = need_cache_apply.pop()){
</xsl:text>
<xsl:text> widget.apply_cache();
</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> apply_updates();
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> pending_widget_animates.forEach(widget => widget._animate());
</xsl:text>
<xsl:text> pending_widget_animates = [];
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> requestAnimationFrameID = null;
</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 < 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> updates[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> // register for rendering on next frame, since there are updates
</xsl:text>
<xsl:text> requestHMIAnimation();
</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>
</xsl:text>
<xsl:text>function send_blob(data) {
</xsl:text>
<xsl:text> if(data.length > 0) {
</xsl:text>
<xsl:text> ws.send(new Blob([new Uint8Array(hmi_hash)].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) => new Int16Array([number]),
</xsl:text>
<xsl:text> BOOL: (truth) => new Int16Array([truth]),
</xsl:text>
<xsl:text> NODE: (truth) => new Int16Array([truth]),
</xsl:text>
<xsl:text> STRING: (str) => {
</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(var i = 0; i < 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>// 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>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 > 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 && maxfreq < 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 <= 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 > last_remote_index){
</xsl:text>
<xsl:text> console.log("updated local variable ",index,value);
</xsl:text>
<xsl:text> updates[index] = value;
</xsl:text>
<xsl:text> requestHMIAnimation();
</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> let old_val = cache[index]
</xsl:text>
<xsl:text> if(new_val != undefined && 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>quotes = {"'":null, '"':null};
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>function change_hmi_value(index, opstr) {
</xsl:text>
<xsl:text> let op = opstr[0];
</xsl:text>
<xsl:text> let given_val;
</xsl:text>
<xsl:text> if(opstr.length < 2)
</xsl:text>
<xsl:text> return undefined; // TODO raise
</xsl:text>
<xsl:text> if(opstr[1] in quotes){
</xsl:text>
<xsl:text> if(opstr.length < 3)
</xsl:text>
<xsl:text> return undefined; // TODO raise
</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 old_val = cache[index];
</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> if(new_val != undefined && old_val != new_val)
</xsl:text>
<xsl:text> send_hmi_value(index, new_val);
</xsl:text>
<xsl:text> // TODO else raise
</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>
</xsl:text>
<xsl:text>function prepare_svg() {
</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(current_subscribed_page != current_visible_page){
</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>
</xsl:text>
<xsl:text> if(page_name == undefined)
</xsl:text>
<xsl:text> page_name = current_subscribed_page;
</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> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> if(old_desc){
</xsl:text>
<xsl:text> old_desc.widgets.map(([widget,relativeness])=>widget.unsub());
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> var new_offset = page_index == undefined ? 0 : page_index - new_desc.page_index;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> container_id = page_name + (page_index != undefined ? page_index : "");
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> new_desc.widgets.map(([widget,relativeness])=>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>
</xsl:text>
<xsl:text> jumps_need_update = true;
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> requestHMIAnimation();
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> jump_history.push([page_name, page_index]);
</xsl:text>
<xsl:text> if(jump_history.length > 42)
</xsl:text>
<xsl:text> jump_history.shift();
</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>// Once connection established
</xsl:text>
<xsl:text>ws.onopen = function (evt) {
</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(() => 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>
<xsl:text>
</xsl:text>
<xsl:text>var xmlns = "http://www.w3.org/2000/svg";
</xsl:text>
<xsl:text>var edit_callback;
</xsl:text>
<xsl:text>function edit_value(path, valuetype, callback, initial, size) {
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> let [keypadid, xcoord, ycoord] = keypads[valuetype];
</xsl:text>
<xsl:text> console.log('XXX TODO : Edit value', path, valuetype, callback, initial, keypadid);
</xsl:text>
<xsl:text> edit_callback = callback;
</xsl:text>
<xsl:text> let widget = hmi_widgets[keypadid];
</xsl:text>
<xsl:text> widget.start_edit(path, valuetype, callback, initial, size);
</xsl:text>
<xsl:text>};
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>var current_modal; /* TODO stack ?*/
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>function show_modal(size) {
</xsl:text>
<xsl:text> let [element, parent] = detachable_elements[this.element.id];
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> tmpgrp = document.createElementNS(xmlns,"g");
</xsl:text>
<xsl:text> tmpgrpattr = document.createAttribute("transform");
</xsl:text>
<xsl:text> let [xcoord,ycoord] = this.coordinates;
</xsl:text>
<xsl:text> let [xdest,ydest] = page_desc[current_visible_page].bbox;
</xsl:text>
<xsl:text> if (typeof size === 'undefined'){
</xsl:text>
<xsl:text> tmpgrpattr.value = "translate("+String(xdest-xcoord)+","+String(ydest-ycoord)+")";
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text> else{
</xsl:text>
<xsl:text> tmpgrpattr.value = "translate("+String(xdest-xcoord+size.x)+","+String(ydest-ycoord+size.y)+")";
</xsl:text>
<xsl:text> }
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> tmpgrp.setAttributeNode(tmpgrpattr);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> tmpgrp.appendChild(element);
</xsl:text>
<xsl:text> parent.appendChild(tmpgrp);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> current_modal = [this.element.id, tmpgrp];
</xsl:text>
<xsl:text>};
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>function end_modal() {
</xsl:text>
<xsl:text> let [eltid, tmpgrp] = current_modal;
</xsl:text>
<xsl:text> let [element, parent] = detachable_elements[this.element.id];
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> parent.removeChild(tmpgrp);
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text> current_modal = undefined;
</xsl:text>
<xsl:text>};
</xsl:text>
<xsl:text>
</xsl:text>
<xsl:text>function widget_active_activable(eltsub) {
</xsl:text>
<xsl:text> if(eltsub.inactive_style === undefined)
</xsl:text>
<xsl:text> eltsub.inactive_style = eltsub.inactive.getAttribute("style");
</xsl:text>
<xsl:text> eltsub.inactive.setAttribute("style", "display:none");
</xsl:text>
<xsl:text> if(eltsub.active_style !== undefined)
</xsl:text>
<xsl:text> eltsub.active.setAttribute("style", eltsub.active_style);
</xsl:text>
<xsl:text> console.log("active", eltsub);
</xsl:text>
<xsl:text>};
</xsl:text>
<xsl:text>function widget_inactive_activable(eltsub) {
</xsl:text>
<xsl:text> if(eltsub.active_style === undefined)
</xsl:text>
<xsl:text> eltsub.active_style = eltsub.active.getAttribute("style");
</xsl:text>
<xsl:text> eltsub.active.setAttribute("style", "display:none");
</xsl:text>
<xsl:text> if(eltsub.inactive_style !== undefined)
</xsl:text>
<xsl:text> eltsub.inactive.setAttribute("style", eltsub.inactive_style);
</xsl:text>
<xsl:text> console.log("inactive", eltsub);
</xsl:text>
<xsl:text>};
</xsl:text>
</script>
</body>
</html>
</xsl:template>
</xsl:stylesheet>