beremiz

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
2020-03-30, Edouard Tisserant
3b4a1319da09
Parents 3d7e3866cc51
Children 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.
2 files changed, 210 insertions(+), 45 deletions(-)
  • +131 -27
    svghmi/gen_index_xhtml.xslt
  • +79 -18
    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,35 +949,76 @@
    <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:text> on_click: function(evt) {
    -</xsl:text>
    - <xsl:text> const index = this.indexes.length &gt; 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_opt">
    - <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: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>
    @@ -989,8 +1030,6 @@
    </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);
    @@ -1001,6 +1040,34 @@
    </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;
    +</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 &gt; 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) &amp;&amp; index == ref_index);
    +</xsl:text>
    + <xsl:text> this.update();
    +</xsl:text>
    <xsl:text> },
    </xsl:text>
    </xsl:if>
    @@ -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 */