svghmi/widget_circularbar.ysl2
author usveticic
Wed, 16 Sep 2020 09:41:52 +0200
branchsvghmi
changeset 3056 827bf284feec
parent 3045 f6d428330e04
child 3105 8819c8b66a42
permissions -rw-r--r--
Button, ToggleButton and slider updated. Error to warning when building

Button fixed so it doesn't release until it gets feedback from plc

Toggle button changed so it makes changes instantly. There was too big delay if we waited for feedback.

Slider added new features need some changes for final version.
// widget_circularbar.ysl2

template "widget[@type='CircularBar']", mode="widget_class"{
    ||
    class CircularBarWidget extends Widget{
        frequency = 10;
        range = undefined;

        dispatch(value) {
            if(this.value_elt)
                this.value_elt.textContent = String(value);
            let [min,max,start,end] = this.range;
            let [cx,cy] = this.center;
            let [rx,ry] = this.proportions;
            let tip = start + (end-start)*Number(value)/(max-min);
            let size = 0;
            if (tip-start > Math.PI) {
                size = 1;
            } else {
                size = 0;
            }
            this.path_elt.setAttribute('d', "M "+(cx+rx*Math.cos(start))+","+(cy+ry*Math.sin(start))+" A "+rx+","+ry+" 0 "+size+" 1 "+(cx+rx*Math.cos(tip))+","+(cy+ry*Math.sin(tip)));
        }

        init() {
            let start = Number(this.path_elt.getAttribute('sodipodi:start'));
            let end = Number(this.path_elt.getAttribute('sodipodi:end'));
            let cx = Number(this.path_elt.getAttribute('sodipodi:cx'));
            let cy = Number(this.path_elt.getAttribute('sodipodi:cy'));
            let rx = Number(this.path_elt.getAttribute('sodipodi:rx'));
            let ry = Number(this.path_elt.getAttribute('sodipodi:ry'));
            if (ry == 0) {
                ry = rx;
            }
            if (start > end) {
                end = end + 2*Math.PI;
            }
            let min = this.min_elt ?
                      Number(this.min_elt.textContent) :
                      this.args.length >= 1 ? this.args[0] : 0;
            let max = this.max_elt ?
                      Number(this.max_elt.textContent) :
                      this.args.length >= 2 ? this.args[1] : 100;
            this.range = [min, max, start, end];
            this.center = [cx, cy];
            this.proportions = [rx, ry];
        }
    }
    ||
}

template "widget[@type='CircularBar']", mode="widget_defs" {
    param "hmi_element";
    labels("path");
    optional_labels("value min max");
    |,
}