1 // widget_circularbar.ysl2

     2 

     3 

     4 template "widget[@type='CircularBar']", mode="widget_defs" {

     5     param "hmi_element";

     6     | frequency: 10,

     7     labels("path");

     8     optional_labels("value min max");

     9     | dispatch: function(value) {

    10     |     if(this.value_elt)

    11     |         this.value_elt.textContent = String(value);

    12     |     let [min,max,start,end] = this.range;

    13     |     let [cx,cy] = this.center;

    14     |     let [rx,ry] = this.proportions;

    15     |     let tip = start + (end-start)*Number(value)/(max-min);

    16     |     let size = 0;

    17     |     if (tip-start > Math.PI) {

    18     |         size = 1;

    19     |     } else {

    20     |         size = 0;

    21     |     }

    22     |     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)));

    23     | },

    24     | range: undefined,

    25     | init: function() {

    26     |     let start = Number(this.path_elt.getAttribute('sodipodi:start'));

    27     |     let end = Number(this.path_elt.getAttribute('sodipodi:end'));

    28     |     let cx = Number(this.path_elt.getAttribute('sodipodi:cx'));

    29     |     let cy = Number(this.path_elt.getAttribute('sodipodi:cy'));

    30     |     let rx = Number(this.path_elt.getAttribute('sodipodi:rx'));

    31     |     let ry = Number(this.path_elt.getAttribute('sodipodi:ry'));

    32     |     if (ry == 0) {

    33     |         ry = rx;

    34     |     }

    35     |     if (start > end) {

    36     |         end = end + 2*Math.PI;

    37     |     }

    38     |     let min = this.min_elt ?

    39     |               Number(this.min_elt.textContent) :

    40     |               this.args.length >= 1 ? this.args[0] : 0;

    41     |     let max = this.max_elt ?

    42     |               Number(this.max_elt.textContent) :

    43     |               this.args.length >= 2 ? this.args[1] : 100;

    44     |     this.range = [min, max, start, end];

    45     |     this.center = [cx, cy];

    46     |     this.proportions = [rx, ry];

    47     | },

    48 }