// widget_circularbar.ysl2 template "widget[@type='CircularBar']", mode="widget_class"{ || class CircularBarWidget extends Widget{ frequency = 10; range = undefined; dispatch(value) { if(this.value_elt) this.value_elt.textContent = String(value); let [min,max,start,end] = this.range; let [cx,cy] = this.center; let [rx,ry] = this.proportions; let tip = start + (end-start)*Number(value)/(max-min); let size = 0; if (tip-start > Math.PI) { size = 1; } else { size = 0; } this.path_elt.setAttribute('d', "M "+(cx+rx*Math.cos(start))+","+(cy+ry*Math.sin(start))+" A "+rx+","+ry+" 0 "+size+" 1 "+(cx+rx*Math.cos(tip))+","+(cy+ry*Math.sin(tip))); } init() { let start = Number(this.path_elt.getAttribute('sodipodi:start')); let end = Number(this.path_elt.getAttribute('sodipodi:end')); let cx = Number(this.path_elt.getAttribute('sodipodi:cx')); let cy = Number(this.path_elt.getAttribute('sodipodi:cy')); let rx = Number(this.path_elt.getAttribute('sodipodi:rx')); let ry = Number(this.path_elt.getAttribute('sodipodi:ry')); if (ry == 0) { ry = rx; } if (start > end) { end = end + 2*Math.PI; } 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; this.range = [min, max, start, end]; this.center = [cx, cy]; this.proportions = [rx, ry]; } } || } template "widget[@type='CircularBar']", mode="widget_defs" { param "hmi_element"; labels("path"); optional_labels("value min max"); |, }