Edouard@2753: Edouard@2854: Edouard@2798: 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@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: 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@2877: Edouard@2877: Edouard@2877: Made with SVGHMI. https://beremiz.org Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: debug_hmitree: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: debug_geometry: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: debug_detachables: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2877: Edouard@2878: Edouard@2878: Edouard@2878: debug_unlink: Edouard@2878: Edouard@2878: Edouard@2878: Edouard@2878: Edouard@2878: Edouard@2878: Edouard@2877: Unlinked : 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@2854: Edouard@2799: //(function(){ Edouard@2798: Edouard@2798: Edouard@2798: edouard@2847: id = idstr => document.getElementById(idstr); edouard@2847: edouard@2847: edouard@2847: Edouard@2797: var hmi_hash = [ Edouard@2797: Edouard@2797: ]; Edouard@2797: Edouard@2797: var hmi_widgets = { Edouard@2797: Edouard@2797: Edouard@2797: edouard@2856: Edouard@2852: " Edouard@2797: Edouard@2833: ": { Edouard@2793: Edouard@2852: type: " Edouard@2797: Edouard@2793: ", Edouard@2793: Edouard@2852: args: [ Edouard@2797: Edouard@2797: Edouard@2852: " Edouard@2797: Edouard@2793: " Edouard@2793: Edouard@2793: , Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2852: ], Edouard@2852: Edouard@2852: indexes: [ Edouard@2797: Edouard@2797: Edouard@2834: Edouard@2869: Edouard@2834: edouard@2856: Widget edouard@2856: edouard@2856: id=" edouard@2856: edouard@2856: " : No match for path " Edouard@2869: Edouard@2834: " in HMI tree Edouard@2834: Edouard@2834: Edouard@2834: edouard@2850: Edouard@2869: Edouard@2834: Edouard@2834: , Edouard@2834: Edouard@2834: Edouard@2834: Edouard@2834: Edouard@2834: Edouard@2797: Edouard@2854: ], Edouard@2854: Edouard@2854: element: id(" Edouard@2800: Edouard@2800: "), Edouard@2800: Edouard@2800: Edouard@2800: Edouard@2800: Edouard@2854: } Edouard@2793: Edouard@2793: , Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2793: } Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2822: var heartbeat_index = Edouard@2822: Edouard@2822: ; Edouard@2822: Edouard@2822: Edouard@2822: Edouard@2798: var hmitree_types = [ Edouard@2798: Edouard@2797: edouard@2850: /* Edouard@2797: Edouard@2797: Edouard@2797: Edouard@2798: */ " Edouard@2798: Edouard@2798: " Edouard@2797: Edouard@2797: , Edouard@2797: Edouard@2797: Edouard@2797: Edouard@2797: Edouard@2797: ] Edouard@2797: Edouard@2797: Edouard@2797: edouard@2847: var detachable_elements = { edouard@2847: edouard@2847: edouard@2847: " edouard@2847: edouard@2850: ":[id(" edouard@2847: edouard@2850: "), id(" edouard@2847: edouard@2850: ")] edouard@2847: edouard@2847: , edouard@2847: edouard@2847: edouard@2847: edouard@2847: edouard@2847: } edouard@2847: edouard@2847: edouard@2847: Edouard@2793: var page_desc = { Edouard@2793: Edouard@2877: Edouard@2793: } Edouard@2793: Edouard@2795: Edouard@2795: Edouard@2795: var default_page = " Edouard@2795: Edouard@2795: "; Edouard@2795: edouard@2847: var svg_root = id(" Edouard@2808: Edouard@2808: "); Edouard@2808: Edouard@2793: // svghmi.js Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2803: var cache = hmitree_types.map(_ignored => undefined); Edouard@2803: edouard@2859: var updates = {}; edouard@2859: Edouard@2803: Edouard@2803: Edouard@2811: function dispatch_value_to_widget(widget, index, value, oldval) { Edouard@2811: Edouard@2834: try { Edouard@2834: Edouard@2870: let idx = widget.offset ? index - widget.offset : index; Edouard@2870: Edouard@2870: let idxidx = widget.indexes.indexOf(idx); Edouard@2834: Edouard@2834: let d = widget.dispatch; Edouard@2834: Edouard@2870: console.log(index, idx, idxidx, value); Edouard@2870: Edouard@2834: if(typeof(d) == "function" && idxidx == 0){ Edouard@2834: Edouard@2834: d.call(widget, value, oldval); Edouard@2834: Edouard@2870: } Edouard@2870: edouard@2872: else if(typeof(d) == "object" && d.length >= idxidx){ Edouard@2834: Edouard@2834: d[idxidx].call(widget, value, oldval); Edouard@2834: edouard@2872: } Edouard@2870: Edouard@2870: /* else dispatch_0, ..., dispatch_n ? */ Edouard@2834: Edouard@2834: /*else { Edouard@2834: Edouard@2834: throw new Error("Dunno how to dispatch to widget at index = " + index); Edouard@2834: Edouard@2834: }*/ Edouard@2811: Edouard@2836: } catch(err) { Edouard@2836: Edouard@2836: console.log(err); Edouard@2836: Edouard@2811: } Edouard@2811: Edouard@2811: } Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2798: function dispatch_value(index, value) { Edouard@2798: Edouard@2800: let widgets = subscribers[index]; Edouard@2800: Edouard@2800: Edouard@2800: Edouard@2805: let oldval = cache[index]; Edouard@2805: Edouard@2805: cache[index] = value; Edouard@2805: Edouard@2805: Edouard@2805: Edouard@2803: if(widgets.size > 0) { Edouard@2803: Edouard@2803: for(let widget of widgets){ Edouard@2803: Edouard@2811: dispatch_value_to_widget(widget, index, value, oldval); Edouard@2811: Edouard@2811: } Edouard@2811: Edouard@2811: } Edouard@2811: Edouard@2811: }; Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2811: function init_widgets() { Edouard@2811: Edouard@2811: Object.keys(hmi_widgets).forEach(function(id) { Edouard@2811: Edouard@2811: let widget = hmi_widgets[id]; Edouard@2811: Edouard@2811: let init = widget.init; Edouard@2811: Edouard@2811: if(typeof(init) == "function"){ Edouard@2811: Edouard@2834: try { Edouard@2834: Edouard@2834: init.call(widget); Edouard@2834: Edouard@2834: } catch(err) { Edouard@2834: Edouard@2836: console.log(err); Edouard@2834: Edouard@2834: } Edouard@2811: Edouard@2811: } Edouard@2811: Edouard@2811: }); Edouard@2811: Edouard@2811: }; Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2811: // Open WebSocket to relative "/ws" address Edouard@2811: Edouard@2811: var ws = new WebSocket(window.location.href.replace(/^http(s?:\/\/[^\/]*)\/.*$/, 'ws$1/ws')); Edouard@2811: Edouard@2811: ws.binaryType = 'arraybuffer'; Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2811: const dvgetters = { Edouard@2811: edouard@2826: INT: (dv,offset) => [dv.getInt16(offset, true), 2], edouard@2826: edouard@2826: BOOL: (dv,offset) => [dv.getInt8(offset, true), 1], edouard@2826: edouard@2826: STRING: (dv, offset) => { edouard@2826: edouard@2826: size = dv.getInt8(offset); edouard@2826: edouard@2826: return [ edouard@2826: edouard@2826: String.fromCharCode.apply(null, new Uint8Array( edouard@2826: edouard@2826: dv.buffer, /* original buffer */ edouard@2826: edouard@2826: offset + 1, /* string starts after size*/ edouard@2826: edouard@2826: size /* size of string */ edouard@2826: edouard@2826: )), size + 1]; /* total increment */ edouard@2826: edouard@2826: } Edouard@2811: Edouard@2811: }; Edouard@2811: Edouard@2811: Edouard@2811: edouard@2859: // Apply updates recieved through ws.onmessage to subscribed widgets edouard@2859: Edouard@2865: function apply_updates() { Edouard@2865: Edouard@2865: for(let index in updates){ Edouard@2865: Edouard@2865: // serving as a key, index becomes a string Edouard@2865: Edouard@2865: // -> pass Number(index) instead Edouard@2865: Edouard@2865: dispatch_value(Number(index), updates[index]); Edouard@2865: Edouard@2865: delete updates[index]; Edouard@2865: Edouard@2865: } Edouard@2865: Edouard@2865: } Edouard@2865: Edouard@2865: Edouard@2861: Edouard@2861: // Called on requestAnimationFrame, modifies DOM Edouard@2861: Edouard@2865: var requestAnimationFrameID = null; Edouard@2865: Edouard@2861: function animate() { Edouard@2861: Edouard@2865: // Do the page swith if any one pending Edouard@2865: Edouard@2864: if(current_subscribed_page != current_visible_page){ Edouard@2864: Edouard@2864: switch_visible_page(current_subscribed_page); Edouard@2861: Edouard@2861: } Edouard@2861: Edouard@2865: apply_updates(); edouard@2859: Edouard@2864: requestAnimationFrameID = null; Edouard@2864: edouard@2859: } edouard@2859: edouard@2859: edouard@2859: Edouard@2861: function requestHMIAnimation() { Edouard@2861: Edouard@2864: if(requestAnimationFrameID == null){ Edouard@2864: Edouard@2864: requestAnimationFrameID = window.requestAnimationFrame(animate); Edouard@2864: Edouard@2864: } Edouard@2861: Edouard@2861: } Edouard@2861: Edouard@2861: Edouard@2861: edouard@2859: // Message reception handler edouard@2859: edouard@2859: // Hash is verified and HMI values updates resulting from binary parsing edouard@2859: edouard@2859: // are stored until browser can compute next frame, DOM is left untouched Edouard@2811: Edouard@2811: ws.onmessage = function (evt) { Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2811: let data = evt.data; Edouard@2811: Edouard@2811: let dv = new DataView(data); Edouard@2811: Edouard@2811: let i = 0; Edouard@2811: Edouard@2811: try { Edouard@2811: Edouard@2811: for(let hash_int of hmi_hash) { Edouard@2811: Edouard@2811: if(hash_int != dv.getUint8(i)){ Edouard@2811: Edouard@2811: throw new Error("Hash doesn't match"); Edouard@2811: Edouard@2811: }; Edouard@2811: Edouard@2811: i++; Edouard@2811: Edouard@2811: }; Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2811: while(i < data.byteLength){ Edouard@2811: Edouard@2811: let index = dv.getUint32(i, true); Edouard@2811: Edouard@2811: i += 4; Edouard@2811: Edouard@2811: let iectype = hmitree_types[index]; Edouard@2811: Edouard@2811: if(iectype != undefined){ Edouard@2811: edouard@2826: let dvgetter = dvgetters[iectype]; edouard@2826: edouard@2826: let [value, bytesize] = dvgetter(dv,i); Edouard@2811: edouard@2859: updates[index] = value; Edouard@2811: Edouard@2811: i += bytesize; Edouard@2811: Edouard@2811: } else { Edouard@2811: edouard@2859: throw new Error("Unknown index "+index); Edouard@2803: Edouard@2803: } Edouard@2803: Edouard@2811: }; Edouard@2811: edouard@2859: // register for rendering on next frame, since there are updates edouard@2859: Edouard@2864: requestHMIAnimation(); edouard@2859: Edouard@2811: } catch(err) { Edouard@2811: Edouard@2811: // 1003 is for "Unsupported Data" Edouard@2811: Edouard@2811: // ws.close(1003, err.message); Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2811: // TODO : remove debug alert ? Edouard@2811: Edouard@2811: alert("Error : "+err.message+"\nHMI will be reloaded."); Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2811: // force reload ignoring cache Edouard@2811: Edouard@2811: location.reload(true); Edouard@2811: Edouard@2811: } Edouard@2811: Edouard@2811: }; Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2811: function send_blob(data) { Edouard@2811: Edouard@2811: if(data.length > 0) { Edouard@2811: Edouard@2811: ws.send(new Blob([new Uint8Array(hmi_hash)].concat(data))); Edouard@2811: Edouard@2811: }; Edouard@2811: Edouard@2811: }; Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2811: const typedarray_types = { Edouard@2811: Edouard@2829: INT: (number) => new Int16Array([number]), Edouard@2829: Edouard@2829: BOOL: (truth) => new Int16Array([truth]), Edouard@2829: Edouard@2829: STRING: (str) => { Edouard@2829: Edouard@2829: // beremiz default string max size is 128 Edouard@2829: Edouard@2829: str = str.slice(0,128); Edouard@2829: Edouard@2829: binary = new Uint8Array(str.length + 1); Edouard@2829: Edouard@2829: binary[0] = str.length; Edouard@2829: Edouard@2829: for(var i = 0; i < str.length; i++){ Edouard@2829: Edouard@2829: binary[i+1] = str.charCodeAt(i); Edouard@2829: Edouard@2829: } Edouard@2829: Edouard@2829: return binary; Edouard@2829: Edouard@2829: } Edouard@2811: Edouard@2811: /* TODO */ Edouard@2811: Edouard@2811: }; Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2811: function send_reset() { Edouard@2811: Edouard@2811: send_blob(new Uint8Array([1])); /* reset = 1 */ Edouard@2811: Edouard@2811: }; Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2811: // subscription state, as it should be in hmi server Edouard@2811: Edouard@2811: // hmitree indexed array of integers Edouard@2811: Edouard@2811: var subscriptions = hmitree_types.map(_ignored => 0); Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2811: // subscription state as needed by widget now Edouard@2811: Edouard@2811: // hmitree indexed array of Sets of widgets objects Edouard@2811: Edouard@2811: var subscribers = hmitree_types.map(_ignored => new Set()); Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2822: // artificially subscribe the watchdog widget to "/heartbeat" hmi variable Edouard@2822: Edouard@2829: // Since dispatch directly calls change_hmi_value, Edouard@2822: Edouard@2822: // PLC will periodically send variable at given frequency Edouard@2822: Edouard@2822: subscribers[heartbeat_index].add({ Edouard@2822: Edouard@2822: /* type: "Watchdog", */ Edouard@2822: Edouard@2822: frequency: 1, Edouard@2822: Edouard@2822: indexes: [heartbeat_index], Edouard@2822: Edouard@2822: dispatch: function(value) { Edouard@2822: Edouard@2828: // console.log("Heartbeat" + value); Edouard@2822: Edouard@2829: change_hmi_value(heartbeat_index, "+1"); Edouard@2822: Edouard@2822: } Edouard@2822: Edouard@2822: }); Edouard@2822: Edouard@2822: Edouard@2822: Edouard@2811: function update_subscriptions() { Edouard@2811: Edouard@2811: let delta = []; Edouard@2811: Edouard@2811: for(let index = 0; index < subscribers.length; index++){ Edouard@2811: Edouard@2811: let widgets = subscribers[index]; Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2811: // periods are in ms Edouard@2811: Edouard@2811: let previous_period = subscriptions[index]; Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2822: // subscribing with a zero period is unsubscribing Edouard@2822: Edouard@2811: let new_period = 0; Edouard@2811: Edouard@2811: if(widgets.size > 0) { Edouard@2811: Edouard@2811: let maxfreq = 0; Edouard@2811: Edouard@2811: for(let widget of widgets) Edouard@2811: Edouard@2811: if(maxfreq < widget.frequency) Edouard@2811: Edouard@2811: maxfreq = widget.frequency; Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2811: if(maxfreq != 0) Edouard@2811: Edouard@2811: new_period = 1000/maxfreq; Edouard@2803: Edouard@2803: } Edouard@2803: Edouard@2811: Edouard@2811: Edouard@2811: if(previous_period != new_period) { Edouard@2811: Edouard@2811: subscriptions[index] = new_period; Edouard@2811: Edouard@2811: delta.push( Edouard@2811: Edouard@2811: new Uint8Array([2]), /* subscribe = 2 */ Edouard@2811: Edouard@2811: new Uint32Array([index]), Edouard@2811: Edouard@2811: new Uint16Array([new_period])); Edouard@2811: Edouard@2811: } Edouard@2811: Edouard@2803: } Edouard@2803: Edouard@2811: send_blob(delta); Edouard@2811: Edouard@2811: }; Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2811: function send_hmi_value(index, value) { Edouard@2811: Edouard@2811: let iectype = hmitree_types[index]; Edouard@2811: Edouard@2829: let tobinary = typedarray_types[iectype]; Edouard@2811: Edouard@2811: send_blob([ Edouard@2811: Edouard@2811: new Uint8Array([0]), /* setval = 0 */ Edouard@2811: Edouard@2829: new Uint32Array([index]), Edouard@2829: Edouard@2829: tobinary(value)]); Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2811: cache[index] = value; Edouard@2811: Edouard@2811: }; Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2811: function change_hmi_value(index, opstr) { Edouard@2811: Edouard@2811: let op = opstr[0]; Edouard@2811: Edouard@2811: let given_val = opstr.slice(1); Edouard@2811: Edouard@2811: let old_val = cache[index] Edouard@2811: Edouard@2811: let new_val; Edouard@2811: Edouard@2811: switch(op){ Edouard@2811: Edouard@2811: case "=": Edouard@2811: Edouard@2811: eval("new_val"+opstr); Edouard@2811: Edouard@2811: break; Edouard@2811: Edouard@2811: case "+": Edouard@2811: Edouard@2811: case "-": Edouard@2811: Edouard@2811: case "*": Edouard@2811: Edouard@2811: case "/": Edouard@2811: Edouard@2811: if(old_val != undefined) Edouard@2811: Edouard@2811: new_val = eval("old_val"+opstr); Edouard@2811: Edouard@2811: break; Edouard@2811: Edouard@2811: } Edouard@2811: Edouard@2811: if(new_val != undefined && old_val != new_val) Edouard@2811: Edouard@2811: send_hmi_value(index, new_val); Edouard@2811: Edouard@2811: return new_val; Edouard@2811: Edouard@2811: } Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2864: var current_visible_page; Edouard@2864: Edouard@2864: var current_subscribed_page; Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2843: function prepare_svg() { Edouard@2843: edouard@2850: for(let eltid in detachable_elements){ edouard@2850: edouard@2850: let [element,parent] = detachable_elements[eltid]; edouard@2850: edouard@2850: parent.removeChild(element); Edouard@2843: Edouard@2843: } Edouard@2843: edouard@2850: }; edouard@2850: edouard@2850: edouard@2850: Edouard@2870: function switch_page(page_name, page_index) { edouard@2850: Edouard@2864: if(current_subscribed_page != current_visible_page){ Edouard@2864: Edouard@2864: /* page switch already going */ Edouard@2864: Edouard@2864: /* TODO LOG ERROR */ Edouard@2864: Edouard@2864: return; Edouard@2864: Edouard@2864: } else if(page_name == current_visible_page){ Edouard@2864: Edouard@2864: /* already in that page */ Edouard@2864: Edouard@2864: /* TODO LOG ERROR */ Edouard@2864: Edouard@2864: return; Edouard@2864: Edouard@2864: } Edouard@2864: Edouard@2870: switch_subscribed_page(page_name, page_index); Edouard@2864: Edouard@2864: }; Edouard@2864: Edouard@2864: Edouard@2864: Edouard@2869: function* chain(a,b){ Edouard@2869: Edouard@2869: yield* a; Edouard@2869: Edouard@2869: yield* b; Edouard@2869: Edouard@2869: }; Edouard@2869: Edouard@2869: Edouard@2869: Edouard@2870: function switch_subscribed_page(page_name, page_index) { Edouard@2864: Edouard@2864: let old_desc = page_desc[current_subscribed_page]; Edouard@2864: Edouard@2864: let new_desc = page_desc[page_name]; Edouard@2864: Edouard@2864: Edouard@2864: Edouard@2864: if(new_desc == undefined){ Edouard@2864: Edouard@2864: /* TODO LOG ERROR */ Edouard@2864: Edouard@2864: return; Edouard@2864: Edouard@2864: } Edouard@2864: Edouard@2864: Edouard@2864: Edouard@2870: if(page_index == undefined){ Edouard@2870: Edouard@2870: page_index = new_desc.page_index; Edouard@2870: Edouard@2870: } Edouard@2870: Edouard@2870: Edouard@2870: Edouard@2864: if(old_desc){ Edouard@2864: Edouard@2870: for(let widget of old_desc.absolute_widgets){ Edouard@2864: Edouard@2864: /* remove subsribers */ Edouard@2864: Edouard@2864: for(let index of widget.indexes){ Edouard@2864: Edouard@2864: subscribers[index].delete(widget); Edouard@2864: Edouard@2864: } Edouard@2864: Edouard@2864: } Edouard@2864: Edouard@2870: for(let widget of old_desc.relative_widgets){ Edouard@2870: Edouard@2870: /* remove subsribers */ Edouard@2870: Edouard@2870: for(let index of widget.indexes){ Edouard@2870: Edouard@2870: let idx = widget.offset ? index + widget.offset : index; Edouard@2870: Edouard@2870: subscribers[idx].delete(widget); Edouard@2870: Edouard@2870: } Edouard@2870: Edouard@2870: /* lose the offset */ Edouard@2870: Edouard@2870: delete widget.offset; Edouard@2870: Edouard@2870: } Edouard@2870: Edouard@2870: } Edouard@2870: Edouard@2870: for(let widget of new_desc.absolute_widgets){ Edouard@2864: Edouard@2864: /* add widget's subsribers */ Edouard@2864: Edouard@2864: for(let index of widget.indexes){ Edouard@2864: Edouard@2864: subscribers[index].add(widget); Edouard@2864: Edouard@2864: } Edouard@2864: Edouard@2864: } Edouard@2864: Edouard@2870: var new_offset = page_index == undefined ? 0 : page_index - new_desc.page_index; Edouard@2870: Edouard@2870: for(let widget of new_desc.relative_widgets){ Edouard@2870: Edouard@2870: /* set the offset because relative */ Edouard@2870: Edouard@2870: widget.offset = new_offset; Edouard@2870: Edouard@2870: /* add widget's subsribers */ Edouard@2870: Edouard@2870: for(let index of widget.indexes){ Edouard@2870: Edouard@2870: subscribers[index + new_offset].add(widget); Edouard@2870: Edouard@2870: } Edouard@2870: Edouard@2870: } Edouard@2870: Edouard@2864: Edouard@2864: Edouard@2864: update_subscriptions(); Edouard@2864: Edouard@2864: Edouard@2864: Edouard@2864: current_subscribed_page = page_name; Edouard@2864: Edouard@2864: Edouard@2864: Edouard@2864: requestHMIAnimation(); Edouard@2861: Edouard@2861: } Edouard@2861: Edouard@2861: Edouard@2861: Edouard@2864: function switch_visible_page(page_name) { Edouard@2864: Edouard@2864: Edouard@2864: Edouard@2864: let old_desc = page_desc[current_visible_page]; edouard@2850: edouard@2850: let new_desc = page_desc[page_name]; edouard@2850: edouard@2850: edouard@2850: edouard@2850: if(old_desc){ edouard@2850: Edouard@2864: for(let eltid in old_desc.required_detachables){ Edouard@2864: Edouard@2864: if(!(eltid in new_desc.required_detachables)){ Edouard@2864: Edouard@2864: let [element, parent] = old_desc.required_detachables[eltid]; Edouard@2864: Edouard@2864: parent.removeChild(element); edouard@2847: edouard@2847: } edouard@2847: edouard@2850: } edouard@2850: Edouard@2864: for(let eltid in new_desc.required_detachables){ Edouard@2864: Edouard@2864: if(!(eltid in old_desc.required_detachables)){ Edouard@2864: Edouard@2864: let [element, parent] = new_desc.required_detachables[eltid]; Edouard@2864: Edouard@2864: parent.appendChild(element); edouard@2850: edouard@2850: } edouard@2850: edouard@2850: } edouard@2850: Edouard@2864: }else{ Edouard@2864: edouard@2850: for(let eltid in new_desc.required_detachables){ edouard@2850: Edouard@2864: let [element, parent] = new_desc.required_detachables[eltid]; Edouard@2864: Edouard@2864: parent.appendChild(element); edouard@2850: edouard@2850: } edouard@2850: Edouard@2864: } Edouard@2864: Edouard@2864: Edouard@2864: Edouard@2869: for(let widget of chain(new_desc.absolute_widgets,new_desc.relative_widgets)){ Edouard@2864: Edouard@2864: for(let index of widget.indexes){ Edouard@2864: Edouard@2864: /* dispatch current cache in newly opened page widgets */ Edouard@2864: Edouard@2864: let cached_val = cache[index]; Edouard@2864: Edouard@2864: if(cached_val != undefined) Edouard@2864: Edouard@2864: dispatch_value_to_widget(widget, index, cached_val, cached_val); edouard@2850: edouard@2850: } Edouard@2842: Edouard@2842: } Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2842: svg_root.setAttribute('viewBox',new_desc.bbox.join(" ")); Edouard@2798: Edouard@2864: current_visible_page = page_name; Edouard@2798: Edouard@2798: }; Edouard@2798: Edouard@2798: Edouard@2798: Edouard@2798: Edouard@2798: Edouard@2798: // Once connection established Edouard@2798: Edouard@2798: ws.onopen = function (evt) { Edouard@2798: Edouard@2801: init_widgets(); Edouard@2801: Edouard@2798: send_reset(); Edouard@2798: Edouard@2798: // show main page Edouard@2798: Edouard@2843: prepare_svg(); Edouard@2843: Edouard@2798: switch_page(default_page); Edouard@2798: Edouard@2799: }; Edouard@2799: Edouard@2799: Edouard@2799: Edouard@2799: ws.onclose = function (evt) { Edouard@2799: Edouard@2799: // TODO : add visible notification while waiting for reload Edouard@2799: Edouard@2799: console.log("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+" Reload in 10s."); Edouard@2799: Edouard@2799: // TODO : re-enable auto reload when not in debug Edouard@2799: Edouard@2799: //window.setTimeout(() => location.reload(true), 10000); Edouard@2799: Edouard@2799: alert("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+"."); Edouard@2799: Edouard@2799: Edouard@2799: Edouard@2799: }; Edouard@2799: Edouard@2799: //})(); 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@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: