usveticic@3013: // widget_circuralslider.ysl2 usveticic@3013: usveticic@3013: template "widget[@type='CircularSlider']", mode="widget_class" usveticic@3013: || usveticic@3013: class CircularSliderWidget extends Widget{ usveticic@3013: frequency = 5; usveticic@3013: range = undefined; usveticic@3013: circle = undefined; usveticic@3013: handle_pos = undefined; usveticic@3013: drag = false; usveticic@3013: enTimer = false; usveticic@3013: usveticic@3013: dispatch(value) { usveticic@3013: if(!this.drag){ usveticic@3013: if(this.value_elt) usveticic@3013: this.value_elt.textContent = String(value); usveticic@3013: usveticic@3013: this.handle_position(value); usveticic@3013: } usveticic@3013: } usveticic@3013: usveticic@3013: handle_position(value){ usveticic@3013: let [min,max,totalDistance] = this.range; usveticic@3013: let length = Math.max(0,Math.min((totalDistance),(Number(value)-min)/(max-min)*(totalDistance))); usveticic@3013: let tip = this.range_elt.getPointAtLength(length); usveticic@3013: this.handle_elt.setAttribute('transform',"translate("+(tip.x-this.handle_pos.x)+","+(tip.y-this.handle_pos.y)+")"); usveticic@3013: } usveticic@3013: usveticic@3013: on_release(evt) { usveticic@3013: if(this.drag){ usveticic@3013: this.drag = false; usveticic@3013: } usveticic@3013: } usveticic@3013: usveticic@3013: update_position(evt){ usveticic@3013: if(this.drag && this.enTimer){ usveticic@3013: var svg_dist = 0; usveticic@3013: usveticic@3013: //calculate center of widget in html usveticic@3013: // --TODO maybe it would be better to bind this part to window change size event ??? usveticic@3013: let [xdest,ydest,svgWidth,svgHeight] = page_desc[current_visible_page].bbox; usveticic@3013: let [cX, cY,fiStart,fiEnd,minMax,x1,y1,width,height] = this.circle; usveticic@3013: let htmlCirc = this.range_elt.getBoundingClientRect(); usveticic@3013: let cxHtml = ((htmlCirc.right-htmlCirc.left)/(width)*(cX-x1))+htmlCirc.left; usveticic@3013: let cyHtml = ((htmlCirc.bottom-htmlCirc.top)/(height)*(cY-y1))+htmlCirc.top; usveticic@3013: usveticic@3013: usveticic@3013: //get mouse coordinates usveticic@3013: let mouseX = undefined; usveticic@3013: let mouseY = undefined; usveticic@3013: if (evt.type.startsWith("touch")){ usveticic@3013: mouseX = Math.ceil(evt.touches[0].clientX); usveticic@3013: mouseY = Math.ceil(evt.touches[0].clientY); usveticic@3013: } usveticic@3013: else{ usveticic@3013: mouseX = evt.pageX; usveticic@3013: mouseY = evt.pageY; usveticic@3013: } usveticic@3013: usveticic@3013: //calculate angle usveticic@3013: let fi = Math.atan2(cyHtml-mouseY, mouseX-cxHtml); usveticic@3013: usveticic@3013: // transform from 0 to 2PI usveticic@3013: if (fi > 0){ usveticic@3013: fi = 2*Math.PI-fi; usveticic@3013: } usveticic@3013: else{ usveticic@3013: fi = -fi; usveticic@3013: } usveticic@3013: usveticic@3013: //offset it to 0 usveticic@3013: fi = fi - fiStart; usveticic@3013: if (fi < 0){ usveticic@3013: fi = fi + 2*Math.PI; usveticic@3013: } usveticic@3013: usveticic@3013: //get handle distance from mouse position usveticic@3013: if(fi= 1 ? this.args[0] : 0; usveticic@3013: let max = this.max_elt ? usveticic@3013: Number(this.max_elt.textContent) : usveticic@3013: this.args.length >= 2 ? this.args[1] : 100; usveticic@3013: usveticic@3013: //fiStart ==> offset usveticic@3013: let fiStart = Number(this.range_elt.getAttribute('sodipodi:start')); usveticic@3013: let fiEnd = Number(this.range_elt.getAttribute('sodipodi:end')); usveticic@3013: fiEnd = fiEnd - fiStart; usveticic@3013: usveticic@3013: //fiEnd ==> size of angle usveticic@3013: if (fiEnd < 0){ usveticic@3013: fiEnd = 2*Math.PI + fiEnd; usveticic@3013: } usveticic@3013: usveticic@3013: //min max barrier angle usveticic@3013: let minMax = (2*Math.PI - fiEnd)/2; usveticic@3013: usveticic@3013: //get parameters from svg usveticic@3013: let cX = Number(this.range_elt.getAttribute('sodipodi:cx')); usveticic@3013: let cY = Number(this.range_elt.getAttribute('sodipodi:cy')); usveticic@3013: this.range_elt.style.strokeMiterlimit="0"; //eliminates some weird border around html object usveticic@3013: this.range = [min, max,this.range_elt.getTotalLength()]; usveticic@3013: let cPos = this.range_elt.getBBox(); usveticic@3013: this.handle_pos = this.range_elt.getPointAtLength(0); usveticic@3013: this.circle = [cX, cY,fiStart,fiEnd,minMax,cPos.x,cPos.y,cPos.width,cPos.height]; usveticic@3013: usveticic@3013: //init events usveticic@3013: this.handle_elt.addEventListener("touchstart", hmi_widgets[this.element_id].on_select.bind(this)); usveticic@3013: this.handle_elt.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this)); usveticic@3013: this.element.addEventListener("mousedown", hmi_widgets[this.element_id].on_select.bind(this)); usveticic@3013: usveticic@3013: window.addEventListener("touchmove", hmi_widgets[this.element_id].update_position.bind(this)); usveticic@3013: window.addEventListener("mousemove", hmi_widgets[this.element_id].update_position.bind(this)); usveticic@3013: usveticic@3013: window.addEventListener("mouseup", hmi_widgets[this.element_id].on_release.bind(this)) usveticic@3013: window.addEventListener("touchend", hmi_widgets[this.element_id].on_release.bind(this)); usveticic@3013: window.addEventListener("touchcancel", hmi_widgets[this.element_id].on_release.bind(this)); usveticic@3013: usveticic@3013: } usveticic@3013: } usveticic@3013: || usveticic@3013: usveticic@3013: template "widget[@type='CircularSlider']", mode="widget_defs" { usveticic@3013: param "hmi_element"; usveticic@3013: labels("handle range"); usveticic@3013: optional_labels("value min max"); usveticic@3013: |, Edouard@3018: }