SVGHMI: Widget DnD to Inkscape : Added source SVG widget label parsing and pass selecte HMI subtree to XSLT tranform, so that SVG containing multiple widgets can later be matched against hmi tree fragments, in order to DnD complex groups of widgets.
// 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");
}