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;

    11

    12

        dispatch(value) {

    13

            if(!this.drag){

    14

                if(this.value_elt)

    15

                    this.value_elt.textContent = String(value);

    16

    17

                this.handle_position(value);

    18

            }

    19

        }

    20

    21

        handle_position(value){

    22

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

    23

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

    24

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

    25

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

    26

        }

    27

    28

        on_release(evt) {

    29

            if(this.drag){

    30

                this.drag = false;

    31

            }

    32

        }

    33

    34

        update_position(evt){

    35

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

    36

                var html_dist = 0;

    37

                var svg_dist = 0;

    38

    39

                //calculate size of widget in html

    40

                var range_borders = this.range_elt.getBoundingClientRect();

    41

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

    42

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

    43

    44

                //get range and mouse coordinates

    45

                var mouseX = undefined;

    46

                var mouseY = undefined;

    47

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

    48

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

    49

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

    50

                }

    51

                else{

    52

                    mouseX = evt.pageX;

    53

                    mouseY = evt.pageY;

    54

                }

    55

    56

                //get handle distance from mouse position

    57

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

    58

                    html_dist = 0;

    59

                }

    60

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

    61

                    html_dist = range_length;

    62

                }

    63

                else{

    64

                    // calculate distace

    65

                    if(this.fi > 0.7){

    66

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

    67

                    }

    68

                    else{

    69

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

    70

                    }

    71

    72

                    //check if in range

    73

                    if (html_dist > range_length){

    74

                        html_dist = range_length;

    75

                    }

    76

                    else if (html_dist < 0){

    77

                        html_dist = 0;

    78

                    }

    79

                }

    80

                //redraw handle

    81

                this.handle_position(svg_dist=(html_dist/range_length)*this.range[1]);

    82

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

    83

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

    84

                //reset timer

    85

                this.enTimer = false;

    86

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

    87

            }

    88

    89

        }

    90

    91

        on_select(evt){

    92

            this.drag = true;

    93

            this.enTimer = true;

    94

            this.update_position(evt);

    95

        }

    96

    97

        init() {

    98

            let min = this.min_elt ?

    99

                        Number(this.min_elt.textContent) :

   100

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

   101

            let max = this.max_elt ?

   102

                        Number(this.max_elt.textContent) :

   103

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

   104

   105

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

   106

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

   107

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

   108

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

   109

   110

   111

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

   112

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

   113

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

   114

   115

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

   116

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

   117

   118

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

   119

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

   120

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

   121

   122

        }

   123

    }

   124

    ||

   125

   126

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

   127

    param "hmi_element";

   128

    labels("handle range");

   129

    optional_labels("value min max");

   130

    |,

   131

}