# HG changeset patch
# User dgaberscek
# Date 1590738367 -7200
# Node ID 67c6783f221c1f83028430604114b8c9e8a39e80
# Parent 82f062408e709fc5ed624a64fef13f35e8dceda9# Parent 1f043fdaa7fb6a5a765b1913740a94853bd38548
Merge
diff -r 1f043fdaa7fb -r 67c6783f221c svghmi/gen_index_xhtml.xslt
--- a/svghmi/gen_index_xhtml.xslt Thu May 28 11:38:09 2020 +0200
+++ b/svghmi/gen_index_xhtml.xslt Fri May 29 09:46:07 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 => {
-</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 => {
-</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 && 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 && 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 && 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']">
@@ -2697,6 +2729,65 @@
<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 name="hmi_element" select="$hmi_element"/>
+ <xsl:with-param name="labels">
+ <xsl:text>active inactive</xsl:text>
+ </xsl:with-param>
+ </xsl:call-template>
+ <xsl:text> frequency: 5,
+</xsl:text>
+ <xsl:text> state: 0,
+</xsl:text>
+ <xsl:text> dispatch: function(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> on_click: function(evt) {
+</xsl:text>
+ <xsl:text> change_hmi_value(this.indexes[0], "="+this.state);
+</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.style.cssText;
+</xsl:text>
+ <xsl:text> this.inactive_style = this.inactive_elt.style.cssText;
+</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:text> },
+</xsl:text>
+ </xsl:template>
<xsl:template match="/">
<xsl:comment>
<xsl:text>Made with SVGHMI. https://beremiz.org</xsl:text>
@@ -3271,8 +3362,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;
diff -r 1f043fdaa7fb -r 67c6783f221c svghmi/widget_button.ysl2
--- a/svghmi/widget_button.ysl2 Thu May 28 11:38:09 2020 +0200
+++ b/svghmi/widget_button.ysl2 Fri May 29 09:46:07 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
diff -r 1f043fdaa7fb -r 67c6783f221c svghmi/widget_tooglebutton.ysl2
--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_tooglebutton.ysl2 Fri May 29 09:46:07 2020 +0200
@@ -0,0 +1,30 @@
+// widget_tooglebutton.ysl2
+
+template "widget[@type='ToggleButton']", mode="widget_defs" {
+ param "hmi_element";
+ labels("active inactive");
+ | frequency: 5,
+ | state: 0,
+ | dispatch: function(value) {
+ | this.state = value;
+ | if (this.state) {
+ | this.active_elt.setAttribute("style", this.active_style);
+ | this.inactive_elt.setAttribute("style", "display:none");
+ | this.state = 0;
+ | } else {
+ | this.inactive_elt.setAttribute("style", this.inactive_style);
+ | this.active_elt.setAttribute("style", "display:none");
+ | this.state = 1;
+ | }
+ | },
+ | on_click: function(evt) {
+ | change_hmi_value(this.indexes[0], "="+this.state);
+ | },
+ | active_style: undefined,
+ | inactive_style: undefined,
+ | init: function() {
+ | this.active_style = this.active_elt.style.cssText;
+ | this.inactive_style = this.inactive_elt.style.cssText;
+ | this.element.setAttribute("onclick", "hmi_widgets['«$hmi_element/@id»'].on_click(evt)");
+ | },
+}
\ No newline at end of file