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