beremiz

SVGHMI: Changed widget button handler to element attribute.
svghmi
2020-05-26, dgaberscek
99c4521bb844
Parents f0a822ef9fa0
Children 82f062408e70
SVGHMI: Changed widget button handler to element attribute.
2 files changed, 94 insertions(+), 51 deletions(-)
  • +63 -33
    svghmi/gen_index_xhtml.xslt
  • +31 -18
    svghmi/widget_button.ysl2
    • --- a/svghmi/gen_index_xhtml.xslt Tue May 26 09:58:20 2020 +0200
    +++ b/svghmi/gen_index_xhtml.xslt Tue May 26 10:53:02 2020 +0200
    @@ -1152,40 +1152,72 @@
    <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> init() {
    -</xsl:text>
    - <xsl:text> // TODO : use attributes to allow interaction through svg:use
    -</xsl:text>
    - <xsl:text> // TODO : deal with dragging
    -</xsl:text>
    - <xsl:text> this.element.addEventListener(
    -</xsl:text>
    - <xsl:text> "mousedown",
    -</xsl:text>
    - <xsl:text> evt =&gt; {
    -</xsl:text>
    - <xsl:text> change_hmi_value(this.indexes[0], "=1");
    -</xsl:text>
    - <xsl:text> });
    -</xsl:text>
    - <xsl:text> this.element.addEventListener(
    -</xsl:text>
    - <xsl:text> "mouseup",
    -</xsl:text>
    - <xsl:text> evt =&gt; {
    -</xsl:text>
    - <xsl:text> change_hmi_value(this.indexes[0], "=0");
    -</xsl:text>
    - <xsl:text> });
    + <xsl:template mode="widget_defs" match="widget[@type='Button']">
    + <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>active inactive</xsl:text>
    + </xsl:with-param>
    + <xsl:with-param name="mandatory" select="'no'"/>
    + </xsl:call-template>
    + <xsl:text>frequency: 5,
    +</xsl:text>
    + <xsl:text>on_mouse_down: function(evt) {
    +</xsl:text>
    + <xsl:text> if (this.active_style &amp;&amp; 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>}
    + <xsl:text> change_hmi_value(this.indexes[0], "=1");
    +</xsl:text>
    + <xsl:text>},
    +</xsl:text>
    + <xsl:text>on_mouse_up: function(evt) {
    +</xsl:text>
    + <xsl:text> if (this.active_style &amp;&amp; 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> change_hmi_value(this.indexes[0], "=0");
    +</xsl:text>
    + <xsl:text>},
    +</xsl:text>
    + <xsl:text>active_style: undefined,
    +</xsl:text>
    + <xsl:text>inactive_style: undefined,
    +</xsl:text>
    + <xsl:text>init: function() {
    +</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> if (this.active_style &amp;&amp; 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.element.setAttribute("onmousedown", "hmi_widgets['</xsl:text>
    + <xsl:value-of select="$hmi_element/@id"/>
    + <xsl:text>'].on_mouse_down(evt)");
    +</xsl:text>
    + <xsl:text> this.element.setAttribute("onmouseup", "hmi_widgets['</xsl:text>
    + <xsl:value-of select="$hmi_element/@id"/>
    + <xsl:text>'].on_mouse_up(evt)");
    +</xsl:text>
    + <xsl:text>},
    </xsl:text>
    </xsl:template>
    <xsl:template mode="widget_defs" match="widget[@type='CircularBar']">
    @@ -3271,8 +3303,6 @@
    </xsl:text>
    <xsl:text> }
    </xsl:text>
    - <xsl:text> console.log(opstr, given_val);
    -</xsl:text>
    <xsl:text> let old_val = cache[index];
    </xsl:text>
    <xsl:text> let new_val;
    --- a/svghmi/widget_button.ysl2 Tue May 26 09:58:20 2020 +0200
    +++ b/svghmi/widget_button.ysl2 Tue May 26 10:53:02 2020 +0200
    @@ -1,20 +1,33 @@
    // widget_button.ysl2
    -template "widget[@type='Button']", mode="widget_class"
    - ||
    - class ButtonWidget extends Widget{
    - frequency = 5;
    - init() {
    - this.element.addEventListener(
    - "mousedown",
    - evt => {
    - change_hmi_value(this.indexes[0], "=1");
    - });
    - this.element.addEventListener(
    - "mouseup",
    - evt => {
    - change_hmi_value(this.indexes[0], "=0");
    - });
    - }
    - }
    - ||
    +template "widget[@type='Button']", mode="widget_defs" {
    + param "hmi_element";
    + optional_labels("active inactive");
    + | frequency: 5,
    + | on_mouse_down: function(evt) {
    + | if (this.active_style && this.inactive_style) {
    + | this.active_elt.setAttribute("style", this.active_style);
    + | this.inactive_elt.setAttribute("style", "display:none");
    + | }
    + | change_hmi_value(this.indexes[0], "=1");
    + | },
    + | on_mouse_up: function(evt) {
    + | if (this.active_style && this.inactive_style) {
    + | this.active_elt.setAttribute("style", "display:none");
    + | this.inactive_elt.setAttribute("style", this.inactive_style);
    + | }
    + | change_hmi_value(this.indexes[0], "=0");
    + | },
    + | active_style: undefined,
    + | inactive_style: undefined,
    + | init: function() {
    + | this.active_style = this.active_elt ? this.active_elt.style.cssText : undefined;
    + | this.inactive_style = this.inactive_elt ? this.inactive_elt.style.cssText : undefined;
    + | if (this.active_style && this.inactive_style) {
    + | this.active_elt.setAttribute("style", "display:none");
    + | this.inactive_elt.setAttribute("style", this.inactive_style);
    + | }
    + | this.element.setAttribute("onmousedown", "hmi_widgets['«$hmi_element/@id»'].on_mouse_down(evt)");
    + | this.element.setAttribute("onmouseup", "hmi_widgets['«$hmi_element/@id»'].on_mouse_up(evt)");
    + | },
    +}
    \ No newline at end of file