--- a/svghmi/gen_index_xhtml.xslt Mon Jun 13 19:22:31 2022 +0200
+++ b/svghmi/gen_index_xhtml.xslt Mon Jun 27 10:26:04 2022 +0200
@@ -1,5 +1,5 @@
-<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:exsl="http://exslt.org/common" xmlns:regexp="http://exslt.org/regular-expressions" xmlns:str="http://exslt.org/strings" xmlns:func="http://exslt.org/functions" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:debug="debug" xmlns:preamble="preamble" xmlns:declarations="declarations" xmlns:definitions="definitions" xmlns:epilogue="epilogue" xmlns:ns="beremiz" version="1.0" extension-element-prefixes="ns func exsl regexp str dyn" exclude-result-prefixes="ns func exsl regexp str dyn debug preamble epilogue declarations definitions">+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:exsl="http://exslt.org/common" xmlns:regexp="http://exslt.org/regular-expressions" xmlns:str="http://exslt.org/strings" xmlns:func="http://exslt.org/functions" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:debug="debug" xmlns:preamble="preamble" xmlns:declarations="declarations" xmlns:definitions="definitions" xmlns:epilogue="epilogue" xmlns:cssdefs="cssdefs" xmlns:ns="beremiz" version="1.0" extension-element-prefixes="ns func exsl regexp str dyn" 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 name="svg" select="/svg:svg"/>
<xsl:variable name="hmi_elements" select="//svg:*[starts-with(@inkscape:label, 'HMI:')]"/>
@@ -159,7 +159,7 @@
- <xsl:variable name="pathregex" select="'^([^\[,]+)(\[[^\]]+\])?([\d,]*)$'"/>+ <xsl:variable name="pathregex" select="'^([^\[,]+)(\[[^\]]+\])?([-.\d,]*)$'"/> <xsl:template mode="parselabel" match="*">
<xsl:variable name="label" select="@inkscape:label"/>
<xsl:variable name="id" select="@id"/>
@@ -1108,6 +1108,11 @@
<xsl:attribute name="label">
<xsl:value-of select="substring(@inkscape:label,2)"/>
+ <xsl:if test="string-length(text()) > 0"> + <xsl:value-of select="text()"/> <xsl:apply-templates mode="extract_i18n" select="svg:*"/>
@@ -1453,6 +1458,72 @@
+ <xsl:text>function _hide(elt, placeholder){ + <xsl:text> if(elt.parentNode != null) + <xsl:text> placeholder.parentNode.removeChild(elt); + <xsl:text>function _show(elt, placeholder){ + <xsl:text> placeholder.parentNode.insertBefore(elt, placeholder); + <xsl:text>function set_activation_state(eltsub, state){ + <xsl:text> if(eltsub.active_elt != undefined){ + <xsl:text> if(eltsub.active_elt_placeholder == undefined){ + <xsl:text> eltsub.active_elt_placeholder = document.createComment(""); + <xsl:text> eltsub.active_elt.parentNode.insertBefore(eltsub.active_elt_placeholder, eltsub.active_elt); + <xsl:text> (state?_show:_hide)(eltsub.active_elt, eltsub.active_elt_placeholder); + <xsl:text> if(eltsub.inactive_elt != undefined){ + <xsl:text> if(eltsub.inactive_elt_placeholder == undefined){ + <xsl:text> eltsub.inactive_elt_placeholder = document.createComment(""); + <xsl:text> eltsub.inactive_elt.parentNode.insertBefore(eltsub.inactive_elt_placeholder, eltsub.inactive_elt); + <xsl:text> ((state || state==undefined)?_hide:_show)(eltsub.inactive_elt, eltsub.inactive_elt_placeholder); + <xsl:text>function activate_activable(eltsub) { + <xsl:text> set_activation_state(eltsub, true); + <xsl:text>function inactivate_activable(eltsub) { + <xsl:text> set_activation_state(eltsub, false); @@ -1485,7 +1556,19 @@
<xsl:text> this.pending = indexes.map(() => undefined);
- <xsl:text> this.bound_unhinibit = this.unhinibit.bind(this);+ <xsl:text> this.bound_uninhibit = this.uninhibit.bind(this); + <xsl:text> this.lastdispatch = indexes.map(() => undefined); + <xsl:text> this.deafen = indexes.map(() => undefined); + <xsl:text> this.incoming = indexes.map(() => undefined); + <xsl:text> this.bound_undeafen = this.undeafen.bind(this); <xsl:text> this.forced_frequency = freq;
@@ -1573,7 +1656,19 @@
<xsl:text> this.lastapply[i] = undefined;
- <xsl:text> this.unhinibit(i);+ <xsl:text> this.uninhibit(i); + <xsl:text> let deafened = this.deafen[i]; + <xsl:text> if(deafened != undefined){ + <xsl:text> clearTimeout(deafened); + <xsl:text> this.lastdispatch[i] = undefined; + <xsl:text> this.undeafen(i); @@ -1749,7 +1844,7 @@
- <xsl:text> unhinibit(index){+ <xsl:text> uninhibit(index){ <xsl:text> this.inhibit[index] = undefined;
@@ -1787,7 +1882,7 @@
<xsl:text> this.pending[index] = new_val;
- <xsl:text> this.inhibit[index] = setTimeout(this.bound_unhinibit, min_interval - elapsed, index);+ <xsl:text> this.inhibit[index] = setTimeout(this.bound_uninhibit, min_interval - elapsed, index); @@ -1831,19 +1926,65 @@
+ <xsl:text> undeafen(index){ + <xsl:text> this.deafen[index] = undefined; + <xsl:text> let [new_val, old_val] = this.incoming[index]; + <xsl:text> this.incoming[index] = undefined; + <xsl:text> this.dispatch(new_val, old_val, index); <xsl:text> _dispatch(value, oldval, varnum) {
<xsl:text> let dispatch = this.dispatch;
<xsl:text> if(dispatch != undefined){
- <xsl:text> dispatch.call(this, value, oldval, varnum);- <xsl:text> } catch(err) {- <xsl:text> console.log(err);+ <xsl:text> if(this.deafen[varnum] == undefined){ + <xsl:text> let now = Date.now(); + <xsl:text> let min_interval = 1000/this.frequency; + <xsl:text> let lastdispatch = this.lastdispatch[varnum]; + <xsl:text> if(lastdispatch == undefined || now > lastdispatch + min_interval){ + <xsl:text> this.lastdispatch[varnum] = now; + <xsl:text> dispatch.call(this, value, oldval, varnum); + <xsl:text> } catch(err) { + <xsl:text> console.log(err); + <xsl:text> let elapsed = now - lastdispatch; + <xsl:text> this.incoming[varnum] = [value, oldval]; + <xsl:text> this.deafen[varnum] = setTimeout(this.bound_undeafen, min_interval - elapsed, varnum); + <xsl:text> this.incoming[varnum] = [value, oldval]; @@ -1875,27 +2016,13 @@
- <xsl:text> activate_activable(eltsub) {- <xsl:text> eltsub.inactive.style.display = "none";- <xsl:text> eltsub.active.style.display = "";- <xsl:text> inactivate_activable(eltsub) {- <xsl:text> eltsub.active.style.display = "none";- <xsl:text> eltsub.inactive.style.display = "";+ <xsl:text> set_activation_state(state){ + <xsl:text> set_activation_state(this.activable_sub, state); @@ -1960,6 +2087,7 @@
<xsl:param name="subelements" select="/.."/>
<xsl:param name="hmi_element"/>
<xsl:variable name="widget_type" select="@type"/>
+ <xsl:variable name="widget_id" select="@id"/> <xsl:for-each select="str:split($labels)">
<xsl:variable name="absolute" select="starts-with(., '/')"/>
<xsl:variable name="name" select="substring(.,number($absolute)+1)"/>
@@ -1967,13 +2095,27 @@
<xsl:variable name="elt" select="($widget//*[not($absolute) and @inkscape:label=$name] | $widget/*[$absolute and @inkscape:label=$name])[1]"/>
<xsl:when test="not($elt/@id)">
- <xsl:if test="$mandatory='yes'">- <xsl:message terminate="yes">+ <xsl:if test="$mandatory!='no'"> + <xsl:variable name="errmsg"> <xsl:value-of select="$widget_type"/>
- <xsl:text> widget must have a </xsl:text>+ <xsl:text> widget (id=</xsl:text> + <xsl:value-of select="$widget_id"/> + <xsl:text>) must have a </xsl:text> <xsl:value-of select="$name"/>
<xsl:text> element</xsl:text>
+ <xsl:when test="$mandatory='yes'"> + <xsl:message terminate="yes"> + <xsl:value-of select="$errmsg"/> + <xsl:message terminate="no"> + <xsl:value-of select="$errmsg"/> @@ -1993,15 +2135,29 @@
<xsl:variable name="subelt" select="$elt/*[@inkscape:label=$subname][1]"/>
<xsl:when test="not($subelt/@id)">
- <xsl:if test="$mandatory='yes'">- <xsl:message terminate="yes">+ <xsl:if test="$mandatory!='no'"> + <xsl:variable name="errmsg"> <xsl:value-of select="$widget_type"/>
- <xsl:text> widget must have a </xsl:text>+ <xsl:text> widget (id=</xsl:text> + <xsl:value-of select="$widget_id"/> + <xsl:text>) must have a </xsl:text> <xsl:value-of select="$name"/>
<xsl:value-of select="$subname"/>
<xsl:text> element</xsl:text>
+ <xsl:when test="$mandatory='yes'"> + <xsl:message terminate="yes"> + <xsl:value-of select="$errmsg"/> + <xsl:message terminate="no"> + <xsl:value-of select="$errmsg"/> <xsl:text> /* missing </xsl:text>
<xsl:value-of select="$name"/>
@@ -2013,7 +2169,7 @@
<xsl:value-of select="$subname"/>
- <xsl:text>": id("</xsl:text>+ <xsl:text>_elt": id("</xsl:text> <xsl:value-of select="$subelt/@id"/>
<xsl:if test="position()!=last()">
@@ -2530,25 +2686,7 @@
<xsl:apply-templates mode="actions" select="$fsm"/>
- <xsl:text> if (this.active_elt && this.inactive_elt) {- <xsl:for-each select="str:split('active inactive')">- <xsl:text> if(this.display == "</xsl:text>- <xsl:value-of select="."/>- <xsl:text> this.</xsl:text>- <xsl:value-of select="."/>- <xsl:text>_elt.style.display = "";- <xsl:text> this.</xsl:text>- <xsl:value-of select="."/>- <xsl:text>_elt.style.display = "none";+ <xsl:text> this.set_activation_state(this.display == "active"); @@ -2558,6 +2696,8 @@
<xsl:text> this.element.addEventListener("pointerdown", this.onmousedown.bind(this));
+ <xsl:text> this.set_activation_state(undefined); @@ -2577,13 +2717,17 @@
<xsl:template match="widget[@type='Button']" mode="widget_defs">
<xsl:param name="hmi_element"/>
+ <xsl:text> activable_sub:{ <xsl:call-template name="defs_by_labels">
<xsl:with-param name="hmi_element" select="$hmi_element"/>
<xsl:with-param name="labels">
- <xsl:text>active inactive</xsl:text>+ <xsl:text>/active /inactive</xsl:text> - <xsl:with-param name="mandatory" select="'no'"/>+ <xsl:with-param name="mandatory" select="'warn'"/> <xsl:template match="widget[@type='PushButton']" mode="widget_class">
<xsl:text>class </xsl:text>
@@ -2601,13 +2745,17 @@
<xsl:template match="widget[@type='PushButton']" mode="widget_defs">
<xsl:param name="hmi_element"/>
+ <xsl:text> activable_sub:{ <xsl:call-template name="defs_by_labels">
<xsl:with-param name="hmi_element" select="$hmi_element"/>
<xsl:with-param name="labels">
- <xsl:text>active inactive</xsl:text>+ <xsl:text>/active /inactive</xsl:text> - <xsl:with-param name="mandatory" select="'no'"/>+ <xsl:with-param name="mandatory" select="'warn'"/> <xsl:template match="widget[@type='CircularBar']" mode="widget_desc">
@@ -3377,7 +3525,7 @@
- <xsl:text>Printf-like formated text display </xsl:text>+ <xsl:text>Printf-like formated text display</xsl:text> <arg name="format" count="optional" accepts="string">
<xsl:text>printf-like format string when not given as svg:text</xsl:text>
@@ -3395,7 +3543,15 @@
<xsl:text> dispatch(value, oldval, index) {
- <xsl:text> this.fields[index] = value; + <xsl:text> this.fields[index] = value; + <xsl:text> if(!this.ready){ + <xsl:text> this.readyfields[index] = true; + <xsl:text> this.ready = this.readyfields.every(x=>x); <xsl:text> this.request_animate();
@@ -3443,6 +3599,20 @@
<xsl:value-of select="$field_initializer"/>
+ <xsl:variable name="readyfield_initializer"> + <xsl:for-each select="path"> + <xsl:text>false</xsl:text> + <xsl:if test="position()!=last()"> + <xsl:text> readyfields: [</xsl:text> + <xsl:value-of select="$readyfield_initializer"/> + <xsl:text> ready: false, <xsl:text> animate: function(){
@@ -3457,28 +3627,30 @@
<xsl:text> let str = vsprintf(this.format,this.fields);
- <xsl:text> multiline_to_svg_text(this.format_elt, str);+ <xsl:text> multiline_to_svg_text(this.format_elt, str, !this.ready); <xsl:text> let str = this.args.length == 1 ? vsprintf(this.args[0],this.fields) : this.fields.join(' ');
- <xsl:text> multiline_to_svg_text(this.element, str);+ <xsl:text> multiline_to_svg_text(this.element, str, !this.ready);
+ <xsl:text> init: function() { <xsl:if test="$has_format">
- <xsl:text> init: function() { <xsl:text> this.format = svg_text_to_multiline(this.format_elt);
+ <xsl:text> this.animate(); <xsl:template match="widget[@type='DropDown']" mode="widget_desc">
@@ -4211,7 +4383,7 @@
<xsl:value-of select="$text_elt/@id"/>
- <xsl:text> this.content = langs;+ <xsl:text> this.content = langs.map(([lname,lcode]) => lname); <xsl:when test="count(arg) = 0">
@@ -4677,6 +4849,10 @@
+ <xsl:text> display = ""; @@ -4757,6 +4933,8 @@
<xsl:text> this.value_elt.style.pointerEvents = "none";
+ <xsl:text> this.animate(); <xsl:for-each select="$hmi_element/*[regexp:test(@inkscape:label,'^[=+\-].+')]">
<xsl:text> id("</xsl:text>
@@ -4766,6 +4944,10 @@
+ <xsl:if test="$have_value"> + <xsl:text> this.value_elt.textContent = ""; @@ -5367,13 +5549,11 @@
<xsl:text> would be an HMI_TREE index and then jump to a relative page not hard-coded in advance */
<xsl:text> if(!that.disabled) {
<xsl:text> const index = that.indexes.length > 0 ? that.indexes[0] + that.offset : undefined;
- <xsl:text> switch_page(name, index);+ <xsl:text> fading_page_switch(name, index); @@ -5504,6 +5684,37 @@
+ <xsl:template match="cssdefs:jump"> + <xsl:text>/* </xsl:text> + <xsl:value-of select="local-name()"/> + <xsl:text>.fade-out-page { + <xsl:text> animation: fadeOut 0.6s both; + <xsl:text>@keyframes fadeOut { + <xsl:text> 0% { opacity: 1; } + <xsl:text> 100% { opacity: 0; } <xsl:template match="declarations:jump">
@@ -5594,6 +5805,10 @@
<xsl:text> this.shift |= this.caps;
+ <xsl:text> if(this.virgin) + <xsl:text> this.editstr = ""; <xsl:text> this.editstr += syms[this.shift?syms.length-1:0];
<xsl:text> this.shift = false;
@@ -5730,7 +5945,9 @@
<xsl:text> this.result_callback_obj = callback_obj;
- <xsl:text> this.Info_elt.textContent = info;+ <xsl:text> if(this.Info_elt) + <xsl:text> this.Info_elt.textContent = info; <xsl:text> this.shift = false;
@@ -5742,6 +5959,8 @@
<xsl:text> this.update();
+ <xsl:text> this.virgin = true; @@ -5750,6 +5969,8 @@
<xsl:text> if(this.editstr != this._editstr){
+ <xsl:text> this.virgin = false; <xsl:text> this._editstr = this.editstr;
<xsl:text> this.Value_elt.textContent = this.editstr;
@@ -5760,7 +5981,7 @@
<xsl:text> this._shift = this.shift;
- <xsl:text> (this.shift?this.activate_activable:this.inactivate_activable)(this.Shift_sub);+ <xsl:text> set_activation_state(this.Shift_sub, this.shift); @@ -5768,7 +5989,7 @@
<xsl:text> this._caps = this.caps;
- <xsl:text> (this.caps?this.activate_activable:this.inactivate_activable)(this.CapsLock_sub);+ <xsl:text> set_activation_state(this.CapsLock_sub, this.caps); @@ -5782,13 +6003,13 @@
<xsl:call-template name="defs_by_labels">
<xsl:with-param name="hmi_element" select="$hmi_element"/>
<xsl:with-param name="labels">
- <xsl:text>Esc Enter BackSpace Keys Info Value</xsl:text>+ <xsl:text>Esc Enter BackSpace Keys Value</xsl:text> <xsl:call-template name="defs_by_labels">
<xsl:with-param name="hmi_element" select="$hmi_element"/>
<xsl:with-param name="labels">
- <xsl:text>Sign Space NumDot</xsl:text>+ <xsl:text>Sign Space NumDot Info</xsl:text> <xsl:with-param name="mandatory" select="'no'"/>
@@ -5837,6 +6058,8 @@
<xsl:value-of select="$g/@y"/>
+ <xsl:text> virgin: false, <xsl:template match="widget[@type='List']" mode="widget_desc">
@@ -7503,17 +7726,51 @@
<xsl:text> frequency = 5;
+ <xsl:text> current_value = undefined; + <xsl:text> this.animate(); <xsl:text> dispatch(value) {
+ <xsl:text> this.current_value = value; + <xsl:text> this.request_animate(); <xsl:text> for(let choice of this.choices){
- <xsl:text> if(value != choice.value){- <xsl:text> choice.elt.setAttribute("style", "display:none");+ <xsl:text> if(this.current_value != choice.value){ + <xsl:text> if(choice.parent == undefined){ + <xsl:text> choice.parent = choice.elt.parentElement; + <xsl:text> choice.parent.removeChild(choice.elt); - <xsl:text> choice.elt.setAttribute("style", choice.style);+ <xsl:text> if(choice.parent != undefined){ + <xsl:text> choice.parent.insertBefore(choice.elt,choice.sibling); + <xsl:text> choice.parent = undefined; @@ -7532,18 +7789,30 @@
<xsl:variable name="subelts" select="$result_widgets[@id = $hmi_element/@id]//*"/>
<xsl:variable name="subwidgets" select="$subelts//*[@id = $hmi_widgets/@id]"/>
<xsl:variable name="accepted" select="$subelts[not(ancestor-or-self::*/@id = $subwidgets/@id)]"/>
- <xsl:for-each select="$accepted[regexp:test(@inkscape:label,$regex)]">+ <xsl:variable name="choices" select="$accepted[regexp:test(@inkscape:label,$regex)]"/> + <xsl:for-each select="$choices"> <xsl:variable name="literal" select="regexp:match(@inkscape:label,$regex)[2]"/>
+ <xsl:variable name="sibling" select="following-sibling::*[not(@id = $choices/@id)][position()=1]"/> <xsl:text> elt:id("</xsl:text>
<xsl:value-of select="@id"/>
- <xsl:text> style:"</xsl:text>- <xsl:value-of select="@style"/>+ <xsl:text> parent:undefined, + <xsl:when test="count($sibling)=0"> + <xsl:text> sibling:null, + <xsl:text> sibling:id("</xsl:text> + <xsl:value-of select="$sibling/@id"/> <xsl:text> value:</xsl:text>
<xsl:value-of select="$literal"/>
@@ -7703,27 +7972,11 @@
- <xsl:text> activate(val) {- <xsl:text> let [active, inactive] = val ? ["","none"] : ["none", ""];- <xsl:text> if (this.active_elt)- <xsl:text> this.active_elt.style.display = active;- <xsl:text> if (this.inactive_elt)- <xsl:text> this.inactive_elt.style.display = inactive; <xsl:text> // redraw toggle button on screen refresh
- <xsl:text> this.activate(this.state);+ <xsl:text> this.set_activation_state(this.state); @@ -7731,10 +7984,10 @@
- <xsl:text> this.activate(false); <xsl:text> this.element.onclick = (evt) => this.on_click(evt);
+ <xsl:text> this.set_activation_state(undefined); @@ -7742,13 +7995,1351 @@
<xsl:template match="widget[@type='ToggleButton']" mode="widget_defs">
<xsl:param name="hmi_element"/>
+ <xsl:text> activable_sub:{ + <xsl:call-template name="defs_by_labels"> + <xsl:with-param name="hmi_element" select="$hmi_element"/> + <xsl:with-param name="labels"> + <xsl:text>/active /inactive</xsl:text> + <xsl:with-param name="mandatory" select="'warn'"/> + <xsl:template match="widget[@type='XYGraph']" mode="widget_desc"> + <xsl:value-of select="@type"/> + <xsl:text>XYGraph draws a cartesian trend graph re-using styles given for axis, + <xsl:text>grid/marks, legends and curves. + <xsl:text>Elements labeled "x_axis" and "y_axis" are svg:groups containg: + <xsl:text> - "axis_label" svg:text gives style an alignment for axis labels. + <xsl:text> - "interval_major_mark" and "interval_minor_mark" are svg elements to be + <xsl:text> duplicated along axis line to form intervals marks. + <xsl:text> - "axis_line" svg:path is the axis line. Paths must be intersect and their + <xsl:text> bounding box is the chart wall. + <xsl:text>Elements labeled "curve_0", "curve_1", ... are paths whose styles are used + <xsl:text>to draw curves corresponding to data from variables passed as HMI tree paths. + <xsl:text>"curve_0" is mandatory. HMI variables outnumbering given curves are ignored. + <xsl:text>Cartesian trend graph showing values of given variables over time</xsl:text> + <path name="value" count="1+" accepts="HMI_INT,HMI_REAL"> + <xsl:text>value</xsl:text> + <arg name="xrange" accepts="int,time"> + <xsl:text>X axis range expressed either in samples or duration.</xsl:text> + <arg name="xformat" count="optional" accepts="string"> + <xsl:text>format string for X label</xsl:text> + <arg name="yformat" count="optional" accepts="string"> + <xsl:text>format string for Y label</xsl:text> + <xsl:template match="widget[@type='XYGraph']" mode="widget_class"> + <xsl:text>class </xsl:text> + <xsl:text>XYGraphWidget</xsl:text> + <xsl:text> extends Widget{ + <xsl:text> frequency = 1; + <xsl:text> let x_duration_s; + <xsl:text> [x_duration_s, + <xsl:text> this.x_format, this.y_format] = this.args; + <xsl:text> let timeunit = x_duration_s.slice(-1); + <xsl:text> let factor = { + <xsl:text> "d":86400}[timeunit]; + <xsl:text> if(factor == undefined){ + <xsl:text> this.max_data_length = Number(x_duration_s); + <xsl:text> this.x_duration = undefined; + <xsl:text> let duration = factor*Number(x_duration_s.slice(0,-1)); + <xsl:text> this.max_data_length = undefined; + <xsl:text> this.x_duration = duration*1000; + <xsl:text> // Min and Max given with paths are meant to describe visible range, + <xsl:text> // not to clip data. + <xsl:text> this.clip = false; + <xsl:text> let y_min = Infinity, y_max = -Infinity; + <xsl:text> // Compute visible Y range by merging fixed curves Y ranges + <xsl:text> for(let minmax of this.minmaxes){ + <xsl:text> let [min,max] = minmax; + <xsl:text> if(min < y_min) + <xsl:text> y_min = min; + <xsl:text> if(max > y_max) + <xsl:text> y_max = max; + <xsl:text> if(y_min !== Infinity && y_max !== -Infinity){ + <xsl:text> this.fixed_y_range = true; + <xsl:text> this.fixed_y_range = false; + <xsl:text> this.ymin = y_min; + <xsl:text> this.ymax = y_max; + <xsl:text> this.curves = []; + <xsl:text> this.init_specific(); + <xsl:text> this.reference = new ReferenceFrame( + <xsl:text> [[this.x_interval_minor_mark_elt, this.x_interval_major_mark_elt], + <xsl:text> [this.y_interval_minor_mark_elt, this.y_interval_major_mark_elt]], + <xsl:text> [this.x_axis_label_elt, this.y_axis_label_elt], + <xsl:text> [this.x_axis_line_elt, this.y_axis_line_elt], + <xsl:text> [this.x_format, this.y_format]); + <xsl:text> let max_stroke_width = 0; + <xsl:text> for(let curve of this.curves){ + <xsl:text> if(curve.style.strokeWidth > max_stroke_width){ + <xsl:text> max_stroke_width = curve.style.strokeWidth; + <xsl:text> this.Margins=this.reference.getLengths().map(length => max_stroke_width/length); + <xsl:text> // create <clipPath> path and attach it to widget + <xsl:text> let clipPath = document.createElementNS(xmlns,"clipPath"); + <xsl:text> let clipPathPath = document.createElementNS(xmlns,"path"); + <xsl:text> let clipPathPathDattr = document.createAttribute("d"); + <xsl:text> clipPathPathDattr.value = this.reference.getClipPathPathDattr(); + <xsl:text> clipPathPath.setAttributeNode(clipPathPathDattr); + <xsl:text> clipPath.appendChild(clipPathPath); + <xsl:text> clipPath.id = randomId(); + <xsl:text> this.element.appendChild(clipPath); + <xsl:text> // assign created clipPath to clip-path property of curves + <xsl:text> for(let curve of this.curves){ + <xsl:text> curve.setAttribute("clip-path", "url(#" + clipPath.id + ")"); + <xsl:text> this.curves_data = []; + <xsl:text> dispatch(value,oldval, index) { + <xsl:text> // TODO: get PLC time instead of browser time + <xsl:text> let time = Date.now(); + <xsl:text> // naive local buffer impl. + <xsl:text> // data is updated only when graph is visible + <xsl:text> // TODO: replace with separate recording + <xsl:text> if(this.curves_data[index] === undefined){ + <xsl:text> this.curves_data[index] = []; + <xsl:text> this.curves_data[index].push([time, value]); + <xsl:text> let data_length = this.curves_data[index].length; + <xsl:text> let ymin_damaged = false; + <xsl:text> let ymax_damaged = false; + <xsl:text> let overflow; + <xsl:text> if(this.max_data_length == undefined){ + <xsl:text> let peremption = time - this.x_duration; + <xsl:text> let oldest = this.curves_data[index][0][0] + <xsl:text> this.xmin = peremption; + <xsl:text> if(oldest < peremption){ + <xsl:text> // remove first item + <xsl:text> overflow = this.curves_data[index].shift()[1]; + <xsl:text> data_length = data_length - 1; + <xsl:text> if(data_length > this.max_data_length){ + <xsl:text> // remove first item + <xsl:text> [this.xmin, overflow] = this.curves_data[index].shift(); + <xsl:text> data_length = data_length - 1; + <xsl:text> if(this.xmin == undefined){ + <xsl:text> this.xmin = time; + <xsl:text> this.xmax = time; + <xsl:text> let Xrange = this.xmax - this.xmin; + <xsl:text> if(!this.fixed_y_range){ + <xsl:text> ymin_damaged = overflow <= this.ymin; + <xsl:text> ymax_damaged = overflow >= this.ymax; + <xsl:text> if(value > this.ymax){ + <xsl:text> ymax_damaged = false; + <xsl:text> this.ymax = value; + <xsl:text> if(value < this.ymin){ + <xsl:text> ymin_damaged = false; + <xsl:text> this.ymin = value; + <xsl:text> let Yrange = this.ymax - this.ymin; + <xsl:text> // apply margin by moving min and max to enlarge range + <xsl:text> let [xMargin,yMargin] = zip(this.Margins, [Xrange, Yrange]).map(([m,l]) => m*l); + <xsl:text> [[this.dxmin, this.dxmax],[this.dymin,this.dymax]] = + <xsl:text> [[this.xmin-xMargin, this.xmax+xMargin], + <xsl:text> [this.ymin-yMargin, this.ymax+yMargin]]; + <xsl:text> Xrange += 2*xMargin; + <xsl:text> Yrange += 2*yMargin; + <xsl:text> // recompute curves "d" attribute + <xsl:text> // FIXME: use SVG getPathData and setPathData when available. + <xsl:text> // https://svgwg.org/specs/paths/#InterfaceSVGPathData + <xsl:text> // https://github.com/jarek-foksa/path-data-polyfill + <xsl:text> let [base_point, xvect, yvect] = this.reference.getBaseRef(); + <xsl:text> this.curves_d_attr = + <xsl:text> zip(this.curves_data, this.curves).map(([data,curve]) => { + <xsl:text> let new_d = data.map(([x,y], i) => { + <xsl:text> // compute curve point from data, ranges, and base_ref + <xsl:text> let xv = vectorscale(xvect, (x - this.dxmin) / Xrange); + <xsl:text> let yv = vectorscale(yvect, (y - this.dymin) / Yrange); + <xsl:text> let px = base_point.x + xv.x + yv.x; + <xsl:text> let py = base_point.y + xv.y + yv.y; + <xsl:text> if(!this.fixed_y_range){ + <xsl:text> // update min and max from curve data if needed + <xsl:text> if(ymin_damaged && y < this.ymin) this.ymin = y; + <xsl:text> if(ymax_damaged && y > this.ymax) this.ymax = y; + <xsl:text> return " " + px + "," + py; + <xsl:text> new_d.unshift("M "); + <xsl:text> return new_d.join(''); + <xsl:text> // computed curves "d" attr is applied to svg curve during animate(); + <xsl:text> this.request_animate(); + <xsl:text> // move elements only if enough data + <xsl:text> if(this.curves_data.some(data => data.length > 1)){ + <xsl:text> // move marks and update labels + <xsl:text> this.reference.applyRanges([[this.dxmin, this.dxmax], + <xsl:text> [this.dymin, this.dymax]]); + <xsl:text> // apply computed curves "d" attributes + <xsl:text> for(let [curve, d_attr] of zip(this.curves, this.curves_d_attr)){ + <xsl:text> curve.setAttribute("d", d_attr); + <func:function name="func:check_curves_label_consistency"> + <xsl:param name="curve_elts"/> + <xsl:param name="number_to_check"/> + <xsl:variable name="res"> + <xsl:when test="$curve_elts[@inkscape:label = concat('curve_', string($number_to_check))]"> + <xsl:if test="$number_to_check > 0"> + <xsl:value-of select="func:check_curves_label_consistency($curve_elts, $number_to_check - 1)"/> + <xsl:value-of select="concat('missing curve_', string($number_to_check))"/> + <func:result select="$res"/> + <xsl:template match="widget[@type='XYGraph']" mode="widget_defs"> + <xsl:param name="hmi_element"/> + <xsl:call-template name="defs_by_labels"> + <xsl:with-param name="hmi_element" select="$hmi_element"/> + <xsl:with-param name="labels"> + <xsl:text>/x_interval_minor_mark /x_axis_line /x_interval_major_mark /x_axis_label</xsl:text> <xsl:call-template name="defs_by_labels">
<xsl:with-param name="hmi_element" select="$hmi_element"/>
<xsl:with-param name="labels">
- <xsl:text>active inactive</xsl:text>+ <xsl:text>/y_interval_minor_mark /y_axis_line /y_interval_major_mark /y_axis_label</xsl:text> - <xsl:with-param name="mandatory" select="'no'"/>+ <xsl:text> init_specific() { + <xsl:variable name="curves" select="$hmi_element/*[regexp:test(@inkscape:label,'^curve_[0-9]+$')]"/> + <xsl:variable name="curves_error" select="func:check_curves_label_consistency($curves,count($curves)-1)"/> + <xsl:if test="string-length($curves_error)"> + <xsl:message terminate="yes"> + <xsl:text>XYGraph id="</xsl:text> + <xsl:value-of select="@id"/> + <xsl:text>", label="</xsl:text> + <xsl:value-of select="@inkscape:label"/> + <xsl:text>" : </xsl:text> + <xsl:value-of select="$curves_error"/> + <xsl:for-each select="$curves"> + <xsl:variable name="label" select="@inkscape:label"/> + <xsl:variable name="_id" select="@id"/> + <xsl:variable name="curve_num" select="substring(@inkscape:label, 7)"/> + <xsl:text> this.curves[</xsl:text> + <xsl:value-of select="$curve_num"/> + <xsl:text>] = id("</xsl:text> + <xsl:value-of select="@id"/> + <xsl:text>"); /* </xsl:text> + <xsl:value-of select="@inkscape:label"/> + <declarations:XYGraph/> + <xsl:template match="declarations:XYGraph"> + <xsl:text>/* </xsl:text> + <xsl:value-of select="local-name()"/> + <xsl:text>function lineFromPath(path_elt) { + <xsl:text> let start = path_elt.getPointAtLength(0); + <xsl:text> let end = path_elt.getPointAtLength(path_elt.getTotalLength()); + <xsl:text> return [start, new DOMPoint(end.x - start.x , end.y - start.y)]; + <xsl:text>function vector(p1, p2) { + <xsl:text> return new DOMPoint(p2.x - p1.x , p2.y - p1.y); + <xsl:text>function vectorscale(p1, p2) { + <xsl:text> return new DOMPoint(p2 * p1.x , p2 * p1.y); + <xsl:text>function vectorLength(p1) { + <xsl:text> return Math.sqrt(p1.x*p1.x + p1.y*p1.y); + <xsl:text>function randomId(){ + <xsl:text> return Date.now().toString(36) + Math.random().toString(36).substr(2); + <xsl:text>function move_elements_to_group(elements) { + <xsl:text> let newgroup = document.createElementNS(xmlns,"g"); + <xsl:text> newgroup.id = randomId(); + <xsl:text> for(let element of elements){ + <xsl:text> let parent = element.parentElement; + <xsl:text> if(parent !== null) + <xsl:text> parent.removeChild(element); + <xsl:text> newgroup.appendChild(element); + <xsl:text> return newgroup; + <xsl:text>function getLinesIntesection(l1, l2) { + <xsl:text> let [l1start, l1vect] = l1; + <xsl:text> let [l2start, l2vect] = l2; + <xsl:text> Compute intersection of two lines + <xsl:text> ================================= + <xsl:text> l1start ----------X--------------> l1vect + <xsl:text> / intersection + <xsl:text> let [x1, y1, x3, y3] = [l1start.x, l1start.y, l2start.x, l2start.y]; + <xsl:text> let [x2, y2, x4, y4] = [x1+l1vect.x, y1+l1vect.y, x3+l2vect.x, y3+l2vect.y]; + <xsl:text> // line intercept math by Paul Bourke http://paulbourke.net/geometry/pointlineplane/ + <xsl:text> // Determine the intersection point of two line segments + <xsl:text> // Return FALSE if the lines don't intersect + <xsl:text> // Check if none of the lines are of length 0 + <xsl:text> if ((x1 === x2 && y1 === y2) || (x3 === x4 && y3 === y4)) { + <xsl:text> return false + <xsl:text> denominator = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1)) + <xsl:text> // Lines are parallel + <xsl:text> if (denominator === 0) { + <xsl:text> return false + <xsl:text> let ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator + <xsl:text> let ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator + <xsl:text> // Return a object with the x and y coordinates of the intersection + <xsl:text> let x = x1 + ua * (x2 - x1) + <xsl:text> let y = y1 + ua * (y2 - y1) + <xsl:text> return new DOMPoint(x,y); + <xsl:text>class ReferenceFrame { + <xsl:text> constructor( + <xsl:text> // [[Xminor,Xmajor], [Yminor,Ymajor]] + <xsl:text> // [Xlabel, Ylabel] + <xsl:text> // [Xline, Yline] + <xsl:text> // [Xformat, Yformat] printf-like formating strings + <xsl:text> this.axes = zip(labels,marks,lines,formats).map(args => new Axis(...args)); + <xsl:text> let [lx,ly] = this.axes.map(axis => axis.line); + <xsl:text> let [[xstart, xvect], [ystart, yvect]] = [lx,ly]; + <xsl:text> let base_point = this.getBasePoint(); + <xsl:text> // setup clipping for curves + <xsl:text> this.clipPathPathDattr = + <xsl:text> "m " + base_point.x + "," + base_point.y + " " + <xsl:text> + xvect.x + "," + xvect.y + " " + <xsl:text> + yvect.x + "," + yvect.y + " " + <xsl:text> + -xvect.x + "," + -xvect.y + " " + <xsl:text> + -yvect.x + "," + -yvect.y + " z"; + <xsl:text> this.base_ref = [base_point, xvect, yvect]; + <xsl:text> this.lengths = [xvect,yvect].map(v => vectorLength(v)); + <xsl:text> for(let axis of this.axes){ + <xsl:text> axis.setBasePoint(base_point); + <xsl:text> getLengths(){ + <xsl:text> return this.lengths; + <xsl:text> getBaseRef(){ + <xsl:text> return this.base_ref; + <xsl:text> getClipPathPathDattr(){ + <xsl:text> return this.clipPathPathDattr; + <xsl:text> applyRanges(ranges){ + <xsl:text> let origin_moves = zip(ranges,this.axes).map(([range,axis]) => axis.applyRange(...range)); + <xsl:text> zip(origin_moves.reverse(),this.axes).forEach(([vect,axis]) => axis.moveOrigin(vect)); + <xsl:text> getBasePoint() { + <xsl:text> let [[xstart, xvect], [ystart, yvect]] = this.axes.map(axis => axis.line); + <xsl:text> Compute graph clipping region base point + <xsl:text> ======================================== + <xsl:text> Clipping region is a parallelogram containing axes lines, + <xsl:text> and whose sides are parallel to axes line respectively. + <xsl:text> Given axes lines are not starting at the same point, hereafter is + <xsl:text> calculus of parallelogram base point. + <xsl:text> ^ given Y axis (yvect) + <xsl:text> xstart *---------*--------------> given X axis (xvect) + <xsl:text> *---------*-------------- + <xsl:text> base_point ystart + <xsl:text> let base_point = getLinesIntesection([xstart,yvect],[ystart,xvect]); + <xsl:text> return base_point; + <xsl:text> constructor(label, marks, line, format){ + <xsl:text> this.lineElement = line; + <xsl:text> this.line = lineFromPath(line); + <xsl:text> this.format = format; + <xsl:text> this.label = label; + <xsl:text> this.marks = marks; + <xsl:text> // add transforms for elements sliding along the axis line + <xsl:text> for(let [elementname,element] of zip(["minor", "major", "label"],[...marks,label])){ + <xsl:text> for(let name of ["base","slide"]){ + <xsl:text> let transform = svg_root.createSVGTransform(); + <xsl:text> element.transform.baseVal.insertItemBefore(transform,0); + <xsl:text> this[elementname+"_"+name+"_transform"]=transform; + <xsl:text> // group marks an labels together + <xsl:text> let parent = line.parentElement; + <xsl:text> this.marks_group = move_elements_to_group(marks); + <xsl:text> this.marks_and_label_group = move_elements_to_group([this.marks_group, label]); + <xsl:text> this.group = move_elements_to_group([this.marks_and_label_group,line]); + <xsl:text> parent.appendChild(this.group); + <xsl:text> // Add transforms to group + <xsl:text> for(let name of ["base","origin"]){ + <xsl:text> let transform = svg_root.createSVGTransform(); + <xsl:text> this.group.transform.baseVal.appendItem(transform); + <xsl:text> this[name+"_transform"]=transform; + <xsl:text> this.marks_and_label_group_transform = svg_root.createSVGTransform(); + <xsl:text> this.marks_and_label_group.transform.baseVal.appendItem(this.marks_and_label_group_transform); + <xsl:text> this.duplicates = []; + <xsl:text> this.last_duplicate_index = 0; + <xsl:text> setBasePoint(base_point){ + <xsl:text> // move Axis to base point + <xsl:text> let [start, _vect] = this.line; + <xsl:text> let v = vector(start, base_point); + <xsl:text> this.base_transform.setTranslate(v.x, v.y); + <xsl:text> // Move marks and label to base point. + <xsl:text> // _|_______ _|________ + <xsl:text> // | ' | ==> ' + <xsl:text> for(let [markname,mark] of zip(["minor", "major"],this.marks)){ + <xsl:text> let pos = vector( + <xsl:text> // Marks are expected to be paths + <xsl:text> // paths are expected to be lines + <xsl:text> // intersection with axis line is taken + <xsl:text> // as reference for mark position + <xsl:text> getLinesIntesection( + <xsl:text> this.line, lineFromPath(mark)),base_point); + <xsl:text> this[markname+"_base_transform"].setTranslate(pos.x - v.x, pos.y - v.y); + <xsl:text> if(markname == "major"){ // label follow major mark + <xsl:text> this.label_base_transform.setTranslate(pos.x - v.x, pos.y - v.y); + <xsl:text> moveOrigin(vect){ + <xsl:text> this.origin_transform.setTranslate(vect.x, vect.y); + <xsl:text> applyRange(min, max){ + <xsl:text> let range = max - min; + <xsl:text> // compute how many units for a mark + <xsl:text> // - Units are expected to be an order of magnitude smaller than range, + <xsl:text> // so that marks are not too dense and also not too sparse. + <xsl:text> // Order of magnitude of range is log10(range) + <xsl:text> // - Units are necessarily power of ten, otherwise it is complicated to + <xsl:text> // fill the text in labels... + <xsl:text> // Unit is pow(10, integer_number ) + <xsl:text> // - To transform order of magnitude to an integer, floor() is used. + <xsl:text> // This results in a count of mark fluctuating in between 10 and 100. + <xsl:text> // - To spare resources result is better in between 3 and 30, + <xsl:text> // and log10(3) is substracted to order of magnitude to obtain this + <xsl:text> let unit = Math.pow(10, Math.floor(Math.log10(range)-Math.log10(3))); + <xsl:text> // TODO: for time values (ms), units may be : + <xsl:text> // 1 -> ms + <xsl:text> // 10 -> s/100 + <xsl:text> // 100 -> s/10 + <xsl:text> // 1000 -> s + <xsl:text> // 60000 -> min + <xsl:text> // 3600000 -> hour + <xsl:text> // Compute position of origin along axis [0...range] + <xsl:text> // min < 0, max > 0, offset = -min + <xsl:text> // _____________|________________ + <xsl:text> // ... -3 -2 -1 |0 1 2 3 4 ... + <xsl:text> // <--offset---> ^ + <xsl:text> // |_original + <xsl:text> // min > 0, max > 0, offset = 0 + <xsl:text> // |________________ + <xsl:text> // |6 7 8 9 10... + <xsl:text> // |_original + <xsl:text> // min < 0, max < 0, offset = max-min (range) + <xsl:text> // _____________|_ + <xsl:text> // ... -5 -4 -3 |-2 + <xsl:text> // <--offset---> ^ + <xsl:text> // |_original + <xsl:text> let offset = (max>=0 && min>=0) ? 0 : ( + <xsl:text> (max<0 && min<0) ? range : -min); + <xsl:text> // compute unit vector + <xsl:text> let [_start, vect] = this.line; + <xsl:text> let unit_vect = vectorscale(vect, 1/range); + <xsl:text> let [mark_min, mark_max, mark_offset] = [min,max,offset].map(val => Math.round(val/unit)); + <xsl:text> let mark_count = mark_max-mark_min; + <xsl:text> // apply unit vector to marks and label + <xsl:text> // offset is a representing position of an + <xsl:text> // axis along the opposit axis line, expressed in major marks units + <xsl:text> // unit_vect is unit vector + <xsl:text> // | unit_vect + <xsl:text> // |<---> + <xsl:text> // _________|__________> + <xsl:text> // ^ | ' | ' | ' + <xsl:text> // |yoffset | 1 + <xsl:text> // v xoffset| + <xsl:text> // X<------>| + <xsl:text> // base_point + <xsl:text> // move major marks and label to first positive mark position + <xsl:text> // let v = vectorscale(unit_vect, unit); + <xsl:text> // this.label_slide_transform.setTranslate(v.x, v.y); + <xsl:text> // this.major_slide_transform.setTranslate(v.x, v.y); + <xsl:text> // move minor mark to first half positive mark position + <xsl:text> let v = vectorscale(unit_vect, unit/2); + <xsl:text> this.minor_slide_transform.setTranslate(v.x, v.y); + <xsl:text> // duplicate marks and labels as needed + <xsl:text> let current_mark_count = this.duplicates.length; + <xsl:text> for(let i = current_mark_count; i <= mark_count; i++){ + <xsl:text> // cloneNode() label and add a svg:use of marks in a new group + <xsl:text> let newgroup = document.createElementNS(xmlns,"g"); + <xsl:text> let transform = svg_root.createSVGTransform(); + <xsl:text> let newlabel = this.label.cloneNode(true); + <xsl:text> let newuse = document.createElementNS(xmlns,"use"); + <xsl:text> let newuseAttr = document.createAttribute("href"); + <xsl:text> newuseAttr.value = "#"+this.marks_group.id; + <xsl:text> newuse.setAttributeNode(newuseAttr); + <xsl:text> newgroup.transform.baseVal.appendItem(transform); + <xsl:text> newgroup.appendChild(newlabel); + <xsl:text> newgroup.appendChild(newuse); + <xsl:text> this.duplicates.push([transform,newgroup]); + <xsl:text> // move marks and labels, set labels + <xsl:text> // min > 0, max > 0, offset = 0 + <xsl:text> // |________> + <xsl:text> // base_point + <xsl:text> // min < 0, max > 0, offset = -min + <xsl:text> // _________|__________> + <xsl:text> // ' | ' | ' | ' + <xsl:text> // X<------>| + <xsl:text> // base_point + <xsl:text> // min < 0, max < 0, offset = range + <xsl:text> // ____________| + <xsl:text> // ' | ' | |' + <xsl:text> // X<--------->| + <xsl:text> // base_point + <xsl:text> let duplicate_index = 0; + <xsl:text> for(let mark_index = 0; mark_index <= mark_count; mark_index++){ + <xsl:text> let val = (mark_min + mark_index) * unit; + <xsl:text> let vec = vectorscale(unit_vect, val - min); + <xsl:text> let text = this.format ? sprintf(this.format, val) : val.toString(); + <xsl:text> if(mark_index == mark_offset){ + <xsl:text> // apply offset to original marks and label groups + <xsl:text> this.marks_and_label_group_transform.setTranslate(vec.x, vec.y); + <xsl:text> // update original label text + <xsl:text> this.label.getElementsByTagName("tspan")[0].textContent = text; + <xsl:text> let [transform,element] = this.duplicates[duplicate_index++]; + <xsl:text> // apply unit vector*N to marks and label groups + <xsl:text> transform.setTranslate(vec.x, vec.y); + <xsl:text> // update label text + <xsl:text> element.getElementsByTagName("tspan")[0].textContent = text; + <xsl:text> // Attach to group if not already + <xsl:text> if(element.parentElement == null){ + <xsl:text> this.group.appendChild(element); + <xsl:text> let save_duplicate_index = duplicate_index; + <xsl:text> // dettach marks and label from group if not anymore visible + <xsl:text> for(;duplicate_index < this.last_duplicate_index; duplicate_index++){ + <xsl:text> let [transform,element] = this.duplicates[duplicate_index]; + <xsl:text> this.group.removeChild(element); + <xsl:text> this.last_duplicate_index = save_duplicate_index; + <xsl:text> return vectorscale(unit_vect, offset); @@ -7758,6 +9349,7 @@
<style type="text/css" media="screen">
<xsl:value-of select="ns:GetFonts()"/>
+ <xsl:apply-templates select="document('')/*/cssdefs:*"/> <body style="margin:0;overflow:hidden;user-select:none;touch-action:none;">
@@ -8027,9 +9619,21 @@
<xsl:text> let lang = get_current_lang_code();
- <xsl:text> arg = Date(arg).toLocaleString('en-US', options);+ <xsl:text> f = new Intl.DateTimeFormat(lang, options); + <xsl:text> } catch(e) { + <xsl:text> f = new Intl.DateTimeFormat('en-US', options); + <xsl:text> arg = f.format(arg); @@ -8349,6 +9953,430 @@
<xsl:text>}(); // eslint-disable-line
+ <xsl:text>From https://github.com/keyvan-m-sadeghi/pythonic + <xsl:text>Slightly modified in order to be usable in browser (i.e. not as a node.js module) + <xsl:text>The MIT License (MIT) + <xsl:text>Copyright (c) 2016 Assister.Ai + <xsl:text>Permission is hereby granted, free of charge, to any person obtaining a copy of + <xsl:text>this software and associated documentation files (the "Software"), to deal in + <xsl:text>the Software without restriction, including without limitation the rights to + <xsl:text>use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of + <xsl:text>the Software, and to permit persons to whom the Software is furnished to do so, + <xsl:text>subject to the following conditions: + <xsl:text>The above copyright notice and this permission notice shall be included in all + <xsl:text>copies or substantial portions of the Software. + <xsl:text>THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + <xsl:text>IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS + <xsl:text>FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR + <xsl:text>COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER + <xsl:text>IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN + <xsl:text>CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + <xsl:text>class Iterator { + <xsl:text> constructor(generator) { + <xsl:text> this[Symbol.iterator] = generator; + <xsl:text> async * [Symbol.asyncIterator]() { + <xsl:text> for (const element of this) { + <xsl:text> yield await element; + <xsl:text> forEach(callback) { + <xsl:text> for (const element of this) { + <xsl:text> callback(element); + <xsl:text> map(callback) { + <xsl:text> const result = []; + <xsl:text> for (const element of this) { + <xsl:text> result.push(callback(element)); + <xsl:text> return result; + <xsl:text> filter(callback) { + <xsl:text> const result = []; + <xsl:text> for (const element of this) { + <xsl:text> if (callback(element)) { + <xsl:text> result.push(element); + <xsl:text> return result; + <xsl:text> reduce(callback, initialValue) { + <xsl:text> let empty = typeof initialValue === 'undefined'; + <xsl:text> let accumulator = initialValue; + <xsl:text> let index = 0; + <xsl:text> for (const currentValue of this) { + <xsl:text> if (empty) { + <xsl:text> accumulator = currentValue; + <xsl:text> empty = false; + <xsl:text> accumulator = callback(accumulator, currentValue, index, this); + <xsl:text> if (empty) { + <xsl:text> throw new TypeError('Reduce of empty Iterator with no initial value'); + <xsl:text> return accumulator; + <xsl:text> some(callback) { + <xsl:text> for (const element of this) { + <xsl:text> if (callback(element)) { + <xsl:text> return true; + <xsl:text> return false; + <xsl:text> every(callback) { + <xsl:text> for (const element of this) { + <xsl:text> if (!callback(element)) { + <xsl:text> return false; + <xsl:text> return true; + <xsl:text> static fromIterable(iterable) { + <xsl:text> return new Iterator(function * () { + <xsl:text> for (const element of iterable) { + <xsl:text> yield element; + <xsl:text> return Array.from(this); + <xsl:text> if (!this.currentInvokedGenerator) { + <xsl:text> this.currentInvokedGenerator = this[Symbol.iterator](); + <xsl:text> return this.currentInvokedGenerator.next(); + <xsl:text> delete this.currentInvokedGenerator; + <xsl:text>function rangeSimple(stop) { + <xsl:text> return new Iterator(function * () { + <xsl:text> for (let i = 0; i < stop; i++) { + <xsl:text>function rangeOverload(start, stop, step = 1) { + <xsl:text> return new Iterator(function * () { + <xsl:text> for (let i = start; i < stop; i += step) { + <xsl:text>function range(...args) { + <xsl:text> if (args.length < 2) { + <xsl:text> return rangeSimple(...args); + <xsl:text> return rangeOverload(...args); + <xsl:text>function enumerate(iterable) { + <xsl:text> return new Iterator(function * () { + <xsl:text> let index = 0; + <xsl:text> for (const element of iterable) { + <xsl:text> yield [index, element]; + <xsl:text>const _zip = longest => (...iterables) => { + <xsl:text> if (iterables.length < 2) { + <xsl:text> throw new TypeError("zip takes 2 iterables at least, "+iterables.length+" given"); + <xsl:text> return new Iterator(function * () { + <xsl:text> const iterators = iterables.map(iterable => Iterator.fromIterable(iterable)); + <xsl:text> while (true) { + <xsl:text> const row = iterators.map(iterator => iterator.next()); + <xsl:text> const check = longest ? row.every.bind(row) : row.some.bind(row); + <xsl:text> if (check(next => next.done)) { + <xsl:text> yield row.map(next => next.value); + <xsl:text>const zip = _zip(false), zipLongest= _zip(true); + <xsl:text>function items(obj) { + <xsl:text> let {keys, get} = obj; + <xsl:text> if (obj instanceof Map) { + <xsl:text> keys = keys.bind(obj); + <xsl:text> get = get.bind(obj); + <xsl:text> keys = function () { + <xsl:text> return Object.keys(obj); + <xsl:text> get = function (key) { + <xsl:text> return obj[key]; + <xsl:text> return new Iterator(function * () { + <xsl:text> for (const key of keys()) { + <xsl:text> yield [key, get(key)]; + <xsl:text>module.exports = {Iterator, range, enumerate, zip: _zip(false), zipLongest: _zip(true), items}; @@ -8757,6 +10785,30 @@
+ <xsl:text>var page_fading_in_progress = false; + <xsl:text>function fading_page_switch(...args){ + <xsl:text> svg_root.classList.add("fade-out-page"); + <xsl:text> page_fading_in_progress = true; + <xsl:text> setTimeout(function(){ + <xsl:text> switch_page(...args); + <xsl:text>document.body.style.backgroundColor = "black"; <xsl:text>// subscribe to per instance current page hmi variable
<xsl:text>// PLC must prefix page name with "!" for page switch to happen
@@ -8771,7 +10823,7 @@
<xsl:text> if(value.startsWith("!"))
- <xsl:text> switch_page(value.slice(1));+ <xsl:text> fading_page_switch(value.slice(1)); @@ -8787,9 +10839,9 @@
- <xsl:text>function multiline_to_svg_text(elt, str) {- <xsl:text> str.split('\n').map((line,i) => {elt.children[i].textContent = line;});+ <xsl:text>function multiline_to_svg_text(elt, str, blank) { + <xsl:text> str.split('\n').map((line,i) => {elt.children[i].textContent = blank?"":line;}); @@ -9357,6 +11409,12 @@
<xsl:text> svg_root.setAttribute('viewBox',new_desc.bbox.join(" "));
+ <xsl:text> if(page_fading_in_progress) + <xsl:text> svg_root.classList.remove("fade-out-page"); + <xsl:text> page_fading_in_progress = false; <xsl:text> current_visible_page = page_name;
--- a/svghmi/widget_xygraph.ysl2 Mon Jun 13 19:22:31 2022 +0200
+++ b/svghmi/widget_xygraph.ysl2 Mon Jun 27 10:26:04 2022 +0200
@@ -22,20 +22,35 @@
path name="value" count="1+" accepts="HMI_INT,HMI_REAL" > value
- arg name="size" accepts="int" > buffer size+ arg name="xrange" accepts="int,time" > X axis range expressed either in samples or duration. arg name="xformat" count="optional" accepts="string" > format string for X label
arg name="yformat" count="optional" accepts="string" > format string for Y label
- arg name="ymin" count="optional" accepts="int,real" > minimum value foe Y axis- arg name="ymax" count="optional" accepts="int,real" > maximum value for Y axis widget_class("XYGraph") {
this.x_format, this.y_format] = this.args;
+ let timeunit = x_duration_s.slice(-1); + if(factor == undefined){ + this.max_data_length = Number(x_duration_s); + this.x_duration = undefined; + let duration = factor*Number(x_duration_s.slice(0,-1)); + this.max_data_length = undefined; + this.x_duration = duration*1000; // Min and Max given with paths are meant to describe visible range,
@@ -96,8 +111,7 @@
curve.setAttribute("clip-path", "url(#" + clipPath.id + ")");
- this.curves_data = this.curves.map(_unused => []);- this.max_data_length = this.args[0]; dispatch(value,oldval, index) {
@@ -108,19 +122,33 @@
// data is updated only when graph is visible
// TODO: replace with separate recording
+ if(this.curves_data[index] === undefined){ + this.curves_data[index] = []; this.curves_data[index].push([time, value]);
let data_length = this.curves_data[index].length;
let ymin_damaged = false;
let ymax_damaged = false;
- if(data_length > this.max_data_length){- [this.xmin, overflow] = this.curves_data[index].shift();- data_length = data_length - 1;+ if(this.max_data_length == undefined){ + let peremption = time - this.x_duration; + let oldest = this.curves_data[index][0][0] + this.xmin = peremption; + if(oldest < peremption){ + overflow = this.curves_data[index].shift()[1]; + data_length = data_length - 1; - if(this.xmin == undefined){+ if(data_length > this.max_data_length){ + [this.xmin, overflow] = this.curves_data[index].shift(); + data_length = data_length - 1; + if(this.xmin == undefined){ @@ -141,6 +169,7 @@
let Yrange = this.ymax - this.ymin;
+ // apply margin by moving min and max to enlarge range let [xMargin,yMargin] = zip(this.Margins, [Xrange, Yrange]).map(([m,l]) => m*l);
[[this.dxmin, this.dxmax],[this.dymin,this.dymax]] =
[[this.xmin-xMargin, this.xmax+xMargin],
@@ -163,6 +192,7 @@
let px = base_point.x + xv.x + yv.x;
let py = base_point.y + xv.y + yv.y;
+ // update min and max from curve data if needed if(ymin_damaged && y < this.ymin) this.ymin = y;
if(ymax_damaged && y > this.ymax) this.ymax = y;
@@ -199,6 +229,22 @@
+def "func:check_curves_label_consistency" { + param "number_to_check"; + when "$curve_elts[@inkscape:label = concat('curve_', string($number_to_check))]"{ + if "$number_to_check > 0"{ + value "func:check_curves_label_consistency($curve_elts, $number_to_check - 1)"; + value "concat('missing curve_', string($number_to_check))"; labels("/x_interval_minor_mark /x_axis_line /x_interval_major_mark /x_axis_label");
labels("/y_interval_minor_mark /y_axis_line /y_interval_major_mark /y_axis_label");
@@ -206,15 +252,15 @@
// collect all curve_n labelled children
- foreach "$hmi_element/*[regexp:test(@inkscape:label,'^curve_[0-9]+$')]" {+ const "curves","$hmi_element/*[regexp:test(@inkscape:label,'^curve_[0-9]+$')]"; + const "curves_error", "func:check_curves_label_consistency($curves,count($curves)-1)"; + if "string-length($curves_error)" + error > XYGraph id="«@id»", label="«@inkscape:label»" : «$curves_error» const "label","@inkscape:label";
- // detect non-unique names- if "$hmi_element/*[not($id = @id) and @inkscape:label=$label]"{- error > XYGraph id="«$id»", label="«$label»" : elements with data_n label must be unique.- | this.curves[«substring(@inkscape:label, 7)»] = id("«@id»"); /* «@inkscape:label» */+ const "curve_num", "substring(@inkscape:label, 7)"; + | this.curves[«$curve_num»] = id("«@id»"); /* «@inkscape:label» */ --- a/svghmi/widgets_common.ysl2 Mon Jun 13 19:22:31 2022 +0200
+++ b/svghmi/widgets_common.ysl2 Mon Jun 27 10:26:04 2022 +0200
@@ -14,6 +14,20 @@
+decl warning_labels(*ptr) alias - { + with "mandatory","'warn'"; +decl activable() alias - { + warning_labels("/active /inactive") { decl activable_labels(*ptr) alias - {
with "subelements","'active inactive'";
@@ -165,6 +179,39 @@
var pending_widget_animates = [];
+ function _hide(elt, placeholder){ + if(elt.parentNode != null) + placeholder.parentNode.removeChild(elt); + function _show(elt, placeholder){ + placeholder.parentNode.insertBefore(elt, placeholder); + function set_activation_state(eltsub, state){ + if(eltsub.active_elt != undefined){ + if(eltsub.active_elt_placeholder == undefined){ + eltsub.active_elt_placeholder = document.createComment(""); + eltsub.active_elt.parentNode.insertBefore(eltsub.active_elt_placeholder, eltsub.active_elt); + (state?_show:_hide)(eltsub.active_elt, eltsub.active_elt_placeholder); + if(eltsub.inactive_elt != undefined){ + if(eltsub.inactive_elt_placeholder == undefined){ + eltsub.inactive_elt_placeholder = document.createComment(""); + eltsub.inactive_elt.parentNode.insertBefore(eltsub.inactive_elt_placeholder, eltsub.inactive_elt); + ((state || state==undefined)?_hide:_show)(eltsub.inactive_elt, eltsub.inactive_elt_placeholder); + function activate_activable(eltsub) { + set_activation_state(eltsub, true); + function inactivate_activable(eltsub) { + set_activation_state(eltsub, false); frequency = 10; /* FIXME arbitrary default max freq. Obtain from config ? */
@@ -181,7 +228,13 @@
this.lastapply = indexes.map(() => undefined);
this.inhibit = indexes.map(() => undefined);
this.pending = indexes.map(() => undefined);
- this.bound_unhinibit = this.unhinibit.bind(this);+ this.bound_uninhibit = this.uninhibit.bind(this); + this.lastdispatch = indexes.map(() => undefined); + this.deafen = indexes.map(() => undefined); + this.incoming = indexes.map(() => undefined); + this.bound_undeafen = this.undeafen.bind(this); this.forced_frequency = freq;
@@ -225,7 +278,13 @@
if(inhibition != undefined){
clearTimeout(inhibition);
this.lastapply[i] = undefined;
+ let deafened = this.deafen[i]; + if(deafened != undefined){ + clearTimeout(deafened); + this.lastdispatch[i] = undefined; let index = this.indexes[i];
@@ -313,7 +372,7 @@
return apply_hmi_value(realindex, new_val);
this.inhibit[index] = undefined;
let new_val = this.pending[index];
this.pending[index] = undefined;
@@ -332,7 +391,7 @@
let elapsed = now - lastapply;
this.pending[index] = new_val;
- this.inhibit[index] = setTimeout(this.bound_unhinibit, min_interval - elapsed, index);+ this.inhibit[index] = setTimeout(this.bound_uninhibit, min_interval - elapsed, index); @@ -354,13 +413,36 @@
+ this.deafen[index] = undefined; + let [new_val, old_val] = this.incoming[index]; + this.incoming[index] = undefined; + this.dispatch(new_val, old_val, index); _dispatch(value, oldval, varnum) {
let dispatch = this.dispatch;
if(dispatch != undefined){
- dispatch.call(this, value, oldval, varnum);+ if(this.deafen[varnum] == undefined){ + let min_interval = 1000/this.frequency; + let lastdispatch = this.lastdispatch[varnum]; + if(lastdispatch == undefined || now > lastdispatch + min_interval){ + this.lastdispatch[varnum] = now; + dispatch.call(this, value, oldval, varnum); + let elapsed = now - lastdispatch; + this.incoming[varnum] = [value, oldval]; + this.deafen[varnum] = setTimeout(this.bound_undeafen, min_interval - elapsed, varnum); + this.incoming[varnum] = [value, oldval]; @@ -376,17 +458,10 @@
this.pending_animate = true;
- activate_activable(eltsub) {- eltsub.inactive.style.display = "none";- eltsub.active.style.display = "";- inactivate_activable(eltsub) {- eltsub.active.style.display = "none";- eltsub.inactive.style.display = "";+ set_activation_state(state){ + set_activation_state(this.activable_sub, state); @@ -427,6 +502,7 @@
param "subelements","/..";
const "widget_type","@type";
+ const "widget_id","@id"; foreach "str:split($labels)" {
const "absolute", "starts-with(., '/')";
const "name","substring(.,number($absolute)+1)";
@@ -434,8 +510,16 @@
const "elt","($widget//*[not($absolute) and @inkscape:label=$name] | $widget/*[$absolute and @inkscape:label=$name])[1]";
- if "$mandatory='yes'" {- error > «$widget_type» widget must have a «$name» element+ if "$mandatory!='no'" { + const "errmsg" > «$widget_type» widget (id=«$widget_id») must have a «$name» element + when "$mandatory='yes'" { // otherwise produce nothing
@@ -448,13 +532,21 @@
const "subelt","$elt/*[@inkscape:label=$subname][1]";
when "not($subelt/@id)" {
- if "$mandatory='yes'" {- error > «$widget_type» widget must have a «$name»/«$subname» element+ if "$mandatory!='no'" { + const "errmsg" > «$widget_type» widget (id=«$widget_id») must have a «$name»/«$subname» element + when "$mandatory='yes'" { | /* missing «$name»/«$subname» element */
- | "«$subname»": id("«$subelt/@id»")`if "position()!=last()" > ,`+ | "«$subname»_elt": id("«$subelt/@id»")`if "position()!=last()" > ,` 