Edouard@2753: Edouard@2854: Edouard@2798: Edouard@2879: Edouard@2877: Edouard@2790: Edouard@2790: Edouard@2790: HMI_ROOT Edouard@2790: Edouard@2790: Edouard@2790: HMI_PLC_STATUS Edouard@2790: Edouard@2790: Edouard@2790: HMI_CURRENT_PAGE Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2867: Edouard@2867: Edouard@2867: Edouard@2867: Edouard@2791: Edouard@2790: Edouard@2791: Edouard@2790: Edouard@2791: Edouard@2791: Edouard@2791: Edouard@2791: Edouard@2791: Edouard@2791: Edouard@2791: Edouard@2791: / Edouard@2791: Edouard@2791: Edouard@2791: Edouard@2791: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2791: Edouard@2791: Edouard@2791: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2867: Edouard@2867: Edouard@2867: Edouard@2867: Edouard@2867: Edouard@2867: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2791: Edouard@2791: Edouard@2791: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2791: Edouard@2791: Edouard@2791: Edouard@2790: Edouard@2790: Edouard@2793: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2792: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2794: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2869: Edouard@2869: Edouard@2869: Edouard@2869: Edouard@2869: Edouard@2869: Edouard@2869: Edouard@2869: Edouard@2869: Edouard@2869: Edouard@2869: Edouard@2869: Edouard@2869: Edouard@2869: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: =" Edouard@2877: Edouard@2877: " Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Raw HMI tree Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Indexed HMI tree Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: ID, x, y, w, h Edouard@2877: Edouard@2879: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Home Edouard@2877: Edouard@2877: Edouard@2877: No Home page defined! Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: No page defined! Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: " Edouard@2877: Edouard@2877: ": { Edouard@2877: Edouard@2877: widget: hmi_widgets[" Edouard@2877: Edouard@2877: "], Edouard@2877: Edouard@2877: bbox: [ Edouard@2877: Edouard@2877: , Edouard@2877: Edouard@2877: , Edouard@2877: Edouard@2877: , Edouard@2877: Edouard@2877: ], Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Page id=" Edouard@2877: Edouard@2877: " : No match for path " Edouard@2877: Edouard@2877: " in HMI tree Edouard@2877: Edouard@2877: Edouard@2877: page_index: Edouard@2877: Edouard@2877: , Edouard@2877: Edouard@2877: Edouard@2877: relative_widgets: [ Edouard@2877: Edouard@2877: Edouard@2877: hmi_widgets[" Edouard@2877: Edouard@2877: "] Edouard@2877: Edouard@2877: , Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: ], Edouard@2877: Edouard@2877: absolute_widgets: [ Edouard@2877: Edouard@2877: Edouard@2877: hmi_widgets[" Edouard@2877: Edouard@2877: "] Edouard@2877: Edouard@2877: , Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: ], Edouard@2877: Edouard@2877: required_detachables: { Edouard@2877: Edouard@2877: Edouard@2877: " Edouard@2877: Edouard@2877: ": detachable_elements[" Edouard@2877: Edouard@2877: "] Edouard@2877: Edouard@2877: , Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: } Edouard@2877: Edouard@2877: } Edouard@2877: Edouard@2877: , Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: none Edouard@2877: Edouard@2877: Edouard@2877: 100vh Edouard@2877: Edouard@2877: Edouard@2877: 100vw Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: ViewBox settings other than X=0, Y=0 and Scale=1 are not supported Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: All units must be set to "px" in Inkscape's document properties Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: href Edouard@2877: Edouard@2877: Edouard@2877: width Edouard@2877: Edouard@2877: Edouard@2877: height Edouard@2877: Edouard@2877: Edouard@2877: x Edouard@2877: Edouard@2877: Edouard@2877: y Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: _ Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2878: Edouard@2878: Edouard@2878: Edouard@2878: Edouard@2878: Edouard@2878: Edouard@2878: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: " Edouard@2881: Edouard@2881: ": { Edouard@2881: Edouard@2881: type: " Edouard@2881: Edouard@2881: ", Edouard@2881: Edouard@2881: args: [ Edouard@2881: Edouard@2881: Edouard@2881: " Edouard@2881: Edouard@2798: " Edouard@2797: Edouard@2797: , Edouard@2797: Edouard@2797: Edouard@2797: Edouard@2797: Edouard@2881: ], Edouard@2881: Edouard@2881: indexes: [ Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Widget Edouard@2881: Edouard@2881: id=" Edouard@2881: Edouard@2881: " : No match for path " Edouard@2881: Edouard@2881: " in HMI tree Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: , Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: edouard@2847: Edouard@2881: ], Edouard@2881: Edouard@2881: element: id(" Edouard@2881: Edouard@2881: "), Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: , Edouard@2881: Edouard@2881: Edouard@2793: Edouard@2792: Edouard@2808: Edouard@2808: Edouard@2808: Edouard@2800: Edouard@2834: Edouard@2808: Edouard@2807: Edouard@2854: Edouard@2836: Edouard@2836: Edouard@2836: Edouard@2836: Edouard@2836: Edouard@2836: widget must have a Edouard@2836: Edouard@2836: element Edouard@2836: Edouard@2836: Edouard@2836: Edouard@2836: Edouard@2852: Edouard@2807: edouard@2847: _elt: id(" Edouard@2836: Edouard@2836: "), Edouard@2836: Edouard@2836: Edouard@2836: Edouard@2807: Edouard@2808: Edouard@2881: Edouard@2881: Edouard@2881: Made with SVGHMI. https://beremiz.org Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: debug_hmitree: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: debug_geometry: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: debug_detachables: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: debug_unlink: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: //(function(){ Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: id = idstr => document.getElementById(idstr); Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: var hmi_hash = [ Edouard@2881: Edouard@2881: ]; Edouard@2881: Edouard@2881: var hmi_widgets = { Edouard@2881: Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: var heartbeat_index = Edouard@2881: Edouard@2881: ; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: var hmitree_types = [ Edouard@2881: Edouard@2881: Edouard@2881: /* Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: */ " Edouard@2881: Edouard@2881: " Edouard@2881: Edouard@2881: , Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: ] Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: var detachable_elements = { Edouard@2881: Edouard@2881: Edouard@2881: " Edouard@2881: Edouard@2881: ":[id(" Edouard@2881: Edouard@2881: "), id(" Edouard@2881: Edouard@2881: ")] Edouard@2881: Edouard@2881: , Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: var page_desc = { Edouard@2881: Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: var default_page = " Edouard@2881: Edouard@2881: "; Edouard@2881: Edouard@2881: var svg_root = id(" Edouard@2881: Edouard@2881: "); Edouard@2881: Edouard@2881: // svghmi.js Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: var cache = hmitree_types.map(_ignored => undefined); Edouard@2881: Edouard@2881: var updates = {}; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: function dispatch_value_to_widget(widget, index, value, oldval) { Edouard@2881: Edouard@2881: try { Edouard@2881: Edouard@2881: let idx = widget.offset ? index - widget.offset : index; Edouard@2881: Edouard@2881: let idxidx = widget.indexes.indexOf(idx); Edouard@2881: Edouard@2881: let d = widget.dispatch; Edouard@2881: Edouard@2881: console.log(index, idx, idxidx, value); Edouard@2881: Edouard@2881: if(typeof(d) == "function" && idxidx == 0){ Edouard@2881: Edouard@2881: d.call(widget, value, oldval); Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: else if(typeof(d) == "object" && d.length >= idxidx){ Edouard@2881: Edouard@2881: d[idxidx].call(widget, value, oldval); Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: /* else dispatch_0, ..., dispatch_n ? */ Edouard@2881: Edouard@2881: /*else { Edouard@2881: Edouard@2881: throw new Error("Dunno how to dispatch to widget at index = " + index); Edouard@2881: Edouard@2881: }*/ Edouard@2881: Edouard@2881: } catch(err) { Edouard@2881: Edouard@2881: console.log(err); Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: function dispatch_value(index, value) { Edouard@2881: Edouard@2881: let widgets = subscribers[index]; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: let oldval = cache[index]; Edouard@2881: Edouard@2881: cache[index] = value; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: if(widgets.size > 0) { Edouard@2881: Edouard@2881: for(let widget of widgets){ Edouard@2881: Edouard@2881: dispatch_value_to_widget(widget, index, value, oldval); Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: }; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: function init_widgets() { Edouard@2881: Edouard@2881: Object.keys(hmi_widgets).forEach(function(id) { Edouard@2881: Edouard@2881: let widget = hmi_widgets[id]; Edouard@2881: Edouard@2881: let init = widget.init; Edouard@2881: Edouard@2881: if(typeof(init) == "function"){ Edouard@2881: Edouard@2881: try { Edouard@2881: Edouard@2881: init.call(widget); Edouard@2881: Edouard@2881: } catch(err) { Edouard@2881: Edouard@2881: console.log(err); Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: }); Edouard@2881: Edouard@2881: }; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: // Open WebSocket to relative "/ws" address Edouard@2881: Edouard@2881: var ws = new WebSocket(window.location.href.replace(/^http(s?:\/\/[^\/]*)\/.*$/, 'ws$1/ws')); Edouard@2881: Edouard@2881: ws.binaryType = 'arraybuffer'; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: const dvgetters = { Edouard@2881: Edouard@2881: INT: (dv,offset) => [dv.getInt16(offset, true), 2], Edouard@2881: Edouard@2881: BOOL: (dv,offset) => [dv.getInt8(offset, true), 1], Edouard@2881: Edouard@2881: STRING: (dv, offset) => { Edouard@2881: Edouard@2881: size = dv.getInt8(offset); Edouard@2881: Edouard@2881: return [ Edouard@2881: Edouard@2881: String.fromCharCode.apply(null, new Uint8Array( Edouard@2881: Edouard@2881: dv.buffer, /* original buffer */ Edouard@2881: Edouard@2881: offset + 1, /* string starts after size*/ Edouard@2881: Edouard@2881: size /* size of string */ Edouard@2881: Edouard@2881: )), size + 1]; /* total increment */ Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: }; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: // Apply updates recieved through ws.onmessage to subscribed widgets Edouard@2881: Edouard@2881: function apply_updates() { Edouard@2881: Edouard@2881: for(let index in updates){ Edouard@2881: Edouard@2881: // serving as a key, index becomes a string Edouard@2881: Edouard@2881: // -> pass Number(index) instead Edouard@2881: Edouard@2881: dispatch_value(Number(index), updates[index]); Edouard@2881: Edouard@2881: delete updates[index]; Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: // Called on requestAnimationFrame, modifies DOM Edouard@2881: Edouard@2881: var requestAnimationFrameID = null; Edouard@2881: Edouard@2881: function animate() { Edouard@2881: Edouard@2881: // Do the page swith if any one pending Edouard@2881: Edouard@2881: if(current_subscribed_page != current_visible_page){ Edouard@2881: Edouard@2881: switch_visible_page(current_subscribed_page); Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: apply_updates(); Edouard@2881: Edouard@2881: requestAnimationFrameID = null; Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: function requestHMIAnimation() { Edouard@2881: Edouard@2881: if(requestAnimationFrameID == null){ Edouard@2881: Edouard@2881: requestAnimationFrameID = window.requestAnimationFrame(animate); Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: // Message reception handler Edouard@2881: Edouard@2881: // Hash is verified and HMI values updates resulting from binary parsing Edouard@2881: Edouard@2881: // are stored until browser can compute next frame, DOM is left untouched Edouard@2881: Edouard@2881: ws.onmessage = function (evt) { Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: let data = evt.data; Edouard@2881: Edouard@2881: let dv = new DataView(data); Edouard@2881: Edouard@2881: let i = 0; Edouard@2881: Edouard@2881: try { Edouard@2881: Edouard@2881: for(let hash_int of hmi_hash) { Edouard@2881: Edouard@2881: if(hash_int != dv.getUint8(i)){ Edouard@2881: Edouard@2881: throw new Error("Hash doesn't match"); Edouard@2881: Edouard@2881: }; Edouard@2881: Edouard@2881: i++; Edouard@2881: Edouard@2881: }; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: while(i < data.byteLength){ Edouard@2881: Edouard@2881: let index = dv.getUint32(i, true); Edouard@2881: Edouard@2881: i += 4; Edouard@2881: Edouard@2881: let iectype = hmitree_types[index]; Edouard@2881: Edouard@2881: if(iectype != undefined){ Edouard@2881: Edouard@2881: let dvgetter = dvgetters[iectype]; Edouard@2881: Edouard@2881: let [value, bytesize] = dvgetter(dv,i); Edouard@2881: Edouard@2881: updates[index] = value; Edouard@2881: Edouard@2881: i += bytesize; Edouard@2881: Edouard@2881: } else { Edouard@2881: Edouard@2881: throw new Error("Unknown index "+index); Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: }; Edouard@2881: Edouard@2881: // register for rendering on next frame, since there are updates Edouard@2881: Edouard@2881: requestHMIAnimation(); Edouard@2881: Edouard@2881: } catch(err) { Edouard@2881: Edouard@2881: // 1003 is for "Unsupported Data" Edouard@2881: Edouard@2881: // ws.close(1003, err.message); Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: // TODO : remove debug alert ? Edouard@2881: Edouard@2881: alert("Error : "+err.message+"\nHMI will be reloaded."); Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: // force reload ignoring cache Edouard@2881: Edouard@2881: location.reload(true); Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: }; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: function send_blob(data) { Edouard@2881: Edouard@2881: if(data.length > 0) { Edouard@2881: Edouard@2881: ws.send(new Blob([new Uint8Array(hmi_hash)].concat(data))); Edouard@2881: Edouard@2881: }; Edouard@2881: Edouard@2881: }; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: const typedarray_types = { Edouard@2881: Edouard@2881: INT: (number) => new Int16Array([number]), Edouard@2881: Edouard@2881: BOOL: (truth) => new Int16Array([truth]), Edouard@2881: Edouard@2881: STRING: (str) => { Edouard@2881: Edouard@2881: // beremiz default string max size is 128 Edouard@2881: Edouard@2881: str = str.slice(0,128); Edouard@2881: Edouard@2881: binary = new Uint8Array(str.length + 1); Edouard@2881: Edouard@2881: binary[0] = str.length; Edouard@2881: Edouard@2881: for(var i = 0; i < str.length; i++){ Edouard@2881: Edouard@2881: binary[i+1] = str.charCodeAt(i); Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: return binary; Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: /* TODO */ Edouard@2881: Edouard@2881: }; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: function send_reset() { Edouard@2881: Edouard@2881: send_blob(new Uint8Array([1])); /* reset = 1 */ Edouard@2881: Edouard@2881: }; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: // subscription state, as it should be in hmi server Edouard@2881: Edouard@2881: // hmitree indexed array of integers Edouard@2881: Edouard@2881: var subscriptions = hmitree_types.map(_ignored => 0); Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: // subscription state as needed by widget now Edouard@2881: Edouard@2881: // hmitree indexed array of Sets of widgets objects Edouard@2881: Edouard@2881: var subscribers = hmitree_types.map(_ignored => new Set()); Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: // artificially subscribe the watchdog widget to "/heartbeat" hmi variable Edouard@2881: Edouard@2881: // Since dispatch directly calls change_hmi_value, Edouard@2881: Edouard@2881: // PLC will periodically send variable at given frequency Edouard@2881: Edouard@2881: subscribers[heartbeat_index].add({ Edouard@2881: Edouard@2881: /* type: "Watchdog", */ Edouard@2881: Edouard@2881: frequency: 1, Edouard@2881: Edouard@2881: indexes: [heartbeat_index], Edouard@2881: Edouard@2881: dispatch: function(value) { Edouard@2881: Edouard@2881: // console.log("Heartbeat" + value); Edouard@2881: Edouard@2881: change_hmi_value(heartbeat_index, "+1"); Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: }); Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: function update_subscriptions() { Edouard@2881: Edouard@2881: let delta = []; Edouard@2881: Edouard@2881: for(let index = 0; index < subscribers.length; index++){ Edouard@2881: Edouard@2881: let widgets = subscribers[index]; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: // periods are in ms Edouard@2881: Edouard@2881: let previous_period = subscriptions[index]; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: // subscribing with a zero period is unsubscribing Edouard@2881: Edouard@2881: let new_period = 0; Edouard@2881: Edouard@2881: if(widgets.size > 0) { Edouard@2881: Edouard@2881: let maxfreq = 0; Edouard@2881: Edouard@2881: for(let widget of widgets) Edouard@2881: Edouard@2881: if(maxfreq < widget.frequency) Edouard@2881: Edouard@2881: maxfreq = widget.frequency; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: if(maxfreq != 0) Edouard@2881: Edouard@2881: new_period = 1000/maxfreq; Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: if(previous_period != new_period) { Edouard@2881: Edouard@2881: subscriptions[index] = new_period; Edouard@2881: Edouard@2881: delta.push( Edouard@2881: Edouard@2881: new Uint8Array([2]), /* subscribe = 2 */ Edouard@2881: Edouard@2881: new Uint32Array([index]), Edouard@2881: Edouard@2881: new Uint16Array([new_period])); Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: send_blob(delta); Edouard@2881: Edouard@2881: }; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: function send_hmi_value(index, value) { Edouard@2881: Edouard@2881: let iectype = hmitree_types[index]; Edouard@2881: Edouard@2881: let tobinary = typedarray_types[iectype]; Edouard@2881: Edouard@2881: send_blob([ Edouard@2881: Edouard@2881: new Uint8Array([0]), /* setval = 0 */ Edouard@2881: Edouard@2881: new Uint32Array([index]), Edouard@2881: Edouard@2881: tobinary(value)]); Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: cache[index] = value; Edouard@2881: Edouard@2881: }; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: function change_hmi_value(index, opstr) { Edouard@2881: Edouard@2881: let op = opstr[0]; Edouard@2881: Edouard@2881: let given_val = opstr.slice(1); Edouard@2881: Edouard@2881: let old_val = cache[index] Edouard@2881: Edouard@2881: let new_val; Edouard@2881: Edouard@2881: switch(op){ Edouard@2881: Edouard@2881: case "=": Edouard@2881: Edouard@2881: eval("new_val"+opstr); Edouard@2881: Edouard@2881: break; Edouard@2881: Edouard@2881: case "+": Edouard@2881: Edouard@2881: case "-": Edouard@2881: Edouard@2881: case "*": Edouard@2881: Edouard@2881: case "/": Edouard@2881: Edouard@2881: if(old_val != undefined) Edouard@2881: Edouard@2881: new_val = eval("old_val"+opstr); Edouard@2881: Edouard@2881: break; Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: if(new_val != undefined && old_val != new_val) Edouard@2881: Edouard@2881: send_hmi_value(index, new_val); Edouard@2881: Edouard@2881: return new_val; Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: var current_visible_page; Edouard@2881: Edouard@2881: var current_subscribed_page; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: function prepare_svg() { Edouard@2881: Edouard@2881: for(let eltid in detachable_elements){ Edouard@2881: Edouard@2881: let [element,parent] = detachable_elements[eltid]; Edouard@2881: Edouard@2881: parent.removeChild(element); Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: }; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: function switch_page(page_name, page_index) { Edouard@2881: Edouard@2881: if(current_subscribed_page != current_visible_page){ Edouard@2881: Edouard@2881: /* page switch already going */ Edouard@2881: Edouard@2881: /* TODO LOG ERROR */ Edouard@2881: Edouard@2881: return; Edouard@2881: Edouard@2881: } else if(page_name == current_visible_page){ Edouard@2881: Edouard@2881: /* already in that page */ Edouard@2881: Edouard@2881: /* TODO LOG ERROR */ Edouard@2881: Edouard@2881: return; Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: switch_subscribed_page(page_name, page_index); Edouard@2881: Edouard@2881: }; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: function* chain(a,b){ Edouard@2881: Edouard@2881: yield* a; Edouard@2881: Edouard@2881: yield* b; Edouard@2881: Edouard@2881: }; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: function switch_subscribed_page(page_name, page_index) { Edouard@2881: Edouard@2881: let old_desc = page_desc[current_subscribed_page]; Edouard@2881: Edouard@2881: let new_desc = page_desc[page_name]; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: if(new_desc == undefined){ Edouard@2881: Edouard@2881: /* TODO LOG ERROR */ Edouard@2881: Edouard@2881: return; Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: if(page_index == undefined){ Edouard@2881: Edouard@2881: page_index = new_desc.page_index; Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: if(old_desc){ Edouard@2881: Edouard@2881: for(let widget of old_desc.absolute_widgets){ Edouard@2881: Edouard@2881: /* remove subsribers */ Edouard@2881: Edouard@2881: for(let index of widget.indexes){ Edouard@2881: Edouard@2881: subscribers[index].delete(widget); Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: for(let widget of old_desc.relative_widgets){ Edouard@2881: Edouard@2881: /* remove subsribers */ Edouard@2881: Edouard@2881: for(let index of widget.indexes){ Edouard@2881: Edouard@2881: let idx = widget.offset ? index + widget.offset : index; Edouard@2881: Edouard@2881: subscribers[idx].delete(widget); Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: /* lose the offset */ Edouard@2881: Edouard@2881: delete widget.offset; Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: for(let widget of new_desc.absolute_widgets){ Edouard@2881: Edouard@2881: /* add widget's subsribers */ Edouard@2881: Edouard@2881: for(let index of widget.indexes){ Edouard@2881: Edouard@2881: subscribers[index].add(widget); Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: var new_offset = page_index == undefined ? 0 : page_index - new_desc.page_index; Edouard@2881: Edouard@2881: for(let widget of new_desc.relative_widgets){ Edouard@2881: Edouard@2881: /* set the offset because relative */ Edouard@2881: Edouard@2881: widget.offset = new_offset; Edouard@2881: Edouard@2881: /* add widget's subsribers */ Edouard@2881: Edouard@2881: for(let index of widget.indexes){ Edouard@2881: Edouard@2881: subscribers[index + new_offset].add(widget); Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: update_subscriptions(); Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: current_subscribed_page = page_name; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: requestHMIAnimation(); Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: function switch_visible_page(page_name) { Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: let old_desc = page_desc[current_visible_page]; Edouard@2881: Edouard@2881: let new_desc = page_desc[page_name]; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: if(old_desc){ Edouard@2881: Edouard@2881: for(let eltid in old_desc.required_detachables){ Edouard@2881: Edouard@2881: if(!(eltid in new_desc.required_detachables)){ Edouard@2881: Edouard@2881: let [element, parent] = old_desc.required_detachables[eltid]; Edouard@2881: Edouard@2881: parent.removeChild(element); Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: for(let eltid in new_desc.required_detachables){ Edouard@2881: Edouard@2881: if(!(eltid in old_desc.required_detachables)){ Edouard@2881: Edouard@2881: let [element, parent] = new_desc.required_detachables[eltid]; Edouard@2881: Edouard@2881: parent.appendChild(element); Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: }else{ Edouard@2881: Edouard@2881: for(let eltid in new_desc.required_detachables){ Edouard@2881: Edouard@2881: let [element, parent] = new_desc.required_detachables[eltid]; Edouard@2881: Edouard@2881: parent.appendChild(element); Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: for(let widget of chain(new_desc.absolute_widgets,new_desc.relative_widgets)){ Edouard@2881: Edouard@2881: for(let index of widget.indexes){ Edouard@2881: Edouard@2881: /* dispatch current cache in newly opened page widgets */ Edouard@2881: Edouard@2881: let cached_val = cache[index]; Edouard@2881: Edouard@2881: if(cached_val != undefined) Edouard@2881: Edouard@2881: dispatch_value_to_widget(widget, index, cached_val, cached_val); Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: } Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: svg_root.setAttribute('viewBox',new_desc.bbox.join(" ")); Edouard@2881: Edouard@2881: current_visible_page = page_name; Edouard@2881: Edouard@2881: }; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: // Once connection established Edouard@2881: Edouard@2881: ws.onopen = function (evt) { Edouard@2881: Edouard@2881: init_widgets(); Edouard@2881: Edouard@2881: send_reset(); Edouard@2881: Edouard@2881: // show main page Edouard@2881: Edouard@2881: prepare_svg(); Edouard@2881: Edouard@2881: switch_page(default_page); Edouard@2881: Edouard@2881: }; Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: ws.onclose = function (evt) { Edouard@2881: Edouard@2881: // TODO : add visible notification while waiting for reload Edouard@2881: Edouard@2881: console.log("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+" Reload in 10s."); Edouard@2881: Edouard@2881: // TODO : re-enable auto reload when not in debug Edouard@2881: Edouard@2881: //window.setTimeout(() => location.reload(true), 10000); Edouard@2881: Edouard@2881: alert("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+"."); Edouard@2881: Edouard@2881: Edouard@2881: Edouard@2881: }; Edouard@2881: Edouard@2881: //})(); Edouard@2881: Edouard@2881: Edouard@2808: Edouard@2808: Edouard@2852: frequency: 5, Edouard@2852: Edouard@2852: dispatch: function(value) { Edouard@2808: Edouard@2808: Edouard@2808: Edouard@2852: this.element.textContent = String(value); Edouard@2808: Edouard@2808: Edouard@2808: Edouard@2834: Edouard@2808: Display widget as a group not implemented Edouard@2808: Edouard@2808: Edouard@2808: Edouard@2852: }, Edouard@2808: Edouard@2808: Edouard@2808: Edouard@2808: Edouard@2852: frequency: 10, Edouard@2808: Edouard@2808: Edouard@2808: Edouard@2808: edouard@2856: needle range Edouard@2808: Edouard@2808: edouard@2856: edouard@2856: edouard@2856: edouard@2856: value min max edouard@2856: edouard@2856: edouard@2856: Edouard@2852: dispatch: function(value) { Edouard@2852: edouard@2856: if(this.value_elt) edouard@2856: edouard@2856: this.value_elt.textContent = String(value); Edouard@2852: Edouard@2852: let [min,max,totallength] = this.range; Edouard@2852: Edouard@2852: let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min))); Edouard@2852: Edouard@2852: let tip = this.range_elt.getPointAtLength(length); Edouard@2852: Edouard@2852: this.needle_elt.setAttribute('d', "M "+this.origin.x+","+this.origin.y+" "+tip.x+","+tip.y); Edouard@2852: Edouard@2852: }, Edouard@2852: Edouard@2852: origin: undefined, Edouard@2852: Edouard@2852: range: undefined, Edouard@2852: Edouard@2852: init: function() { Edouard@2852: edouard@2857: let min = this.min_elt ? edouard@2857: edouard@2857: Number(this.min_elt.textContent) : edouard@2857: edouard@2857: this.args.length >= 1 ? this.args[0] : 0; edouard@2857: edouard@2857: let max = this.max_elt ? edouard@2857: edouard@2857: Number(this.max_elt.textContent) : edouard@2857: edouard@2857: this.args.length >= 2 ? this.args[1] : 100; edouard@2856: edouard@2856: this.range = [min, max, this.range_elt.getTotalLength()] Edouard@2852: Edouard@2852: this.origin = this.needle_elt.getPointAtLength(0); Edouard@2852: Edouard@2852: }, Edouard@2807: Edouard@2800: Edouard@2829: Edouard@2829: Edouard@2829: Edouard@2829: Edouard@2829: Edouard@2829: Edouard@2829: Edouard@2829: Edouard@2829: Edouard@2829: Edouard@2829: Edouard@2829: Edouard@2829: Edouard@2800: Edouard@2801: Edouard@2836: Edouard@2836: Edouard@2836: Edouard@2836: Edouard@2836: value Edouard@2836: Edouard@2836: Edouard@2836: Edouard@2836: Edouard@2861: Edouard@2836: Edouard@2861: edouard@2851: frequency: 5, Edouard@2836: Edouard@2836: edouard@2851: dispatch: function(value) { Edouard@2801: Edouard@2861: edouard@2851: this.value_elt.textContent = String(value); Edouard@2836: Edouard@2836: edouard@2851: }, Edouard@2801: Edouard@2801: edouard@2851: init: function() { Edouard@2801: Edouard@2801: edouard@2851: id(" Edouard@2801: Edouard@2801: ").addEventListener( Edouard@2801: edouard@2851: "click", edouard@2851: edouard@2851: evt => alert('XXX TODO : Edit value')); Edouard@2801: Edouard@2801: Edouard@2829: edouard@2851: id(" Edouard@2801: Edouard@2801: ").addEventListener( Edouard@2801: edouard@2851: "click", edouard@2851: edouard@2851: evt => {let new_val = change_hmi_value(this.indexes[0], " Edouard@2829: Edouard@2806: "); Edouard@2806: Edouard@2861: Edouard@2861: this.value_elt.textContent = String(new_val); Edouard@2861: Edouard@2861: Edouard@2861: }); Edouard@2801: Edouard@2801: edouard@2851: }, Edouard@2801: Edouard@2801: Edouard@2801: Edouard@2801: Edouard@2800: frequency: 5, Edouard@2800: Edouard@2797: Edouard@2839: Edouard@2839: edouard@2851: frequency: 5, edouard@2851: edouard@2851: dispatch: function(value) { edouard@2851: edouard@2851: for(let choice of this.choices){ edouard@2851: edouard@2851: if(value != choice.value){ edouard@2851: edouard@2851: choice.elt.setAttribute("style", "display:none"); edouard@2851: edouard@2851: } else { edouard@2851: edouard@2851: choice.elt.setAttribute("style", choice.style); edouard@2851: edouard@2851: } Edouard@2839: Edouard@2839: } Edouard@2839: edouard@2851: }, edouard@2851: edouard@2851: init: function() { edouard@2851: edouard@2851: // Hello Switch edouard@2851: edouard@2851: }, edouard@2851: edouard@2851: choices: [ Edouard@2839: Edouard@2839: Edouard@2839: Edouard@2839: edouard@2851: { edouard@2851: edouard@2851: elt:id(" Edouard@2839: Edouard@2839: "), Edouard@2839: edouard@2851: style:" Edouard@2839: Edouard@2839: ", Edouard@2839: edouard@2851: value: Edouard@2839: Edouard@2839: Edouard@2839: edouard@2851: } Edouard@2839: Edouard@2839: , Edouard@2839: Edouard@2839: Edouard@2839: Edouard@2839: edouard@2851: ], Edouard@2801: Edouard@2801: Edouard@2808: Edouard@2838: edouard@2851: on_click: function(evt) { edouard@2851: Edouard@2869: switch_page(this.args[0], this.indexes[0]); edouard@2851: edouard@2851: }, edouard@2851: edouard@2851: init: function() { edouard@2851: edouard@2851: this.element.setAttribute("onclick", "hmi_widgets[' Edouard@2838: Edouard@2839: '].on_click(evt)"); Edouard@2808: edouard@2851: }, Edouard@2808: Edouard@2808: Edouard@2753: