1

// widget_circularbar.ysl2

     2

     3

widget_desc("CircularBar") {

     4

    longdesc

     5

    ||

     6

    CircularBar widget changes the end angle of a "path" labeled arc according

     7

    to value of the single accepted variable.

     8

     9

    If "min" a "max" labeled texts are provided, then they are used as

    10

    respective minimum and maximum value. Otherwise, value is expected to be

    11

    in between 0 and 100.

    12

    13

    If "value" labeled text is found, then its content is replaced by value.

    14

    ||

    15

    16

    shortdesc > Change end angle of Inkscape's arc

    17

    18

    // TODO: add min/max arguments

    19

    // TODO: add printf-like format

    20

    21

    path name="value" accepts="HMI_INT,HMI_REAL" > Value to display

    22

    23

}

    24

widget_class("CircularBar") {

    25

    ||

    26

        frequency = 10;

    27

        range = undefined;

    28

    29

        dispatch(value) {

    30

            this.display_val = value;

    31

            this.request_animate();

    32

        }

    33

    34

        animate(){

    35

            if(this.value_elt)

    36

                this.value_elt.textContent = String(this.display_val);

    37

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

    38

            let [cx,cy] = this.center;

    39

            let [rx,ry] = this.proportions;

    40

            let tip = start + (end-start)*Number(this.display_val)/(max-min);

    41

            let size = 0;

    42

    43

            if (tip-start > Math.PI)

    44

                size = 1;

    45

            else

    46

                size = 0;

    47

    48

            this.path_elt.setAttribute('d', "M "+(cx+rx*Math.cos(start))+","+(cy+ry*Math.sin(start))+

    49

                                            " A "+rx+","+ry+

    50

                                            " 0 "+size+

    51

                                            " 1 "+(cx+rx*Math.cos(tip))+","+(cy+ry*Math.sin(tip)));

    52

        }

    53

    54

        init() {

    55

            let [start, end, cx, cy, rx, ry] = ["start", "end", "cx", "cy", "rx", "ry"].

    56

                map(tag=>Number(this.path_elt.getAttribute('sodipodi:'+tag)))

    57

    58

            if (ry == 0) 

    59

                ry = rx;

    60

    61

            if (start > end)

    62

                end = end + 2*Math.PI;

    63

    64

            let [min,max] = [[this.min_elt,0],[this.max_elt,100]].map(([elt,def],i)=>elt?

    65

                Number(elt.textContent) :

    66

                this.args.length >= i+1 ? this.args[i] : def);

    67

    68

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

    69

            this.center = [cx, cy];

    70

            this.proportions = [rx, ry];

    71

        }

    72

    ||

    73

}

    74

    75

widget_defs("CircularBar") {

    76

    labels("path");

    77

    optional_labels("value min max");

    78

}