SVGHMI: still quite naive path substitution whn prepearing widget for DnD, but now uses label generation.
Multiple widget DnD and mutiple variable still make no sense because all path are replaced with same path, but atleast min/max value are preserved...
// widget_circularbar.ysl2
template "widget[@type='CircularBar']", mode="widget_class"{
||
class CircularBarWidget extends Widget{
frequency = 10;
range = undefined;
dispatch(value) {
this.display_val = value;
this.request_animate();
}
animate(){
if(this.value_elt)
this.value_elt.textContent = String(this.display_val);
let [min,max,start,end] = this.range;
let [cx,cy] = this.center;
let [rx,ry] = this.proportions;
let tip = start + (end-start)*Number(this.display_val)/(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, end, cx, cy, rx, ry] = ["start", "end", "cx", "cy", "rx", "ry"].
map(tag=>Number(this.path_elt.getAttribute('sodipodi:'+tag)))
if (ry == 0)
ry = rx;
if (start > end)
end = end + 2*Math.PI;
let [min,max] = [[this.min_elt,0],[this.max_elt,100]].map(([elt,def],i)=>elt?
Number(elt.textContent) :
this.args.length >= i+1 ? this.args[i] : def);
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");
}