diff -r a27b5862e363 -r ca312be56929 svghmi/gen_index_xhtml.xslt
--- a/svghmi/gen_index_xhtml.xslt Wed Jun 01 09:14:19 2022 +0200
+++ b/svghmi/gen_index_xhtml.xslt Wed Jun 01 09:15:26 2022 +0200
@@ -159,7 +159,7 @@
-
+
@@ -207,6 +207,16 @@
+
+
+ Widget id:
+
+ label:
+
+ has wrong syntax of frequency forcing
+
+
+
@@ -1098,6 +1108,11 @@
+
+
+
+
+
@@ -1248,7 +1263,9 @@
+ "
+ "
undefined
@@ -1473,10 +1490,84 @@
this.pending = indexes.map(() => undefined);
- this.bound_unhinibit = this.unhinibit.bind(this);
+ this.bound_uninhibit = this.uninhibit.bind(this);
+
+
+
+ this.lastdispatch = indexes.map(() => undefined);
+
+ this.deafen = indexes.map(() => undefined);
+
+ this.incoming = indexes.map(() => undefined);
+
+ this.bound_undeafen = this.undeafen.bind(this);
+
+
this.forced_frequency = freq;
+ this.clip = true;
+
+ }
+
+
+
+ do_init(){
+
+ let forced = this.forced_frequency;
+
+ if(forced !== undefined){
+
+ /*
+
+ once every 10 seconds : 10s
+
+ once per minute : 1m
+
+ once per hour : 1h
+
+ once per day : 1d
+
+ */
+
+ let unit = forced.slice(-1);
+
+ let factor = {
+
+ "s":1,
+
+ "m":60,
+
+ "h":3600,
+
+ "d":86400}[unit];
+
+
+
+ this.frequency = factor ? 1/(factor * Number(forced.slice(0,-1)))
+
+ : Number(forced);
+
+ }
+
+
+
+ let init = this.init;
+
+ if(typeof(init) == "function"){
+
+ // try {
+
+ init.call(this);
+
+ // } catch(err) {
+
+ // console.log(err);
+
+ // }
+
+ }
+
}
@@ -1499,10 +1590,22 @@
this.lastapply[i] = undefined;
- this.unhinibit(i);
+ this.uninhibit(i);
}
+ let deafened = this.deafen[i];
+
+ if(deafened != undefined){
+
+ clearTimeout(deafened);
+
+ this.lastdispatch[i] = undefined;
+
+ this.undeafen(i);
+
+ }
+
let index = this.indexes[i];
if(this.relativeness[i])
@@ -1649,7 +1752,9 @@
let new_val = eval_operation_string(old_val, opstr);
- new_val = this.clip_min_max(index, new_val);
+ if(this.clip)
+
+ new_val = this.clip_min_max(index, new_val);
return apply_hmi_value(realindex, new_val);
@@ -1663,7 +1768,9 @@
if(realindex == undefined) return undefined;
- new_val = this.clip_min_max(index, new_val);
+ if(this.clip)
+
+ new_val = this.clip_min_max(index, new_val);
return apply_hmi_value(realindex, new_val);
@@ -1671,7 +1778,7 @@
- unhinibit(index){
+ uninhibit(index){
this.inhibit[index] = undefined;
@@ -1709,7 +1816,7 @@
this.pending[index] = new_val;
- this.inhibit[index] = setTimeout(this.bound_unhinibit, min_interval - elapsed, index);
+ this.inhibit[index] = setTimeout(this.bound_uninhibit, min_interval - elapsed, index);
}
@@ -1753,19 +1860,65 @@
+ undeafen(index){
+
+ this.deafen[index] = undefined;
+
+ let [new_val, old_val] = this.incoming[index];
+
+ this.incoming[index] = undefined;
+
+ this.dispatch(new_val, old_val, index);
+
+ }
+
+
+
_dispatch(value, oldval, varnum) {
let dispatch = this.dispatch;
if(dispatch != undefined){
- try {
-
- dispatch.call(this, value, oldval, varnum);
-
- } catch(err) {
-
- console.log(err);
+ if(this.deafen[varnum] == undefined){
+
+ let now = Date.now();
+
+ let min_interval = 1000/this.frequency;
+
+ let lastdispatch = this.lastdispatch[varnum];
+
+ if(lastdispatch == undefined || now > lastdispatch + min_interval){
+
+ this.lastdispatch[varnum] = now;
+
+ try {
+
+ dispatch.call(this, value, oldval, varnum);
+
+ } catch(err) {
+
+ console.log(err);
+
+ }
+
+ }
+
+ else {
+
+ let elapsed = now - lastdispatch;
+
+ this.incoming[varnum] = [value, oldval];
+
+ this.deafen[varnum] = setTimeout(this.bound_undeafen, min_interval - elapsed, varnum);
+
+ }
+
+ }
+
+ else {
+
+ this.incoming[varnum] = [value, oldval];
}
@@ -1883,8 +2036,10 @@
-
-
+
+
+
+
@@ -2400,10 +2555,6 @@
_action(){
- console.log("Entering state
-
- ", this.frequency);
-
}
@@ -2424,8 +2575,6 @@
- frequency = 5;
-
display = "inactive";
state = "init";
@@ -2492,6 +2641,8 @@
ButtonWidget
extends Widget{
+ frequency = 5;
+
@@ -2514,6 +2665,8 @@
PushButtonWidget
extends Widget{
+ frequency = 20;
+
@@ -4133,7 +4286,7 @@
");
- this.content = langs;
+ this.content = langs.map(([lname,lcode]) => lname);
@@ -6116,7 +6269,7 @@
- PathSlider -
+ PathSlider -
@@ -6159,7 +6312,7 @@
origPt = undefined;
-
+
@@ -6243,7 +6396,7 @@
bestDistance = beforeDistance;
- } else if ((afterLength = bestLength + precision) <= this.pathLength &&
+ } else if ((afterLength = bestLength + precision) <= this.pathLength &&
(afterDistance = distance2(afterPoint = this.path_elt.getPointAtLength(afterLength))) < bestDistance) {
@@ -7672,6 +7825,1319 @@
+
+
+
+
+
+ XYGraph draws a cartesian trend graph re-using styles given for axis,
+
+ grid/marks, legends and curves.
+
+
+
+ Elements labeled "x_axis" and "y_axis" are svg:groups containg:
+
+ - "axis_label" svg:text gives style an alignment for axis labels.
+
+ - "interval_major_mark" and "interval_minor_mark" are svg elements to be
+
+ duplicated along axis line to form intervals marks.
+
+ - "axis_line" svg:path is the axis line. Paths must be intersect and their
+
+ bounding box is the chart wall.
+
+
+
+ Elements labeled "curve_0", "curve_1", ... are paths whose styles are used
+
+ to draw curves corresponding to data from variables passed as HMI tree paths.
+
+ "curve_0" is mandatory. HMI variables outnumbering given curves are ignored.
+
+
+
+
+
+ Cartesian trend graph showing values of given variables over time
+
+
+ value
+
+
+ buffer size
+
+
+ format string for X label
+
+
+ format string for Y label
+
+
+ minimum value foe X axis
+
+
+ maximum value for X axis
+
+
+
+ class
+ XYGraphWidget
+ extends Widget{
+
+ frequency = 1;
+
+ init() {
+
+ let x_duration_s;
+
+ [x_duration_s,
+
+ this.x_format, this.y_format] = this.args;
+
+
+
+ let timeunit = x_duration_s.slice(-1);
+
+ let factor = {
+
+ "s":1,
+
+ "m":60,
+
+ "h":3600,
+
+ "d":86400}[timeunit];
+
+ if(factor == undefined){
+
+ this.max_data_length = Number(x_duration_s);
+
+ this.x_duration = undefined;
+
+ }else{
+
+ let duration = factor*Number(x_duration_s.slice(0,-1));
+
+ this.max_data_length = undefined;
+
+ this.x_duration = duration*1000;
+
+ }
+
+
+
+
+
+ // Min and Max given with paths are meant to describe visible range,
+
+ // not to clip data.
+
+ this.clip = false;
+
+
+
+ let y_min = Infinity, y_max = -Infinity;
+
+
+
+ // Compute visible Y range by merging fixed curves Y ranges
+
+ for(let minmax of this.minmaxes){
+
+ if(minmax){
+
+ let [min,max] = minmax;
+
+ if(min < y_min)
+
+ y_min = min;
+
+ if(max > y_max)
+
+ y_max = max;
+
+ }
+
+ }
+
+
+
+ if(y_min !== Infinity && y_max !== -Infinity){
+
+ this.fixed_y_range = true;
+
+ } else {
+
+ this.fixed_y_range = false;
+
+ }
+
+
+
+ this.ymin = y_min;
+
+ this.ymax = y_max;
+
+
+
+ this.curves = [];
+
+ this.init_specific();
+
+
+
+ this.reference = new ReferenceFrame(
+
+ [[this.x_interval_minor_mark_elt, this.x_interval_major_mark_elt],
+
+ [this.y_interval_minor_mark_elt, this.y_interval_major_mark_elt]],
+
+ [this.x_axis_label_elt, this.y_axis_label_elt],
+
+ [this.x_axis_line_elt, this.y_axis_line_elt],
+
+ [this.x_format, this.y_format]);
+
+
+
+ let max_stroke_width = 0;
+
+ for(let curve of this.curves){
+
+ if(curve.style.strokeWidth > max_stroke_width){
+
+ max_stroke_width = curve.style.strokeWidth;
+
+ }
+
+ }
+
+
+
+ this.Margins=this.reference.getLengths().map(length => max_stroke_width/length);
+
+
+
+ // create <clipPath> path and attach it to widget
+
+ let clipPath = document.createElementNS(xmlns,"clipPath");
+
+ let clipPathPath = document.createElementNS(xmlns,"path");
+
+ let clipPathPathDattr = document.createAttribute("d");
+
+ clipPathPathDattr.value = this.reference.getClipPathPathDattr();
+
+ clipPathPath.setAttributeNode(clipPathPathDattr);
+
+ clipPath.appendChild(clipPathPath);
+
+ clipPath.id = randomId();
+
+ this.element.appendChild(clipPath);
+
+
+
+ // assign created clipPath to clip-path property of curves
+
+ for(let curve of this.curves){
+
+ curve.setAttribute("clip-path", "url(#" + clipPath.id + ")");
+
+ }
+
+
+
+ this.curves_data = this.curves.map(_unused => []);
+
+ }
+
+
+
+ dispatch(value,oldval, index) {
+
+ // TODO: get PLC time instead of browser time
+
+ let time = Date.now();
+
+
+
+ // naive local buffer impl.
+
+ // data is updated only when graph is visible
+
+ // TODO: replace with separate recording
+
+
+
+ this.curves_data[index].push([time, value]);
+
+ let data_length = this.curves_data[index].length;
+
+ let ymin_damaged = false;
+
+ let ymax_damaged = false;
+
+ let overflow;
+
+
+
+ if(this.max_data_length == undefined){
+
+ let peremption = time - this.x_duration;
+
+ let oldest = this.curves_data[index][0][0]
+
+ this.xmin = peremption;
+
+ if(oldest < peremption){
+
+ // remove first item
+
+ overflow = this.curves_data[index].shift()[1];
+
+ data_length = data_length - 1;
+
+ }
+
+ } else {
+
+ if(data_length > this.max_data_length){
+
+ // remove first item
+
+ [this.xmin, overflow] = this.curves_data[index].shift();
+
+ data_length = data_length - 1;
+
+ } else {
+
+ if(this.xmin == undefined){
+
+ this.xmin = time;
+
+ }
+
+ }
+
+ }
+
+
+
+ this.xmax = time;
+
+ let Xrange = this.xmax - this.xmin;
+
+
+
+ if(!this.fixed_y_range){
+
+ ymin_damaged = overflow <= this.ymin;
+
+ ymax_damaged = overflow >= this.ymax;
+
+ if(value > this.ymax){
+
+ ymax_damaged = false;
+
+ this.ymax = value;
+
+ }
+
+ if(value < this.ymin){
+
+ ymin_damaged = false;
+
+ this.ymin = value;
+
+ }
+
+ }
+
+ let Yrange = this.ymax - this.ymin;
+
+
+
+ // apply margin by moving min and max to enlarge range
+
+ let [xMargin,yMargin] = zip(this.Margins, [Xrange, Yrange]).map(([m,l]) => m*l);
+
+ [[this.dxmin, this.dxmax],[this.dymin,this.dymax]] =
+
+ [[this.xmin-xMargin, this.xmax+xMargin],
+
+ [this.ymin-yMargin, this.ymax+yMargin]];
+
+ Xrange += 2*xMargin;
+
+ Yrange += 2*yMargin;
+
+
+
+ // recompute curves "d" attribute
+
+ // FIXME: use SVG getPathData and setPathData when available.
+
+ // https://svgwg.org/specs/paths/#InterfaceSVGPathData
+
+ // https://github.com/jarek-foksa/path-data-polyfill
+
+
+
+ let [base_point, xvect, yvect] = this.reference.getBaseRef();
+
+ this.curves_d_attr =
+
+ zip(this.curves_data, this.curves).map(([data,curve]) => {
+
+ let new_d = data.map(([x,y], i) => {
+
+ // compute curve point from data, ranges, and base_ref
+
+ let xv = vectorscale(xvect, (x - this.dxmin) / Xrange);
+
+ let yv = vectorscale(yvect, (y - this.dymin) / Yrange);
+
+ let px = base_point.x + xv.x + yv.x;
+
+ let py = base_point.y + xv.y + yv.y;
+
+ if(!this.fixed_y_range){
+
+ // update min and max from curve data if needed
+
+ if(ymin_damaged && y < this.ymin) this.ymin = y;
+
+ if(ymax_damaged && y > this.ymax) this.ymax = y;
+
+ }
+
+
+
+ return " " + px + "," + py;
+
+ });
+
+
+
+ new_d.unshift("M ");
+
+
+
+ return new_d.join('');
+
+ });
+
+
+
+ // computed curves "d" attr is applied to svg curve during animate();
+
+
+
+ this.request_animate();
+
+ }
+
+
+
+ animate(){
+
+
+
+ // move elements only if enough data
+
+ if(this.curves_data.some(data => data.length > 1)){
+
+
+
+ // move marks and update labels
+
+ this.reference.applyRanges([[this.dxmin, this.dxmax],
+
+ [this.dymin, this.dymax]]);
+
+
+
+ // apply computed curves "d" attributes
+
+ for(let [curve, d_attr] of zip(this.curves, this.curves_d_attr)){
+
+ curve.setAttribute("d", d_attr);
+
+ }
+
+ }
+
+ }
+
+
+
+ }
+
+
+
+
+
+
+
+ /x_interval_minor_mark /x_axis_line /x_interval_major_mark /x_axis_label
+
+
+
+
+
+ /y_interval_minor_mark /y_axis_line /y_interval_major_mark /y_axis_label
+
+
+ init_specific() {
+
+
+
+
+
+
+ XYGraph id="
+
+ ", label="
+
+ " : elements with data_n label must be unique.
+
+
+ this.curves[
+
+ ] = id("
+
+ "); /*
+
+ */
+
+
+ }
+
+
+
+
+
+
+ /*
+
+ */
+
+
+
+ function lineFromPath(path_elt) {
+
+ let start = path_elt.getPointAtLength(0);
+
+ let end = path_elt.getPointAtLength(path_elt.getTotalLength());
+
+ return [start, new DOMPoint(end.x - start.x , end.y - start.y)];
+
+ };
+
+
+
+ function vector(p1, p2) {
+
+ return new DOMPoint(p2.x - p1.x , p2.y - p1.y);
+
+ };
+
+
+
+ function vectorscale(p1, p2) {
+
+ return new DOMPoint(p2 * p1.x , p2 * p1.y);
+
+ };
+
+
+
+ function vectorLength(p1) {
+
+ return Math.sqrt(p1.x*p1.x + p1.y*p1.y);
+
+ };
+
+
+
+ function randomId(){
+
+ return Date.now().toString(36) + Math.random().toString(36).substr(2);
+
+ }
+
+
+
+ function move_elements_to_group(elements) {
+
+ let newgroup = document.createElementNS(xmlns,"g");
+
+ newgroup.id = randomId();
+
+
+
+ for(let element of elements){
+
+ let parent = element.parentElement;
+
+ if(parent !== null)
+
+ parent.removeChild(element);
+
+ newgroup.appendChild(element);
+
+ }
+
+ return newgroup;
+
+ }
+
+ function getLinesIntesection(l1, l2) {
+
+ let [l1start, l1vect] = l1;
+
+ let [l2start, l2vect] = l2;
+
+
+
+
+
+ /*
+
+ Compute intersection of two lines
+
+ =================================
+
+
+
+ ^ l2vect
+
+ /
+
+ /
+
+ /
+
+ l1start ----------X--------------> l1vect
+
+ / intersection
+
+ /
+
+ /
+
+ l2start
+
+
+
+ */
+
+ let [x1, y1, x3, y3] = [l1start.x, l1start.y, l2start.x, l2start.y];
+
+ let [x2, y2, x4, y4] = [x1+l1vect.x, y1+l1vect.y, x3+l2vect.x, y3+l2vect.y];
+
+
+
+ // line intercept math by Paul Bourke http://paulbourke.net/geometry/pointlineplane/
+
+ // Determine the intersection point of two line segments
+
+ // Return FALSE if the lines don't intersect
+
+
+
+ // Check if none of the lines are of length 0
+
+ if ((x1 === x2 && y1 === y2) || (x3 === x4 && y3 === y4)) {
+
+ return false
+
+ }
+
+
+
+ denominator = ((y4 - y3) * (x2 - x1) - (x4 - x3) * (y2 - y1))
+
+
+
+ // Lines are parallel
+
+ if (denominator === 0) {
+
+ return false
+
+ }
+
+
+
+ let ua = ((x4 - x3) * (y1 - y3) - (y4 - y3) * (x1 - x3)) / denominator
+
+ let ub = ((x2 - x1) * (y1 - y3) - (y2 - y1) * (x1 - x3)) / denominator
+
+
+
+ // Return a object with the x and y coordinates of the intersection
+
+ let x = x1 + ua * (x2 - x1)
+
+ let y = y1 + ua * (y2 - y1)
+
+
+
+ return new DOMPoint(x,y);
+
+ };
+
+
+
+ class ReferenceFrame {
+
+ constructor(
+
+ // [[Xminor,Xmajor], [Yminor,Ymajor]]
+
+ marks,
+
+ // [Xlabel, Ylabel]
+
+ labels,
+
+ // [Xline, Yline]
+
+ lines,
+
+ // [Xformat, Yformat] printf-like formating strings
+
+ formats
+
+ ){
+
+ this.axes = zip(labels,marks,lines,formats).map(args => new Axis(...args));
+
+
+
+ let [lx,ly] = this.axes.map(axis => axis.line);
+
+ let [[xstart, xvect], [ystart, yvect]] = [lx,ly];
+
+ let base_point = this.getBasePoint();
+
+
+
+ // setup clipping for curves
+
+ this.clipPathPathDattr =
+
+ "m " + base_point.x + "," + base_point.y + " "
+
+ + xvect.x + "," + xvect.y + " "
+
+ + yvect.x + "," + yvect.y + " "
+
+ + -xvect.x + "," + -xvect.y + " "
+
+ + -yvect.x + "," + -yvect.y + " z";
+
+
+
+ this.base_ref = [base_point, xvect, yvect];
+
+
+
+ this.lengths = [xvect,yvect].map(v => vectorLength(v));
+
+
+
+ for(let axis of this.axes){
+
+ axis.setBasePoint(base_point);
+
+ }
+
+ }
+
+
+
+ getLengths(){
+
+ return this.lengths;
+
+ }
+
+
+
+ getBaseRef(){
+
+ return this.base_ref;
+
+ }
+
+
+
+ getClipPathPathDattr(){
+
+ return this.clipPathPathDattr;
+
+ }
+
+
+
+ applyRanges(ranges){
+
+ let origin_moves = zip(ranges,this.axes).map(([range,axis]) => axis.applyRange(...range));
+
+ zip(origin_moves.reverse(),this.axes).forEach(([vect,axis]) => axis.moveOrigin(vect));
+
+ }
+
+
+
+ getBasePoint() {
+
+ let [[xstart, xvect], [ystart, yvect]] = this.axes.map(axis => axis.line);
+
+
+
+ /*
+
+ Compute graph clipping region base point
+
+ ========================================
+
+
+
+ Clipping region is a parallelogram containing axes lines,
+
+ and whose sides are parallel to axes line respectively.
+
+ Given axes lines are not starting at the same point, hereafter is
+
+ calculus of parallelogram base point.
+
+
+
+ ^ given Y axis (yvect)
+
+ / /
+
+ / /
+
+ / /
+
+ xstart *---------*--------------> given X axis (xvect)
+
+ / /origin
+
+ / /
+
+ *---------*--------------
+
+ base_point ystart
+
+
+
+ */
+
+
+
+ let base_point = getLinesIntesection([xstart,yvect],[ystart,xvect]);
+
+
+
+ return base_point;
+
+
+
+ }
+
+
+
+ }
+
+
+
+ class Axis {
+
+ constructor(label, marks, line, format){
+
+ this.lineElement = line;
+
+ this.line = lineFromPath(line);
+
+ this.format = format;
+
+
+
+ this.label = label;
+
+ this.marks = marks;
+
+
+
+
+
+ // add transforms for elements sliding along the axis line
+
+ for(let [elementname,element] of zip(["minor", "major", "label"],[...marks,label])){
+
+ for(let name of ["base","slide"]){
+
+ let transform = svg_root.createSVGTransform();
+
+ element.transform.baseVal.insertItemBefore(transform,0);
+
+ this[elementname+"_"+name+"_transform"]=transform;
+
+ };
+
+ };
+
+
+
+ // group marks an labels together
+
+ let parent = line.parentElement;
+
+ this.marks_group = move_elements_to_group(marks);
+
+ this.marks_and_label_group = move_elements_to_group([this.marks_group, label]);
+
+ this.group = move_elements_to_group([this.marks_and_label_group,line]);
+
+ parent.appendChild(this.group);
+
+
+
+ // Add transforms to group
+
+ for(let name of ["base","origin"]){
+
+ let transform = svg_root.createSVGTransform();
+
+ this.group.transform.baseVal.appendItem(transform);
+
+ this[name+"_transform"]=transform;
+
+ };
+
+
+
+ this.marks_and_label_group_transform = svg_root.createSVGTransform();
+
+ this.marks_and_label_group.transform.baseVal.appendItem(this.marks_and_label_group_transform);
+
+
+
+ this.duplicates = [];
+
+ this.last_duplicate_index = 0;
+
+ }
+
+
+
+ setBasePoint(base_point){
+
+ // move Axis to base point
+
+ let [start, _vect] = this.line;
+
+ let v = vector(start, base_point);
+
+ this.base_transform.setTranslate(v.x, v.y);
+
+
+
+ // Move marks and label to base point.
+
+ // _|_______ _|________
+
+ // | ' | ==> '
+
+ // | 0 0
+
+ // | |
+
+
+
+ for(let [markname,mark] of zip(["minor", "major"],this.marks)){
+
+ let pos = vector(
+
+ // Marks are expected to be paths
+
+ // paths are expected to be lines
+
+ // intersection with axis line is taken
+
+ // as reference for mark position
+
+ getLinesIntesection(
+
+ this.line, lineFromPath(mark)),base_point);
+
+ this[markname+"_base_transform"].setTranslate(pos.x - v.x, pos.y - v.y);
+
+ if(markname == "major"){ // label follow major mark
+
+ this.label_base_transform.setTranslate(pos.x - v.x, pos.y - v.y);
+
+ }
+
+ }
+
+ }
+
+
+
+ moveOrigin(vect){
+
+ this.origin_transform.setTranslate(vect.x, vect.y);
+
+ }
+
+
+
+ applyRange(min, max){
+
+ let range = max - min;
+
+
+
+ // compute how many units for a mark
+
+ //
+
+ // - Units are expected to be an order of magnitude smaller than range,
+
+ // so that marks are not too dense and also not too sparse.
+
+ // Order of magnitude of range is log10(range)
+
+ //
+
+ // - Units are necessarily power of ten, otherwise it is complicated to
+
+ // fill the text in labels...
+
+ // Unit is pow(10, integer_number )
+
+ //
+
+ // - To transform order of magnitude to an integer, floor() is used.
+
+ // This results in a count of mark fluctuating in between 10 and 100.
+
+ //
+
+ // - To spare resources result is better in between 3 and 30,
+
+ // and log10(3) is substracted to order of magnitude to obtain this
+
+ let unit = Math.pow(10, Math.floor(Math.log10(range)-Math.log10(3)));
+
+
+
+ // TODO: for time values (ms), units may be :
+
+ // 1 -> ms
+
+ // 10 -> s/100
+
+ // 100 -> s/10
+
+ // 1000 -> s
+
+ // 60000 -> min
+
+ // 3600000 -> hour
+
+ // ...
+
+ //
+
+
+
+ // Compute position of origin along axis [0...range]
+
+
+
+ // min < 0, max > 0, offset = -min
+
+ // _____________|________________
+
+ // ... -3 -2 -1 |0 1 2 3 4 ...
+
+ // <--offset---> ^
+
+ // |_original
+
+
+
+ // min > 0, max > 0, offset = 0
+
+ // |________________
+
+ // |6 7 8 9 10...
+
+ // ^
+
+ // |_original
+
+
+
+ // min < 0, max < 0, offset = max-min (range)
+
+ // _____________|_
+
+ // ... -5 -4 -3 |-2
+
+ // <--offset---> ^
+
+ // |_original
+
+
+
+ let offset = (max>=0 && min>=0) ? 0 : (
+
+ (max<0 && min<0) ? range : -min);
+
+
+
+ // compute unit vector
+
+ let [_start, vect] = this.line;
+
+ let unit_vect = vectorscale(vect, 1/range);
+
+ let [mark_min, mark_max, mark_offset] = [min,max,offset].map(val => Math.round(val/unit));
+
+ let mark_count = mark_max-mark_min;
+
+
+
+ // apply unit vector to marks and label
+
+ // offset is a representing position of an
+
+ // axis along the opposit axis line, expressed in major marks units
+
+ // unit_vect is unit vector
+
+
+
+ // ^
+
+ // | unit_vect
+
+ // |<--->
+
+ // _________|__________>
+
+ // ^ | ' | ' | '
+
+ // |yoffset | 1
+
+ // | |
+
+ // v xoffset|
+
+ // X<------>|
+
+ // base_point
+
+
+
+ // move major marks and label to first positive mark position
+
+ // let v = vectorscale(unit_vect, unit);
+
+ // this.label_slide_transform.setTranslate(v.x, v.y);
+
+ // this.major_slide_transform.setTranslate(v.x, v.y);
+
+ // move minor mark to first half positive mark position
+
+ let v = vectorscale(unit_vect, unit/2);
+
+ this.minor_slide_transform.setTranslate(v.x, v.y);
+
+
+
+ // duplicate marks and labels as needed
+
+ let current_mark_count = this.duplicates.length;
+
+ for(let i = current_mark_count; i <= mark_count; i++){
+
+ // cloneNode() label and add a svg:use of marks in a new group
+
+ let newgroup = document.createElementNS(xmlns,"g");
+
+ let transform = svg_root.createSVGTransform();
+
+ let newlabel = this.label.cloneNode(true);
+
+ let newuse = document.createElementNS(xmlns,"use");
+
+ let newuseAttr = document.createAttribute("href");
+
+ newuseAttr.value = "#"+this.marks_group.id;
+
+ newuse.setAttributeNode(newuseAttr);
+
+ newgroup.transform.baseVal.appendItem(transform);
+
+ newgroup.appendChild(newlabel);
+
+ newgroup.appendChild(newuse);
+
+ this.duplicates.push([transform,newgroup]);
+
+ }
+
+
+
+ // move marks and labels, set labels
+
+ //
+
+ // min > 0, max > 0, offset = 0
+
+ // ^
+
+ // |________>
+
+ // '| | ' |
+
+ // | 6 7
+
+ // X
+
+ // base_point
+
+ //
+
+ // min < 0, max > 0, offset = -min
+
+ // ^
+
+ // _________|__________>
+
+ // ' | ' | ' | '
+
+ // -1 | 1
+
+ // offset |
+
+ // X<------>|
+
+ // base_point
+
+ //
+
+ // min < 0, max < 0, offset = range
+
+ // ^
+
+ // ____________|
+
+ // ' | ' | |'
+
+ // -5 -4 |
+
+ // offset |
+
+ // X<--------->|
+
+ // base_point
+
+
+
+ let duplicate_index = 0;
+
+ for(let mark_index = 0; mark_index <= mark_count; mark_index++){
+
+ let val = (mark_min + mark_index) * unit;
+
+ let vec = vectorscale(unit_vect, val - min);
+
+ let text = this.format ? sprintf(this.format, val) : val.toString();
+
+ if(mark_index == mark_offset){
+
+ // apply offset to original marks and label groups
+
+ this.marks_and_label_group_transform.setTranslate(vec.x, vec.y);
+
+
+
+ // update original label text
+
+ this.label.getElementsByTagName("tspan")[0].textContent = text;
+
+ } else {
+
+ let [transform,element] = this.duplicates[duplicate_index++];
+
+
+
+ // apply unit vector*N to marks and label groups
+
+ transform.setTranslate(vec.x, vec.y);
+
+
+
+ // update label text
+
+ element.getElementsByTagName("tspan")[0].textContent = text;
+
+
+
+ // Attach to group if not already
+
+ if(element.parentElement == null){
+
+ this.group.appendChild(element);
+
+ }
+
+ }
+
+ }
+
+
+
+ let save_duplicate_index = duplicate_index;
+
+ // dettach marks and label from group if not anymore visible
+
+ for(;duplicate_index < this.last_duplicate_index; duplicate_index++){
+
+ let [transform,element] = this.duplicates[duplicate_index];
+
+ this.group.removeChild(element);
+
+ }
+
+
+
+ this.last_duplicate_index = save_duplicate_index;
+
+
+
+ return vectorscale(unit_vect, offset);
+
+ }
+
+ }
+
+
+
+
Made with SVGHMI. https://beremiz.org
@@ -7751,7 +9217,7 @@
modulo: /^%{2}/,
- placeholder: /^%(?:([1-9]\d*)\$|\(([^)]+)\))?(\+)?(0|'[^$])?(-)?(\d+)?(?:\.(\d+))?([b-gijostTuvxX])/,
+ placeholder: /^%(?:([1-9]\d*)\$|\(([^)]+)\))?(\+)?(0|'[^$])?(-)?(\d+)?(?:\.(\d+))?([b-gijostTuvxXD])/,
key: /^([a-z_][a-z_\d]*)/i,
@@ -7877,6 +9343,108 @@
break
+ case 'D':
+
+ /*
+
+
+
+ select date format with width
+
+ select time format with precision
+
+ %D => 13:31 AM (default)
+
+ %1D => 13:31 AM
+
+ %.1D => 07/07/20
+
+ %1.1D => 07/07/20, 13:31 AM
+
+ %1.2D => 07/07/20, 13:31:55 AM
+
+ %2.2D => May 5, 2022, 9:29:16 AM
+
+ %3.3D => May 5, 2022 at 9:28:16 AM GMT+2
+
+ %4.4D => Thursday, May 5, 2022 at 9:26:59 AM Central European Summer Time
+
+
+
+ see meaning of DateTimeFormat's options "datestyle" and "timestyle" in MDN
+
+ */
+
+
+
+ let [datestyle, timestyle] = [ph.width, ph.precision].map(val => ({
+
+ 1: "short",
+
+ 2: "medium",
+
+ 3: "long",
+
+ 4: "full"
+
+ }[val]));
+
+
+
+ if(timestyle === undefined && datestyle === undefined){
+
+ timestyle = "short";
+
+ }
+
+
+
+ let options = {
+
+ dateStyle: datestyle,
+
+ timeStyle: timestyle,
+
+ hour12: false
+
+ }
+
+
+
+ /* get lang from globals */
+
+ let lang = get_current_lang_code();
+
+ let f;
+
+ try{
+
+ f = new Intl.DateTimeFormat(lang, options);
+
+ } catch(e) {
+
+ f = new Intl.DateTimeFormat('en-US', options);
+
+ }
+
+ arg = f.format(arg);
+
+
+
+ /*
+
+ TODO: select with padding char
+
+ a: absolute time and date (default)
+
+ r: relative time
+
+ */
+
+
+
+ break
+
case 'j':
arg = JSON.stringify(arg, null, ph.width ? parseInt(ph.width) : 0)
@@ -8181,6 +9749,430 @@
}(); // eslint-disable-line
+ /*
+
+
+
+ From https://github.com/keyvan-m-sadeghi/pythonic
+
+
+
+ Slightly modified in order to be usable in browser (i.e. not as a node.js module)
+
+
+
+ The MIT License (MIT)
+
+
+
+ Copyright (c) 2016 Assister.Ai
+
+
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy of
+
+ this software and associated documentation files (the "Software"), to deal in
+
+ the Software without restriction, including without limitation the rights to
+
+ use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+
+ the Software, and to permit persons to whom the Software is furnished to do so,
+
+ subject to the following conditions:
+
+
+
+ The above copyright notice and this permission notice shall be included in all
+
+ copies or substantial portions of the Software.
+
+
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+
+ FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+
+ COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+
+ IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+
+ CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+ */
+
+
+
+ class Iterator {
+
+ constructor(generator) {
+
+ this[Symbol.iterator] = generator;
+
+ }
+
+
+
+ async * [Symbol.asyncIterator]() {
+
+ for (const element of this) {
+
+ yield await element;
+
+ }
+
+ }
+
+
+
+ forEach(callback) {
+
+ for (const element of this) {
+
+ callback(element);
+
+ }
+
+ }
+
+
+
+ map(callback) {
+
+ const result = [];
+
+ for (const element of this) {
+
+ result.push(callback(element));
+
+ }
+
+
+
+ return result;
+
+ }
+
+
+
+ filter(callback) {
+
+ const result = [];
+
+ for (const element of this) {
+
+ if (callback(element)) {
+
+ result.push(element);
+
+ }
+
+ }
+
+
+
+ return result;
+
+ }
+
+
+
+ reduce(callback, initialValue) {
+
+ let empty = typeof initialValue === 'undefined';
+
+ let accumulator = initialValue;
+
+ let index = 0;
+
+ for (const currentValue of this) {
+
+ if (empty) {
+
+ accumulator = currentValue;
+
+ empty = false;
+
+ continue;
+
+ }
+
+
+
+ accumulator = callback(accumulator, currentValue, index, this);
+
+ index++;
+
+ }
+
+
+
+ if (empty) {
+
+ throw new TypeError('Reduce of empty Iterator with no initial value');
+
+ }
+
+
+
+ return accumulator;
+
+ }
+
+
+
+ some(callback) {
+
+ for (const element of this) {
+
+ if (callback(element)) {
+
+ return true;
+
+ }
+
+ }
+
+
+
+ return false;
+
+ }
+
+
+
+ every(callback) {
+
+ for (const element of this) {
+
+ if (!callback(element)) {
+
+ return false;
+
+ }
+
+ }
+
+
+
+ return true;
+
+ }
+
+
+
+ static fromIterable(iterable) {
+
+ return new Iterator(function * () {
+
+ for (const element of iterable) {
+
+ yield element;
+
+ }
+
+ });
+
+ }
+
+
+
+ toArray() {
+
+ return Array.from(this);
+
+ }
+
+
+
+ next() {
+
+ if (!this.currentInvokedGenerator) {
+
+ this.currentInvokedGenerator = this[Symbol.iterator]();
+
+ }
+
+
+
+ return this.currentInvokedGenerator.next();
+
+ }
+
+
+
+ reset() {
+
+ delete this.currentInvokedGenerator;
+
+ }
+
+ }
+
+
+
+ function rangeSimple(stop) {
+
+ return new Iterator(function * () {
+
+ for (let i = 0; i < stop; i++) {
+
+ yield i;
+
+ }
+
+ });
+
+ }
+
+
+
+ function rangeOverload(start, stop, step = 1) {
+
+ return new Iterator(function * () {
+
+ for (let i = start; i < stop; i += step) {
+
+ yield i;
+
+ }
+
+ });
+
+ }
+
+
+
+ function range(...args) {
+
+ if (args.length < 2) {
+
+ return rangeSimple(...args);
+
+ }
+
+
+
+ return rangeOverload(...args);
+
+ }
+
+
+
+ function enumerate(iterable) {
+
+ return new Iterator(function * () {
+
+ let index = 0;
+
+ for (const element of iterable) {
+
+ yield [index, element];
+
+ index++;
+
+ }
+
+ });
+
+ }
+
+
+
+ const _zip = longest => (...iterables) => {
+
+ if (iterables.length < 2) {
+
+ throw new TypeError("zip takes 2 iterables at least, "+iterables.length+" given");
+
+ }
+
+
+
+ return new Iterator(function * () {
+
+ const iterators = iterables.map(iterable => Iterator.fromIterable(iterable));
+
+ while (true) {
+
+ const row = iterators.map(iterator => iterator.next());
+
+ const check = longest ? row.every.bind(row) : row.some.bind(row);
+
+ if (check(next => next.done)) {
+
+ return;
+
+ }
+
+
+
+ yield row.map(next => next.value);
+
+ }
+
+ });
+
+ };
+
+
+
+ const zip = _zip(false), zipLongest= _zip(true);
+
+
+
+ function items(obj) {
+
+ let {keys, get} = obj;
+
+ if (obj instanceof Map) {
+
+ keys = keys.bind(obj);
+
+ get = get.bind(obj);
+
+ } else {
+
+ keys = function () {
+
+ return Object.keys(obj);
+
+ };
+
+
+
+ get = function (key) {
+
+ return obj[key];
+
+ };
+
+ }
+
+
+
+ return new Iterator(function * () {
+
+ for (const key of keys()) {
+
+ yield [key, get(key)];
+
+ }
+
+ });
+
+ }
+
+
+
+ /*
+
+ module.exports = {Iterator, range, enumerate, zip: _zip(false), zipLongest: _zip(true), items};
+
+ */
+
// svghmi.js
@@ -8221,498 +10213,490 @@
let widget = hmi_widgets[id];
- let init = widget.init;
-
- if(typeof(init) == "function"){
-
- try {
-
- init.call(widget);
-
- } catch(err) {
-
- console.log(err);
+ widget.do_init();
+
+ });
+
+ };
+
+
+
+ // Open WebSocket to relative "/ws" address
+
+ var has_watchdog = window.location.hash == "#watchdog";
+
+
+
+ var ws_url =
+
+ window.location.href.replace(/^http(s?:\/\/[^\/]*)\/.*$/, 'ws$1/ws')
+
+ + '?mode=' + (has_watchdog ? "watchdog" : "multiclient");
+
+
+
+ var ws = new WebSocket(ws_url);
+
+ ws.binaryType = 'arraybuffer';
+
+
+
+ const dvgetters = {
+
+ INT: (dv,offset) => [dv.getInt16(offset, true), 2],
+
+ BOOL: (dv,offset) => [dv.getInt8(offset, true), 1],
+
+ NODE: (dv,offset) => [dv.getInt8(offset, true), 1],
+
+ REAL: (dv,offset) => [dv.getFloat32(offset, true), 4],
+
+ STRING: (dv, offset) => {
+
+ const size = dv.getInt8(offset);
+
+ return [
+
+ String.fromCharCode.apply(null, new Uint8Array(
+
+ dv.buffer, /* original buffer */
+
+ offset + 1, /* string starts after size*/
+
+ size /* size of string */
+
+ )), size + 1]; /* total increment */
+
+ }
+
+ };
+
+
+
+ // Apply updates recieved through ws.onmessage to subscribed widgets
+
+ function apply_updates() {
+
+ updates.forEach((value, index) => {
+
+ dispatch_value(index, value);
+
+ });
+
+ updates.clear();
+
+ }
+
+
+
+ // Called on requestAnimationFrame, modifies DOM
+
+ var requestAnimationFrameID = null;
+
+ function animate() {
+
+ // Do the page swith if any one pending
+
+ if(current_subscribed_page != current_visible_page){
+
+ switch_visible_page(current_subscribed_page);
+
+ }
+
+
+
+ while(widget = need_cache_apply.pop()){
+
+ widget.apply_cache();
+
+ }
+
+
+
+ if(jumps_need_update) update_jumps();
+
+
+
+ apply_updates();
+
+
+
+ pending_widget_animates.forEach(widget => widget._animate());
+
+ pending_widget_animates = [];
+
+
+
+ requestAnimationFrameID = null;
+
+ }
+
+
+
+ function requestHMIAnimation() {
+
+ if(requestAnimationFrameID == null){
+
+ requestAnimationFrameID = window.requestAnimationFrame(animate);
+
+ }
+
+ }
+
+
+
+ // Message reception handler
+
+ // Hash is verified and HMI values updates resulting from binary parsing
+
+ // are stored until browser can compute next frame, DOM is left untouched
+
+ ws.onmessage = function (evt) {
+
+
+
+ let data = evt.data;
+
+ let dv = new DataView(data);
+
+ let i = 0;
+
+ try {
+
+ for(let hash_int of hmi_hash) {
+
+ if(hash_int != dv.getUint8(i)){
+
+ throw new Error("Hash doesn't match");
+
+ };
+
+ i++;
+
+ };
+
+
+
+ while(i < data.byteLength){
+
+ let index = dv.getUint32(i, true);
+
+ i += 4;
+
+ let iectype = hmitree_types[index];
+
+ if(iectype != undefined){
+
+ let dvgetter = dvgetters[iectype];
+
+ let [value, bytesize] = dvgetter(dv,i);
+
+ updates.set(index, value);
+
+ i += bytesize;
+
+ } else {
+
+ throw new Error("Unknown index "+index);
}
+ };
+
+ // register for rendering on next frame, since there are updates
+
+ requestHMIAnimation();
+
+ } catch(err) {
+
+ // 1003 is for "Unsupported Data"
+
+ // ws.close(1003, err.message);
+
+
+
+ // TODO : remove debug alert ?
+
+ alert("Error : "+err.message+"\nHMI will be reloaded.");
+
+
+
+ // force reload ignoring cache
+
+ location.reload(true);
+
+ }
+
+ };
+
+
+
+ hmi_hash_u8 = new Uint8Array(hmi_hash);
+
+
+
+ function send_blob(data) {
+
+ if(data.length > 0) {
+
+ ws.send(new Blob([hmi_hash_u8].concat(data)));
+
+ };
+
+ };
+
+
+
+ const typedarray_types = {
+
+ INT: (number) => new Int16Array([number]),
+
+ BOOL: (truth) => new Int16Array([truth]),
+
+ NODE: (truth) => new Int16Array([truth]),
+
+ REAL: (number) => new Float32Array([number]),
+
+ STRING: (str) => {
+
+ // beremiz default string max size is 128
+
+ str = str.slice(0,128);
+
+ binary = new Uint8Array(str.length + 1);
+
+ binary[0] = str.length;
+
+ for(let i = 0; i < str.length; i++){
+
+ binary[i+1] = str.charCodeAt(i);
+
}
- if(widget.forced_frequency !== undefined)
-
- widget.frequency = widget.forced_frequency;
+ return binary;
+
+ }
+
+ /* TODO */
+
+ };
+
+
+
+ function send_reset() {
+
+ send_blob(new Uint8Array([1])); /* reset = 1 */
+
+ };
+
+
+
+ var subscriptions = [];
+
+
+
+ function subscribers(index) {
+
+ let entry = subscriptions[index];
+
+ let res;
+
+ if(entry == undefined){
+
+ res = new Set();
+
+ subscriptions[index] = [res,0];
+
+ }else{
+
+ [res, _ign] = entry;
+
+ }
+
+ return res
+
+ }
+
+
+
+ function get_subscription_period(index) {
+
+ let entry = subscriptions[index];
+
+ if(entry == undefined)
+
+ return 0;
+
+ let [_ign, period] = entry;
+
+ return period;
+
+ }
+
+
+
+ function set_subscription_period(index, period) {
+
+ let entry = subscriptions[index];
+
+ if(entry == undefined){
+
+ subscriptions[index] = [new Set(), period];
+
+ } else {
+
+ entry[1] = period;
+
+ }
+
+ }
+
+
+
+ if(has_watchdog){
+
+ // artificially subscribe the watchdog widget to "/heartbeat" hmi variable
+
+ // Since dispatch directly calls change_hmi_value,
+
+ // PLC will periodically send variable at given frequency
+
+ subscribers(heartbeat_index).add({
+
+ /* type: "Watchdog", */
+
+ frequency: 1,
+
+ indexes: [heartbeat_index],
+
+ new_hmi_value: function(index, value, oldval) {
+
+ apply_hmi_value(heartbeat_index, value+1);
+
+ }
});
- };
-
-
-
- // Open WebSocket to relative "/ws" address
-
- var has_watchdog = window.location.hash == "#watchdog";
-
-
-
- var ws_url =
-
- window.location.href.replace(/^http(s?:\/\/[^\/]*)\/.*$/, 'ws$1/ws')
-
- + '?mode=' + (has_watchdog ? "watchdog" : "multiclient");
-
-
-
- var ws = new WebSocket(ws_url);
-
- ws.binaryType = 'arraybuffer';
-
-
-
- const dvgetters = {
-
- INT: (dv,offset) => [dv.getInt16(offset, true), 2],
-
- BOOL: (dv,offset) => [dv.getInt8(offset, true), 1],
-
- NODE: (dv,offset) => [dv.getInt8(offset, true), 1],
-
- REAL: (dv,offset) => [dv.getFloat32(offset, true), 4],
-
- STRING: (dv, offset) => {
-
- const size = dv.getInt8(offset);
-
- return [
-
- String.fromCharCode.apply(null, new Uint8Array(
-
- dv.buffer, /* original buffer */
-
- offset + 1, /* string starts after size*/
-
- size /* size of string */
-
- )), size + 1]; /* total increment */
+ }
+
+
+
+ // subscribe to per instance current page hmi variable
+
+ // PLC must prefix page name with "!" for page switch to happen
+
+ subscribers(current_page_var_index).add({
+
+ frequency: 1,
+
+ indexes: [current_page_var_index],
+
+ new_hmi_value: function(index, value, oldval) {
+
+ if(value.startsWith("!"))
+
+ switch_page(value.slice(1));
}
- };
-
-
-
- // Apply updates recieved through ws.onmessage to subscribed widgets
-
- function apply_updates() {
-
- updates.forEach((value, index) => {
-
- dispatch_value(index, value);
-
- });
-
- updates.clear();
+ });
+
+
+
+ function svg_text_to_multiline(elt) {
+
+ return(Array.prototype.map.call(elt.children, x=>x.textContent).join("\n"));
}
- // Called on requestAnimationFrame, modifies DOM
-
- var requestAnimationFrameID = null;
-
- function animate() {
-
- // Do the page swith if any one pending
-
- if(current_subscribed_page != current_visible_page){
-
- switch_visible_page(current_subscribed_page);
+ function multiline_to_svg_text(elt, str) {
+
+ str.split('\n').map((line,i) => {elt.children[i].textContent = line;});
+
+ }
+
+
+
+ function switch_langnum(langnum) {
+
+ langnum = Math.max(0, Math.min(langs.length - 1, langnum));
+
+
+
+ for (let translation of translations) {
+
+ let [objs, msgs] = translation;
+
+ let msg = msgs[langnum];
+
+ for (let obj of objs) {
+
+ multiline_to_svg_text(obj, msg);
+
+ obj.setAttribute("lang",langnum);
+
+ }
}
-
-
- while(widget = need_cache_apply.pop()){
-
- widget.apply_cache();
+ return langnum;
+
+ }
+
+
+
+ // backup original texts
+
+ for (let translation of translations) {
+
+ let [objs, msgs] = translation;
+
+ msgs.unshift(svg_text_to_multiline(objs[0]));
+
+ }
+
+
+
+ var lang_local_index = hmi_local_index("lang");
+
+ var langcode_local_index = hmi_local_index("lang_code");
+
+ var langname_local_index = hmi_local_index("lang_name");
+
+ subscribers(lang_local_index).add({
+
+ indexes: [lang_local_index],
+
+ new_hmi_value: function(index, value, oldval) {
+
+ let current_lang = switch_langnum(value);
+
+ let [langname,langcode] = langs[current_lang];
+
+ apply_hmi_value(langcode_local_index, langcode);
+
+ apply_hmi_value(langname_local_index, langname);
+
+ switch_page();
}
-
-
- if(jumps_need_update) update_jumps();
-
-
-
- apply_updates();
-
-
-
- pending_widget_animates.forEach(widget => widget._animate());
-
- pending_widget_animates = [];
-
-
-
- requestAnimationFrameID = null;
+ });
+
+
+
+ // returns en_US, fr_FR or en_UK depending on selected language
+
+ function get_current_lang_code(){
+
+ return cache[langcode_local_index];
}
- function requestHMIAnimation() {
-
- if(requestAnimationFrameID == null){
-
- requestAnimationFrameID = window.requestAnimationFrame(animate);
-
- }
-
- }
-
-
-
- // Message reception handler
-
- // Hash is verified and HMI values updates resulting from binary parsing
-
- // are stored until browser can compute next frame, DOM is left untouched
-
- ws.onmessage = function (evt) {
-
-
-
- let data = evt.data;
-
- let dv = new DataView(data);
-
- let i = 0;
-
- try {
-
- for(let hash_int of hmi_hash) {
-
- if(hash_int != dv.getUint8(i)){
-
- throw new Error("Hash doesn't match");
-
- };
-
- i++;
-
- };
-
-
-
- while(i < data.byteLength){
-
- let index = dv.getUint32(i, true);
-
- i += 4;
-
- let iectype = hmitree_types[index];
-
- if(iectype != undefined){
-
- let dvgetter = dvgetters[iectype];
-
- let [value, bytesize] = dvgetter(dv,i);
-
- updates.set(index, value);
-
- i += bytesize;
-
- } else {
-
- throw new Error("Unknown index "+index);
-
- }
-
- };
-
- // register for rendering on next frame, since there are updates
-
- requestHMIAnimation();
-
- } catch(err) {
-
- // 1003 is for "Unsupported Data"
-
- // ws.close(1003, err.message);
-
-
-
- // TODO : remove debug alert ?
-
- alert("Error : "+err.message+"\nHMI will be reloaded.");
-
-
-
- // force reload ignoring cache
-
- location.reload(true);
-
- }
-
- };
-
-
-
- hmi_hash_u8 = new Uint8Array(hmi_hash);
-
-
-
- function send_blob(data) {
-
- if(data.length > 0) {
-
- ws.send(new Blob([hmi_hash_u8].concat(data)));
-
- };
-
- };
-
-
-
- const typedarray_types = {
-
- INT: (number) => new Int16Array([number]),
-
- BOOL: (truth) => new Int16Array([truth]),
-
- NODE: (truth) => new Int16Array([truth]),
-
- REAL: (number) => new Float32Array([number]),
-
- STRING: (str) => {
-
- // beremiz default string max size is 128
-
- str = str.slice(0,128);
-
- binary = new Uint8Array(str.length + 1);
-
- binary[0] = str.length;
-
- for(let i = 0; i < str.length; i++){
-
- binary[i+1] = str.charCodeAt(i);
-
- }
-
- return binary;
-
- }
-
- /* TODO */
-
- };
-
-
-
- function send_reset() {
-
- send_blob(new Uint8Array([1])); /* reset = 1 */
-
- };
-
-
-
- var subscriptions = [];
-
-
-
- function subscribers(index) {
-
- let entry = subscriptions[index];
-
- let res;
-
- if(entry == undefined){
-
- res = new Set();
-
- subscriptions[index] = [res,0];
-
- }else{
-
- [res, _ign] = entry;
-
- }
-
- return res
-
- }
-
-
-
- function get_subscription_period(index) {
-
- let entry = subscriptions[index];
-
- if(entry == undefined)
-
- return 0;
-
- let [_ign, period] = entry;
-
- return period;
-
- }
-
-
-
- function set_subscription_period(index, period) {
-
- let entry = subscriptions[index];
-
- if(entry == undefined){
-
- subscriptions[index] = [new Set(), period];
-
- } else {
-
- entry[1] = period;
-
- }
-
- }
-
-
-
- if(has_watchdog){
-
- // artificially subscribe the watchdog widget to "/heartbeat" hmi variable
-
- // Since dispatch directly calls change_hmi_value,
-
- // PLC will periodically send variable at given frequency
-
- subscribers(heartbeat_index).add({
-
- /* type: "Watchdog", */
-
- frequency: 1,
-
- indexes: [heartbeat_index],
-
- new_hmi_value: function(index, value, oldval) {
-
- apply_hmi_value(heartbeat_index, value+1);
-
- }
-
- });
-
- }
-
-
-
- // subscribe to per instance current page hmi variable
-
- // PLC must prefix page name with "!" for page switch to happen
-
- subscribers(current_page_var_index).add({
-
- frequency: 1,
-
- indexes: [current_page_var_index],
-
- new_hmi_value: function(index, value, oldval) {
-
- if(value.startsWith("!"))
-
- switch_page(value.slice(1));
-
- }
-
- });
-
-
-
- function svg_text_to_multiline(elt) {
-
- return(Array.prototype.map.call(elt.children, x=>x.textContent).join("\n"));
-
- }
-
-
-
- function multiline_to_svg_text(elt, str) {
-
- str.split('\n').map((line,i) => {elt.children[i].textContent = line;});
-
- }
-
-
-
- function switch_langnum(langnum) {
-
- langnum = Math.max(0, Math.min(langs.length - 1, langnum));
-
-
-
- for (let translation of translations) {
-
- let [objs, msgs] = translation;
-
- let msg = msgs[langnum];
-
- for (let obj of objs) {
-
- multiline_to_svg_text(obj, msg);
-
- obj.setAttribute("lang",langnum);
-
- }
-
- }
-
- return langnum;
-
- }
-
-
-
- // backup original texts
-
- for (let translation of translations) {
-
- let [objs, msgs] = translation;
-
- msgs.unshift(svg_text_to_multiline(objs[0]));
-
- }
-
-
-
- var lang_local_index = hmi_local_index("lang");
-
- var langcode_local_index = hmi_local_index("lang_code");
-
- var langname_local_index = hmi_local_index("lang_name");
-
- subscribers(lang_local_index).add({
-
- indexes: [lang_local_index],
-
- new_hmi_value: function(index, value, oldval) {
-
- let current_lang = switch_langnum(value);
-
- let [langname,langcode] = langs[current_lang];
-
- apply_hmi_value(langcode_local_index, langcode);
-
- apply_hmi_value(langname_local_index, langname);
-
- switch_page();
-
- }
-
- });
-
-
-
function setup_lang(){
let current_lang = cache[lang_local_index];