// widget_slider.ysl2

widget_desc("Slider") {

longdesc

||

Slider - DEPRECATED - use ScrollBar or PathSlider instead

||

shortdesc > Slider - DEPRECATED - use ScrollBar instead

path name="value" accepts="HMI_INT" > value

path name="range" accepts="HMI_INT" > range

path name="visible" accepts="HMI_INT" > visible

}

widget_class("Slider")

||

frequency = 5;

range = undefined;

handle_orig = undefined;

scroll_size = undefined;

scroll_range = 0;

scroll_visible = 7;

min_size = 0.07;

fi = undefined;

curr_value = 0;

drag = false;

enTimer = false;

handle_click = undefined;

last_drag = false;

dispatch(value,oldval, index) {

if (index == 0){

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

//save current value inside widget

this.curr_value = value;

//check if in range

if (this.curr_value > max){

this.curr_value = max;

this.apply_hmi_value(0, this.curr_value);

}

else if (this.curr_value < min){

this.curr_value = min;

this.apply_hmi_value(0, this.curr_value);

}

if(this.value_elt)

this.value_elt.textContent = String(value);

}

else if(index == 1){

this.scroll_range = value;

this.set_scroll();

}

else if(index == 2){

this.scroll_visible = value;

this.set_scroll();

}

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

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

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

}

}

set_scroll(){

//check if range is bigger than visible and set scroll size

if(this.scroll_range > this.scroll_visible){

this.scroll_size = this.scroll_range - this.scroll_visible;

this.range[0] = 0;

this.range[1] = this.scroll_size;

}

else{

this.scroll_size = 1;

this.range[0] = 0;

this.range[1] = 1;

}

}

update_DOM(value, elt){

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

// check if handle is resizeable

if (this.scroll_size != undefined){ //size changes

//get parameters

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

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

let handle_min = totallength*this.min_size;

let step = 1;

//check if range is bigger than max displayed and recalculate step

if ((totallength/handle_min) < (max-min+1)){

step = (max-min+1)/(totallength/handle_min-1);

}

let kx,ky,offseY,offseX = undefined;

//scale on x or y axes

if (this.fi > 0.75){

//get scale factor

if(step > 1){

ky = handle_min/this.handle_orig.height;

}

else{

ky = (totallength-handle_min*(max-min))/this.handle_orig.height;

}

kx = 1;

//get 0 offset to stay inside range

offseY = start.y - (this.handle_orig.height + this.handle_orig.y) * ky;

offseX = 0;

//get distance from value

tip.y =this.range_elt.getPointAtLength(0).y - length/step *handle_min;

}

else{

//get scale factor

if(step > 1){

kx = handle_min/this.handle_orig.width;

}

else{

kx = (totallength-handle_min*(max-min))/this.handle_orig.width;

}

ky = 1;

//get 0 offset to stay inside range

offseX = start.x - (this.handle_orig.x * kx);

offseY = 0;

//get distance from value

tip.x =this.range_elt.getPointAtLength(0).x + length/step *handle_min;

}

elt.setAttribute('transform',"matrix("+(kx)+" 0 0 "+(ky)+" "+(tip.x-start.x+offseX)+" "+(tip.y-start.y+offseY)+")");

}

else{ //size stays the same

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

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

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

}

// show or hide ghost if exists

if(this.setpoint_elt != undefined){

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

if(this.drag){

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

}else{

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

}

this.last_drag = this.drag;

}

}

}

on_release(evt) {

//unbind events

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

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

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

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

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

//reset drag flag

if(this.drag){

this.drag = false;

}

// get final position

this.update_position(evt);

}

on_drag(evt){

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

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

this.update_position(evt);

//reset timer

this.enTimer = false;

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

}

}

update_position(evt){

var html_dist = 0;

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

//calculate size of widget in html

var range_borders = this.range_elt.getBoundingClientRect();

var [minX,minY,maxX,maxY] = [range_borders.left,range_borders.bottom,range_borders.right,range_borders.top];

var range_length = Math.sqrt( range_borders.height*range_borders.height + range_borders.width*range_borders.width );

//get range and mouse coordinates

var mouseX = undefined;

var mouseY = undefined;

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

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

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

}

else{

mouseX = evt.pageX;

mouseY = evt.pageY;

}

// calculate position

if (this.handle_click){ //if clicked on handle

let moveDist = 0, resizeAdd = 0;

let range_percent = 1;

//set paramters for resizeable handle

if (this.scroll_size != undefined){

// add one more object to stay inside range

resizeAdd = 1;

//chack if range is bigger than display option and

// calculate percent of range with out handle

if(((max/(max*this.min_size)) < (max-min+1))){

range_percent = 1-this.min_size;

}

else{

range_percent = 1-(max-max*this.min_size*(max-min))/max;

}

}

//calculate value difference on x or y axis

if(this.fi > 0.7){

moveDist = ((max-min+resizeAdd)/(range_length*range_percent))*((this.handle_click[1]-mouseY)/Math.sin(this.fi));

}

else{

moveDist = ((max-min+resizeAdd)/(range_length*range_percent))*((mouseX-this.handle_click[0])/Math.cos(this.fi));

}

this.curr_value = Math.ceil(this.handle_click[2] + moveDist);

}

else{ //if clicked on widget

//get handle distance from mouse position

if (minX > mouseX && minY < mouseY){

html_dist = 0;

}

else if (maxX < mouseX && maxY > mouseY){

html_dist = range_length;

}

else{

if(this.fi > 0.7){

html_dist = (minY - mouseY)/Math.sin(this.fi);

}

else{

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

}

}

//calculate distance

this.curr_value=Math.ceil((html_dist/range_length)*(this.range[1]-this.range[0])+this.range[0]);

}

//check if in range and apply

if (this.curr_value > max){

this.curr_value = max;

}

else if (this.curr_value < min){

this.curr_value = min;

}

this.apply_hmi_value(0, this.curr_value);

//redraw handle

this.request_animate();

}

animate(){

// redraw handle on screen refresh

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

if(this.setpoint_elt != undefined){

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

}

else{

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

}

}

on_select(evt){

//enable drag flag and timer

this.drag = true;

this.enTimer = true;

//bind events

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

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

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

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

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

// check if handle was pressed

if (evt.currentTarget == this.handle_elt){

//get mouse position on the handle

let mouseX = undefined;

let mouseY = undefined;

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

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

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

}

else{

mouseX = evt.pageX;

mouseY = evt.pageY;

}

//save coordinates and orig value

this.handle_click = [mouseX,mouseY,this.curr_value];

}

else{

// get new handle position and reset if handle was not pressed

this.handle_click = undefined;

this.update_position(evt);

}

//prevent next events

evt.stopPropagation();

}

init() {

//set min max value if not defined

let min = this.min_elt ?

Number(this.min_elt.textContent) :

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

let max = this.max_elt ?

Number(this.max_elt.textContent) :

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

// save initial parameters

this.range_elt.style.strokeMiterlimit="0";

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

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

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

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

this.handle_orig = this.handle_elt.getBBox();

//bind functions

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

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

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

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

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

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

//touch recognised as page drag without next command

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

//save ghost style

if(this.setpoint_elt != undefined){

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

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

}

}

||

widget_defs("Slider") {

labels("handle range");

optional_labels("value min max setpoint");

}