Edouard@2753: Edouard@2798: Edouard@2798: Edouard@2753: Edouard@2763: Edouard@2808: 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@2814: HMI_NODE 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@2808: Edouard@2753: Edouard@2808: Edouard@2808: Edouard@2808: Edouard@2808: Edouard@2808: Edouard@2808: Edouard@2808: Edouard@2808: Edouard@2808: none Edouard@2808: Edouard@2808: Edouard@2808: 100vh Edouard@2808: Edouard@2808: Edouard@2808: 100vw Edouard@2808: Edouard@2808: Edouard@2753: Edouard@2753: Edouard@2753: Edouard@2793: Edouard@2793: Made with SVGHMI. https://beremiz.org Edouard@2793: Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2779: Edouard@2779: Edouard@2808: Edouard@2808: 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@2814: No match for path " Edouard@2797: Edouard@2814: " in HMI tree 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@2822: var heartbeat_index = Edouard@2822: Edouard@2822: ; Edouard@2822: Edouard@2822: Edouard@2822: 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@2808: bbox: [ Edouard@2808: Edouard@2808: , Edouard@2808: Edouard@2808: , Edouard@2808: Edouard@2808: , Edouard@2808: Edouard@2808: ], Edouard@2808: 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@2808: var svg_root = document.getElementById(" 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@2803: Edouard@2803: Edouard@2811: function dispatch_value_to_widget(widget, index, value, oldval) { Edouard@2811: Edouard@2811: let idxidx = widget.indexes.indexOf(index); Edouard@2811: Edouard@2811: if(idxidx == -1){ Edouard@2811: Edouard@2811: throw new Error("Dispatching to widget not interested, should not happen."); Edouard@2811: Edouard@2811: } Edouard@2811: Edouard@2811: let d = widget.dispatch; Edouard@2811: Edouard@2811: if(typeof(d) == "function" && idxidx == 0){ Edouard@2811: Edouard@2811: return d.call(widget, value, oldval); Edouard@2811: Edouard@2811: }else if(typeof(d) == "object" && d.length >= idxidx){ Edouard@2811: Edouard@2811: return d[idxidx].call(widget, value, oldval); Edouard@2811: Edouard@2811: }/* else dispatch_0, ..., dispatch_n ? */ Edouard@2811: Edouard@2811: /*else { Edouard@2811: Edouard@2811: throw new Error("Dunno how to dispatch to widget at index = " + index); Edouard@2811: 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@2811: return init.call(widget); 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@2811: INT: [DataView.prototype.getInt16, 2], Edouard@2811: Edouard@2811: BOOL: [DataView.prototype.getInt8, 1] Edouard@2811: Edouard@2811: /* TODO */ Edouard@2811: Edouard@2811: }; Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2811: // Register message reception handler 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@2811: let [dvgetter, bytesize] = dvgetters[iectype]; Edouard@2811: Edouard@2811: let value = dvgetter.call(dv,i,true); Edouard@2811: Edouard@2811: dispatch_value(index, value); Edouard@2811: Edouard@2811: i += bytesize; Edouard@2811: Edouard@2811: } else { Edouard@2811: Edouard@2811: throw new Error("Unknown index "+index) Edouard@2803: Edouard@2803: } Edouard@2803: Edouard@2811: }; Edouard@2811: 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@2811: INT: Int16Array, Edouard@2811: Edouard@2811: BOOL: Uint8Array 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@2822: // 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@2822: console.log("Heartbeat" + value); Edouard@2822: Edouard@2822: change_hmi_value(this.indexes[0], "+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@2811: let jstype = typedarray_types[iectype]; Edouard@2811: Edouard@2811: send_blob([ Edouard@2811: Edouard@2811: new Uint8Array([0]), /* setval = 0 */ Edouard@2811: Edouard@2811: new Uint32Array([index]), Edouard@2811: Edouard@2811: new jstype([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@2811: var current_page; Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2811: function switch_page(page_name) { Edouard@2811: Edouard@2811: let old_desc = page_desc[current_page]; Edouard@2811: Edouard@2811: let new_desc = page_desc[page_name]; Edouard@2811: Edouard@2811: /* TODO hide / show widgets */ Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2811: /* remove subsribers of previous page if any */ Edouard@2811: Edouard@2811: if(old_desc) for(let widget of old_desc.widgets){ Edouard@2811: Edouard@2811: for(let index of widget.indexes){ Edouard@2811: Edouard@2811: subscribers[index].delete(widget); Edouard@2803: Edouard@2803: } Edouard@2803: Edouard@2811: } Edouard@2811: Edouard@2811: Edouard@2811: Edouard@2811: if(new_desc) { Edouard@2811: Edouard@2811: /* add new subsribers if any */ Edouard@2811: Edouard@2811: for(let widget of new_desc.widgets){ Edouard@2811: Edouard@2811: for(let index of widget.indexes){ Edouard@2811: Edouard@2811: subscribers[index].add(widget); Edouard@2811: Edouard@2811: let cached_val = cache[index]; Edouard@2811: Edouard@2811: if(cached_val != undefined) Edouard@2811: Edouard@2811: dispatch_value_to_widget(widget, index, cached_val, cached_val); Edouard@2811: Edouard@2811: Edouard@2800: Edouard@2800: } Edouard@2800: Edouard@2800: } Edouard@2800: Edouard@2808: svg_root.setAttribute('viewBox',new_desc.bbox.join(" ")); Edouard@2808: Edouard@2811: // TODO dispatch current cache in newly opened page Edouard@2811: 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@2814: Edouard@2814: ID: Edouard@2814: Edouard@2814: x: Edouard@2814: Edouard@2814: y: Edouard@2814: Edouard@2814: w: Edouard@2814: Edouard@2814: h: Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2814: = Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2814: Edouard@2808: Edouard@2808: Edouard@2808: Edouard@2800: Edouard@2808: Edouard@2807: Edouard@2807: Edouard@2808: Edouard@2807: Edouard@2807: Meter widget must have a Edouard@2807: Edouard@2807: element Edouard@2807: Edouard@2807: Edouard@2807: Edouard@2807: _elt: document.getElementById(" Edouard@2807: Edouard@2807: "), Edouard@2807: Edouard@2807: Edouard@2808: Edouard@2808: Edouard@2808: Edouard@2808: frequency: 5, Edouard@2808: Edouard@2808: dispatch: function(value) { Edouard@2808: Edouard@2808: Edouard@2808: Edouard@2808: this.element.textContent = String(value); Edouard@2808: Edouard@2808: Edouard@2808: Edouard@2808: Edouard@2808: Display widget as a group not implemented Edouard@2808: Edouard@2808: Edouard@2808: Edouard@2808: }, Edouard@2808: Edouard@2808: Edouard@2808: Edouard@2808: Edouard@2808: frequency: 10, Edouard@2808: Edouard@2808: Edouard@2808: Edouard@2808: Edouard@2810: value min max needle range Edouard@2808: Edouard@2808: Edouard@2807: dispatch: function(value) { Edouard@2807: Edouard@2807: this.value_elt.textContent = String(value); Edouard@2807: Edouard@2807: let [min,max,totallength] = this.range; Edouard@2807: Edouard@2807: let length = Math.max(0,Math.min(totallength,(Number(value)-min)*totallength/(max-min))); Edouard@2807: Edouard@2807: let tip = this.range_elt.getPointAtLength(length); Edouard@2807: Edouard@2807: this.needle_elt.setAttribute('d', "M "+this.origin.x+","+this.origin.y+" "+tip.x+","+tip.y); Edouard@2807: Edouard@2807: }, Edouard@2807: Edouard@2807: origin: undefined, Edouard@2807: Edouard@2807: range: undefined, Edouard@2807: Edouard@2807: init: function() { Edouard@2807: Edouard@2807: this.range = [Number(this.min_elt.textContent), Number(this.max_elt.textContent), this.range_elt.getTotalLength()] Edouard@2807: Edouard@2807: this.origin = this.needle_elt.getPointAtLength(0); Edouard@2807: Edouard@2807: }, Edouard@2807: Edouard@2800: Edouard@2800: Edouard@2801: Edouard@2801: frequency: 5, Edouard@2801: Edouard@2808: Edouard@2808: Edouard@2808: Edouard@2810: value Edouard@2808: Edouard@2808: 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@2806: evt => {let new_val = change_hmi_value(this.indexes[0], " Edouard@2801: Edouard@2806: "); Edouard@2806: Edouard@2806: this.value_elt.textContent = String(new_val);}); 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@2808: Edouard@2808: init: function() { Edouard@2808: Edouard@2808: this.element.addEventListener( Edouard@2808: Edouard@2808: "click", Edouard@2808: Edouard@2808: evt => switch_page(this.args[0])); Edouard@2808: Edouard@2808: }, Edouard@2808: Edouard@2808: Edouard@2753: