svghmi/widget_circularslider.ysl2
author Edouard Tisserant
Tue, 16 Mar 2021 14:18:39 +0100
branchsvghmi
changeset 3189 0733114a2090
parent 3062 9ec338a99a18
child 3232 7bdb766c2a4d
permissions -rw-r--r--
SVGHMI: JsonTable should refresh when re-subscibing, because data might have changed while not on the page we are switching to.
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
     1
// widget_circuralslider.ysl2
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
     2
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
     3
template "widget[@type='CircularSlider']", mode="widget_class"
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
     4
    ||
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
     5
    class CircularSliderWidget extends Widget{
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
     6
        frequency = 5;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
     7
        range = undefined;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
     8
        circle = undefined;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
     9
        handle_pos = undefined;
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    10
        curr_value = 0;
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    11
        drag = false;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    12
        enTimer = false;
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    13
        last_drag = false;
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    14
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    15
        dispatch(value) {
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    16
            let [min,max,start,totallength] = this.range;
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    17
            //save current value inside widget
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    18
            this.curr_value = value;
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    19
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    20
            //check if in range
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    21
            if (this.curr_value > max){
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    22
                this.curr_value = max;
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    23
                this.apply_hmi_value(0, this.curr_value);
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    24
            }
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    25
            else if (this.curr_value < min){
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    26
                this.curr_value = min;
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    27
                this.apply_hmi_value(0, this.curr_value);
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    28
            }
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    29
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    30
            if(this.value_elt)
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    31
                this.value_elt.textContent = String(value);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    32
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    33
            //don't update if draging and setpoint ghost doesn't exist
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    34
            if(!this.drag || (this.setpoint_elt != undefined)){
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    35
                this.update_DOM(value, this.handle_elt);
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    36
            }
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    37
        }
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    38
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    39
        update_DOM(value, elt){
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    40
            let [min,max,totalDistance] = this.range;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    41
            let length = Math.max(0,Math.min((totalDistance),(Number(value)-min)/(max-min)*(totalDistance)));
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    42
            let tip = this.range_elt.getPointAtLength(length);
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    43
            elt.setAttribute('transform',"translate("+(tip.x-this.handle_pos.x)+","+(tip.y-this.handle_pos.y)+")");
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    44
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    45
            // show or hide ghost if exists
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    46
            if(this.setpoint_elt != undefined){
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    47
                if(this.last_drag!= this.drag){
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    48
                    if(this.drag){
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    49
                        this.setpoint_elt.setAttribute("style", this.setpoint_style);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    50
                    }else{
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    51
                        this.setpoint_elt.setAttribute("style", "display:none");
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    52
                    }
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    53
                    this.last_drag = this.drag;
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    54
                }
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    55
            }
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    56
        }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    57
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    58
        on_release(evt) {
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    59
            //unbind events
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    60
            window.removeEventListener("touchmove", this.on_bound_drag, true);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    61
            window.removeEventListener("mousemove", this.on_bound_drag, true);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    62
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    63
            window.removeEventListener("mouseup", this.bound_on_release, true)
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    64
            window.removeEventListener("touchend", this.bound_on_release, true);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    65
            window.removeEventListener("touchcancel", this.bound_on_release, true);
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    66
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    67
            //reset drag flag
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    68
            if(this.drag){
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    69
                this.drag = false;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    70
            }
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    71
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    72
            // get final position
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    73
            this.update_position(evt);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    74
        }
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    75
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    76
        on_drag(evt){
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    77
            //ignore drag event for X amount of time and if not selected
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    78
            if(this.enTimer && this.drag){
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    79
                this.update_position(evt);
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
    80
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    81
                //reset timer
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    82
                this.enTimer = false;
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    83
                setTimeout("{hmi_widgets['"+this.element_id+"'].enTimer = true;}", 100);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
    84
            }
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    85
        }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    86
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    87
        update_position(evt){
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    88
            if(this.drag && this.enTimer){
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    89
                var svg_dist = 0;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    90
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    91
                //calculate center of widget in html
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    92
                // --TODO maybe it would be better to bind this part to window change size event ???
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    93
                let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    94
                let [cX, cY,fiStart,fiEnd,minMax,x1,y1,width,height] = this.circle;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    95
                let htmlCirc = this.range_elt.getBoundingClientRect();
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    96
                let cxHtml = ((htmlCirc.right-htmlCirc.left)/(width)*(cX-x1))+htmlCirc.left;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    97
                let cyHtml = ((htmlCirc.bottom-htmlCirc.top)/(height)*(cY-y1))+htmlCirc.top;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    98
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
    99
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   100
                //get mouse coordinates
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   101
                let mouseX = undefined;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   102
                let mouseY = undefined;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   103
                if (evt.type.startsWith("touch")){
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   104
                    mouseX = Math.ceil(evt.touches[0].clientX);
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   105
                    mouseY = Math.ceil(evt.touches[0].clientY);
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   106
                }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   107
                else{
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   108
                    mouseX = evt.pageX;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   109
                    mouseY = evt.pageY;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   110
                }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   111
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   112
                //calculate angle
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   113
                let fi = Math.atan2(cyHtml-mouseY, mouseX-cxHtml);
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   114
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   115
                // transform from 0 to 2PI
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   116
                if (fi > 0){
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   117
                    fi = 2*Math.PI-fi;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   118
                }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   119
                else{
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   120
                    fi = -fi;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   121
                }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   122
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   123
                //offset it to 0
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   124
                fi = fi - fiStart;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   125
                if (fi < 0){
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   126
                    fi = fi + 2*Math.PI;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   127
                }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   128
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   129
                //get handle distance from mouse position
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   130
                if(fi<fiEnd){
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   131
                   this.curr_value=(fi)/(fiEnd)*(this.range[1]-this.range[0]);
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   132
                }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   133
                else if(fiEnd<fi && fi<fiEnd+minMax){
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   134
                    this.curr_value = this.range[1];
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   135
                }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   136
                else{
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   137
                    this.curr_value = this.range[0];
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   138
                }
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   139
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   140
                //apply value to hmi
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   141
                this.apply_hmi_value(0, Math.ceil(this.curr_value));
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   142
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   143
                //redraw handle
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   144
                this.request_animate();
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   145
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   146
            }
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   147
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   148
        }
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   149
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   150
        animate(){
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   151
            // redraw handle on screen refresh
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   152
            // check if setpoint(ghost) handle exsist otherwise update main handle
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   153
            if(this.setpoint_elt != undefined){
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   154
                this.update_DOM(this.curr_value, this.setpoint_elt);
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   155
            }
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   156
            else{
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   157
                this.update_DOM(this.curr_value, this.handle_elt);
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   158
            }
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   159
        }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   160
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   161
        on_select(evt){
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   162
            //enable drag flag and timer
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   163
            this.drag = true;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   164
            this.enTimer = true;
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   165
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   166
            //bind events
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   167
            window.addEventListener("touchmove", this.on_bound_drag, true);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   168
            window.addEventListener("mousemove", this.on_bound_drag, true);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   169
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   170
            window.addEventListener("mouseup", this.bound_on_release, true);
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   171
            window.addEventListener("touchend", this.bound_on_release, true);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   172
            window.addEventListener("touchcancel", this.bound_on_release, true);
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   173
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   174
            //update postion on mouse press
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   175
            this.update_position(evt);
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   176
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   177
            //prevent next events
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   178
            evt.stopPropagation();
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   179
        }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   180
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   181
        init() {
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   182
            //get min max
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   183
            let min = this.min_elt ?
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   184
                        Number(this.min_elt.textContent) :
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   185
                        this.args.length >= 1 ? this.args[0] : 0;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   186
            let max = this.max_elt ?
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   187
                        Number(this.max_elt.textContent) :
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   188
                        this.args.length >= 2 ? this.args[1] : 100;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   189
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   190
            //fiStart ==> offset
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   191
            let fiStart = Number(this.range_elt.getAttribute('sodipodi:start'));
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   192
            let fiEnd = Number(this.range_elt.getAttribute('sodipodi:end'));
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   193
            fiEnd = fiEnd - fiStart;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   194
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   195
            //fiEnd ==> size of angle
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   196
            if (fiEnd < 0){
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   197
                fiEnd = 2*Math.PI + fiEnd;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   198
            }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   199
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   200
            //min max barrier angle
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   201
            let minMax = (2*Math.PI - fiEnd)/2;
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   202
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   203
            //get parameters from svg
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   204
            let cX = Number(this.range_elt.getAttribute('sodipodi:cx'));
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   205
            let cY = Number(this.range_elt.getAttribute('sodipodi:cy'));
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   206
            this.range_elt.style.strokeMiterlimit="0"; //eliminates some weird border around html object
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   207
            this.range = [min, max,this.range_elt.getTotalLength()];
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   208
            let cPos = this.range_elt.getBBox();
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   209
            this.handle_pos = this.range_elt.getPointAtLength(0);
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   210
            this.circle = [cX, cY,fiStart,fiEnd,minMax,cPos.x,cPos.y,cPos.width,cPos.height];
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   211
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   212
            //bind functions
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   213
            this.bound_on_select = this.on_select.bind(this);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   214
            this.bound_on_release = this.on_release.bind(this);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   215
            this.on_bound_drag = this.on_drag.bind(this);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   216
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   217
            this.handle_elt.addEventListener("mousedown", this.bound_on_select);
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   218
            this.element.addEventListener("mousedown", this.bound_on_select);
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   219
            this.element.addEventListener("touchstart", this.bound_on_select);
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   220
            //touch recognised as page drag without next command
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   221
            document.body.addEventListener("touchstart", function(e){}, false);
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   222
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   223
            //save ghost style
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   224
            //save ghost style
3045
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   225
            if(this.setpoint_elt != undefined){
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   226
                this.setpoint_style = this.setpoint_elt.getAttribute("style");
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   227
                this.setpoint_elt.setAttribute("style", "display:none");
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   228
            }
f6d428330e04 All widgets reworked to use widget class and animate function if needed
usveticic
parents: 3018
diff changeset
   229
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   230
        }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   231
    }
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   232
    ||
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   233
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   234
template "widget[@type='CircularSlider']", mode="widget_defs" {
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   235
    param "hmi_element";
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   236
    labels("handle range");
3062
9ec338a99a18 Button fix if no active or inactive state,
usveticic
parents: 3045
diff changeset
   237
    optional_labels("value min max setpoint");
3013
0ea6b4f435de Create new CircularSlider widget which extand class widget
usveticic
parents:
diff changeset
   238
    |,
3018
Edouard Tisserant
parents: 3013
diff changeset
   239
}