1 // widget_multistate.ysl2

     2 

     3 widget_defs("MultiState") {

     4 

     5     longdesc

     6     ||

     7     Mutlistateh widget hides all subelements whose label do not match given

     8     variable value representation. For exemple if given variable type

     9     is HMI_INT and value is 1, then elements with label '1' will be displayed.

    10     Label can have comments, so '1#some comment' would also match. If matching

    11     variable of type HMI_STRING, then double quotes must be used. For exemple,

    12     '"hello"' or '"hello"#another comment' match HMI_STRING 'hello'.

    13 

    14     Click on widget changes variable value to next value in given list, or to

    15     first one if not initialized to value already part of the list.

    16     ||

    17 

    18     shortdesc > Show elements whose label match value.

    19 

    20     // TODO: add optional format/precision argument to support floating points

    21 

    22     path name="value" accepts="HMI_INT,HMI_STRING" > value to compare to labels

    23     

    24 }

    25 

    26 widget_class("MultiState")

    27     ||

    28         frequency = 5;

    29         state = 0;

    30         dispatch(value) {

    31             this.state = value;

    32             for(let choice of this.choices){

    33                 if(this.state != choice.value){

    34                     choice.elt.setAttribute("style", "display:none");

    35                 } else {

    36                     choice.elt.setAttribute("style", choice.style);

    37                 }

    38             }

    39         }

    40 

    41         on_click(evt) {

    42             //get current selected value

    43             let next_ind;

    44             for(next_ind=0; next_ind<this.choices.length; next_ind++){

    45                 if(this.state == this.choices[next_ind].value){

    46                    next_ind = next_ind + 1;

    47                    break;

    48                 }

    49             }

    50 

    51             //get next selected value

    52             if(this.choices.length > next_ind){

    53                 this.state = this.choices[next_ind].value;

    54             }

    55             else{

    56                 this.state = this.choices[0].value;

    57             }

    58 

    59             //post value to plc

    60             this.apply_hmi_value(0, this.state);

    61         }

    62 

    63         init() {

    64             this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)");

    65         }

    66     ||

    67 

    68 widget_defs("MultiState") {

    69     |     choices: [

    70     const "regex",!"'^(\"[^\"].*\"|\-?[0-9]+|false|true)(#.*)?$'"!;

    71     foreach "$result_svg_ns//*[@id = $hmi_element/@id]//*[regexp:test(@inkscape:label,$regex)]" {

    72         const "literal", "regexp:match(@inkscape:label,$regex)[2]";

    73     |         {

    74     |             elt:id("«@id»"),

    75     |             style:"«@style»",

    76     |             value:«$literal»

    77     |         }`if "position()!=last()" > ,`

    78     }

    79     |     ],

    80 }