1

// widget_input.ysl2

     2

     3

widget_desc("Input") {

     4

    longdesc

     5

    || 

     6

    Input widget takes one variable path, and displays current value in

     7

    optional "value" labeled sub-element. 

     8

     9

    Click on optional "edit" labeled element opens keypad to edit value.

    10

    11

    Operation on current value is performed when click on sub-elements with

    12

    label starting with '=', '+' or '-' sign. Value after sign is used as

    13

    operand.

    14

    ||

    15

    16

    shortdesc > Input field with predefined operation buttons

    17

    18

    arg name="format" accepts="string" > optional printf-like format 

    19

    20

    path name="edit" accepts="HMI_INT, HMI_REAL, HMI_STRING" > single variable to edit

    21

    22

}

    23

    24

widget_class("Input")

    25

||

    26

     edit_callback(new_val) {

    27

         this.apply_hmi_value(0, new_val);

    28

     }

    29

    30

     is_inhibited = false;

    31

     alert(msg){

    32

         this.is_inhibited = true;

    33

         this.display = msg;

    34

         setTimeout(() => this.stopalert(), 1000);

    35

         this.request_animate();

    36

     }

    37

    38

     stopalert(){

    39

         this.is_inhibited = false;

    40

         this.display = this.last_value;

    41

         this.request_animate();

    42

     }

    43

    44

     overshot(new_val, max) {

    45

         this.alert("max");

    46

     }

    47

    48

     undershot(new_val, min) {

    49

         this.alert("min");

    50

     }

    51

    52

     display = "";

    53

||

    54

    55

widget_defs("Input") {

    56

    57

    const "value_elt" optional_labels("value");

    58

    const "have_value","string-length($value_elt)>0";

    59

    value "$value_elt";

    60

    61

    const "edit_elt" optional_labels("edit");

    62

    const "have_edit","string-length($edit_elt)>0";

    63

    value "$edit_elt";

    64

    65

    const "action_elements", "$hmi_element/*[regexp:test(@inkscape:label,'^[=+\-].+')]";

    66

    67

    if "$have_value"

    68

    |     frequency: 5,

    69

    |     dispatch: function(value) {

    70

    71

    72

    if "$have_value or $have_edit" {

    73

        choose{

    74

            when "count(arg) = 1" {

    75

    |         this.last_value = vsprintf("«arg[1]/@value»", [value]);

    76

            }

    77

            otherwise {

    78

    |         this.last_value = value;

    79

            }

    80

        }

    81

    |         if(!this.is_inhibited){

    82

    |             this.display = this.last_value;

    83

    if "$have_value" {

    84

    |             this.request_animate();

    85

    }

    86

    |         }

    87

    }

    88

    |     },

    89

    90

    if "$have_value" {

    91

    |     animate: function(){

    92

    |         multiline_to_svg_text(this.value_elt, String(this.display));

    93

    |     },

    94

    }

    95

    96

    foreach "$action_elements" {

    97

    |     action_elt_«position()»: id("«@id»"),

    98

        const "current_id", "@id";

    99

        const "active", "$hmi_element/*[@id = $current_id]/*[regexp:test(@inkscape:label,'active')]";

   100

    |     activable_sub_«position()»: {

   101

        foreach "$active" {

   102

    |             «@inkscape:label»_elt: id("«@id»")`if "position()!=last()" > ,`

   103

        }

   104

    |     },

   105

    |     on_op_mouse_down_«position()»: function(){

   106

    |         svg_root.addEventListener("pointerup", this.bound_on_op_mouse_up_«position()», true);

   107

    |         set_activity_state(this.activable_sub_«position()», true);

   108

    |     },

   109

    |     on_op_mouse_up_«position()»: function(){

   110

    |         svg_root.removeEventListener("pointerup", this.bound_on_op_mouse_up_«position()», true);

   111

    |         set_activity_state(this.activable_sub_«position()», false);

   112

    |         this.change_hmi_value(0, "«func:escape_quotes(@inkscape:label)»");

   113

    |     },

   114

    }

   115

    |     init: function() {

   116

   117

    if "$have_edit" {

   118

    |         this.edit_elt.onclick = () => edit_value("«path/@value»", "«path/@type»", this, this.last_value);

   119

        if "$have_value" {

   120

    |         this.value_elt.style.pointerEvents = "none";

   121

        }

   122

    |         this.animate();

   123

    }

   124

   125

    foreach "$action_elements" {

   126

    |         this.action_elt_«position()».onmousedown = () => this.on_op_mouse_down_«position()»();

   127

    |         this.bound_on_op_mouse_up_«position()» = this.on_op_mouse_up_«position()».bind(this);

   128

    }

   129

   130

    if "$have_value" {

   131

    |         multiline_to_svg_text(this.value_elt, "");

   132

    }

   133

    |     },

   134

}