1

// widget_circuralslider.ysl2

     2

     3

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

     4

    ||

     5

    class CircularSliderWidget extends Widget{

     6

        frequency = 5;

     7

        range = undefined;

     8

        circle = undefined;

     9

        handle_pos = undefined;

    10

        drag = false;

    11

        enTimer = false;

    12

    13

        dispatch(value) {

    14

            if(!this.drag){

    15

                if(this.value_elt)

    16

                    this.value_elt.textContent = String(value);

    17

    18

                this.handle_position(value);

    19

            }

    20

        }

    21

    22

        handle_position(value){

    23

            let [min,max,totalDistance] = this.range;

    24

            let length = Math.max(0,Math.min((totalDistance),(Number(value)-min)/(max-min)*(totalDistance)));

    25

            let tip = this.range_elt.getPointAtLength(length);

    26

            this.handle_elt.setAttribute('transform',"translate("+(tip.x-this.handle_pos.x)+","+(tip.y-this.handle_pos.y)+")");

    27

        }

    28

    29

        on_release(evt) {

    30

            if(this.drag){

    31

                this.drag = false;

    32

            }

    33

        }

    34

    35

        update_position(evt){

    36

            if(this.drag && this.enTimer){

    37

                var svg_dist = 0;

    38

    39

                //calculate center of widget in html

    40

                // --TODO maybe it would be better to bind this part to window change size event ???

    41

                let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox;

    42

                let [cX, cY,fiStart,fiEnd,minMax,x1,y1,width,height] = this.circle;

    43

                let htmlCirc = this.range_elt.getBoundingClientRect();

    44

                let cxHtml = ((htmlCirc.right-htmlCirc.left)/(width)*(cX-x1))+htmlCirc.left;

    45

                let cyHtml = ((htmlCirc.bottom-htmlCirc.top)/(height)*(cY-y1))+htmlCirc.top;

    46

    47

    48

                //get mouse coordinates

    49

                let mouseX = undefined;

    50

                let mouseY = undefined;

    51

                if (evt.type.startsWith("touch")){

    52

                    mouseX = Math.ceil(evt.touches[0].clientX);

    53

                    mouseY = Math.ceil(evt.touches[0].clientY);

    54

                }

    55

                else{

    56

                    mouseX = evt.pageX;

    57

                    mouseY = evt.pageY;

    58

                }

    59

    60

                //calculate angle

    61

                let fi = Math.atan2(cyHtml-mouseY, mouseX-cxHtml);

    62

    63

                // transform from 0 to 2PI

    64

                if (fi > 0){

    65

                    fi = 2*Math.PI-fi;

    66

                }

    67

                else{

    68

                    fi = -fi;

    69

                }

    70

    71

                //offset it to 0

    72

                fi = fi - fiStart;

    73

                if (fi < 0){

    74

                    fi = fi + 2*Math.PI;

    75

                }

    76

    77

                //get handle distance from mouse position

    78

                if(fi<fiEnd){

    79

                    svg_dist=(fi)/(fiEnd)*(this.range[1]-this.range[0]);

    80

                }

    81

                else if(fiEnd<fi && fi<fiEnd+minMax){

    82

                    svg_dist = this.range[1];

    83

                }

    84

                else{

    85

                    svg_dist = this.range[0];

    86

                }

    87

    88

                //redraw handle --TODO is it fast enough if I just call change_hmi_value???

    89

                this.handle_position(svg_dist);

    90

                if(this.value_elt)

    91

                    this.value_elt.textContent = String(Math.ceil(svg_dist));

    92

                this.apply_hmi_value(0, Math.ceil(svg_dist));

    93

    94

                //reset timer

    95

                this.enTimer = false;

    96

                setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100);

    97

            }

    98

    99

        }

   100

   101

        on_select(evt){

   102

            this.drag = true;

   103

            this.enTimer = true;

   104

            this.update_position(evt);

   105

        }

   106

   107

        init() {

   108

            //get min max

   109

            let min = this.min_elt ?

   110

                        Number(this.min_elt.textContent) :

   111

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

   112

            let max = this.max_elt ?

   113

                        Number(this.max_elt.textContent) :

   114

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

   115

   116

            //fiStart ==> offset

   117

            let fiStart = Number(this.range_elt.getAttribute('sodipodi:start'));

   118

            let fiEnd = Number(this.range_elt.getAttribute('sodipodi:end'));

   119

            fiEnd = fiEnd - fiStart;

   120

   121

            //fiEnd ==> size of angle

   122

            if (fiEnd < 0){

   123

                fiEnd = 2*Math.PI + fiEnd;

   124

            }

   125

   126

            //min max barrier angle

   127

            let minMax = (2*Math.PI - fiEnd)/2;

   128

   129

            //get parameters from svg

   130

            let cX = Number(this.range_elt.getAttribute('sodipodi:cx'));

   131

            let cY = Number(this.range_elt.getAttribute('sodipodi:cy'));

   132

            this.range_elt.style.strokeMiterlimit="0"; //eliminates some weird border around html object

   133

            this.range = [min, max,this.range_elt.getTotalLength()];

   134

            let cPos = this.range_elt.getBBox();

   135

            this.handle_pos = this.range_elt.getPointAtLength(0);

   136

            this.circle = [cX, cY,fiStart,fiEnd,minMax,cPos.x,cPos.y,cPos.width,cPos.height];

   137

   138

            //init events

   139

            this.handle_elt.addEventListener("touchstart", hmi_widgets[this.element_id].on_select.bind(this));

   140

            this.handle_elt.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this));

   141

            this.element.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this));

   142

   143

            window.addEventListener("touchmove", hmi_widgets[this.element_id].update_position.bind(this));

   144

            window.addEventListener("mousemove", hmi_widgets[this.element_id].update_position.bind(this));

   145

   146

            window.addEventListener("mouseup", hmi_widgets[this.element_id].on_release.bind(this))

   147

            window.addEventListener("touchend", hmi_widgets[this.element_id].on_release.bind(this));

   148

            window.addEventListener("touchcancel", hmi_widgets[this.element_id].on_release.bind(this));

   149

   150

        }

   151

    }

   152

    ||

   153

   154

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

   155

    param "hmi_element";

   156

    labels("handle range");

   157

    optional_labels("value min max");

   158

    |,

   159

}