SVGHMI: Jump widget, if it has a 'disabled' labeled element, reflects value of the pointed HMITree variable by showing this element when value is False, and behaving normaly otherwise. svghmi
authorEdouard Tisserant
Mon, 30 Mar 2020 14:26:42 +0200
branchsvghmi
changeset 2906 3b4a1319da09
parent 2905 3d7e3866cc51
child 2907 1695122a5e16
SVGHMI: Jump widget, if it has a 'disabled' labeled element, reflects value of the pointed HMITree variable by showing this element when value is False, and behaving normaly otherwise.
svghmi/gen_index_xhtml.xslt
svghmi/widget_jump.ysl2
--- a/svghmi/gen_index_xhtml.xslt	Mon Mar 30 11:06:12 2020 +0200
+++ b/svghmi/gen_index_xhtml.xslt	Mon Mar 30 14:26:42 2020 +0200
@@ -949,15 +949,104 @@
       <xsl:with-param name="mandatory" select="'no'"/>
     </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 name="hmi_element" select="$hmi_element"/>
+      <xsl:with-param name="labels">
+        <xsl:text>disabled</xsl:text>
+      </xsl:with-param>
+      <xsl:with-param name="mandatory" select="'no'"/>
+    </xsl:call-template>
+  </xsl:template>
   <xsl:template mode="widget_defs" match="widget[@type='Jump']">
     <xsl:param name="hmi_element"/>
-    <xsl:variable name="opts">
+    <xsl:variable name="activity">
       <xsl:call-template name="jump_widget_activity">
         <xsl:with-param name="hmi_element" select="$hmi_element"/>
       </xsl:call-template>
     </xsl:variable>
-    <xsl:variable name="have_opt" select="string-length($opts)&gt;0"/>
-    <xsl:value-of select="$opts"/>
+    <xsl:variable name="have_activity" select="string-length($activity)&gt;0"/>
+    <xsl:value-of select="$activity"/>
+    <xsl:variable name="disability">
+      <xsl:call-template name="jump_widget_disability">
+        <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      </xsl:call-template>
+    </xsl:variable>
+    <xsl:variable name="have_disability" select="$have_activity and string-length($disability)&gt;0"/>
+    <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>        console.log("disbled",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 &gt; 0 ? this.indexes[0] + this.offset : undefined;
@@ -968,38 +1057,16 @@
 </xsl:text>
     <xsl:text>    },
 </xsl:text>
-    <xsl:if test="$have_opt">
+    <xsl:if test="$have_activity">
       <xsl:text>    notify_page_change: function(page_name, index){
 </xsl:text>
       <xsl:text>        const ref_index = this.indexes.length &gt; 0 ? this.indexes[0] + this.offset : undefined;
 </xsl:text>
       <xsl:text>        const ref_name = this.args[0];
 </xsl:text>
-      <xsl:text>        if((ref_name == undefined || ref_name == page_name) &amp;&amp; index == ref_index) {
-</xsl:text>
-      <xsl:text>             console.log("active", ref_name, ref_index, page_name, index);
-</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>             console.log("inactive",ref_name, ref_index,  page_name, index);
-</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>        this.active =((ref_name == undefined || ref_name == page_name) &amp;&amp; index == ref_index);
+</xsl:text>
+      <xsl:text>        this.update();
 </xsl:text>
       <xsl:text>    },
 </xsl:text>
@@ -1010,15 +1077,52 @@
     <xsl:value-of select="$hmi_element/@id"/>
     <xsl:text>'].on_click(evt)");
 </xsl:text>
-    <xsl:if test="$have_opt">
+    <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:if test="$have_disability">
+      <xsl:text>        this.disabled_elt_style = this.disabled_elt.getAttribute("style");
+</xsl:text>
+    </xsl:if>
     <xsl:text>    },
 </xsl:text>
   </xsl:template>
+  <xsl:template mode="widget_subscribe" match="widget[@type='Jump']">
+    <xsl:param name="hmi_element"/>
+    <xsl:variable name="activity">
+      <xsl:call-template name="jump_widget_activity">
+        <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      </xsl:call-template>
+    </xsl:variable>
+    <xsl:variable name="have_activity" select="string-length($activity)&gt;0"/>
+    <xsl:variable name="disability">
+      <xsl:call-template name="jump_widget_disability">
+        <xsl:with-param name="hmi_element" select="$hmi_element"/>
+      </xsl:call-template>
+    </xsl:variable>
+    <xsl:variable name="have_disability" select="$have_activity and string-length($disability)&gt;0"/>
+    <xsl:choose>
+      <xsl:when test="$have_disability">
+        <xsl:text>    sub: subscribe,
+</xsl:text>
+        <xsl:text>    unsub: unsubscribe,
+</xsl:text>
+        <xsl:text>    apply_cache: widget_apply_cache,
+</xsl:text>
+      </xsl:when>
+      <xsl:otherwise>
+        <xsl:text>    sub: function(){},
+</xsl:text>
+        <xsl:text>    unsub: function(){},
+</xsl:text>
+        <xsl:text>    apply_cache: function(){},
+</xsl:text>
+      </xsl:otherwise>
+    </xsl:choose>
+  </xsl:template>
   <xsl:template mode="per_page_widget_template" match="widget[@type='Jump']">
     <xsl:param name="page_desc"/>
     <xsl:if test="path">
@@ -1903,7 +2007,7 @@
 </xsl:text>
     <xsl:text>    jump_history.push([page_name, page_index]);
 </xsl:text>
-    <xsl:text>    if(jump_history.length &gt; 4)
+    <xsl:text>    if(jump_history.length &gt; 42)
 </xsl:text>
     <xsl:text>        jump_history.shift();
 </xsl:text>
--- a/svghmi/widget_jump.ysl2	Mon Mar 30 11:06:12 2020 +0200
+++ b/svghmi/widget_jump.ysl2	Mon Mar 30 14:26:42 2020 +0200
@@ -5,33 +5,70 @@
         optional_labels("active inactive");
 }
 
+function "jump_widget_disability" {
+    param "hmi_element";
+        optional_labels("disabled");
+}
+
 template "widget[@type='Jump']", mode="widget_defs" {
     param "hmi_element";
-    const "opts" call "jump_widget_activity" with "hmi_element", "$hmi_element";
-    const "have_opt","string-length($opts)>0";
-    value "$opts";
+    const "activity" call "jump_widget_activity" with "hmi_element", "$hmi_element";
+    const "have_activity","string-length($activity)>0";
+    value "$activity";
+    const "disability" call "jump_widget_disability" with "hmi_element", "$hmi_element";
+    const "have_disability","$have_activity and string-length($disability)>0";
+    value "$disability";
+    if "$have_activity" {
+    |     active: false,
+    if "$have_disability" {
+    |     disabled: false,
+    |     frequency: 2,
+    |     dispatch: function(value) {
+    |         this.disabled = !Number(value);
+    |         console.log("disbled",value);
+    |         this.update();
+    |     },
+    }
+    |     update: function(){
+    if "$have_disability" {
+    |       if(this.disabled) {
+    |         /* show disabled */ 
+    |         this.disabled_elt.setAttribute("style", this.active_elt_style);
+    |         /* hide inactive */ 
+    |         this.inactive_elt.setAttribute("style", "display:none");
+    |         /* hide active */ 
+    |         this.active_elt.setAttribute("style", "display:none");
+    |       } else {
+    |         /* hide disabled */ 
+    |         this.disabled_elt.setAttribute("style", "display:none");
+    }
+    |         if(this.active) {
+    |              /* show active */ 
+    |              this.active_elt.setAttribute("style", this.active_elt_style);
+    |              /* hide inactive */ 
+    |              this.inactive_elt.setAttribute("style", "display:none");
+    |         } else {
+    |              /* show inactive */ 
+    |              this.inactive_elt.setAttribute("style", this.inactive_elt_style);
+    |              /* hide active */ 
+    |              this.active_elt.setAttribute("style", "display:none");
+    |         }
+    if "$have_disability" {
+    |       }
+    }
+    |     },
+    }
     |     on_click: function(evt) {
     |         const index = this.indexes.length > 0 ? this.indexes[0] + this.offset : undefined;
     |         const name = this.args[0];
     |         switch_page(name, index);
     |     },
-    if "$have_opt" {
+    if "$have_activity" {
     |     notify_page_change: function(page_name, index){
     |         const ref_index = this.indexes.length > 0 ? this.indexes[0] + this.offset : undefined;
     |         const ref_name = this.args[0];
-    |         if((ref_name == undefined || ref_name == page_name) && index == ref_index) {
-    |              console.log("active", ref_name, ref_index, page_name, index);
-    |              /* show active */ 
-    |              this.active_elt.setAttribute("style", this.active_elt_style);
-    |              /* hide inactive */ 
-    |              this.inactive_elt.setAttribute("style", "display:none");
-    |         } else {
-    |              console.log("inactive",ref_name, ref_index,  page_name, index);
-    |              /* show inactive */ 
-    |              this.inactive_elt.setAttribute("style", this.inactive_elt_style);
-    |              /* hide active */ 
-    |              this.active_elt.setAttribute("style", "display:none");
-    |         }
+    |         this.active =((ref_name == undefined || ref_name == page_name) && index == ref_index);
+    |         this.update();
     |     },
     }
     |     init: function() {
@@ -41,13 +78,37 @@
     TODO : generalize mouse event handling by global event capture + getElementsAtPoint()
     */
     |         this.element.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_click(evt)");
-    if "$have_opt" {
+    if "$have_activity" {
     |         this.active_elt_style = this.active_elt.getAttribute("style");
     |         this.inactive_elt_style = this.inactive_elt.getAttribute("style");
     }
+    if "$have_disability" {
+    |         this.disabled_elt_style = this.disabled_elt.getAttribute("style");
+    }
     |     },
 }
 
+// default : normal subscribing
+template "widget[@type='Jump']", mode="widget_subscribe" {
+    param "hmi_element";
+    const "activity" call "jump_widget_activity" with "hmi_element", "$hmi_element";
+    const "have_activity","string-length($activity)>0";
+    const "disability" call "jump_widget_disability" with "hmi_element", "$hmi_element";
+    const "have_disability","$have_activity and string-length($disability)>0";
+    choose {
+        when "$have_disability" {
+    |     sub: subscribe,
+    |     unsub: unsubscribe,
+    |     apply_cache: widget_apply_cache,
+        }
+        otherwise {
+    |     sub: function(){},
+    |     unsub: function(){},
+    |     apply_cache: function(){},
+        }
+    }
+}
+
 template "widget[@type='Jump']", mode="per_page_widget_template"{
     param "page_desc";
     /* check that given path is compatible with page's reference path */