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;

    11

        drag = false;

    12

        enTimer = false;

    14

    15

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

    38

        }

    39

    40

        on_release(evt) {

    47

            if(this.drag){

    48

                this.drag = false;

    49

            }

    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){

   107

                }

   108

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

   110

                }

   111

                else{

   128

        }

   129

   130

        on_select(evt){

   131

            this.drag = true;

   132

            this.enTimer = 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

   178

            //init events

   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

}