svghmi/widget_input.ysl2
changeset 3302 c89fc366bebd
parent 3241 fe945f1f48b7
child 3523 13282f91e6ff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/svghmi/widget_input.ysl2	Thu Sep 02 21:36:29 2021 +0200
@@ -0,0 +1,110 @@
+// widget_input.ysl2
+
+widget_desc("Input") {
+    longdesc
+    || 
+    Input widget takes one variable path, and displays current value in
+    optional "value" labeled sub-element. 
+
+    Click on optional "edit" labeled element opens keypad to edit value.
+    
+    Operation on current value is performed when click on sub-elements with
+    label starting with '=', '+' or '-' sign. Value after sign is used as
+    operand.
+    ||
+
+    shortdesc > Input field with predefined operation buttons
+
+    arg name="format" accepts="string" > optional printf-like format 
+
+    path name="edit" accepts="HMI_INT, HMI_REAL, HMI_STRING" > single variable to edit
+    
+}
+
+widget_class("Input")
+||
+     on_op_click(opstr) {
+         this.change_hmi_value(0, opstr);
+     }
+     edit_callback(new_val) {
+         this.apply_hmi_value(0, new_val);
+     }
+
+     is_inhibited = false;
+     alert(msg){
+         this.is_inhibited = true;
+         this.display = msg;
+         setTimeout(() => this.stopalert(), 1000);
+         this.request_animate();
+     }
+
+     stopalert(){
+         this.is_inhibited = false;
+         this.display = this.last_value;
+         this.request_animate();
+     }
+
+     overshot(new_val, max) {
+         this.alert("max");
+     }
+
+     undershot(new_val, min) {
+         this.alert("min");
+     }
+||
+
+widget_defs("Input") {
+
+    const "value_elt" optional_labels("value");
+    const "have_value","string-length($value_elt)>0";
+    value "$value_elt";
+
+    const "edit_elt" optional_labels("edit");
+    const "have_edit","string-length($edit_elt)>0";
+    value "$edit_elt";
+
+    if "$have_value"
+    |     frequency: 5,
+
+    |     dispatch: function(value) {
+
+
+    if "$have_value or $have_edit" {
+        choose{
+            when "count(arg) = 1" {
+    |         this.last_value = vsprintf("«arg[1]/@value»", [value]);
+            }
+            otherwise {
+    |         this.last_value = value;
+            }
+        }
+    |         if(!this.is_inhibited){
+    |             this.display = this.last_value;
+    if "$have_value" {
+    |             this.request_animate();
+    }
+    |         }
+    }
+    |     },
+
+    if "$have_value" {
+    |     animate: function(){
+    |         this.value_elt.textContent = String(this.display);
+    |     },
+    }
+
+    |     init: function() {
+
+    if "$have_edit" {
+    |         this.edit_elt.onclick = () => edit_value("«path/@value»", "«path/@type»", this, this.last_value);
+        if "$have_value" {
+    |         this.value_elt.style.pointerEvents = "none";
+        }
+    }
+
+    foreach "$hmi_element/*[regexp:test(@inkscape:label,'^[=+\-].+')]" {
+    |         id("«@id»").onclick = () => this.on_op_click("«func:escape_quotes(@inkscape:label)»");
+    }
+
+    |     },
+}