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      on_op_click(opstr) {

    27          this.change_hmi_value(0, opstr);

    28      }

    29      edit_callback(new_val) {

    30          this.apply_hmi_value(0, new_val);

    31      }

    32 

    33      is_inhibited = false;

    34      alert(msg){

    35          this.is_inhibited = true;

    36          this.display = msg;

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

    38          this.request_animate();

    39      }

    40 

    41      stopalert(){

    42          this.is_inhibited = false;

    43          this.display = this.last_value;

    44          this.request_animate();

    45      }

    46 

    47      overshot(new_val, max) {

    48          this.alert("max");

    49      }

    50 

    51      undershot(new_val, min) {

    52          this.alert("min");

    53      }

    54 ||

    55 

    56 widget_defs("Input") {

    57 

    58     const "value_elt" optional_labels("value");

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

    60     value "$value_elt";

    61 

    62     const "edit_elt" optional_labels("edit");

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

    64     value "$edit_elt";

    65 

    66     if "$have_value"

    67     |     frequency: 5,

    68 

    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     |         this.value_elt.textContent = String(this.display);

    93     |     },

    94     }

    95 

    96     |     init: function() {

    97 

    98     if "$have_edit" {

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

   100         if "$have_value" {

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

   102         }

   103     }

   104 

   105     foreach "$hmi_element/*[regexp:test(@inkscape:label,'^[=+\-].+')]" {

   106     |         id("«@id»").onclick = () => this.on_op_click("«func:escape_quotes(@inkscape:label)»");

   107     }

   108 

   109     |     },

   110 }