# HG changeset patch # User Edouard Tisserant # Date 1606496794 -3600 # Node ID e5fa1f49f0b9e2c9092f73637ae101f5d02078ab # Parent 1021c6c74dde671a58189137935ef6de157d62c1 SVGHMI: WIP trying to reduce memory usage : use .onclick onstead of SetAttribute, avoid useless closure and object creation when possible, etc. diff -r 1021c6c74dde -r e5fa1f49f0b9 svghmi/gen_index_xhtml.xslt --- a/svghmi/gen_index_xhtml.xslt Wed Nov 25 14:47:47 2020 +0100 +++ b/svghmi/gen_index_xhtml.xslt Fri Nov 27 18:06:34 2020 +0100 @@ -3830,6 +3830,28 @@ </xsl:text> <xsl:text> cache = [0,100,50]; </xsl:text> + <xsl:text> init() { +</xsl:text> + <xsl:text> this.spread_json_data_bound = this.spread_json_data.bind(this); +</xsl:text> + <xsl:text> } +</xsl:text> + <xsl:text> +</xsl:text> + <xsl:text> handle_http_response(response) { +</xsl:text> + <xsl:text> if (!response.ok) { +</xsl:text> + <xsl:text> console.log("HTTP error, status = " + response.status); +</xsl:text> + <xsl:text> } +</xsl:text> + <xsl:text> return response.json(); +</xsl:text> + <xsl:text> } +</xsl:text> + <xsl:text> +</xsl:text> <xsl:text> do_http_request(...opt) { </xsl:text> <xsl:text> const query = { @@ -3864,9 +3886,9 @@ </xsl:text> <xsl:text> fetch(this.args[0], options) </xsl:text> - <xsl:text> .then(res => res.json()) -</xsl:text> - <xsl:text> .then(this.spread_json_data.bind(this)); + <xsl:text> .then(this.handle_http_response) +</xsl:text> + <xsl:text> .then(this.spread_json_data_bound); </xsl:text> <xsl:text> </xsl:text> @@ -3880,11 +3902,21 @@ </xsl:text> <xsl:text> } </xsl:text> - <xsl:text> on_click(evt, ...options) { -</xsl:text> - <xsl:text> this.do_http_request(...options); -</xsl:text> - <xsl:text> } + <xsl:text> make_on_click(...options){ +</xsl:text> + <xsl:text> return function(evt){ +</xsl:text> + <xsl:text> this.do_http_request(...options); +</xsl:text> + <xsl:text> } +</xsl:text> + <xsl:text> } +</xsl:text> + <xsl:text> // on_click(evt, ...options) { +</xsl:text> + <xsl:text> // this.do_http_request(...options); +</xsl:text> + <xsl:text> // } </xsl:text> <xsl:text>} </xsl:text> @@ -4073,11 +4105,11 @@ <xsl:for-each select="$new_expressions/expression[position() > 1][starts-with(@name,'onClick')]"> <xsl:text> id("</xsl:text> <xsl:value-of select="$elt/@id"/> - <xsl:text>").setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt, '</xsl:text> + <xsl:text>").onclick = this.make_on_click('</xsl:text> <xsl:value-of select="@name"/> <xsl:text>', '"+</xsl:text> <xsl:value-of select="@content"/> - <xsl:text>+"')"); + <xsl:text>+"'); </xsl:text> </xsl:for-each> <xsl:apply-templates mode="json_table_elt_render" select="."> @@ -4134,9 +4166,9 @@ </xsl:variable> <xsl:text> id("</xsl:text> <xsl:value-of select="@id"/> - <xsl:text>").setAttribute("style", "</xsl:text> + <xsl:text>").style = "</xsl:text> <xsl:value-of select="@style"/> - <xsl:text>"); + <xsl:text>"; </xsl:text> <xsl:apply-templates mode="json_table_render_except_comments" select="*"> <xsl:with-param name="expressions" select="func:json_expressions(exsl:node-set($new_expressions), $label)"/> @@ -4146,7 +4178,7 @@ </xsl:text> <xsl:text> id("</xsl:text> <xsl:value-of select="$gid"/> - <xsl:text>").setAttribute("style", "display:none"); + <xsl:text>").style = "display:none"; </xsl:text> <xsl:text> } </xsl:text> @@ -5985,7 +6017,7 @@ </xsl:text> <xsl:text>var updates = {}; </xsl:text> - <xsl:text>var need_cache_apply = []; + <xsl:text>var need_cache_apply = []; </xsl:text> <xsl:text> </xsl:text> @@ -6065,7 +6097,7 @@ </xsl:text> <xsl:text> STRING: (dv, offset) => { </xsl:text> - <xsl:text> size = dv.getInt8(offset); + <xsl:text> const size = dv.getInt8(offset); </xsl:text> <xsl:text> return [ </xsl:text> @@ -6247,13 +6279,15 @@ </xsl:text> <xsl:text> </xsl:text> + <xsl:text>hmi_hash_u8 = new Uint8Array(hmi_hash); +</xsl:text> <xsl:text> </xsl:text> <xsl:text>function send_blob(data) { </xsl:text> <xsl:text> if(data.length > 0) { </xsl:text> - <xsl:text> ws.send(new Blob([new Uint8Array(hmi_hash)].concat(data))); + <xsl:text> ws.send(new Blob([hmi_hash_u8].concat(data))); </xsl:text> <xsl:text> }; </xsl:text> @@ -6279,7 +6313,7 @@ </xsl:text> <xsl:text> binary[0] = str.length; </xsl:text> - <xsl:text> for(var i = 0; i < str.length; i++){ + <xsl:text> for(let i = 0; i < str.length; i++){ </xsl:text> <xsl:text> binary[i+1] = str.charCodeAt(i); </xsl:text> @@ -6667,11 +6701,11 @@ </xsl:text> <xsl:text> } </xsl:text> - <xsl:text> var new_offset = page_index == undefined ? 0 : page_index - new_desc.page_index; -</xsl:text> - <xsl:text> -</xsl:text> - <xsl:text> container_id = page_name + (page_index != undefined ? page_index : ""); + <xsl:text> const new_offset = page_index == undefined ? 0 : page_index - new_desc.page_index; +</xsl:text> + <xsl:text> +</xsl:text> + <xsl:text> const container_id = page_name + (page_index != undefined ? page_index : ""); </xsl:text> <xsl:text> </xsl:text> @@ -6805,7 +6839,7 @@ </xsl:text> <xsl:text> </xsl:text> - <xsl:text>var xmlns = "http://www.w3.org/2000/svg"; + <xsl:text>const xmlns = "http://www.w3.org/2000/svg"; </xsl:text> <xsl:text>var edit_callback; </xsl:text> @@ -6831,10 +6865,6 @@ </xsl:text> <xsl:text> </xsl:text> - <xsl:text> -</xsl:text> - <xsl:text> -</xsl:text> <xsl:text>var current_modal; /* TODO stack ?*/ </xsl:text> <xsl:text> diff -r 1021c6c74dde -r e5fa1f49f0b9 svghmi/svghmi.js --- a/svghmi/svghmi.js Wed Nov 25 14:47:47 2020 +0100 +++ b/svghmi/svghmi.js Fri Nov 27 18:06:34 2020 +0100 @@ -1,7 +1,7 @@ // svghmi.js var updates = {}; -var need_cache_apply = []; +var need_cache_apply = []; function dispatch_value(index, value) { @@ -41,7 +41,7 @@ NODE: (dv,offset) => [dv.getInt8(offset, true), 1], REAL: (dv,offset) => [dv.getFloat32(offset, true), 4], STRING: (dv, offset) => { - size = dv.getInt8(offset); + const size = dv.getInt8(offset); return [ String.fromCharCode.apply(null, new Uint8Array( dv.buffer, /* original buffer */ @@ -132,10 +132,11 @@ } }; +hmi_hash_u8 = new Uint8Array(hmi_hash); function send_blob(data) { if(data.length > 0) { - ws.send(new Blob([new Uint8Array(hmi_hash)].concat(data))); + ws.send(new Blob([hmi_hash_u8].concat(data))); }; }; @@ -148,7 +149,7 @@ str = str.slice(0,128); binary = new Uint8Array(str.length + 1); binary[0] = str.length; - for(var i = 0; i < str.length; i++){ + for(let i = 0; i < str.length; i++){ binary[i+1] = str.charCodeAt(i); } return binary; @@ -342,9 +343,9 @@ if(old_desc){ old_desc.widgets.map(([widget,relativeness])=>widget.unsub()); } - var new_offset = page_index == undefined ? 0 : page_index - new_desc.page_index; - - container_id = page_name + (page_index != undefined ? page_index : ""); + const new_offset = page_index == undefined ? 0 : page_index - new_desc.page_index; + + const container_id = page_name + (page_index != undefined ? page_index : ""); new_desc.widgets.map(([widget,relativeness])=>widget.sub(new_offset,relativeness,container_id)); @@ -411,7 +412,7 @@ }; -var xmlns = "http://www.w3.org/2000/svg"; +const xmlns = "http://www.w3.org/2000/svg"; var edit_callback; const localtypes = {"PAGE_LOCAL":null, "HMI_LOCAL":null} function edit_value(path, valuetype, callback, initial, size) { diff -r 1021c6c74dde -r e5fa1f49f0b9 svghmi/widget_jsontable.ysl2 --- a/svghmi/widget_jsontable.ysl2 Wed Nov 25 14:47:47 2020 +0100 +++ b/svghmi/widget_jsontable.ysl2 Fri Nov 27 18:06:34 2020 +0100 @@ -5,6 +5,17 @@ class JsonTableWidget extends Widget{ // arbitrary defaults to avoid missing entries in query cache = [0,100,50]; + init() { + this.spread_json_data_bound = this.spread_json_data.bind(this); + } + + handle_http_response(response) { + if (!response.ok) { + console.log("HTTP error, status = " + response.status); + } + return response.json(); + } + do_http_request(...opt) { const query = { args: this.args, @@ -22,17 +33,22 @@ }; fetch(this.args[0], options) - .then(res => res.json()) - .then(this.spread_json_data.bind(this)); + .then(this.handle_http_response) + .then(this.spread_json_data_bound); } dispatch(value, oldval, index) { this.cache[index] = value; this.do_http_request(); } - on_click(evt, ...options) { - this.do_http_request(...options); - } + make_on_click(...options){ + return function(evt){ + this.do_http_request(...options); + } + } + // on_click(evt, ...options) { + // this.do_http_request(...options); + // } } || @@ -169,7 +185,8 @@ const "elt","."; foreach "$new_expressions/expression[position() > 1][starts-with(@name,'onClick')]" - | id("«$elt/@id»").setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt, '«@name»', '"+«@content»+"')"); + //| id("«$elt/@id»").setAttribute("onclick", "hmi_widgets['"+this.element_id+"'].on_click(evt, '«@name»', '"+«@content»+"')"); + | id("«$elt/@id»").onclick = this.make_on_click('«@name»', '"+«@content»+"'); apply ".", mode="json_table_elt_render" with "expressions", "$new_expressions"; @@ -200,14 +217,16 @@ } // revert hiding in case it did happen before - | id("«@id»").setAttribute("style", "«@style»"); + // | id("«@id»").setAttribute("style", "«@style»"); + | id("«@id»").style = "«@style»"; apply "*", mode="json_table_render_except_comments" { with "expressions", "func:json_expressions(exsl:node-set($new_expressions), $label)"; with "widget_elts", "$widget_elts"; } | } catch(err) { - | id("«$gid»").setAttribute("style", "display:none"); + // | id("«$gid»").setAttribute("style", "display:none"); + | id("«$gid»").style = "display:none"; | } }