16

            this.update_DOM(value, this.handle_elt);

    17

    20

        last_drag = false;

    21

    22

        update_DOM(value, elt){

    26

            elt.setAttribute('transform',"translate("+(tip.x-start.x)+","+(tip.y-start.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

            }

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

    50

            this.update_position(evt);

    51

        }

    52

    53

    54

        on_drag(evt){

    55

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

    56

                this.update_position(evt);

    57

                //reset timer

    58

                this.enTimer = false;

    59

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

    60

            }

    64

            var html_dist = 0;

    66

            //calculate size of widget in html

    67

            var range_borders = this.range_elt.getBoundingClientRect();

    68

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

    69

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

    71

            //get range and mouse coordinates

    72

            var mouseX = undefined;

    73

            var mouseY = undefined;

    74

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

    75

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

    76

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

    77

            }

    78

            else{

    79

                mouseX = evt.pageX;

    80

                mouseY = evt.pageY;

    81

            }

    82

    83

            //get handle distance from mouse position

    84

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

    85

                html_dist = 0;

    86

            }

    87

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

    88

                html_dist = range_length;

    89

            }

    90

            else{

    91

                // calculate distace

    92

                if(this.fi > 0.7){

    93

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

    96

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

    99

                //check if in range

   100

                if (html_dist > range_length){

   101

                    html_dist = range_length;

   102

                }

   103

                else if (html_dist < 0){

   107

            }

   109

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

   111

            this.apply_hmi_value(0, this.svg_dist);

   113

            // update ghost cursor

   114

            if(this.setpoint_elt != undefined){

   115

                this.request_animate();

   116

            }

   117

        }

   119

        animate(){

   120

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

   126

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

   127

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

   128

   129

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

   130

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

   131

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

   148

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

   149

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

   150

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

   152

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

   153

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

   155

            if(this.setpoint_elt != undefined){

   156

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

   157

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

   158

            }

   167

    optional_labels("value min max setpoint");