1

// widget_circularbar.ysl2

     2

     3

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

     4

    ||

     5

    class CircularBarWidget extends Widget{

     6

        frequency = 10;

     7

        range = undefined;

     8

     9

        dispatch(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

    25

        init() {

    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

    }

    49

    ||

    50

}

    51

    52

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

    53

    param "hmi_element";

    54

    labels("path");

    55

    optional_labels("value min max");

    56

    |,

    57

}