Edouard@2753: Edouard@2798: Edouard@2798: Edouard@2753: Edouard@2763: Edouard@2797: Edouard@2794: Edouard@2794: Edouard@2795: Edouard@2795: Edouard@2795: Edouard@2795: Edouard@2795: Edouard@2795: Edouard@2795: Home Edouard@2795: Edouard@2795: Edouard@2795: No Home page defined! Edouard@2795: Edouard@2795: Edouard@2795: Edouard@2795: Edouard@2795: No page defined! Edouard@2795: Edouard@2795: Edouard@2795: Edouard@2795: Edouard@2795: Edouard@2795: Edouard@2790: Edouard@2790: Edouard@2790: HMI_ROOT Edouard@2790: Edouard@2790: Edouard@2790: HMI_LABEL Edouard@2790: Edouard@2790: Edouard@2790: HMI_CLASS 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@2791: Edouard@2790: Edouard@2790: Edouard@2791: 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@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@2791: Edouard@2753: Edouard@2791: Edouard@2753: Edouard@2753: Edouard@2753: Edouard@2793: Edouard@2793: Made with SVGHMI. https://beremiz.org Edouard@2793: Edouard@2779: Edouard@2779: Edouard@2779: Edouard@2779: Edouard@2779: Edouard@2794: Edouard@2779: Edouard@2779: Edouard@2779: Edouard@2779: Edouard@2790: Edouard@2791: Edouard@2790: Edouard@2791: Edouard@2779: Edouard@2779: Edouard@2779: Edouard@2779: Edouard@2753: 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@2793: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2799: //(function(){ Edouard@2798: Edouard@2798: Edouard@2798: Edouard@2797: var hmi_hash = [ Edouard@2797: Edouard@2797: ]; Edouard@2797: Edouard@2797: var hmi_widgets = { Edouard@2797: Edouard@2797: Edouard@2797: Edouard@2797: Edouard@2793: : { Edouard@2793: Edouard@2797: type: " Edouard@2797: Edouard@2793: ", Edouard@2793: Edouard@2797: args: [ Edouard@2797: Edouard@2797: Edouard@2793: " Edouard@2797: Edouard@2793: " Edouard@2793: Edouard@2793: , Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2797: ], Edouard@2797: Edouard@2798: indexes: [ Edouard@2797: Edouard@2797: Edouard@2797: Edouard@2797: Edouard@2797: Edouard@2797: Edouard@2797: No match for HMI Edouard@2797: Edouard@2797: ; Edouard@2797: Edouard@2797: Edouard@2797: Edouard@2797: Edouard@2797: Edouard@2797: , Edouard@2797: Edouard@2797: Edouard@2797: Edouard@2797: Edouard@2800: ], Edouard@2800: Edouard@2800: element: document.getElementById(" Edouard@2800: Edouard@2800: "), Edouard@2800: Edouard@2800: Edouard@2800: Edouard@2800: Edouard@2793: } Edouard@2793: Edouard@2793: , Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2793: } Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2798: var hmitree_types = [ Edouard@2798: Edouard@2797: Edouard@2798: /* 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@2793: var page_desc = { Edouard@2793: Edouard@2794: Edouard@2794: Edouard@2797: Edouard@2797: Edouard@2797: Edouard@2797: Edouard@2794: " Edouard@2794: Edouard@2794: ": { Edouard@2794: Edouard@2794: id: " Edouard@2794: Edouard@2795: ", Edouard@2794: Edouard@2794: widgets: [ Edouard@2794: Edouard@2797: Edouard@2798: hmi_widgets. Edouard@2797: Edouard@2794: Edouard@2794: , Edouard@2794: Edouard@2794: Edouard@2794: Edouard@2794: Edouard@2794: ] Edouard@2794: Edouard@2797: } Edouard@2797: Edouard@2797: , Edouard@2797: Edouard@2797: Edouard@2797: Edouard@2793: Edouard@2793: } Edouard@2793: Edouard@2795: Edouard@2795: Edouard@2795: var default_page = " Edouard@2795: Edouard@2795: "; Edouard@2795: Edouard@2793: // svghmi.js Edouard@2793: Edouard@2793: Edouard@2793: Edouard@2803: var cache = hmitree_types.map(_ignored => undefined); Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2798: function dispatch_value(index, value) { Edouard@2798: Edouard@2800: let widgets = subscribers[index]; Edouard@2800: Edouard@2800: Edouard@2800: Edouard@2803: if(widgets.size > 0) { Edouard@2803: Edouard@2803: for(let widget of widgets){ Edouard@2803: Edouard@2803: let idxidx = widget.indexes.indexOf(index); Edouard@2803: Edouard@2803: if(idxidx == -1){ Edouard@2803: Edouard@2803: throw new Error("Dispatching to widget not interested, should not happen."); Edouard@2803: Edouard@2803: } Edouard@2803: Edouard@2803: let d = widget.dispatch; Edouard@2803: Edouard@2803: if(typeof(d) == "function" && idxidx == 0){ Edouard@2803: Edouard@2803: return d.call(widget,value); Edouard@2803: Edouard@2803: }else if(typeof(d) == "object" && d.length >= idxidx){ Edouard@2803: Edouard@2803: d[idxidx].call(widget,value); Edouard@2803: Edouard@2803: }/* else dispatch_0, ..., dispatch_n ? */ Edouard@2803: Edouard@2803: /*else { Edouard@2803: Edouard@2803: throw new Error("Dunno how to dispatch to widget at index = " + index); Edouard@2803: Edouard@2803: }*/ Edouard@2803: Edouard@2803: } Edouard@2803: Edouard@2803: } Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2803: cache[index] = value; Edouard@2801: Edouard@2801: Edouard@2801: Edouard@2803: }; Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2803: function init_widgets() { Edouard@2803: Edouard@2803: Object.keys(hmi_widgets).forEach(function(id) { Edouard@2803: Edouard@2803: let widget = hmi_widgets[id]; Edouard@2803: Edouard@2803: let init = widget.init; Edouard@2803: Edouard@2803: if(typeof(init) == "function"){ Edouard@2803: Edouard@2803: return init.call(widget); Edouard@2803: Edouard@2803: } Edouard@2803: Edouard@2803: }); Edouard@2803: Edouard@2803: }; Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2803: // Open WebSocket to relative "/ws" address Edouard@2803: Edouard@2803: var ws = new WebSocket(window.location.href.replace(/^http(s?:\/\/[^\/]*)\/.*$/, 'ws$1/ws')); Edouard@2803: Edouard@2803: ws.binaryType = 'arraybuffer'; Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2803: const dvgetters = { Edouard@2803: Edouard@2803: INT: [DataView.prototype.getInt16, 2], Edouard@2803: Edouard@2803: BOOL: [DataView.prototype.getInt8, 1] Edouard@2803: Edouard@2803: /* TODO */ Edouard@2803: Edouard@2803: }; Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2803: // Register message reception handler Edouard@2803: Edouard@2803: ws.onmessage = function (evt) { Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2803: let data = evt.data; Edouard@2803: Edouard@2803: let dv = new DataView(data); Edouard@2803: Edouard@2803: let i = 0; Edouard@2803: Edouard@2803: //console.log("Recv something."); Edouard@2803: Edouard@2803: try { Edouard@2803: Edouard@2803: for(let hash_int of hmi_hash) { Edouard@2803: Edouard@2803: if(hash_int != dv.getUint8(i)){ Edouard@2803: Edouard@2803: throw new Error("Hash doesn't match"); Edouard@2803: Edouard@2803: }; Edouard@2803: Edouard@2803: i++; Edouard@2803: Edouard@2803: }; Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2803: //console.log("Recv something GOOD."); Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2803: while(i < data.byteLength){ Edouard@2803: Edouard@2803: let index = dv.getUint32(i, true); Edouard@2803: Edouard@2803: //console.log("Recv something index is "+index); Edouard@2803: Edouard@2803: i += 4; Edouard@2803: Edouard@2803: let iectype = hmitree_types[index]; Edouard@2803: Edouard@2803: if(iectype != undefined){ Edouard@2803: Edouard@2803: let [dvgetter, bytesize] = dvgetters[iectype]; Edouard@2803: Edouard@2803: let value = dvgetter.call(dv,i,true); Edouard@2803: Edouard@2803: dispatch_value(index, value); Edouard@2803: Edouard@2803: i += bytesize; Edouard@2803: Edouard@2803: } else { Edouard@2803: Edouard@2803: throw new Error("Unknown index "+index) Edouard@2800: Edouard@2800: } Edouard@2800: Edouard@2803: }; Edouard@2803: Edouard@2803: } catch(err) { Edouard@2803: Edouard@2803: // 1003 is for "Unsupported Data" Edouard@2803: Edouard@2803: // ws.close(1003, err.message); Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2803: // TODO : remove debug alert ? Edouard@2803: Edouard@2803: alert("Error : "+err.message+"\nHMI will be reloaded."); Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2803: // force reload ignoring cache Edouard@2803: Edouard@2803: location.reload(true); Edouard@2803: Edouard@2803: } Edouard@2803: Edouard@2803: }; Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2803: function send_blob(data) { Edouard@2803: Edouard@2803: if(data.length > 0) { Edouard@2803: Edouard@2803: ws.send(new Blob([new Uint8Array(hmi_hash)].concat(data))); Edouard@2803: Edouard@2803: }; Edouard@2803: Edouard@2803: }; Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2803: const typedarray_types = { Edouard@2803: Edouard@2803: INT: Int16Array, Edouard@2803: Edouard@2803: BOOL: Uint8Array Edouard@2803: Edouard@2803: /* TODO */ Edouard@2803: Edouard@2803: }; Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2803: function send_reset() { Edouard@2803: Edouard@2803: send_blob(new Uint8Array([1])); /* reset = 1 */ Edouard@2803: Edouard@2803: }; Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2803: // subscription state, as it should be in hmi server Edouard@2803: Edouard@2803: // hmitree indexed array of integers Edouard@2803: Edouard@2803: var subscriptions = hmitree_types.map(_ignored => 0); Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2803: // subscription state as needed by widget now Edouard@2803: Edouard@2803: // hmitree indexed array of Sets of widgets objects Edouard@2803: Edouard@2803: var subscribers = hmitree_types.map(_ignored => new Set()); Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2803: function update_subscriptions() { Edouard@2803: Edouard@2803: let delta = []; Edouard@2803: Edouard@2803: for(let index = 0; index < subscribers.length; index++){ Edouard@2803: Edouard@2803: let widgets = subscribers[index]; Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2803: // periods are in ms Edouard@2803: Edouard@2803: let previous_period = subscriptions[index]; Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2803: let new_period = 0; Edouard@2803: Edouard@2803: if(widgets.size > 0) { Edouard@2803: Edouard@2803: let maxfreq = 0; Edouard@2803: Edouard@2803: for(let widget of widgets) Edouard@2803: Edouard@2803: if(maxfreq < widget.frequency) Edouard@2803: Edouard@2803: maxfreq = widget.frequency; Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2803: if(maxfreq != 0) Edouard@2803: Edouard@2803: new_period = 1000/maxfreq; Edouard@2800: Edouard@2800: } Edouard@2800: Edouard@2803: Edouard@2803: Edouard@2803: if(previous_period != new_period) { Edouard@2803: Edouard@2803: subscriptions[index] = new_period; Edouard@2803: Edouard@2803: delta.push( Edouard@2803: Edouard@2803: new Uint8Array([2]), /* subscribe = 2 */ Edouard@2803: Edouard@2803: new Uint32Array([index]), Edouard@2803: Edouard@2803: new Uint16Array([new_period])); Edouard@2803: Edouard@2803: } Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2800: } Edouard@2798: Edouard@2803: send_blob(delta); Edouard@2803: Edouard@2803: }; Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2803: function send_hmi_value(index, value) { Edouard@2803: Edouard@2803: let iectype = hmitree_types[index]; Edouard@2803: Edouard@2803: let jstype = typedarray_types[iectype]; Edouard@2803: Edouard@2803: send_blob([ Edouard@2803: Edouard@2803: new Uint8Array([0]), /* setval = 0 */ Edouard@2803: Edouard@2803: new Uint32Array([index]), Edouard@2803: Edouard@2803: new jstype([value])]); Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2803: cache[index] = value; Edouard@2803: Edouard@2803: }; Edouard@2803: Edouard@2803: Edouard@2803: Edouard@2803: function change_hmi_value(index, opstr) { Edouard@2803: Edouard@2803: let op = opstr[0]; Edouard@2803: Edouard@2803: let given_val = opstr.slice(1); Edouard@2803: Edouard@2803: let old_val = cache[index] Edouard@2803: Edouard@2803: let new_val; Edouard@2803: Edouard@2803: switch(op){ Edouard@2803: Edouard@2803: case "=": Edouard@2803: Edouard@2803: eval("new_val"+opstr); Edouard@2803: Edouard@2803: break; Edouard@2803: Edouard@2803: case "+": Edouard@2803: Edouard@2803: case "-": Edouard@2803: Edouard@2803: case "*": Edouard@2803: Edouard@2803: case "/": Edouard@2803: Edouard@2803: if(old_val != undefined) Edouard@2803: Edouard@2803: new_val = eval("old_val"+opstr); Edouard@2803: Edouard@2803: break; Edouard@2799: Edouard@2799: } Edouard@2799: Edouard@2803: if(new_val != undefined && old_val != new_val) Edouard@2803: Edouard@2803: return send_hmi_value(index, new_val); Edouard@2801: Edouard@2801: } Edouard@2801: Edouard@2801: Edouard@2801: Edouard@2798: var current_page; Edouard@2798: Edouard@2798: Edouard@2798: Edouard@2798: function switch_page(page_name) { Edouard@2798: Edouard@2798: let old_desc = page_desc[current_page]; Edouard@2798: Edouard@2798: let new_desc = page_desc[page_name]; Edouard@2798: Edouard@2798: /* TODO hide / show widgets */ Edouard@2798: Edouard@2798: /* TODO move viewport */ Edouard@2798: Edouard@2798: Edouard@2798: Edouard@2798: /* remove subsribers of previous page if any */ Edouard@2798: Edouard@2798: if(old_desc) for(let widget of old_desc.widgets){ Edouard@2798: Edouard@2798: for(let index of widget.indexes){ Edouard@2798: Edouard@2798: subscribers[index].delete(widget); Edouard@2798: Edouard@2798: } Edouard@2798: Edouard@2798: } Edouard@2798: Edouard@2798: /* add new subsribers if any */ Edouard@2798: Edouard@2798: if(new_desc) for(let widget of new_desc.widgets){ Edouard@2798: Edouard@2798: for(let index of widget.indexes){ Edouard@2798: Edouard@2798: subscribers[index].add(widget); Edouard@2798: Edouard@2798: } Edouard@2798: Edouard@2798: } Edouard@2798: Edouard@2798: Edouard@2798: Edouard@2798: current_page = page_name; Edouard@2798: Edouard@2798: Edouard@2798: Edouard@2798: update_subscriptions(); 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@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@2792: Edouard@2782: Edouard@2783: { Edouard@2783: Edouard@2783: var path, role, name, priv; Edouard@2783: Edouard@2783: var id = " Edouard@2782: Edouard@2783: "; Edouard@2782: Edouard@2789: Edouard@2783: name = " Edouard@2783: Edouard@2783: "; Edouard@2782: Edouard@2783: Edouard@2783: /* -------------- */ Edouard@2782: Edouard@2782: Edouard@2782: Edouard@2782: Edouard@2783: /* -------------- */ Edouard@2783: Edouard@2783: res.push({ Edouard@2783: Edouard@2783: path:path, Edouard@2783: Edouard@2783: role:role, Edouard@2783: Edouard@2783: name:name, Edouard@2783: Edouard@2783: priv:priv Edouard@2783: Edouard@2783: }) Edouard@2783: Edouard@2782: } Edouard@2782: Edouard@2782: Edouard@2753: Edouard@2763: ID: Edouard@2763: Edouard@2763: x: Edouard@2763: Edouard@2763: y: Edouard@2763: Edouard@2763: w: Edouard@2763: Edouard@2763: h: Edouard@2763: Edouard@2763: Edouard@2763: Edouard@2763: Edouard@2763: Edouard@2763: Edouard@2763: Edouard@2763: Edouard@2763: Edouard@2763: Edouard@2790: Edouard@2790: Edouard@2790: = Edouard@2790: Edouard@2790: Edouard@2790: Edouard@2763: Edouard@2763: Edouard@2763: Edouard@2763: Edouard@2763: Edouard@2763: Edouard@2763: Edouard@2753: Edouard@2800: Edouard@2800: Edouard@2800: frequency: 5, Edouard@2800: Edouard@2800: dispatch: function(value) { Edouard@2800: Edouard@2800: Edouard@2800: Edouard@2800: this.element.textContent = String(value); Edouard@2800: Edouard@2800: Edouard@2800: Edouard@2801: Edouard@2801: Display widget as a group not implemented Edouard@2801: Edouard@2800: Edouard@2800: Edouard@2800: }, Edouard@2800: Edouard@2800: Edouard@2800: Edouard@2801: frequency: 10, Edouard@2800: Edouard@2800: Edouard@2800: Edouard@2801: Edouard@2801: frequency: 5, Edouard@2801: Edouard@2801: Edouard@2801: Edouard@2801: Edouard@2801: Input widget must have a text element Edouard@2801: Edouard@2801: Edouard@2801: value_elt: document.getElementById(" Edouard@2801: Edouard@2801: "), Edouard@2801: Edouard@2801: dispatch: function(value) { Edouard@2801: Edouard@2801: this.value_elt.textContent = String(value); Edouard@2801: Edouard@2801: }, Edouard@2801: Edouard@2801: Edouard@2801: init: function() { Edouard@2801: Edouard@2801: Edouard@2801: document.getElementById(" Edouard@2801: Edouard@2801: ").addEventListener( Edouard@2801: Edouard@2801: "click", Edouard@2801: Edouard@2801: evt => alert('XXX TODO : Edit value')); Edouard@2801: Edouard@2801: Edouard@2801: Edouard@2801: document.getElementById(" Edouard@2801: Edouard@2801: ").addEventListener( Edouard@2801: Edouard@2801: "click", Edouard@2801: Edouard@2801: evt => change_hmi_value(this.indexes[0], " Edouard@2801: Edouard@2801: ")); Edouard@2801: Edouard@2801: Edouard@2801: }, Edouard@2801: Edouard@2801: Edouard@2801: Edouard@2801: Edouard@2800: frequency: 5, Edouard@2800: Edouard@2797: Edouard@2801: Edouard@2801: frequency: 5, Edouard@2801: Edouard@2801: Edouard@2753: