HGKeeper

beremiz

SVGHMI : drop ECMA script's arrow function, 'let' scoped declaration for compatibility with older browsers.
SVGHMI_compat
2019-11-07, Edouard Tisserant

8cfcb4580dd2

Parents 68ac5bf43525
Children 10f7e3aa6e0c

SVGHMI : drop ECMA script's arrow function, 'let' scoped declaration for compatibility with older browsers.

3 files changed, 133 insertions(+), 109 deletions(-)

+71 -55

svghmi/gen_index_xhtml.xslt

+9 -7

svghmi/gen_index_xhtml.ysl2

+53 -47

svghmi/svghmi.js

~~--- a/svghmi/gen_index_xhtml.xslt Thu Nov 07 16:40:48 2019 +0100~~

+++ b/svghmi/gen_index_xhtml.xslt Thu Nov 07 16:44:40 2019 +0100

@@ -340,13 +340,13 @@

</xsl:text>

<xsl:text>

</xsl:text>

~~- <xsl:text>var cache = hmitree_types.map(_ignored => undefined);~~

+ <xsl:text>var cache = hmitree_types.map(function(_ignored) {return undefined});

</xsl:text>

<xsl:text>

</xsl:text>

<xsl:text>function dispatch_value_to_widget(widget, index, value, oldval) {

</xsl:text>

~~- <xsl:text> let idxidx = widget.indexes.indexOf(index);~~

+ <xsl:text> var idxidx = widget.indexes.indexOf(index);

</xsl:text>

<xsl:text> if(idxidx == -1){

</xsl:text>

@@ -354,7 +354,7 @@

</xsl:text>

<xsl:text> }

</xsl:text>

~~- <xsl:text> let d = widget.dispatch;~~

+ <xsl:text> var d = widget.dispatch;

</xsl:text>

<xsl:text> if(typeof(d) == "function" && idxidx == 0){

</xsl:text>

@@ -378,23 +378,25 @@

</xsl:text>

<xsl:text>function dispatch_value(index, value) {

</xsl:text>

~~- <xsl:text> let widgets = subscribers[index];~~

+ <xsl:text> var destwidgets = subscribers[index];

</xsl:text>

<xsl:text>

</xsl:text>

~~- <xsl:text> let oldval = cache[index];~~

+ <xsl:text> var oldval = cache[index];

</xsl:text>

<xsl:text> cache[index] = value;

</xsl:text>

<xsl:text>

</xsl:text>

~~- <xsl:text> if(widgets.size > 0) {~~

+ <xsl:text> if(destwidgets.size > 0) {

</xsl:text>

~~- <xsl:text> for(let widget of widgets){~~

+ <xsl:text>

+</xsl:text>

+ <xsl:text> destwidgets.forEach(function(widget) {

</xsl:text>

<xsl:text> dispatch_value_to_widget(widget, index, value, oldval);

</xsl:text>

~~- <xsl:text> }~~

+ <xsl:text> });

</xsl:text>

<xsl:text> }

</xsl:text>

@@ -406,9 +408,9 @@

</xsl:text>

<xsl:text> Object.keys(hmi_widgets).forEach(function(id) {

</xsl:text>

~~- <xsl:text> let widget = hmi_widgets[id];~~

+ <xsl:text> var widget = hmi_widgets[id];

</xsl:text>

~~- <xsl:text> let init = widget.init;~~

+ <xsl:text> var init = widget.init;

</xsl:text>

<xsl:text> if(typeof(init) == "function"){

</xsl:text>

@@ -448,15 +450,15 @@

</xsl:text>

<xsl:text>

</xsl:text>

~~- <xsl:text> let data = evt.data;~~

+ <xsl:text> var data = evt.data;

</xsl:text>

~~- <xsl:text> let dv = new DataView(data);~~

+ <xsl:text> var dv = new DataView(data);

</xsl:text>

~~- <xsl:text> let i = 0;~~

+ <xsl:text> var i = 0;

</xsl:text>

<xsl:text> try {

</xsl:text>

~~- <xsl:text> for(let hash_int of hmi_hash) {~~

+ <xsl:text> hmi_hash.forEach(function(hash_int) {

</xsl:text>

<xsl:text> if(hash_int != dv.getUint8(i)){

</xsl:text>

@@ -466,23 +468,27 @@

</xsl:text>

<xsl:text> i++;

</xsl:text>

~~- <xsl:text> };~~

+ <xsl:text> });

</xsl:text>

<xsl:text>

</xsl:text>

<xsl:text> while(i < data.byteLength){

</xsl:text>

~~- <xsl:text> let index = dv.getUint32(i, true);~~

+ <xsl:text> var index = dv.getUint32(i, true);

</xsl:text>

<xsl:text> i += 4;

</xsl:text>

~~- <xsl:text> let iectype = hmitree_types[index];~~

+ <xsl:text> var iectype = hmitree_types[index];

</xsl:text>

<xsl:text> if(iectype != undefined){

</xsl:text>

~~- <xsl:text> let [dvgetter, bytesize] = dvgetters[iectype];~~

+ <xsl:text> var _dvgetter = dvgetters[iectype];

+</xsl:text>

+ <xsl:text> var dvgetter = _dvgetter[0];

</xsl:text>

~~- <xsl:text> let value = dvgetter.call(dv,i,true);~~

+ <xsl:text> var bytesize = _dvgetter[1];

+</xsl:text>

+ <xsl:text> var value = dvgetter.call(dv,i,true);

</xsl:text>

<xsl:text> dispatch_value(index, value);

</xsl:text>

@@ -558,7 +564,7 @@

</xsl:text>

<xsl:text>// hmitree indexed array of integers

</xsl:text>

~~- <xsl:text>var subscriptions = hmitree_types.map(_ignored => 0);~~

+ <xsl:text>var subscriptions = hmitree_types.map(function(_ignored) {return 0});

</xsl:text>

<xsl:text>

</xsl:text>

@@ -566,38 +572,42 @@

</xsl:text>

<xsl:text>// hmitree indexed array of Sets of widgets objects

</xsl:text>

~~- <xsl:text>var subscribers = hmitree_types.map(_ignored => new Set());~~

+ <xsl:text>var subscribers = hmitree_types.map(function(_ignored) {return new Set()});

</xsl:text>

<xsl:text>

</xsl:text>

<xsl:text>function update_subscriptions() {

</xsl:text>

~~- <xsl:text> let delta = [];~~

+ <xsl:text> var delta = [];

+</xsl:text>

+ <xsl:text> var index;

</xsl:text>

~~- <xsl:text> for(let index = 0; index < subscribers.length; index++){~~

+ <xsl:text> for(index = 0; index < subscribers.length; index++){

</xsl:text>

~~- <xsl:text> let widgets = subscribers[index];~~

+ <xsl:text> var subscribed = subscribers[index];

</xsl:text>

<xsl:text>

</xsl:text>

<xsl:text> // periods are in ms

</xsl:text>

~~- <xsl:text> let previous_period = subscriptions[index];~~

+ <xsl:text> var previous_period = subscriptions[index];

</xsl:text>

<xsl:text>

</xsl:text>

~~- <xsl:text> let new_period = 0;~~

+ <xsl:text> var new_period = 0;

</xsl:text>

~~- <xsl:text> if(widgets.size > 0) {~~

+ <xsl:text> if(subscribed.size > 0) {

</xsl:text>

~~- <xsl:text> let maxfreq = 0;~~

+ <xsl:text> var maxfreq = 0;

</xsl:text>

~~- <xsl:text> for(let widget of widgets)~~

+ <xsl:text> subscribed.forEach(function(widget) {

</xsl:text>

<xsl:text> if(maxfreq < widget.frequency)

</xsl:text>

<xsl:text> maxfreq = widget.frequency;

</xsl:text>

+ <xsl:text> });

+</xsl:text>

<xsl:text>

</xsl:text>

<xsl:text> if(maxfreq != 0)

@@ -632,9 +642,9 @@

</xsl:text>

<xsl:text>function send_hmi_value(index, value) {

</xsl:text>

~~- <xsl:text> let iectype = hmitree_types[index];~~

+ <xsl:text> var iectype = hmitree_types[index];

</xsl:text>

~~- <xsl:text> let jstype = typedarray_types[iectype];~~

+ <xsl:text> var jstype = typedarray_types[iectype];

</xsl:text>

<xsl:text> send_blob([

</xsl:text>

@@ -654,13 +664,13 @@

</xsl:text>

<xsl:text>function change_hmi_value(index, opstr) {

</xsl:text>

~~- <xsl:text> let op = opstr[0];~~

+ <xsl:text> var op = opstr[0];

</xsl:text>

~~- <xsl:text> let given_val = opstr.slice(1);~~

+ <xsl:text> var given_val = opstr.slice(1);

</xsl:text>

~~- <xsl:text> let old_val = cache[index]~~

+ <xsl:text> var old_val = cache[index]

</xsl:text>

~~- <xsl:text> let new_val;~~

+ <xsl:text> var new_val;

</xsl:text>

<xsl:text> switch(op){

</xsl:text>

@@ -702,9 +712,9 @@

</xsl:text>

<xsl:text>function switch_page(page_name) {

</xsl:text>

~~- <xsl:text> let old_desc = page_desc[current_page];~~

+ <xsl:text> var old_desc = page_desc[current_page];

</xsl:text>

~~- <xsl:text> let new_desc = page_desc[page_name];~~

+ <xsl:text> var new_desc = page_desc[page_name];

</xsl:text>

<xsl:text> /* TODO hide / show widgets */

</xsl:text>

@@ -712,13 +722,17 @@

</xsl:text>

<xsl:text> /* remove subsribers of previous page if any */

</xsl:text>

~~- <xsl:text> if(old_desc) for(let widget of old_desc.widgets){~~

+ <xsl:text> if(old_desc) {

</xsl:text>

~~- <xsl:text> for(let index of widget.indexes){~~

+ <xsl:text> old_desc.widgets.forEach(function(widget) {

+</xsl:text>

+ <xsl:text> widget.indexes.forEach(function(index) {

</xsl:text>

~~- <xsl:text> subscribers[index].delete(widget);~~

+ <xsl:text> subscribers[index].delete(widget);

</xsl:text>

~~- <xsl:text> }~~

+ <xsl:text> });

+</xsl:text>

+ <xsl:text> });

</xsl:text>

<xsl:text> }

</xsl:text>

@@ -728,23 +742,21 @@

</xsl:text>

<xsl:text> /* add new subsribers if any */

</xsl:text>

~~- <xsl:text> for(let widget of new_desc.widgets){~~

+ <xsl:text> new_desc.widgets.forEach(function(widget) {

</xsl:text>

~~- <xsl:text> for(let index of widget.indexes){~~

+ <xsl:text> widget.indexes.forEach(function(index) {

</xsl:text>

<xsl:text> subscribers[index].add(widget);

</xsl:text>

~~- <xsl:text> let cached_val = cache[index];~~

+ <xsl:text> var cached_val = cache[index];

</xsl:text>

<xsl:text> if(cached_val != undefined)

</xsl:text>

<xsl:text> dispatch_value_to_widget(widget, index, cached_val, cached_val);

</xsl:text>

~~- <xsl:text>~~

+ <xsl:text> });

</xsl:text>

~~- <xsl:text> }~~

~~-</xsl:text>~~

~~- <xsl:text> }~~

+ <xsl:text> });

</xsl:text>

<xsl:text> svg_root.setAttribute('viewBox',new_desc.bbox.join(" "));

</xsl:text>

@@ -854,11 +866,11 @@

</xsl:text>

<xsl:text> this.value_elt.textContent = String(value);

</xsl:text>

~~- <xsl:text> let [min,max,totallength] = this.range;~~

+ <xsl:text> var [min,max,totallength] = this.range;

</xsl:text>

~~- <xsl:text> let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min)));~~

+ <xsl:text> var length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min)));

</xsl:text>

~~- <xsl:text> let tip = this.range_elt.getPointAtLength(length);~~

+ <xsl:text> var tip = this.range_elt.getPointAtLength(length);

</xsl:text>

<xsl:text> this.needle_elt.setAttribute('d', "M "+this.origin.x+","+this.origin.y+" "+tip.x+","+tip.y);

</xsl:text>

@@ -896,6 +908,8 @@

<xsl:variable name="edit_elt_id" select="$hmi_element/*[@inkscape:label='edit'][1]/@id"/>

<xsl:text>init: function() {

</xsl:text>

+ <xsl:text> var that = this;

+</xsl:text>

<xsl:if test="$edit_elt_id">

<xsl:text> document.getElementById("</xsl:text>

<xsl:value-of select="$edit_elt_id"/>

@@ -903,7 +917,7 @@

</xsl:text>

<xsl:text> "click",

</xsl:text>

~~- <xsl:text> evt => alert('XXX TODO : Edit value'));~~

+ <xsl:text> function(evt) {alert('XXX TODO : Edit value');});

</xsl:text>

</xsl:if>

<xsl:for-each select="$hmi_element/*[regexp:test(@inkscape:label,'^[=+\-][0-9]+')]">

@@ -913,11 +927,11 @@

</xsl:text>

<xsl:text> "click",

</xsl:text>

~~- <xsl:text> evt => {let new_val = change_hmi_value(this.indexes[0], "</xsl:text>~~

+ <xsl:text> function(evt) {var new_val = change_hmi_value(that.indexes[0], "</xsl:text>

<xsl:value-of select="@inkscape:label"/>

<xsl:text>");

</xsl:text>

~~- <xsl:text> this.value_elt.textContent = String(new_val);});~~

+ <xsl:text> that.value_elt.textContent = String(new_val);});

</xsl:text>

</xsl:for-each>

<xsl:text>},

@@ -935,11 +949,13 @@

<xsl:template mode="widget_defs" match="widget[@type='Jump']">

<xsl:text>init: function() {

</xsl:text>

+ <xsl:text> var that = this;

+</xsl:text>

<xsl:text> this.element.addEventListener(

</xsl:text>

<xsl:text> "click",

</xsl:text>

~~- <xsl:text> evt => switch_page(this.args[0]));~~

+ <xsl:text> function(evt) {switch_page(that.args[0]);});

</xsl:text>

<xsl:text>},

</xsl:text>

~~--- a/svghmi/gen_index_xhtml.ysl2 Thu Nov 07 16:40:48 2019 +0100~~

+++ b/svghmi/gen_index_xhtml.ysl2 Thu Nov 07 16:44:40 2019 +0100

@@ -358,9 +358,9 @@

labels("value min max needle range");

| dispatch: function(value) {

| this.value_elt.textContent = String(value);

~~- | let [min,max,totallength] = this.range;~~

~~- | let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min)));~~

~~- | let tip = this.range_elt.getPointAtLength(length);~~

+ | var [min,max,totallength] = this.range;

+ | var length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min)));

+ | var tip = this.range_elt.getPointAtLength(length);

// TODO : deal with transformations between needle and range

| this.needle_elt.setAttribute('d', "M "+this.origin.x+","+this.origin.y+" "+tip.x+","+tip.y);

| },

@@ -381,16 +381,17 @@

| },

const "edit_elt_id","$hmi_element/*[@inkscape:label='edit'][1]/@id";

| init: function() {

+ | var that = this;

if "$edit_elt_id" {

| document.getElementById("«$edit_elt_id»").addEventListener(

| "click",

~~- | evt => alert('XXX TODO : Edit value'));~~

+ | function(evt) {alert('XXX TODO : Edit value');});

}

foreach "$hmi_element/*[regexp:test(@inkscape:label,'^[=+\-][0-9]+')]" {

| document.getElementById("«@id»").addEventListener(

| "click",

~~- | evt => {let new_val = change_hmi_value(this.indexes[0], "«@inkscape:label»");~~

~~- | this.value_elt.textContent = String(new_val);});~~

+ | function(evt) {var new_val = change_hmi_value(that.indexes[0], "«@inkscape:label»");

+ | that.value_elt.textContent = String(new_val);});

/* could gray out value until refreshed */

}

| },

@@ -405,9 +406,10 @@

}

template "widget[@type='Jump']", mode="widget_defs" {

| init: function() {

+ | var that = this;

| this.element.addEventListener(

| "click",

~~- | evt => switch_page(this.args[0]));~~

+ | function(evt) {switch_page(that.args[0]);});

| },

}

~~--- a/svghmi/svghmi.js Thu Nov 07 16:40:48 2019 +0100~~

+++ b/svghmi/svghmi.js Thu Nov 07 16:44:40 2019 +0100

@@ -1,13 +1,13 @@

// svghmi.js

~~-var cache = hmitree_types.map(_ignored => undefined);~~

+var cache = hmitree_types.map(function(_ignored) {return undefined});

function dispatch_value_to_widget(widget, index, value, oldval) {

~~- let idxidx = widget.indexes.indexOf(index);~~

+ var idxidx = widget.indexes.indexOf(index);

if(idxidx == -1){

throw new Error("Dispatching to widget not interested, should not happen.");

}

~~- let d = widget.dispatch;~~

+ var d = widget.dispatch;

if(typeof(d) == "function" && idxidx == 0){

return d.call(widget, value, oldval);

}else if(typeof(d) == "object" && d.length >= idxidx){

@@ -19,22 +19,23 @@

}

function dispatch_value(index, value) {

~~- let widgets = subscribers[index];~~

+ var destwidgets = subscribers[index];

~~- let oldval = cache[index];~~

+ var oldval = cache[index];

cache[index] = value;

~~- if(widgets.size > 0) {~~

~~- for(let widget of widgets){~~

+ if(destwidgets.size > 0) {

+ destwidgets.forEach(function(widget) {

dispatch_value_to_widget(widget, index, value, oldval);

~~- }~~

+ });

}

};

function init_widgets() {

Object.keys(hmi_widgets).forEach(function(id) {

~~- let widget = hmi_widgets[id];~~

~~- let init = widget.init;~~

+ var widget = hmi_widgets[id];

+ var init = widget.init;

if(typeof(init) == "function"){

return init.call(widget);

}

@@ -54,24 +55,26 @@

// Register message reception handler

ws.onmessage = function (evt) {

~~- let data = evt.data;~~

~~- let dv = new DataView(data);~~

~~- let i = 0;~~

+ var data = evt.data;

+ var dv = new DataView(data);

+ var i = 0;

try {

~~- for(let hash_int of hmi_hash) {~~

+ hmi_hash.forEach(function(hash_int) {

if(hash_int != dv.getUint8(i)){

throw new Error("Hash doesn't match");

};

i++;

~~- };~~

+ });

while(i < data.byteLength){

~~- let index = dv.getUint32(i, true);~~

+ var index = dv.getUint32(i, true);

i += 4;

~~- let iectype = hmitree_types[index];~~

+ var iectype = hmitree_types[index];

if(iectype != undefined){

~~- let [dvgetter, bytesize] = dvgetters[iectype];~~

~~- let value = dvgetter.call(dv,i,true);~~

+ var _dvgetter = dvgetters[iectype];

+ var dvgetter = _dvgetter[0];

+ var bytesize = _dvgetter[1];

+ var value = dvgetter.call(dv,i,true);

dispatch_value(index, value);

i += bytesize;

} else {

@@ -109,26 +112,28 @@

// subscription state, as it should be in hmi server

// hmitree indexed array of integers

~~-var subscriptions = hmitree_types.map(_ignored => 0);~~

+var subscriptions = hmitree_types.map(function(_ignored) {return 0});

// subscription state as needed by widget now

// hmitree indexed array of Sets of widgets objects

~~-var subscribers = hmitree_types.map(_ignored => new Set());~~

+var subscribers = hmitree_types.map(function(_ignored) {return new Set()});

function update_subscriptions() {

~~- let delta = [];~~

~~- for(let index = 0; index < subscribers.length; index++){~~

~~- let widgets = subscribers[index];~~

+ var delta = [];

+ var index;

+ for(index = 0; index < subscribers.length; index++){

+ var subscribed = subscribers[index];

// periods are in ms

~~- let previous_period = subscriptions[index];~~

+ var previous_period = subscriptions[index];

~~- let new_period = 0;~~

~~- if(widgets.size > 0) {~~

~~- let maxfreq = 0;~~

~~- for(let widget of widgets)~~

+ var new_period = 0;

+ if(subscribed.size > 0) {

+ var maxfreq = 0;

+ subscribed.forEach(function(widget) {

if(maxfreq < widget.frequency)

maxfreq = widget.frequency;

+ });

if(maxfreq != 0)

new_period = 1000/maxfreq;

@@ -146,8 +151,8 @@

};

function send_hmi_value(index, value) {

~~- let iectype = hmitree_types[index];~~

~~- let jstype = typedarray_types[iectype];~~

+ var iectype = hmitree_types[index];

+ var jstype = typedarray_types[iectype];

send_blob([

new Uint8Array([0]), /* setval = 0 */

new Uint32Array([index]),

@@ -157,10 +162,10 @@

};

function change_hmi_value(index, opstr) {

~~- let op = opstr[0];~~

~~- let given_val = opstr.slice(1);~~

~~- let old_val = cache[index]~~

~~- let new_val;~~

+ var op = opstr[0];

+ var given_val = opstr.slice(1);

+ var old_val = cache[index]

+ var new_val;

switch(op){

case "=":

eval("new_val"+opstr);

@@ -181,28 +186,29 @@

var current_page;

function switch_page(page_name) {

~~- let old_desc = page_desc[current_page];~~

~~- let new_desc = page_desc[page_name];~~

+ var old_desc = page_desc[current_page];

+ var new_desc = page_desc[page_name];

/* TODO hide / show widgets */

/* remove subsribers of previous page if any */

~~- if(old_desc) for(let widget of old_desc.widgets){~~

~~- for(let index of widget.indexes){~~

~~- subscribers[index].delete(widget);~~

~~- }~~

+ if(old_desc) {

+ old_desc.widgets.forEach(function(widget) {

+ widget.indexes.forEach(function(index) {

+ subscribers[index].delete(widget);

+ });

}

if(new_desc) {

/* add new subsribers if any */

~~- for(let widget of new_desc.widgets){~~

~~- for(let index of widget.indexes){~~

+ new_desc.widgets.forEach(function(widget) {

+ widget.indexes.forEach(function(index) {

subscribers[index].add(widget);

~~- let cached_val = cache[index];~~

+ var cached_val = cache[index];

if(cached_val != undefined)

dispatch_value_to_widget(widget, index, cached_val, cached_val);

~~- }~~

+ });

svg_root.setAttribute('viewBox',new_desc.bbox.join(" "));

// TODO dispatch current cache in newly opened page

}