--- a/svghmi/widget_slider.ysl2 Fri Oct 11 10:34:15 2024 +0200
+++ /dev/null Thu Jan 01 00:00:00 1970 +0000
@@ -1,357 +0,0 @@
-// 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");
-}