// widget_circularbar.ysl2

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

        dispatch(value) {
            this.display_val = value;
            this.request_animate();
        }

        animate(){
            if(this.value_elt)
                this.value_elt.textContent = String(this.display_val);
            let [min,max,start,end] = this.range;
            let [cx,cy] = this.center;
            let [rx,ry] = this.proportions;
            let tip = start + (end-start)*Number(this.display_val)/(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, end, cx, cy, rx, ry] = ["start", "end", "cx", "cy", "rx", "ry"].
                map(tag=>Number(this.path_elt.getAttribute('sodipodi:'+tag)))

            if (ry == 0) 
                ry = rx;

            if (start > end)
                end = end + 2*Math.PI;

            let [min,max] = [[this.min_elt,0],[this.max_elt,100]].map(([elt,def],i)=>elt?
                Number(elt.textContent) :
                this.args.length >= i+1 ? this.args[i] : def);

            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");
}