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 }