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

        svg_dist = undefined;

    11

        drag = false;

    12

        enTimer = false;

    13

        last_drag = false;

    14

    15

        dispatch(value) {

    16

            if(this.value_elt)

    17

                this.value_elt.textContent = String(value);

    18

    19

            this.update_DOM(value, this.handle_elt);

    20

        }

    21

    22

        update_DOM(value, elt){

    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

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

    27

    28

            if(this.setpoint_elt != undefined){

    29

                if(this.last_drag!= this.drag){

    30

                    if(this.drag){

    31

                        this.setpoint_elt.setAttribute("style", this.setpoint_style);

    32

                    }else{

    33

                        this.setpoint_elt.setAttribute("style", "display:none");

    34

                    }

    35

                    this.last_drag = this.drag;

    36

                }

    37

            }

    38

        }

    39

    40

        on_release(evt) {

    41

            window.removeEventListener("touchmove", this.on_bound_drag, true);

    42

            window.removeEventListener("mousemove", this.on_bound_drag, true);

    43

    44

            window.removeEventListener("mouseup", this.bound_on_release, true)

    45

            window.removeEventListener("touchend", this.bound_on_release, true);

    46

            window.removeEventListener("touchcancel", this.bound_on_release, true);

    47

            if(this.drag){

    48

                this.drag = false;

    49

            }

    50

            this.update_position(evt);

    51

        }

    52

    53

        on_drag(evt){

    54

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

    55

                this.update_position(evt);

    56

                //reset timer

    57

                this.enTimer = false;

    58

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

    59

            }

    60

        }

    61

    62

        update_position(evt){

    63

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

    64

                var svg_dist = 0;

    65

    66

                //calculate center of widget in html

    67

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

    68

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

    69

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

    70

                let htmlCirc = this.range_elt.getBoundingClientRect();

    71

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

    72

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

    73

    74

    75

                //get mouse coordinates

    76

                let mouseX = undefined;

    77

                let mouseY = undefined;

    78

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

    79

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

    80

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

    81

                }

    82

                else{

    83

                    mouseX = evt.pageX;

    84

                    mouseY = evt.pageY;

    85

                }

    86

    87

                //calculate angle

    88

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

    89

    90

                // transform from 0 to 2PI

    91

                if (fi > 0){

    92

                    fi = 2*Math.PI-fi;

    93

                }

    94

                else{

    95

                    fi = -fi;

    96

                }

    97

    98

                //offset it to 0

    99

                fi = fi - fiStart;

   100

                if (fi < 0){

   101

                    fi = fi + 2*Math.PI;

   102

                }

   103

   104

                //get handle distance from mouse position

   105

                if(fi<fiEnd){

   106

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

   107

                }

   108

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

   109

                    this.svg_dist = this.range[1];

   110

                }

   111

                else{

   112

                    this.svg_dist = this.range[0];

   113

                }

   114

   115

   116

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

   117

   118

                // update ghost cursor

   119

                if(this.setpoint_elt != undefined){

   120

                    this.request_animate();

   121

                }

   122

            }

   123

   124

        }

   125

   126

        animate(){

   127

            this.update_DOM(this.svg_dist, this.setpoint_elt);

   128

        }

   129

   130

        on_select(evt){

   131

            this.drag = true;

   132

            this.enTimer = true;

   133

            window.addEventListener("touchmove", this.on_bound_drag, true);

   134

            window.addEventListener("mousemove", this.on_bound_drag, true);

   135

   136

            window.addEventListener("mouseup", this.bound_on_release, true)

   137

            window.addEventListener("touchend", this.bound_on_release, true);

   138

            window.addEventListener("touchcancel", this.bound_on_release, true);

   139

            this.update_position(evt);

   140

        }

   141

   142

        init() {

   143

            //get min max

   144

            let min = this.min_elt ?

   145

                        Number(this.min_elt.textContent) :

   146

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

   147

            let max = this.max_elt ?

   148

                        Number(this.max_elt.textContent) :

   149

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

   150

   151

            //fiStart ==> offset

   152

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

   153

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

   154

            fiEnd = fiEnd - fiStart;

   155

   156

            //fiEnd ==> size of angle

   157

            if (fiEnd < 0){

   158

                fiEnd = 2*Math.PI + fiEnd;

   159

            }

   160

   161

            //min max barrier angle

   162

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

   163

   164

            //get parameters from svg

   165

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

   166

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

   167

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

   168

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

   169

            let cPos = this.range_elt.getBBox();

   170

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

   171

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

   172

   173

            //bind functions

   174

            this.bound_on_select = this.on_select.bind(this);

   175

            this.bound_on_release = this.on_release.bind(this);

   176

            this.on_bound_drag = this.on_drag.bind(this);

   177

   178

            //init events

   179

            this.element.addEventListener("mousedown", this.bound_on_select);

   180

            this.element.addEventListener("touchstart", this.bound_on_select);

   181

   182

            if(this.setpoint_elt != undefined){

   183

                this.setpoint_style = this.setpoint_elt.getAttribute("style");

   184

                this.setpoint_elt.setAttribute("style", "display:none");

   185

            }

   186

   187

   188

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

   189

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

   190

   191

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

   192

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

   193

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

   194

   195

        }

   196

    }

   197

    ||

   198

   199

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

   200

    param "hmi_element";

   201

    labels("handle range");

   202

    optional_labels("value min max");

   203

    |,

   204

}