# HG changeset patch # User Edouard Tisserant # Date 1586246483 -7200 # Node ID 2670f5c53caf598e29a74c96bc71c8d56d263b82 # Parent 3ee337c8c7690e18d3802035be7a000dad05117f SVGHMI: HMI is not speculating on PLC variable update anymore when sending new variable value. HMI variable cache in JS was changed in advance for more responsive behaviour when updating a HMI tree variable. This was leading to display value different from hmi tree variable in case the expected update did not happen because PLC program did revert it. diff -r 3ee337c8c769 -r 2670f5c53caf svghmi/gen_index_xhtml.xslt --- a/svghmi/gen_index_xhtml.xslt Sat Apr 04 22:32:54 2020 +0200 +++ b/svghmi/gen_index_xhtml.xslt Tue Apr 07 10:01:23 2020 +0200 @@ -984,10 +984,6 @@ let new_val = change_hmi_value(this.indexes[0], opstr); - - this.value_elt.textContent = String(new_val); - - }, on_edit_click: function(opstr) { @@ -1004,10 +1000,6 @@ apply_hmi_value(this.indexes[0], new_val); - - this.value_elt.textContent = String(new_val); - - }, @@ -1567,6 +1559,7 @@ Made with SVGHMI. https://beremiz.org + @@ -2152,7 +2145,9 @@ - cache[index] = value; + // DON'T DO THAT unless read_iterator in svghmi.c modifies wbuf as well, not only rbuf + + // cache[index] = value; }; @@ -2162,6 +2157,56 @@ let old_val = cache[index] + console.log("apply", index, new_val); + + if(new_val != undefined && old_val != new_val){ + + console.log("sending", new_val); + + send_hmi_value(index, new_val); + + } + + return new_val; + + } + + + + function change_hmi_value(index, opstr) { + + let op = opstr[0]; + + let given_val = opstr.slice(1); + + let old_val = cache[index] + + let new_val; + + switch(op){ + + case "=": + + eval("new_val"+opstr); + + break; + + case "+": + + case "-": + + case "*": + + case "/": + + if(old_val != undefined) + + new_val = eval("old_val"+opstr); + + break; + + } + if(new_val != undefined && old_val != new_val) send_hmi_value(index, new_val); @@ -2172,557 +2217,513 @@ - function change_hmi_value(index, opstr) { - - let op = opstr[0]; - - let given_val = opstr.slice(1); - - let old_val = cache[index] - - let new_val; - - switch(op){ - - case "=": - - eval("new_val"+opstr); - - break; - - case "+": - - case "-": - - case "*": - - case "/": - - if(old_val != undefined) - - new_val = eval("old_val"+opstr); - - break; + var current_visible_page; + + var current_subscribed_page; + + var current_page_index; + + + + function prepare_svg() { + + for(let eltid in detachable_elements){ + + let [element,parent] = detachable_elements[eltid]; + + parent.removeChild(element); } - if(new_val != undefined && old_val != new_val) - - send_hmi_value(index, new_val); - - return new_val; + }; + + + + function switch_page(page_name, page_index) { + + if(current_subscribed_page != current_visible_page){ + + /* page switch already going */ + + /* TODO LOG ERROR */ + + return false; + + } + + + + if(page_name == undefined) + + page_name = current_subscribed_page; + + + + + + let old_desc = page_desc[current_subscribed_page]; + + let new_desc = page_desc[page_name]; + + + + if(new_desc == undefined){ + + /* TODO LOG ERROR */ + + return false; + + } + + + + if(page_index == undefined){ + + page_index = new_desc.page_index; + + } + + + + if(old_desc){ + + old_desc.absolute_widgets.map(w=>w.unsub()); + + old_desc.relative_widgets.map(w=>w.unsub()); + + } + + new_desc.absolute_widgets.map(w=>w.sub()); + + var new_offset = page_index == undefined ? 0 : page_index - new_desc.page_index; + + new_desc.relative_widgets.map(w=>w.sub(new_offset)); + + + + update_subscriptions(); + + + + current_subscribed_page = page_name; + + current_page_index = page_index; + + + + jumps_need_update = true; + + + + requestHMIAnimation(); + + + + jump_history.push([page_name, page_index]); + + if(jump_history.length > 42) + + jump_history.shift(); + + + + return true; + + }; + + + + function* chain(a,b){ + + yield* a; + + yield* b; + + }; + + + + function unsubscribe(){ + + /* remove subsribers */ + + for(let index of this.indexes){ + + let idx = index + this.offset; + + subscribers[idx].delete(this); + + } + + this.offset = 0; } - var current_visible_page; - - var current_subscribed_page; - - var current_page_index; - - - - function prepare_svg() { - - for(let eltid in detachable_elements){ - - let [element,parent] = detachable_elements[eltid]; - - parent.removeChild(element); + function subscribe(new_offset=0){ + + /* set the offset because relative */ + + this.offset = new_offset; + + /* add this's subsribers */ + + for(let index of this.indexes){ + + subscribers[index + new_offset].add(this); } + need_cache_apply.push(this); + + } + + + + function foreach_unsubscribe(){ + + for(let item of this.items){ + + for(let widget of item) { + + unsubscribe.call(widget); + + } + + } + + this.offset = 0; + + } + + + + function foreach_widgets_do(new_offset, todo){ + + this.offset = new_offset; + + for(let i = 0; i < this.items.length; i++) { + + let item = this.items[i]; + + let orig_item_index = this.index_pool[i]; + + let item_index = this.index_pool[i+this.item_offset]; + + let item_index_offset = item_index - orig_item_index; + + for(let widget of item) { + + todo.call(widget, new_offset + item_index_offset); + + } + + } + + } + + + + function foreach_subscribe(new_offset=0){ + + foreach_widgets_do.call(this, new_offset, subscribe); + + } + + + + function widget_apply_cache() { + + for(let index of this.indexes){ + + /* dispatch current cache in newly opened page widgets */ + + let realindex = index+this.offset; + + let cached_val = cache[realindex]; + + if(cached_val != undefined) + + dispatch_value_to_widget(this, realindex, cached_val, cached_val); + + } + + } + + + + function foreach_apply_cache() { + + foreach_widgets_do.call(this, this.offset, widget_apply_cache); + + } + + + + function foreach_onclick(opstr, evt) { + + new_item_offset = eval(String(this.item_offset)+opstr) + + if(new_item_offset + this.items.length > this.index_pool.length) { + + if(this.item_offset + this.items.length == this.index_pool.length) + + new_item_offset = 0; + + else + + new_item_offset = this.index_pool.length - this.items.length; + + } else if(new_item_offset < 0) { + + if(this.item_offset == 0) + + new_item_offset = this.index_pool.length - this.items.length; + + else + + new_item_offset = 0; + + } + + this.item_offset = new_item_offset; + + off = this.offset; + + foreach_unsubscribe.call(this); + + foreach_subscribe.call(this,off); + + update_subscriptions(); + + need_cache_apply.push(this); + + jumps_need_update = true; + + requestHMIAnimation(); + + } + + + + + + function switch_visible_page(page_name) { + + + + let old_desc = page_desc[current_visible_page]; + + let new_desc = page_desc[page_name]; + + + + if(old_desc){ + + for(let eltid in old_desc.required_detachables){ + + if(!(eltid in new_desc.required_detachables)){ + + let [element, parent] = old_desc.required_detachables[eltid]; + + parent.removeChild(element); + + } + + } + + for(let eltid in new_desc.required_detachables){ + + if(!(eltid in old_desc.required_detachables)){ + + let [element, parent] = new_desc.required_detachables[eltid]; + + parent.appendChild(element); + + } + + } + + }else{ + + for(let eltid in new_desc.required_detachables){ + + let [element, parent] = new_desc.required_detachables[eltid]; + + parent.appendChild(element); + + } + + } + + + + svg_root.setAttribute('viewBox',new_desc.bbox.join(" ")); + + current_visible_page = page_name; + }; - function switch_page(page_name, page_index) { - - if(current_subscribed_page != current_visible_page){ - - /* page switch already going */ - - /* TODO LOG ERROR */ - - return false; - - } - - - - if(page_name == undefined) - - page_name = current_subscribed_page; - - - - - - let old_desc = page_desc[current_subscribed_page]; - - let new_desc = page_desc[page_name]; - - - - if(new_desc == undefined){ - - /* TODO LOG ERROR */ - - return false; - - } - - - - if(page_index == undefined){ - - page_index = new_desc.page_index; - - } - - - - if(old_desc){ - - old_desc.absolute_widgets.map(w=>w.unsub()); - - old_desc.relative_widgets.map(w=>w.unsub()); - - } - - new_desc.absolute_widgets.map(w=>w.sub()); - - var new_offset = page_index == undefined ? 0 : page_index - new_desc.page_index; - - new_desc.relative_widgets.map(w=>w.sub(new_offset)); - - - - update_subscriptions(); - - - - current_subscribed_page = page_name; - - current_page_index = page_index; - - - - jumps_need_update = true; - - - - requestHMIAnimation(); - - - - jump_history.push([page_name, page_index]); - - if(jump_history.length > 42) - - jump_history.shift(); - - - - return true; + function update_jumps() { + + page_desc[current_visible_page].jumps.map(w=>w.notify_page_change(current_visible_page,current_page_index)); + + jumps_need_update = false; }; - function* chain(a,b){ - - yield* a; - - yield* b; + + + // Once connection established + + ws.onopen = function (evt) { + + init_widgets(); + + send_reset(); + + // show main page + + prepare_svg(); + + switch_page(default_page); }; - function unsubscribe(){ - - /* remove subsribers */ - - for(let index of this.indexes){ - - let idx = index + this.offset; - - subscribers[idx].delete(this); - - } - - this.offset = 0; - - } - - - - function subscribe(new_offset=0){ - - /* set the offset because relative */ - - this.offset = new_offset; - - /* add this's subsribers */ - - for(let index of this.indexes){ - - subscribers[index + new_offset].add(this); - - } - - need_cache_apply.push(this); - - } - - - - function foreach_unsubscribe(){ - - for(let item of this.items){ - - for(let widget of item) { - - unsubscribe.call(widget); - - } - - } - - this.offset = 0; - - } - - - - function foreach_widgets_do(new_offset, todo){ - - this.offset = new_offset; - - for(let i = 0; i < this.items.length; i++) { - - let item = this.items[i]; - - let orig_item_index = this.index_pool[i]; - - let item_index = this.index_pool[i+this.item_offset]; - - let item_index_offset = item_index - orig_item_index; - - for(let widget of item) { - - todo.call(widget, new_offset + item_index_offset); - - } - - } - - } - - - - function foreach_subscribe(new_offset=0){ - - foreach_widgets_do.call(this, new_offset, subscribe); - - } - - - - function widget_apply_cache() { - - for(let index of this.indexes){ - - /* dispatch current cache in newly opened page widgets */ - - let realindex = index+this.offset; - - let cached_val = cache[realindex]; - - if(cached_val != undefined) - - dispatch_value_to_widget(this, realindex, cached_val, cached_val); - - } - - } - - - - function foreach_apply_cache() { - - foreach_widgets_do.call(this, this.offset, widget_apply_cache); - - } - - - - function foreach_onclick(opstr, evt) { - - new_item_offset = eval(String(this.item_offset)+opstr) - - if(new_item_offset + this.items.length > this.index_pool.length) { - - if(this.item_offset + this.items.length == this.index_pool.length) - - new_item_offset = 0; - - else - - new_item_offset = this.index_pool.length - this.items.length; - - } else if(new_item_offset < 0) { - - if(this.item_offset == 0) - - new_item_offset = this.index_pool.length - this.items.length; - - else - - new_item_offset = 0; - - } - - this.item_offset = new_item_offset; - - off = this.offset; - - foreach_unsubscribe.call(this); - - foreach_subscribe.call(this,off); - - update_subscriptions(); - - need_cache_apply.push(this); - - jumps_need_update = true; - - requestHMIAnimation(); - - } - - - - - - function switch_visible_page(page_name) { - - - - let old_desc = page_desc[current_visible_page]; - - let new_desc = page_desc[page_name]; - - - - if(old_desc){ - - for(let eltid in old_desc.required_detachables){ - - if(!(eltid in new_desc.required_detachables)){ - - let [element, parent] = old_desc.required_detachables[eltid]; - - parent.removeChild(element); - - } - - } - - for(let eltid in new_desc.required_detachables){ - - if(!(eltid in old_desc.required_detachables)){ - - let [element, parent] = new_desc.required_detachables[eltid]; - - parent.appendChild(element); - - } - - } - - }else{ - - for(let eltid in new_desc.required_detachables){ - - let [element, parent] = new_desc.required_detachables[eltid]; - - parent.appendChild(element); - - } - - } - - - - svg_root.setAttribute('viewBox',new_desc.bbox.join(" ")); - - current_visible_page = page_name; + ws.onclose = function (evt) { + + // TODO : add visible notification while waiting for reload + + console.log("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+" Reload in 10s."); + + // TODO : re-enable auto reload when not in debug + + //window.setTimeout(() => location.reload(true), 10000); + + alert("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+"."); + + }; - function update_jumps() { - - page_desc[current_visible_page].jumps.map(w=>w.notify_page_change(current_visible_page,current_page_index)); - - jumps_need_update = false; + var xmlns = "http://www.w3.org/2000/svg"; + + var edit_callback; + + function edit_value(path, valuetype, callback, initial) { + + + + let [keypadid, xcoord, ycoord] = keypads[valuetype]; + + console.log('XXX TODO : Edit value', path, valuetype, callback, initial, keypadid); + + edit_callback = callback; + + let widget = hmi_widgets[keypadid]; + + widget.start_edit(path, valuetype, callback, initial); }; - - - // Once connection established - - ws.onopen = function (evt) { - - init_widgets(); - - send_reset(); - - // show main page - - prepare_svg(); - - switch_page(default_page); + var current_modal; /* TODO stack ?*/ + + + + function show_modal() { + + let [element, parent] = detachable_elements[this.element.id]; + + + + tmpgrp = document.createElementNS(xmlns,"g"); + + tmpgrpattr = document.createAttribute("transform"); + + + + let [xcoord,ycoord] = this.coordinates; + + let [xdest,ydest] = page_desc[current_visible_page].bbox; + + tmpgrpattr.value = "translate("+String(xdest-xcoord)+","+String(ydest-ycoord)+")"; + + tmpgrp.setAttributeNode(tmpgrpattr); + + + + tmpgrp.appendChild(element); + + parent.appendChild(tmpgrp); + + + + current_modal = [this.element.id, tmpgrp]; }; - ws.onclose = function (evt) { - - // TODO : add visible notification while waiting for reload - - console.log("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+" Reload in 10s."); - - // TODO : re-enable auto reload when not in debug - - //window.setTimeout(() => location.reload(true), 10000); - - alert("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+"."); - - + function end_modal() { + + let [eltid, tmpgrp] = current_modal; + + let [element, parent] = detachable_elements[this.element.id]; + + + + parent.removeChild(tmpgrp); + + + + current_modal = undefined; }; - var xmlns = "http://www.w3.org/2000/svg"; - - var edit_callback; - - function edit_value(path, valuetype, callback, initial) { - - - - let [keypadid, xcoord, ycoord] = keypads[valuetype]; - - console.log('XXX TODO : Edit value', path, valuetype, callback, initial, keypadid); - - edit_callback = callback; - - let widget = hmi_widgets[keypadid]; - - widget.start_edit(path, valuetype, callback, initial); + function widget_active_activable(eltsub) { + + if(eltsub.inactive_style === undefined) + + eltsub.inactive_style = eltsub.inactive.getAttribute("style"); + + eltsub.inactive.setAttribute("style", "display:none"); + + if(eltsub.active_style !== undefined) + + eltsub.active.setAttribute("style", eltsub.active_style); + + console.log("active", eltsub); }; - - - var current_modal; /* TODO stack ?*/ - - - - function show_modal() { - - let [element, parent] = detachable_elements[this.element.id]; - - - - tmpgrp = document.createElementNS(xmlns,"g"); - - tmpgrpattr = document.createAttribute("transform"); - - - - let [xcoord,ycoord] = this.coordinates; - - let [xdest,ydest] = page_desc[current_visible_page].bbox; - - tmpgrpattr.value = "translate("+String(xdest-xcoord)+","+String(ydest-ycoord)+")"; - - tmpgrp.setAttributeNode(tmpgrpattr); - - - - tmpgrp.appendChild(element); - - parent.appendChild(tmpgrp); - - - - current_modal = [this.element.id, tmpgrp]; + function widget_inactive_activable(eltsub) { + + if(eltsub.active_style === undefined) + + eltsub.active_style = eltsub.active.getAttribute("style"); + + eltsub.active.setAttribute("style", "display:none"); + + if(eltsub.inactive_style !== undefined) + + eltsub.inactive.setAttribute("style", eltsub.inactive_style); + + console.log("inactive", eltsub); }; - - - function end_modal() { - - let [eltid, tmpgrp] = current_modal; - - let [element, parent] = detachable_elements[this.element.id]; - - - - parent.removeChild(tmpgrp); - - - - current_modal = undefined; - - }; - - - - function widget_active_activable(eltsub) { - - if(eltsub.inactive_style === undefined) - - eltsub.inactive_style = eltsub.inactive.getAttribute("style"); - - eltsub.inactive.setAttribute("style", "display:none"); - - if(eltsub.active_style !== undefined) - - eltsub.active.setAttribute("style", eltsub.active_style); - - console.log("active", eltsub); - - }; - - function widget_inactive_activable(eltsub) { - - if(eltsub.active_style === undefined) - - eltsub.active_style = eltsub.active.getAttribute("style"); - - eltsub.active.setAttribute("style", "display:none"); - - if(eltsub.inactive_style !== undefined) - - eltsub.inactive.setAttribute("style", eltsub.inactive_style); - - console.log("inactive", eltsub); - - }; - diff -r 3ee337c8c769 -r 2670f5c53caf svghmi/svghmi.js --- a/svghmi/svghmi.js Sat Apr 04 22:32:54 2020 +0200 +++ b/svghmi/svghmi.js Tue Apr 07 10:01:23 2020 +0200 @@ -236,7 +236,8 @@ new Uint32Array([index]), tobinary(value)]); - cache[index] = value; + // DON'T DO THAT unless read_iterator in svghmi.c modifies wbuf as well, not only rbuf + // cache[index] = value; }; function apply_hmi_value(index, new_val) { diff -r 3ee337c8c769 -r 2670f5c53caf svghmi/widget_input.ysl2 --- a/svghmi/widget_input.ysl2 Sat Apr 04 22:32:54 2020 +0200 +++ b/svghmi/widget_input.ysl2 Tue Apr 07 10:01:23 2020 +0200 @@ -27,10 +27,10 @@ | }, | on_op_click: function(opstr) { | let new_val = change_hmi_value(this.indexes[0], opstr); - if "$have_value"{ - | this.value_elt.textContent = String(new_val); - /* TODO gray out value until refreshed */ - } + // if "$have_value"{ + // | this.value_elt.textContent = String(new_val); + // /* TODO gray out value until refreshed */ + // } | }, | on_edit_click: function(opstr) { | edit_value("«path/@value»", "«path/@type»", this, this.last_val); @@ -38,9 +38,9 @@ | edit_callback: function(new_val) { | apply_hmi_value(this.indexes[0], new_val); - if "$have_value"{ - | this.value_elt.textContent = String(new_val); - /* TODO gray out value until refreshed */ - } + // if "$have_value"{ + // | this.value_elt.textContent = String(new_val); + // /* TODO gray out value until refreshed */ + // } | }, }