svghmi/widget_input.ysl2
author Edouard Tisserant <edouard.tisserant@gmail.com>
Thu, 04 Feb 2021 21:20:01 +0100
branchsvghmi
changeset 3125 1fb0c07bd97b
parent 3118 e704b0487515
child 3153 671283404554
permissions -rw-r--r--
SVGHMI: widget activable elements : moved code to wher it belongs, rewrote cleaner
2883
8e3d130399b0 SVGHMI: created widget_*.ysl2. Renamed widget_common in widgets_common, so that it doesn't match globing.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2882
diff changeset
     1
// widget_input.ysl2
2779
75c6a31caca6 SVGHMI: Work In Progress : fixed pointer types in ctypes interface, cleaned up server startup and cleanup code, changed document type to XHTML, cleaner JS script : encapsulated in a function and in CDATA.
Edouard Tisserant
parents: 2763
diff changeset
     2
3094
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
     3
template "widget[@type='Input']", mode="widget_class"{
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
     4
||
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
     5
    class InputWidget extends Widget{
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
     6
         on_op_click(opstr) {
3101
4cbf024a6640 SVGHMI: cosmetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3100
diff changeset
     7
             this.change_hmi_value(0, opstr);
3094
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
     8
         }
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
     9
         edit_callback(new_val) {
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
    10
             this.apply_hmi_value(0, new_val);
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
    11
         }
3100
c51f9cf365c6 SVGHMI: Input widget overrides undershot() and overshot() methods to display "min: xxx" or "max: xxx" when user input goes out of given range.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3094
diff changeset
    12
c51f9cf365c6 SVGHMI: Input widget overrides undershot() and overshot() methods to display "min: xxx" or "max: xxx" when user input goes out of given range.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3094
diff changeset
    13
         overshot(new_val, max) {
c51f9cf365c6 SVGHMI: Input widget overrides undershot() and overshot() methods to display "min: xxx" or "max: xxx" when user input goes out of given range.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3094
diff changeset
    14
             this.last_display = "max: "+max;
c51f9cf365c6 SVGHMI: Input widget overrides undershot() and overshot() methods to display "min: xxx" or "max: xxx" when user input goes out of given range.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3094
diff changeset
    15
             this.request_animate();
c51f9cf365c6 SVGHMI: Input widget overrides undershot() and overshot() methods to display "min: xxx" or "max: xxx" when user input goes out of given range.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3094
diff changeset
    16
         }
c51f9cf365c6 SVGHMI: Input widget overrides undershot() and overshot() methods to display "min: xxx" or "max: xxx" when user input goes out of given range.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3094
diff changeset
    17
c51f9cf365c6 SVGHMI: Input widget overrides undershot() and overshot() methods to display "min: xxx" or "max: xxx" when user input goes out of given range.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3094
diff changeset
    18
         undershot(new_val, min) {
c51f9cf365c6 SVGHMI: Input widget overrides undershot() and overshot() methods to display "min: xxx" or "max: xxx" when user input goes out of given range.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3094
diff changeset
    19
             this.last_display = "min: "+min;
c51f9cf365c6 SVGHMI: Input widget overrides undershot() and overshot() methods to display "min: xxx" or "max: xxx" when user input goes out of given range.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3094
diff changeset
    20
             this.request_animate();
c51f9cf365c6 SVGHMI: Input widget overrides undershot() and overshot() methods to display "min: xxx" or "max: xxx" when user input goes out of given range.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3094
diff changeset
    21
         }
c51f9cf365c6 SVGHMI: Input widget overrides undershot() and overshot() methods to display "min: xxx" or "max: xxx" when user input goes out of given range.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3094
diff changeset
    22
c51f9cf365c6 SVGHMI: Input widget overrides undershot() and overshot() methods to display "min: xxx" or "max: xxx" when user input goes out of given range.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3094
diff changeset
    23
3094
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
    24
    }
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
    25
||
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
    26
}
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
    27
2883
8e3d130399b0 SVGHMI: created widget_*.ysl2. Renamed widget_common in widgets_common, so that it doesn't match globing.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2882
diff changeset
    28
template "widget[@type='Input']", mode="widget_defs" {
8e3d130399b0 SVGHMI: created widget_*.ysl2. Renamed widget_common in widgets_common, so that it doesn't match globing.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2882
diff changeset
    29
    param "hmi_element";
3094
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
    30
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
    31
    const "value_elt" optional_labels("value");
2883
8e3d130399b0 SVGHMI: created widget_*.ysl2. Renamed widget_common in widgets_common, so that it doesn't match globing.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2882
diff changeset
    32
    const "have_value","string-length($value_elt)>0";
8e3d130399b0 SVGHMI: created widget_*.ysl2. Renamed widget_common in widgets_common, so that it doesn't match globing.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2882
diff changeset
    33
    value "$value_elt";
3094
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
    34
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
    35
    const "edit_elt" optional_labels("edit");
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
    36
    const "have_edit","string-length($edit_elt)>0";
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
    37
    value "$edit_elt";
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
    38
2883
8e3d130399b0 SVGHMI: created widget_*.ysl2. Renamed widget_common in widgets_common, so that it doesn't match globing.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2882
diff changeset
    39
    if "$have_value"
8e3d130399b0 SVGHMI: created widget_*.ysl2. Renamed widget_common in widgets_common, so that it doesn't match globing.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2882
diff changeset
    40
    |     frequency: 5,
3094
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
    41
2883
8e3d130399b0 SVGHMI: created widget_*.ysl2. Renamed widget_common in widgets_common, so that it doesn't match globing.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2882
diff changeset
    42
    |     dispatch: function(value) {
3094
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
    43
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
    44
    if "$have_edit"
2911
211d6a185e31 SVGHMI: More infrastructure for editing values with a keypad.
Edouard Tisserant
parents: 2910
diff changeset
    45
    |         this.last_val = value;
3094
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
    46
3100
c51f9cf365c6 SVGHMI: Input widget overrides undershot() and overshot() methods to display "min: xxx" or "max: xxx" when user input goes out of given range.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3094
diff changeset
    47
    if "$have_value" {
c51f9cf365c6 SVGHMI: Input widget overrides undershot() and overshot() methods to display "min: xxx" or "max: xxx" when user input goes out of given range.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3094
diff changeset
    48
    |         this.last_display = value;
c51f9cf365c6 SVGHMI: Input widget overrides undershot() and overshot() methods to display "min: xxx" or "max: xxx" when user input goes out of given range.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3094
diff changeset
    49
    |         this.request_animate();
c51f9cf365c6 SVGHMI: Input widget overrides undershot() and overshot() methods to display "min: xxx" or "max: xxx" when user input goes out of given range.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3094
diff changeset
    50
    }
c51f9cf365c6 SVGHMI: Input widget overrides undershot() and overshot() methods to display "min: xxx" or "max: xxx" when user input goes out of given range.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3094
diff changeset
    51
    |     },
2836
ce6cecdb7320 SVGHMI : still behave, even if important things are missing in SVG widget definitions (ex: needle missing for Meter widget)
Edouard Tisserant
parents: 2834
diff changeset
    52
3100
c51f9cf365c6 SVGHMI: Input widget overrides undershot() and overshot() methods to display "min: xxx" or "max: xxx" when user input goes out of given range.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3094
diff changeset
    53
    if "$have_value" {
c51f9cf365c6 SVGHMI: Input widget overrides undershot() and overshot() methods to display "min: xxx" or "max: xxx" when user input goes out of given range.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3094
diff changeset
    54
    |     animate: function(){
c51f9cf365c6 SVGHMI: Input widget overrides undershot() and overshot() methods to display "min: xxx" or "max: xxx" when user input goes out of given range.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3094
diff changeset
    55
    |         this.value_elt.textContent = String(this.last_display);
2883
8e3d130399b0 SVGHMI: created widget_*.ysl2. Renamed widget_common in widgets_common, so that it doesn't match globing.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2882
diff changeset
    56
    |     },
3100
c51f9cf365c6 SVGHMI: Input widget overrides undershot() and overshot() methods to display "min: xxx" or "max: xxx" when user input goes out of given range.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3094
diff changeset
    57
    }
3094
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
    58
2883
8e3d130399b0 SVGHMI: created widget_*.ysl2. Renamed widget_common in widgets_common, so that it doesn't match globing.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2882
diff changeset
    59
    |     init: function() {
3094
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
    60
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
    61
    if "$have_edit" {
3118
e704b0487515 SVGHMI : removed support for changing keyboard position and showing at user defined location. Feature was problematic in many respect.
Edouard Tisserant
parents: 3101
diff changeset
    62
    |         this.edit_elt.onclick = () => edit_value("«path/@value»", "«path/@type»", this, this.last_val);
2883
8e3d130399b0 SVGHMI: created widget_*.ysl2. Renamed widget_common in widgets_common, so that it doesn't match globing.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2882
diff changeset
    63
    }
3094
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
    64
2883
8e3d130399b0 SVGHMI: created widget_*.ysl2. Renamed widget_common in widgets_common, so that it doesn't match globing.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 2882
diff changeset
    65
    foreach "$hmi_element/*[regexp:test(@inkscape:label,'^[=+\-].+')]" {
3094
3e184f1e1012 SVGHMI: almost rewrote Input widget to make it new class based style.
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3034
diff changeset
    66
    |         id("«@id»").onclick = () => this.on_op_click("«func:escape_quotes(@inkscape:label)»");
2792
0c0d3895b036 SVGHMI: moved/fixed some templates, avoided namespace problems, added parsing of HMI:* inkscape labels
Edouard Tisserant
parents: 2791
diff changeset
    67
    }
2911
211d6a185e31 SVGHMI: More infrastructure for editing values with a keypad.
Edouard Tisserant
parents: 2910
diff changeset
    68
211d6a185e31 SVGHMI: More infrastructure for editing values with a keypad.
Edouard Tisserant
parents: 2910
diff changeset
    69
    |     },
2753
9a7e12e96399 SVGHMI: Added XSLT transformation, Makefile to get XSLT from ysl2 (copy of plcopen/Makefile) and a minimal stylesheet to start with.
Edouard Tisserant
parents:
diff changeset
    70
}