svghmi/widget_slider.ysl2
branchsvghmi
changeset 3067 2263f2ecf9bb
parent 3062 9ec338a99a18
child 3232 7bdb766c2a4d
equal deleted inserted replaced
3063:466c3df67835 3067:2263f2ecf9bb
     4     ||
     4     ||
     5     class SliderWidget extends Widget{
     5     class SliderWidget extends Widget{
     6         frequency = 5;
     6         frequency = 5;
     7         range = undefined;
     7         range = undefined;
     8         handle_orig = undefined;
     8         handle_orig = undefined;
     9         scroll_size = 10;
     9         scroll_size = undefined;
       
    10         scroll_range = 0;
       
    11         scroll_visible = 7;
    10         min_size = 0.07;
    12         min_size = 0.07;
    11         fi = undefined;
    13         fi = undefined;
    12         curr_value = 0;
    14         curr_value = 0;
    13         drag = false;
    15         drag = false;
    14         enTimer = false;
    16         enTimer = false;
    15         handle_click = undefined;
    17         handle_click = undefined;
    16         last_drag = false;
    18         last_drag = false;
    17 
    19 
    18         dispatch(value) {
    20         dispatch(value,oldval, index) {
    19             //save current value inside widget
    21             if (index == 0){
    20             this.curr_value = value;
    22                 let [min,max,start,totallength] = this.range;
    21 
    23                 //save current value inside widget
    22             if(this.value_elt)
    24                 this.curr_value = value;
    23                 this.value_elt.textContent = String(value);
    25 
       
    26                 //check if in range
       
    27                 if (this.curr_value > max){
       
    28                     this.curr_value = max;
       
    29                     this.apply_hmi_value(0, this.curr_value);
       
    30                 }
       
    31                 else if (this.curr_value < min){
       
    32                     this.curr_value = min;
       
    33                     this.apply_hmi_value(0, this.curr_value);
       
    34                 }
       
    35 
       
    36                 if(this.value_elt)
       
    37                     this.value_elt.textContent = String(value);
       
    38             }
       
    39             else if(index == 1){
       
    40                 this.scroll_range = value;
       
    41                 this.set_scroll();
       
    42             }
       
    43             else if(index == 2){
       
    44                 this.scroll_visible = value;
       
    45                 this.set_scroll();
       
    46             }
    24 
    47 
    25             //don't update if draging and setpoint ghost doesn't exist
    48             //don't update if draging and setpoint ghost doesn't exist
    26             if(!this.drag || (this.setpoint_elt != undefined)){
    49             if(!this.drag || (this.setpoint_elt != undefined)){
    27                 this.update_DOM(value, this.handle_elt);
    50                 this.update_DOM(this.curr_value, this.handle_elt);
       
    51             }
       
    52         }
       
    53 
       
    54         set_scroll(){
       
    55             //check if range is bigger than visible and set scroll size
       
    56             if(this.scroll_range > this.scroll_visible){
       
    57                 this.scroll_size = this.scroll_range - this.scroll_visible;
       
    58                 this.range[0] = 0;
       
    59                 this.range[1] = this.scroll_size;
       
    60             }
       
    61             else{
       
    62                 this.scroll_size = 1;
       
    63                 this.range[0] = 0;
       
    64                 this.range[1] = 1;
    28             }
    65             }
    29         }
    66         }
    30 
    67 
    31         update_DOM(value, elt){
    68         update_DOM(value, elt){
    32             let [min,max,start,totallength] = this.range;
    69             let [min,max,start,totallength] = this.range;
    99         on_release(evt) {
   136         on_release(evt) {
   100             //unbind events
   137             //unbind events
   101             window.removeEventListener("touchmove", this.on_bound_drag, true);
   138             window.removeEventListener("touchmove", this.on_bound_drag, true);
   102             window.removeEventListener("mousemove", this.on_bound_drag, true);
   139             window.removeEventListener("mousemove", this.on_bound_drag, true);
   103 
   140 
   104             window.removeEventListener("mouseup", this.bound_on_release, true)
   141             window.removeEventListener("mouseup", this.bound_on_release, true);
   105             window.removeEventListener("touchend", this.bound_on_release, true);
   142             window.removeEventListener("touchend", this.bound_on_release, true);
   106             window.removeEventListener("touchcancel", this.bound_on_release, true);
   143             window.removeEventListener("touchcancel", this.bound_on_release, true);
   107 
   144 
   108             //reset drag flag
   145             //reset drag flag
   109             if(this.drag){
   146             if(this.drag){
   195                 }
   232                 }
   196                 //calculate distance
   233                 //calculate distance
   197                 this.curr_value=Math.ceil((html_dist/range_length)*(this.range[1]-this.range[0])+this.range[0]);
   234                 this.curr_value=Math.ceil((html_dist/range_length)*(this.range[1]-this.range[0])+this.range[0]);
   198             }
   235             }
   199 
   236 
   200             //check if in range
   237             //check if in range and apply
   201             if (this.curr_value > max){
   238             if (this.curr_value > max){
   202                 this.curr_value = max;
   239                 this.curr_value = max;
   203             }
   240             }
   204             else if (this.curr_value < min){
   241             else if (this.curr_value < min){
   205                 this.curr_value = min;
   242                 this.curr_value = min;
   206             }
   243             }
   207 
       
   208             this.apply_hmi_value(0, this.curr_value);
   244             this.apply_hmi_value(0, this.curr_value);
   209 
   245 
   210             //redraw handle
   246             //redraw handle
   211             this.request_animate();
   247             this.request_animate();
   212 
   248 
   230 
   266 
   231             //bind events
   267             //bind events
   232             window.addEventListener("touchmove", this.on_bound_drag, true);
   268             window.addEventListener("touchmove", this.on_bound_drag, true);
   233             window.addEventListener("mousemove", this.on_bound_drag, true);
   269             window.addEventListener("mousemove", this.on_bound_drag, true);
   234 
   270 
   235             window.addEventListener("mouseup", this.bound_on_release, true)
   271             window.addEventListener("mouseup", this.bound_on_release, true);
   236             window.addEventListener("touchend", this.bound_on_release, true);
   272             window.addEventListener("touchend", this.bound_on_release, true);
   237             window.addEventListener("touchcancel", this.bound_on_release, true);
   273             window.addEventListener("touchcancel", this.bound_on_release, true);
   238 
   274 
   239             // check if handle was pressed
   275             // check if handle was pressed
   240             if (evt.currentTarget == this.handle_elt){
   276             if (evt.currentTarget == this.handle_elt){
   258                 this.update_position(evt);
   294                 this.update_position(evt);
   259             }
   295             }
   260 
   296 
   261             //prevent next events
   297             //prevent next events
   262             evt.stopPropagation();
   298             evt.stopPropagation();
   263         }
   299 
       
   300         }
       
   301 
   264 
   302 
   265         init() {
   303         init() {
   266             //set min max value if not defined
   304             //set min max value if not defined
   267             let min = this.min_elt ?
   305             let min = this.min_elt ?
   268                         Number(this.min_elt.textContent) :
   306                         Number(this.min_elt.textContent) :
   269                         this.args.length >= 1 ? this.args[0] : 0;
   307                         this.args.length >= 1 ? this.args[0] : 0;
   270             let max = this.max_elt ?
   308             let max = this.max_elt ?
   271                         Number(this.max_elt.textContent) :
   309                         Number(this.max_elt.textContent) :
   272                         this.args.length >= 2 ? this.args[1] : 100;
   310                         this.args.length >= 2 ? this.args[1] : 100;
   273 
   311 
       
   312 
   274             // save initial parameters
   313             // save initial parameters
   275             this.range_elt.style.strokeMiterlimit="0";
   314             this.range_elt.style.strokeMiterlimit="0";
   276             this.range = [min, max, this.range_elt.getPointAtLength(0),this.range_elt.getTotalLength()];
   315             this.range = [min, max, this.range_elt.getPointAtLength(0),this.range_elt.getTotalLength()];
   277             let start = this.range_elt.getPointAtLength(0);
   316             let start = this.range_elt.getPointAtLength(0);
   278             let end = this.range_elt.getPointAtLength(this.range_elt.getTotalLength());
   317             let end = this.range_elt.getPointAtLength(this.range_elt.getTotalLength());
   285             this.on_bound_drag = this.on_drag.bind(this);
   324             this.on_bound_drag = this.on_drag.bind(this);
   286 
   325 
   287             this.handle_elt.addEventListener("mousedown", this.bound_on_select);
   326             this.handle_elt.addEventListener("mousedown", this.bound_on_select);
   288             this.element.addEventListener("mousedown", this.bound_on_select);
   327             this.element.addEventListener("mousedown", this.bound_on_select);
   289             this.element.addEventListener("touchstart", this.bound_on_select);
   328             this.element.addEventListener("touchstart", this.bound_on_select);
   290 
   329             //touch recognised as page drag without next command
       
   330             document.body.addEventListener("touchstart", function(e){}, false);
       
   331 
       
   332             //save ghost style
   291             if(this.setpoint_elt != undefined){
   333             if(this.setpoint_elt != undefined){
   292                 this.setpoint_style = this.setpoint_elt.getAttribute("style");
   334                 this.setpoint_style = this.setpoint_elt.getAttribute("style");
   293                 this.setpoint_elt.setAttribute("style", "display:none");
   335                 this.setpoint_elt.setAttribute("style", "display:none");
   294             }
   336             }
   295 
   337