svghmi/widget_circularbar.ysl2
author Edouard Tisserant
Mon, 01 Mar 2021 15:45:13 +0100
branchsvghmi
changeset 3169 91207ee5b6af
parent 3105 8819c8b66a42
child 3232 7bdb766c2a4d
permissions -rw-r--r--
IDE: Make ST code generation more verbose, since it can be really long in case of big programs, and it is better to let the user know build is still in progress.
2944
2a20038fbea9 Added button and circular bar widgets.
dgaberscek
parents:
diff changeset
     1
// widget_circularbar.ysl2
2a20038fbea9 Added button and circular bar widgets.
dgaberscek
parents:
diff changeset
     2
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
     3
template "widget[@type='CircularBar']", mode="widget_class"{
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
     4
    ||
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
     5
    class CircularBarWidget extends Widget{
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
     6
        frequency = 10;
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
     7
        range = undefined;
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
     8
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
     9
        dispatch(value) {
3105
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    10
            this.display_val = value;
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    11
            this.request_animate();
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    12
        }
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    13
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    14
        animate(){
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
    15
            if(this.value_elt)
3105
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    16
                this.value_elt.textContent = String(this.display_val);
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
    17
            let [min,max,start,end] = this.range;
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
    18
            let [cx,cy] = this.center;
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
    19
            let [rx,ry] = this.proportions;
3105
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    20
            let tip = start + (end-start)*Number(this.display_val)/(max-min);
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
    21
            let size = 0;
3105
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    22
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    23
            if (tip-start > Math.PI)
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
    24
                size = 1;
3105
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    25
            else
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
    26
                size = 0;
3105
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    27
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    28
            this.path_elt.setAttribute('d', "M "+(cx+rx*Math.cos(start))+","+(cy+ry*Math.sin(start))+
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    29
                                            " A "+rx+","+ry+
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    30
                                            " 0 "+size+
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    31
                                            " 1 "+(cx+rx*Math.cos(tip))+","+(cy+ry*Math.sin(tip)));
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
    32
        }
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
    33
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
    34
        init() {
3105
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    35
            let [start, end, cx, cy, rx, ry] = ["start", "end", "cx", "cy", "rx", "ry"].
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    36
                map(tag=>Number(this.path_elt.getAttribute('sodipodi:'+tag)))
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    37
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    38
            if (ry == 0) 
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
    39
                ry = rx;
3105
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    40
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    41
            if (start > end)
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
    42
                end = end + 2*Math.PI;
3105
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    43
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    44
            let [min,max] = [[this.min_elt,0],[this.max_elt,100]].map(([elt,def],i)=>elt?
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    45
                Number(elt.textContent) :
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    46
                this.args.length >= i+1 ? this.args[i] : def);
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    47
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
    48
            this.range = [min, max, start, end];
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
    49
            this.center = [cx, cy];
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
    50
            this.proportions = [rx, ry];
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
    51
        }
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
    52
    }
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
    53
    ||
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 2944
diff changeset
    54
}
2944
2a20038fbea9 Added button and circular bar widgets.
dgaberscek
parents:
diff changeset
    55
2a20038fbea9 Added button and circular bar widgets.
dgaberscek
parents:
diff changeset
    56
template "widget[@type='CircularBar']", mode="widget_defs" {
2a20038fbea9 Added button and circular bar widgets.
dgaberscek
parents:
diff changeset
    57
    param "hmi_element";
2a20038fbea9 Added button and circular bar widgets.
dgaberscek
parents:
diff changeset
    58
    labels("path");
2a20038fbea9 Added button and circular bar widgets.
dgaberscek
parents:
diff changeset
    59
    optional_labels("value min max");
3105
8819c8b66a42 SVGHMI: CircularBar: use animate() + cormetic changes
Edouard Tisserant <edouard.tisserant@gmail.com>
parents: 3045
diff changeset
    60
}