usveticic@3014: // widget_multistate.ysl2
usveticic@3014: 
edouard@3241: widget_defs("MultiState") {
edouard@3241: 
edouard@3241:     longdesc
edouard@3241:     ||
edouard@3241:     Mutlistateh widget hides all subelements whose label do not match given
edouard@3241:     variable value representation. For exemple if given variable type
edouard@3241:     is HMI_INT and value is 1, then elements with label '1' will be displayed.
edouard@3241:     Label can have comments, so '1#some comment' would also match. If matching
edouard@3241:     variable of type HMI_STRING, then double quotes must be used. For exemple,
edouard@3241:     '"hello"' or '"hello"#another comment' match HMI_STRING 'hello'.
edouard@3241: 
edouard@3241:     Click on widget changes variable value to next value in given list, or to
edouard@3241:     first one if not initialized to value already part of the list.
edouard@3241:     ||
edouard@3241: 
edouard@3241:     shortdesc > Show elements whose label match value.
edouard@3241: 
edouard@3241:     // TODO: add optional format/precision argument to support floating points
edouard@3241: 
edouard@3241:     path name="value" accepts="HMI_INT,HMI_STRING" > value to compare to labels
edouard@3241:     
edouard@3241: }
edouard@3241: 
edouard@3232: widget_class("MultiState")
usveticic@3014:     ||
usveticic@3014:         frequency = 5;
usveticic@3014:         state = 0;
usveticic@3014:         dispatch(value) {
usveticic@3014:             this.state = value;
usveticic@3014:             for(let choice of this.choices){
usveticic@3014:                 if(this.state != choice.value){
usveticic@3014:                     choice.elt.setAttribute("style", "display:none");
usveticic@3014:                 } else {
usveticic@3014:                     choice.elt.setAttribute("style", choice.style);
usveticic@3014:                 }
usveticic@3014:             }
usveticic@3014:         }
usveticic@3014: 
usveticic@3014:         on_click(evt) {
usveticic@3014:             //get current selected value
usveticic@3014:             let next_ind;
usveticic@3014:             for(next_ind=0; next_ind<this.choices.length; next_ind++){
usveticic@3014:                 if(this.state == this.choices[next_ind].value){
usveticic@3014:                    next_ind = next_ind + 1;
usveticic@3014:                    break;
usveticic@3014:                 }
usveticic@3014:             }
usveticic@3014: 
usveticic@3014:             //get next selected value
usveticic@3014:             if(this.choices.length > next_ind){
usveticic@3014:                 this.state = this.choices[next_ind].value;
usveticic@3014:             }
usveticic@3014:             else{
usveticic@3014:                 this.state = this.choices[0].value;
usveticic@3014:             }
usveticic@3014: 
usveticic@3014:             //post value to plc
Edouard@3018:             this.apply_hmi_value(0, this.state);
usveticic@3014:         }
usveticic@3014: 
usveticic@3014:         init() {
usveticic@3014:             this.element.setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt)");
usveticic@3014:         }
usveticic@3014:     ||
usveticic@3014: 
edouard@3232: widget_defs("MultiState") {
usveticic@3014:     |     choices: [
usveticic@3014:     const "regex",!"'^(\"[^\"].*\"|\-?[0-9]+|false|true)(#.*)?$'"!;
usveticic@3014:     foreach "$result_svg_ns//*[@id = $hmi_element/@id]//*[regexp:test(@inkscape:label,$regex)]" {
usveticic@3014:         const "literal", "regexp:match(@inkscape:label,$regex)[2]";
usveticic@3014:     |         {
usveticic@3014:     |             elt:id("«@id»"),
usveticic@3014:     |             style:"«@style»",
usveticic@3014:     |             value:«$literal»
usveticic@3014:     |         }`if "position()!=last()" > ,`
usveticic@3014:     }
usveticic@3014:     |     ],
Edouard@3018: }