SVGHMI: In order to allow widget signature and description to coexist in same ysl2 file, introduced widget_class, widget_defs to declare widget codegen templates and gen_index_xhtml to mark templates that are only usefull in gen_index_xhtml.xslt.
// widget_circularbar.ysl2
widget_class("CircularBar") {
||
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];
}
||
}
widget_defs("CircularBar") {
param "hmi_element";
labels("path");
optional_labels("value min max");
}