1 // widget_circuralslider.ysl2

     2 

     3 widget_desc("CircularSlider") {

     4     longdesc

     5     ||

     6     CircularSlider - DEPRECATED, to be replaced by PathSlider

     7     This widget moves "handle" labeled group along "range" labeled

     8     arc, according to value of the single accepted variable.

     9 

    10     If "min" a "max" labeled texts are provided, or if first and second

    11     argument are given, then they are used as respective minimum and maximum

    12     value. Otherwise, value is expected to be in between 0 and 100.

    13 

    14     If "value" labeled text is found, then its content is replaced by value.

    15     During drag, "setpoint" labeled group is moved to position defined by user

    16     while "handle" reflects current value from variable.

    17     ||

    18 

    19     shortdesc > CircularSlider - DEPRECATED

    20 

    21     arg name="min" count="optional" accepts="int,real" > minimum value

    22 

    23     arg name="min" count="optional" accepts="int,real" > maximum value

    24 

    25     // TODO: add printf-like format

    26 

    27     path name="value" accepts="HMI_INT,HMI_REAL" > Value to display

    28     

    29 }

    30 

    31 widget_class("CircularSlider")

    32     ||

    33         frequency = 5;

    34         range = undefined;

    35         circle = undefined;

    36         handle_pos = undefined;

    37         curr_value = 0;

    38         drag = false;

    39         enTimer = false;

    40         last_drag = false;

    41 

    42         dispatch(value) {

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

    44             //save current value inside widget

    45             this.curr_value = value;

    46 

    47             //check if in range

    48             if (this.curr_value > max){

    49                 this.curr_value = max;

    50                 this.apply_hmi_value(0, this.curr_value);

    51             }

    52             else if (this.curr_value < min){

    53                 this.curr_value = min;

    54                 this.apply_hmi_value(0, this.curr_value);

    55             }

    56 

    57             if(this.value_elt)

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

    59 

    60             //don't update if draging and setpoint ghost doesn't exist

    61             if(!this.drag || (this.setpoint_elt != undefined)){

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

    63             }

    64         }

    65 

    66         update_DOM(value, elt){

    67             let [min,max,totalDistance] = this.range;

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

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

    70             elt.setAttribute('transform',"translate("+(tip.x-this.handle_pos.x)+","+(tip.y-this.handle_pos.y)+")");

    71 

    72             // show or hide ghost if exists

    73             if(this.setpoint_elt != undefined){

    74                 if(this.last_drag!= this.drag){

    75                     if(this.drag){

    76                         this.setpoint_elt.setAttribute("style", this.setpoint_style);

    77                     }else{

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

    79                     }

    80                     this.last_drag = this.drag;

    81                 }

    82             }

    83         }

    84 

    85         on_release(evt) {

    86             //unbind events

    87             window.removeEventListener("touchmove", this.on_bound_drag, true);

    88             window.removeEventListener("mousemove", this.on_bound_drag, true);

    89 

    90             window.removeEventListener("mouseup", this.bound_on_release, true)

    91             window.removeEventListener("touchend", this.bound_on_release, true);

    92             window.removeEventListener("touchcancel", this.bound_on_release, true);

    93 

    94             //reset drag flag

    95             if(this.drag){

    96                 this.drag = false;

    97             }

    98 

    99             // get final position

   100             this.update_position(evt);

   101         }

   102 

   103         on_drag(evt){

   104             //ignore drag event for X amount of time and if not selected

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

   106                 this.update_position(evt);

   107 

   108                 //reset timer

   109                 this.enTimer = false;

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

   111             }

   112         }

   113 

   114         update_position(evt){

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

   116                 var svg_dist = 0;

   117 

   118                 //calculate center of widget in html

   119                 // --TODO maybe it would be better to bind this part to window change size event ???

   120                 let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox;

   121                 let [cX, cY,fiStart,fiEnd,minMax,x1,y1,width,height] = this.circle;

   122                 let htmlCirc = this.range_elt.getBoundingClientRect();

   123                 let cxHtml = ((htmlCirc.right-htmlCirc.left)/(width)*(cX-x1))+htmlCirc.left;

   124                 let cyHtml = ((htmlCirc.bottom-htmlCirc.top)/(height)*(cY-y1))+htmlCirc.top;

   125 

   126 

   127                 //get mouse coordinates

   128                 let mouseX = undefined;

   129                 let mouseY = undefined;

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

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

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

   133                 }

   134                 else{

   135                     mouseX = evt.pageX;

   136                     mouseY = evt.pageY;

   137                 }

   138 

   139                 //calculate angle

   140                 let fi = Math.atan2(cyHtml-mouseY, mouseX-cxHtml);

   141 

   142                 // transform from 0 to 2PI

   143                 if (fi > 0){

   144                     fi = 2*Math.PI-fi;

   145                 }

   146                 else{

   147                     fi = -fi;

   148                 }

   149 

   150                 //offset it to 0

   151                 fi = fi - fiStart;

   152                 if (fi < 0){

   153                     fi = fi + 2*Math.PI;

   154                 }

   155 

   156                 //get handle distance from mouse position

   157                 if(fi<fiEnd){

   158                    this.curr_value=(fi)/(fiEnd)*(this.range[1]-this.range[0]);

   159                 }

   160                 else if(fiEnd<fi && fi<fiEnd+minMax){

   161                     this.curr_value = this.range[1];

   162                 }

   163                 else{

   164                     this.curr_value = this.range[0];

   165                 }

   166 

   167                 //apply value to hmi

   168                 this.apply_hmi_value(0, Math.ceil(this.curr_value));

   169 

   170                 //redraw handle

   171                 this.request_animate();

   172 

   173             }

   174 

   175         }

   176 

   177         animate(){

   178             // redraw handle on screen refresh

   179             // check if setpoint(ghost) handle exsist otherwise update main handle

   180             if(this.setpoint_elt != undefined){

   181                 this.update_DOM(this.curr_value, this.setpoint_elt);

   182             }

   183             else{

   184                 this.update_DOM(this.curr_value, this.handle_elt);

   185             }

   186         }

   187 

   188         on_select(evt){

   189             //enable drag flag and timer

   190             this.drag = true;

   191             this.enTimer = true;

   192 

   193             //bind events

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

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

   196 

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

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

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

   200 

   201             //update postion on mouse press

   202             this.update_position(evt);

   203 

   204             //prevent next events

   205             evt.stopPropagation();

   206         }

   207 

   208         init() {

   209             //get min max

   210             let min = this.min_elt ?

   211                         Number(this.min_elt.textContent) :

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

   213             let max = this.max_elt ?

   214                         Number(this.max_elt.textContent) :

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

   216 

   217             //fiStart ==> offset

   218             let fiStart = Number(this.range_elt.getAttribute('sodipodi:start'));

   219             let fiEnd = Number(this.range_elt.getAttribute('sodipodi:end'));

   220             fiEnd = fiEnd - fiStart;

   221 

   222             //fiEnd ==> size of angle

   223             if (fiEnd < 0){

   224                 fiEnd = 2*Math.PI + fiEnd;

   225             }

   226 

   227             //min max barrier angle

   228             let minMax = (2*Math.PI - fiEnd)/2;

   229 

   230             //get parameters from svg

   231             let cX = Number(this.range_elt.getAttribute('sodipodi:cx'));

   232             let cY = Number(this.range_elt.getAttribute('sodipodi:cy'));

   233             this.range_elt.style.strokeMiterlimit="0"; //eliminates some weird border around html object

   234             this.range = [min, max,this.range_elt.getTotalLength()];

   235             let cPos = this.range_elt.getBBox();

   236             this.handle_pos = this.range_elt.getPointAtLength(0);

   237             this.circle = [cX, cY,fiStart,fiEnd,minMax,cPos.x,cPos.y,cPos.width,cPos.height];

   238 

   239             //bind functions

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

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

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

   243 

   244             this.handle_elt.addEventListener("mousedown", this.bound_on_select);

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

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

   247             //touch recognised as page drag without next command

   248             document.body.addEventListener("touchstart", function(e){}, false);

   249 

   250             //save ghost style

   251             //save ghost style

   252             if(this.setpoint_elt != undefined){

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

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

   255             }

   256 

   257         }

   258     ||

   259 

   260 widget_defs("CircularSlider") {

   261     labels("handle range");

   262     optional_labels("value min max setpoint");

   263     |,

   264 }