// widget_circularbar.ysl2

widget_desc("CircularBar") {
    longdesc
    ||
    CircularBar widget changes the end angle of a "path" labeled arc according
    to value of the single accepted variable.

    If "min" a "max" labeled texts are provided, then they are used as
    respective minimum and maximum value. Otherwise, value is expected to be
    in between 0 and 100.
    ||

    shortdesc > Change end angle of Inkscape's arc

    arg name="min" count="optional" accepts="int,real" > minimum value
    arg name="max" count="optional" accepts="int,real" > maximum value

    path name="value" accepts="HMI_INT,HMI_REAL" > Value to display
    
}
widget_class("CircularBar") {
    ||
        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() {
            if(this.args.length >= 2)
                [this.min, this.max]=this.args;

            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];
        }
    ||
}

widget_defs("CircularBar") {
    labels("path");
    optional_labels("min max");
}