1

// widget_slider.ysl2

     2

     3

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

     4

    ||

     5

    class SliderWidget extends Widget{

     6

        frequency = 5;

     7

        range = undefined;

     8

        fi = undefined;

     9

        drag = false;

    10

        enTimer = false;

    12

    13

        dispatch(value) {

    16

    18

        }

    19

    20

        handle_position(value){

    21

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

    22

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

    23

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

    24

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

    25

        }

    26

    27

        on_release(evt) {

    28

            if(this.drag){

    29

                this.drag = false;

    30

            }

    31

        }

    32

    33

        update_position(evt){

    35

                var html_dist = 0;

    36

    37

                //calculate size of widget in html

    38

                var range_borders = this.range_elt.getBoundingClientRect();

    39

                var range_length = Math.sqrt( range_borders.height*range_borders.height + range_borders.width*range_borders.width );

    40

                var [minX,minY,maxX,maxY] = [range_borders.left,range_borders.bottom,range_borders.right,range_borders.top];

    41

    42

                //get range and mouse coordinates

    43

                var mouseX = undefined;

    44

                var mouseY = undefined;

    45

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

    46

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

    47

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

    48

                }

    49

                else{

    50

                    mouseX = evt.pageX;

    51

                    mouseY = evt.pageY;

    52

                }

    53

    54

                //get handle distance from mouse position

    55

                if (minX > mouseX && minY < mouseY){

    56

                    html_dist = 0;

    57

                }

    58

                else if (maxX < mouseX && maxY > mouseY){

    59

                    html_dist = range_length;

    60

                }

    61

                else{

    62

                    // calculate distace

    63

                    if(this.fi > 0.7){

    64

                        html_dist = (minY - mouseY)/Math.sin(this.fi);

    65

                    }

    66

                    else{

    67

                        html_dist = (mouseX - minX)/Math.cos(this.fi);

    68

                    }

    69

    70

                    //check if in range

    71

                    if (html_dist > range_length){

    72

                        html_dist = range_length;

    73

                    }

    74

                    else if (html_dist < 0){

    75

                        html_dist = 0;

    76

                    }

    77

                }

    81

                //redraw handle

    94

            }

    95

        }

    96

    97

        on_select(evt){

    98

            this.drag = true;

    99

            this.enTimer = true;

   100

            this.update_position(evt);

   101

        }

   102

   103

        init() {

   104

            let min = this.min_elt ?

   105

                        Number(this.min_elt.textContent) :

   106

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

   107

            let max = this.max_elt ?

   108

                        Number(this.max_elt.textContent) :

   109

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

   110

   111

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

   112

            let start = this.range_elt.getPointAtLength(0);

   113

            let end = this.range_elt.getPointAtLength(this.range_elt.getTotalLength());

   114

            this.fi = Math.atan2(start.y-end.y, end.x-start.x);

   115

   116

   117

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

   118

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

   119

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

   120

   121

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

   122

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

   123

   124

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

   125

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

   126

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

   127

   128

        }

   129

    }

   130

    ||

   131

   132

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

   133

    param "hmi_element";

   134

    labels("handle range");

   135

    optional_labels("value min max");

   136

    |,

   137

}