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.value_elt)

    14                 this.value_elt.textContent = String(value);

    15 

    16             this.update_DOM(value, this.handle_elt);

    17 

    18         }

    19 

    20         last_drag = false;

    21 

    22         update_DOM(value, elt){

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

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

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

    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             }

    38         }

    39 

    40         on_release(evt) {

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

    47             if(this.drag){

    48                 this.drag = false;

    49             }

    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             }

    61         }

    62 

    63         update_position(evt){

    64             var html_dist = 0;

    65 

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

    70 

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

    94                 }

    95                 else{

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

    97                 }

    98 

    99                 //check if in range

   100                 if (html_dist > range_length){

   101                     html_dist = range_length;

   102                 }

   103                 else if (html_dist < 0){

   104                     html_dist = 0;

   105                 }

   106 

   107             }

   108 

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

   110 

   111             this.apply_hmi_value(0, this.svg_dist);

   112 

   113             // update ghost cursor

   114             if(this.setpoint_elt != undefined){

   115                 this.request_animate();

   116             }

   117         }

   118 

   119         animate(){

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

   121         }

   122 

   123         on_select(evt){

   124             this.drag = true;

   125             this.enTimer = true;

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

   132             this.update_position(evt);

   133         }

   134 

   135         init() {

   136             let min = this.min_elt ?

   137                         Number(this.min_elt.textContent) :

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

   139             let max = this.max_elt ?

   140                         Number(this.max_elt.textContent) :

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

   142 

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

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

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

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

   147 

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

   151 

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

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

   154 

   155             if(this.setpoint_elt != undefined){

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

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

   158             }

   159 

   160         }

   161     }

   162     ||

   163 

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

   165     param "hmi_element";

   166     labels("handle range");

   167     optional_labels("value min max setpoint");

   168     |,

   169 }