svghmi/widget_circularbar.ysl2
author usveticic
Tue, 18 Aug 2020 11:42:28 +0200
branchsvghmi
changeset 3045 f6d428330e04
parent 2944 2a20038fbea9
child 3105 8819c8b66a42
permissions -rw-r--r--
All widgets reworked to use widget class and animate function if needed
// 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");
    |,
}