Edouard@2783: // svghmi.js
Edouard@2783: 
Edouard@2798: function dispatch_value(index, value) {
Edouard@3022:     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@3006:             widget.new_hmi_value(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@3455:         widget.do_init();
Edouard@2801:     });
Edouard@2801: };
Edouard@2801: 
Edouard@2798: // Open WebSocket to relative "/ws" address
Edouard@3381: var has_watchdog = window.location.hash == "#watchdog";
edouard@3268: 
Edouard@2798: const dvgetters = {
Edouard@3837:     SINT:  (dv,offset) => [dv.getInt8(offset, true), 1],
Edouard@3837:     INT:   (dv,offset) => [dv.getInt16(offset, true), 2],
Edouard@3837:     DINT:  (dv,offset) => [dv.getInt32(offset, true), 4],
Edouard@3837:     LINT:  (dv,offset) => [dv.getBigInt64(offset, true), 8],
Edouard@3837:     USINT: (dv,offset) => [dv.getUint8(offset, true), 1],
Edouard@3837:     UINT:  (dv,offset) => [dv.getUint16(offset, true), 2],
Edouard@3837:     UDINT: (dv,offset) => [dv.getUint32(offset, true), 4],
Edouard@3837:     ULINT: (dv,offset) => [dv.getBigUint64(offset, true), 8],
Edouard@3837:     BOOL:  (dv,offset) => [dv.getInt8(offset, true), 1],
Edouard@3837:     NODE:  (dv,offset) => [dv.getInt8(offset, true), 1],
Edouard@3837:     REAL:  (dv,offset) => [dv.getFloat32(offset, true), 4],
edouard@2826:     STRING: (dv, offset) => {
Edouard@3080:         const 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@2865: // Called on requestAnimationFrame, modifies DOM
Edouard@2865: var requestAnimationFrameID = null;
Edouard@2865: function animate() {
Edouard@3553:     let rearm = true;
Edouard@3553:     do{
Edouard@3553:         if(page_fading == "pending" || page_fading == "forced"){
Edouard@3553:             if(page_fading == "pending")
Edouard@3553:                 svg_root.classList.add("fade-out-page");
Edouard@3553:             page_fading = "in_progress";
Edouard@3553:             if(page_fading_args.length)
Edouard@3553:                 setTimeout(function(){
Edouard@3553:                     switch_page(...page_fading_args);
Edouard@3553:                 },1);
Edouard@3553:             break;
Edouard@3553:         }
Edouard@3553: 
Edouard@3553:         // Do the page swith if pending
Edouard@3553:         if(page_switch_in_progress){
Edouard@3553:             if(current_subscribed_page != current_visible_page){
Edouard@3553:                 switch_visible_page(current_subscribed_page);
Edouard@3553:             }
Edouard@3553: 
Edouard@3553:             page_switch_in_progress = false;
Edouard@3553: 
Edouard@3553:             if(page_fading == "in_progress"){
Edouard@3553:                 svg_root.classList.remove("fade-out-page");
Edouard@3553:                 page_fading = "off";
Edouard@3553:             }
Edouard@3553:         }
Edouard@3553: 
Edouard@3553:         if(jumps_need_update) update_jumps();
Edouard@3553: 
Edouard@3553: 
Edouard@3553:         pending_widget_animates.forEach(widget => widget._animate());
Edouard@3553:         pending_widget_animates = [];
Edouard@3553:         rearm = false;
Edouard@3553:     } while(0);
Edouard@3019: 
Edouard@2864:     requestAnimationFrameID = null;
Edouard@3553: 
Edouard@3553:     if(rearm) requestHMIAnimation();
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@3648: function ws_onmessage(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@3624:                 dispatch_value(index, value);
Edouard@2799:                 i += bytesize;
Edouard@2799:             } else {
edouard@2859:                 throw new Error("Unknown index "+index);
Edouard@2799:             }
Edouard@2799:         };
Edouard@3602: 
edouard@2859:         // register for rendering on next frame, since there are updates
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@3080: hmi_hash_u8 = new Uint8Array(hmi_hash);
Edouard@2788: 
Edouard@3648: var ws = null;
Edouard@3648: 
Edouard@2798: function send_blob(data) {
Edouard@3648:     if(ws && data.length > 0) {
Edouard@3080:         ws.send(new Blob([hmi_hash_u8].concat(data)));
Edouard@2780:     };
Edouard@2798: };
Edouard@2798: 
Edouard@2798: const typedarray_types = {
Edouard@3837:     SINT: (number) => new Int8Array([number]),
Edouard@2829:     INT: (number) => new Int16Array([number]),
Edouard@3837:     DINT: (number) => new Int32Array([number]),
Edouard@3837:     LINT: (number) => new Int64Array([number]),
Edouard@3837:     USINT: (number) => new Uint8Array([number]),
Edouard@3837:     UINT: (number) => new Uint16Array([number]),
Edouard@3837:     UDINT: (number) => new Uint32Array([number]),
Edouard@3837:     ULINT: (number) => new Uint64Array([number]),
Edouard@3645:     BOOL: (truth) => new Int8Array([truth]),
Edouard@3645:     NODE: (truth) => new Int8Array([truth]),
Edouard@3145:     REAL: (number) => new Float32Array([number]),
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@3080:         for(let 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@3022: var subscriptions = [];
Edouard@3022: 
Edouard@3022: function subscribers(index) {
Edouard@3022:     let entry = subscriptions[index];
Edouard@3022:     let res;
Edouard@3022:     if(entry == undefined){
Edouard@3022:         res = new Set();
Edouard@3022:         subscriptions[index] = [res,0];
Edouard@3022:     }else{
Edouard@3022:         [res, _ign] = entry;
Edouard@3022:     }
Edouard@3022:     return res
Edouard@3022: }
Edouard@3022: 
Edouard@3022: function get_subscription_period(index) {
Edouard@3022:     let entry = subscriptions[index];
Edouard@3022:     if(entry == undefined)
Edouard@3022:         return 0;
Edouard@3022:     let [_ign, period] = entry;
Edouard@3022:     return period;
Edouard@3022: }
Edouard@3022: 
Edouard@3022: function set_subscription_period(index, period) {
Edouard@3022:     let entry = subscriptions[index];
Edouard@3022:     if(entry == undefined){
Edouard@3022:         subscriptions[index] = [new Set(), period];
Edouard@3022:     } else {
Edouard@3022:         entry[1] = period;
Edouard@3022:     }
Edouard@3022: }
Edouard@2798: 
Edouard@3648: function reset_subscription_periods() {
Edouard@3648:     for(let index in subscriptions)
Edouard@3648:         subscriptions[index][1] = 0;
Edouard@3648: }
Edouard@3648: 
Edouard@3381: if(has_watchdog){
Edouard@3381:     // artificially subscribe the watchdog widget to "/heartbeat" hmi variable
Edouard@3381:     // Since dispatch directly calls change_hmi_value,
Edouard@3381:     // PLC will periodically send variable at given frequency
Edouard@3381:     subscribers(heartbeat_index).add({
Edouard@3381:         /* type: "Watchdog", */
Edouard@3381:         frequency: 1,
Edouard@3381:         indexes: [heartbeat_index],
Edouard@3381:         new_hmi_value: function(index, value, oldval) {
Edouard@3381:             apply_hmi_value(heartbeat_index, value+1);
Edouard@3381:         }
Edouard@3381:     });
Edouard@3381: }
Edouard@3381: 
Edouard@3512: 
Edouard@3553: var page_fading = "off";
Edouard@3553: var page_fading_args = "off";
Edouard@3512: function fading_page_switch(...args){
Edouard@3553:     if(page_fading == "in_progress")
Edouard@3553:         page_fading = "forced";
Edouard@3553:     else
Edouard@3553:         page_fading = "pending";
Edouard@3553:     page_fading_args = args;
Edouard@3553: 
Edouard@3553:     requestHMIAnimation();
Edouard@3553: 
Edouard@3512: }
Edouard@3512: document.body.style.backgroundColor = "black";
Edouard@3512: 
Edouard@3381: // subscribe to per instance current page hmi variable
Edouard@3385: // PLC must prefix page name with "!" for page switch to happen
Edouard@3381: subscribers(current_page_var_index).add({
Edouard@2822:     frequency: 1,
Edouard@3381:     indexes: [current_page_var_index],
edouard@3006:     new_hmi_value: function(index, value, oldval) {
Edouard@3385:         if(value.startsWith("!"))
Edouard@3512:             fading_page_switch(value.slice(1));
Edouard@2822:     }
Edouard@2822: });
Edouard@2822: 
edouard@3142: function svg_text_to_multiline(elt) {
edouard@3142:     return(Array.prototype.map.call(elt.children, x=>x.textContent).join("\\\\n")); 
edouard@3142: }
edouard@3142: 
Edouard@3524: function multiline_to_svg_text(elt, str, blank) {
Edouard@3524:     str.split('\\\\n').map((line,i) => {elt.children[i].textContent = blank?"":line;});
edouard@3142: }
edouard@3129: 
edouard@3129: function switch_langnum(langnum) {
edouard@3144:     langnum = Math.max(0, Math.min(langs.length - 1, langnum));
edouard@3129: 
edouard@3129:     for (let translation of translations) {
edouard@3144:         let [objs, msgs] = translation;
edouard@3144:         let msg = msgs[langnum];
edouard@3129:         for (let obj of objs) {
edouard@3142:             multiline_to_svg_text(obj, msg);
edouard@3142:             obj.setAttribute("lang",langnum);
edouard@3129:         }
edouard@3129:     }
edouard@3144:     return langnum;
edouard@3129: }
edouard@3142: 
edouard@3142: // backup original texts
edouard@3142: for (let translation of translations) {
edouard@3144:     let [objs, msgs] = translation;
edouard@3144:     msgs.unshift(svg_text_to_multiline(objs[0])); 
edouard@3142: }
edouard@3142: 
edouard@3129: var lang_local_index = hmi_local_index("lang");
edouard@3144: var langcode_local_index = hmi_local_index("lang_code");
edouard@3144: var langname_local_index = hmi_local_index("lang_name");
edouard@3129: subscribers(lang_local_index).add({
edouard@3129:     indexes: [lang_local_index],
edouard@3129:     new_hmi_value: function(index, value, oldval) {
edouard@3144:         let current_lang =  switch_langnum(value);
edouard@3144:         let [langname,langcode] = langs[current_lang];
edouard@3144:         apply_hmi_value(langcode_local_index, langcode);
edouard@3144:         apply_hmi_value(langname_local_index, langname);
edouard@3142:         switch_page();
edouard@3129:     }
edouard@3129: });
edouard@3144: 
Edouard@3451: // returns en_US, fr_FR or en_UK depending on selected language
Edouard@3451: function get_current_lang_code(){
Edouard@3451:     return cache[langcode_local_index];
Edouard@3451: }
Edouard@3451: 
edouard@3144: function setup_lang(){
edouard@3144:     let current_lang = cache[lang_local_index];
edouard@3144:     let new_lang = switch_langnum(current_lang);
edouard@3144:     if(current_lang != new_lang){
edouard@3144:         apply_hmi_value(lang_local_index, new_lang);
edouard@3144:     }
edouard@3144: }
edouard@3144: 
edouard@3144: setup_lang();
Edouard@3022: 
Edouard@2798: function update_subscriptions() {
Edouard@2798:     let delta = [];
Edouard@3648:     if(!ws)
Edouard@3648:         // dont' change subscriptions if not connected
Edouard@3648:         return;
Edouard@3648: 
Edouard@3022:     for(let index in subscriptions){
Edouard@3022:         let widgets = subscribers(index);
Edouard@2798: 
Edouard@2798:         // periods are in ms
Edouard@3022:         let previous_period = get_subscription_period(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@2960:             for(let widget of widgets){
edouard@2960:                 let wf = widget.frequency;
edouard@2960:                 if(wf != undefined && maxfreq < wf)
edouard@2960:                     maxfreq = wf;
edouard@2960:             }
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@3022:             set_subscription_period(index, new_period);
Edouard@3022:             if(index <= last_remote_index){
Edouard@3022:                 delta.push(
Edouard@3022:                     new Uint8Array([2]), /* subscribe = 2 */
Edouard@3022:                     new Uint32Array([index]),
Edouard@3022:                     new Uint16Array([new_period]));
Edouard@3022:             }
Edouard@2798:         }
Edouard@2798:     }
Edouard@2798:     send_blob(delta);
Edouard@2798: };
Edouard@2798: 
Edouard@2801: function send_hmi_value(index, value) {
edouard@3017:     if(index > last_remote_index){
Edouard@3602:         dispatch_value(index, value);
edouard@3128: 
edouard@3128:         if(persistent_indexes.has(index)){
edouard@3128:             let varname = persistent_indexes.get(index);
edouard@3128:             document.cookie = varname+"="+value+"; max-age=3153600000";
edouard@3128:         }
edouard@3128: 
edouard@3017:         return;
edouard@3017:     }
edouard@3017: 
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@2921:     // DON'T DO THAT unless read_iterator in svghmi.c modifies wbuf as well, not only rbuf
Edouard@2921:     // cache[index] = value;
Edouard@2798: };
Edouard@2798: 
Edouard@2911: function apply_hmi_value(index, new_val) {
edouard@3413:     // Similarly to previous comment, taking decision to update based 
edouard@3413:     // on cache content is bad and can lead to inconsistency
edouard@3413:     /*let old_val = cache[index];*/
edouard@3413:     if(new_val != undefined /*&& old_val != new_val*/)
Edouard@2911:         send_hmi_value(index, new_val);
Edouard@2911:     return new_val;
Edouard@2911: }
Edouard@2911: 
Edouard@3078: const quotes = {"'":null, '"':null};
edouard@2970: 
edouard@3098: function eval_operation_string(old_val, opstr) {
Edouard@2801:     let op = opstr[0];
edouard@2970:     let given_val;
edouard@2970:     if(opstr.length < 2) 
edouard@3098:         return undefined;
edouard@2970:     if(opstr[1] in quotes){
edouard@2970:         if(opstr.length < 3) 
edouard@3098:             return undefined;
edouard@2970:         if(opstr[opstr.length-1] == opstr[1]){
edouard@2970:             given_val = opstr.slice(2,opstr.length-1);
edouard@2970:         }
edouard@2970:     } else {
edouard@2970:         given_val = Number(opstr.slice(1));
edouard@2970:     }
Edouard@2803:     let new_val;
Edouard@2803:     switch(op){
Edouard@2803:       case "=":
edouard@2970:         new_val = given_val;
Edouard@2803:         break;
Edouard@2803:       case "+":
edouard@2970:         new_val = old_val + given_val;
edouard@2970:         break;
Edouard@2803:       case "-":
edouard@2970:         new_val = old_val - given_val;
edouard@2970:         break;
Edouard@2803:       case "*":
edouard@2970:         new_val = old_val * given_val;
edouard@2970:         break;
Edouard@2803:       case "/":
edouard@2970:         new_val = old_val / given_val;
Edouard@2803:         break;
Edouard@2803:     }
edouard@3098:     return new_val;
edouard@3098: }
edouard@3098: 
Edouard@2864: var current_visible_page;
Edouard@2864: var current_subscribed_page;
Edouard@2903: var current_page_index;
Edouard@3206: var page_node_local_index = hmi_local_index("page_node");
Edouard@3535: var page_switch_in_progress = false;
Edouard@2798: 
Edouard@3299: function toggleFullscreen() {
Edouard@3299:   let elem = document.documentElement;
Edouard@3299: 
Edouard@3299:   if (!document.fullscreenElement) {
Edouard@3299:     elem.requestFullscreen().catch(err => {
Edouard@3299:       console.log("Error attempting to enable full-screen mode: "+err.message+" ("+err.name+")");
Edouard@3299:     });
Edouard@3299:   } else {
Edouard@3299:     document.exitFullscreen();
Edouard@3299:   }
Edouard@3299: }
Edouard@3299: 
Edouard@3648: // prevents context menu from appearing on right click and long touch
Edouard@3648: document.body.addEventListener('contextmenu', e => {
Edouard@3648:     toggleFullscreen();
Edouard@3648:     e.preventDefault();
Edouard@3648: });
Edouard@3648: 
Edouard@3664: if(screensaver_delay){
Edouard@3664:     var screensaver_timer = null;
Edouard@3664:     function reset_screensaver_timer() {
Edouard@3664:         if(screensaver_timer){
Edouard@3664:             window.clearTimeout(screensaver_timer);
Edouard@3664:         }
Edouard@3664:         screensaver_timer = window.setTimeout(() => {
Edouard@3664:             switch_page("ScreenSaver");
Edouard@3664:             screensaver_timer = null;
Edouard@3664:         }, screensaver_delay*1000);
Edouard@3664:     }
Edouard@3653:     document.body.addEventListener('pointerdown', reset_screensaver_timer);
Edouard@3664:     // initialize screensaver
Edouard@3664:     reset_screensaver_timer();
Edouard@3664: }
Edouard@3664: 
Edouard@3653: 
Edouard@3648: function detach_detachables() {
Edouard@3082: 
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@3535:     if(page_switch_in_progress){
Edouard@2864:         /* page switch already going */
Edouard@2864:         /* TODO LOG ERROR */
Edouard@2902:         return false;
Edouard@2895:     }
Edouard@3535:     page_switch_in_progress = true;
Edouard@2895: 
Edouard@2895:     if(page_name == undefined)
Edouard@2895:         page_name = current_subscribed_page;
Edouard@3381:     else if(page_index == undefined){
Edouard@3381:         [page_name, page_index] = page_name.split('@')
Edouard@3381:     }
Edouard@2903: 
Edouard@2903:     let old_desc = page_desc[current_subscribed_page];
Edouard@2903:     let new_desc = page_desc[page_name];
Edouard@2903: 
Edouard@2903:     if(new_desc == undefined){
Edouard@2903:         /* TODO LOG ERROR */
Edouard@2903:         return false;
Edouard@2903:     }
Edouard@2903: 
Edouard@3381:     if(page_index == undefined)
Edouard@2903:         page_index = new_desc.page_index;
Edouard@3381:     else if(typeof(page_index) == "string") {
Edouard@3381:         let hmitree_node = hmitree_nodes[page_index];
Edouard@3381:         if(hmitree_node !== undefined){
Edouard@3381:             let [int_index, hmiclass] = hmitree_node;
Edouard@3381:             if(hmiclass == new_desc.page_class)
Edouard@3381:                 page_index = int_index;
Edouard@3381:             else
Edouard@3381:                 page_index = new_desc.page_index;
Edouard@3381:         } else {
Edouard@3381:             page_index = new_desc.page_index;
Edouard@3381:         }
Edouard@2903:     }
Edouard@2903: 
Edouard@2903:     if(old_desc){
edouard@3005:         old_desc.widgets.map(([widget,relativeness])=>widget.unsub());
edouard@3005:     }
Edouard@3080:     const new_offset = page_index == undefined ? 0 : page_index - new_desc.page_index;
Edouard@3080: 
Edouard@3080:     const container_id = page_name + (page_index != undefined ? page_index : "");
edouard@3017: 
edouard@3017:     new_desc.widgets.map(([widget,relativeness])=>widget.sub(new_offset,relativeness,container_id));
Edouard@2903: 
Edouard@2903:     update_subscriptions();
Edouard@2903: 
Edouard@2903:     current_subscribed_page = page_name;
Edouard@2903:     current_page_index = page_index;
Edouard@3206:     let page_node;
Edouard@3206:     if(page_index != undefined){
Edouard@3206:         page_node = hmitree_paths[page_index];
Edouard@3206:     }else{
Edouard@3206:         page_node = "";
Edouard@3206:     }
Edouard@3206:     apply_hmi_value(page_node_local_index, page_node);
Edouard@2903: 
Edouard@2903:     jumps_need_update = true;
Edouard@2903: 
Edouard@2903:     requestHMIAnimation();
Edouard@3653:     let [last_page_name, last_page_index] = jump_history[jump_history.length-1];
Edouard@3653:     if(last_page_name != page_name || last_page_index != page_index){
Edouard@3653:         jump_history.push([page_name, page_index]);
Edouard@3653:         if(jump_history.length > 42)
Edouard@3653:             jump_history.shift();
Edouard@3653:     }
Edouard@2903: 
Edouard@3385:     apply_hmi_value(current_page_var_index, page_index == undefined
Edouard@3385:         ? page_name
Edouard@3385:         : page_name + "@" + hmitree_paths[page_index]);
Edouard@3381: 
Edouard@3685:     // when entering a page, assignments are evaluated
Edouard@3685:     new_desc.widgets[0][0].assign();
Edouard@3685: 
Edouard@2903:     return true;
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@3625: /* From https://jsfiddle.net/ibowankenobi/1mmh7rs6/6/ */
Edouard@3625: function getAbsoluteCTM(element){
Edouard@3625: 	var height = svg_root.height.baseVal.value,
Edouard@3625: 		width = svg_root.width.baseVal.value,
Edouard@3625: 		viewBoxRect = svg_root.viewBox.baseVal,
Edouard@3625: 		vHeight = viewBoxRect.height,
Edouard@3625: 		vWidth = viewBoxRect.width;
Edouard@3625: 	if(!vWidth || !vHeight){
Edouard@3625: 		return element.getCTM();
Edouard@3625: 	}
Edouard@3625: 	var sH = height/vHeight,
Edouard@3625: 		sW = width/vWidth,
Edouard@3625: 		matrix = svg_root.createSVGMatrix();
Edouard@3625: 	matrix.a = sW;
Edouard@3625: 	matrix.d = sH
Edouard@3625: 	var realCTM = element.getCTM().multiply(matrix.inverse());
Edouard@3625: 	realCTM.e = realCTM.e/sW + viewBoxRect.x;
Edouard@3625: 	realCTM.f = realCTM.f/sH + viewBoxRect.y;
Edouard@3625: 	return realCTM;
Edouard@3625: }
Edouard@3625: 
Edouard@3625: function apply_reference_frames(){
Edouard@3625:     const matches = svg_root.querySelectorAll("g[svghmi_x_offset]");
Edouard@3625:     matches.forEach((group) => {
Edouard@3625:         let [x,y] = ["x", "y"].map((axis) => Number(group.getAttribute("svghmi_"+axis+"_offset")));
Edouard@3625:         let ctm = getAbsoluteCTM(group);
Edouard@3625:         // zero translation part of CTM
Edouard@3625:         // to only apply rotation/skewing to offset vector
Edouard@3625:         ctm.e = 0;
Edouard@3625:         ctm.f = 0;
Edouard@3625:         let invctm = ctm.inverse();
Edouard@3625:         let vect = new DOMPoint(x, y);
Edouard@3625:         let newvect = vect.matrixTransform(invctm);
Edouard@3625:         let transform = svg_root.createSVGTransform();
Edouard@3625:         transform.setTranslate(newvect.x, newvect.y);
Edouard@3625:         group.transform.baseVal.appendItem(transform);
Edouard@3625:         ["x", "y"].forEach((axis) => group.removeAttribute("svghmi_"+axis+"_offset"));
Edouard@3625:     });
Edouard@3625: }
Edouard@3625: 
Edouard@3648: // prepare SVG
Edouard@3648: apply_reference_frames();
Edouard@3648: init_widgets();
Edouard@3648: detach_detachables();
Edouard@3648: 
Edouard@3648: // show main page
Edouard@3648: switch_page(default_page);
Edouard@3648: 
Edouard@3648: var reconnect_delay = 0;
Edouard@3650: var periodic_reconnect_timer;
Edouard@3683: var force_reconnect = false;
Edouard@3648: 
Edouard@2798: // Once connection established
Edouard@3648: function ws_onopen(evt) {
Edouard@3650:     // Work around memory leak with websocket on QtWebEngine
Edouard@3650:     // reconnect every hour to force deallocate websocket garbage
Edouard@3650:     if(window.navigator.userAgent.includes("QtWebEngine")){
Edouard@3650:         if(periodic_reconnect_timer){
Edouard@3650:             window.clearTimeout(periodic_reconnect_timer);
Edouard@3650:         }
Edouard@3650:         periodic_reconnect_timer = window.setTimeout(() => {
Edouard@3683:             force_reconnect = true;
Edouard@3650:             ws.close();
Edouard@3650:             periodic_reconnect_timer = null;
Edouard@3650:         }, 3600000);
Edouard@3650:     }
Edouard@3648: 
Edouard@3648:     // forget earlier subscriptions locally
Edouard@3648:     reset_subscription_periods();
Edouard@3648: 
Edouard@3648:     // update PLC about subscriptions and current page
Edouard@3648:     switch_page();
Edouard@3648: 
Edouard@3648:     // at first try reconnect immediately
Edouard@3648:     reconnect_delay = 1;
Edouard@3648: };
Edouard@3648: 
Edouard@3648: function ws_onclose(evt) {
Edouard@3648:     console.log("Connection closed. code:"+evt.code+" reason:"+evt.reason+" wasClean:"+evt.wasClean+" Reload in "+reconnect_delay+"ms.");
Edouard@3648:     ws = null;
Edouard@3683:     // Do not attempt to reconnect immediately in case:
Edouard@3683:     //    - connection was closed by server (PLC stop)
Edouard@3683:     //    - connection was closed locally with an intention to reconnect
Edouard@3683:     if(evt.code=1000 && !force_reconnect){
Edouard@3680:         window.alert("Connection closed by server");
Edouard@3680:         location.reload();
Edouard@3680:     }
Edouard@3648:     window.setTimeout(create_ws, reconnect_delay);
Edouard@3648:     reconnect_delay += 500;
Edouard@3683:     force_reconnect = false;
Edouard@3648: };
Edouard@3648: 
Edouard@3648: var ws_url =
Edouard@3648:     window.location.href.replace(/^http(s?:\/\/[^\/]*)\/.*$/, 'ws$1/ws')
Edouard@3648:     + '?mode=' + (has_watchdog ? "watchdog" : "multiclient");
Edouard@3648: 
Edouard@3648: function create_ws(){
Edouard@3648:     ws = new WebSocket(ws_url);
Edouard@3648:     ws.binaryType = 'arraybuffer';
Edouard@3648:     ws.onmessage = ws_onmessage;
Edouard@3648:     ws.onclose = ws_onclose;
Edouard@3648:     ws.onopen = ws_onopen;
Edouard@3648: }
Edouard@3648: 
Edouard@3648: create_ws()
Edouard@2911: 
Edouard@2911: var edit_callback;
Edouard@3075: const localtypes = {"PAGE_LOCAL":null, "HMI_LOCAL":null}
Edouard@3118: function edit_value(path, valuetype, callback, initial) {
Edouard@3075:     if(valuetype in localtypes){
Edouard@3075:         valuetype = (typeof initial) == "number" ? "HMI_REAL" : "HMI_STRING";
Edouard@3075:     }
Edouard@2913:     let [keypadid, xcoord, ycoord] = keypads[valuetype];
Edouard@2911:     edit_callback = callback;
Edouard@2917:     let widget = hmi_widgets[keypadid];
Edouard@3118:     widget.start_edit(path, valuetype, callback, initial);
Edouard@2917: };
Edouard@2917: 
Edouard@2917: var current_modal; /* TODO stack ?*/
Edouard@2917: 
Edouard@3118: function show_modal() {
Edouard@2917:     let [element, parent] = detachable_elements[this.element.id];
Edouard@2917: 
Edouard@2916:     tmpgrp = document.createElementNS(xmlns,"g");
Edouard@2913:     tmpgrpattr = document.createAttribute("transform");
Edouard@2917:     let [xcoord,ycoord] = this.coordinates;
Edouard@2913:     let [xdest,ydest] = page_desc[current_visible_page].bbox;
Edouard@3118:     tmpgrpattr.value = "translate("+String(xdest-xcoord)+","+String(ydest-ycoord)+")";
usveticic@3010: 
Edouard@2913:     tmpgrp.setAttributeNode(tmpgrpattr);
Edouard@2913: 
Edouard@2913:     tmpgrp.appendChild(element);
Edouard@2913:     parent.appendChild(tmpgrp);
Edouard@2913: 
Edouard@2917:     current_modal = [this.element.id, tmpgrp];
Edouard@2917: };
Edouard@2917: 
Edouard@2917: function end_modal() {
Edouard@2917:     let [eltid, tmpgrp] = current_modal;
Edouard@2917:     let [element, parent] = detachable_elements[this.element.id];
Edouard@2917: 
Edouard@2917:     parent.removeChild(tmpgrp);
Edouard@2917: 
Edouard@2917:     current_modal = undefined;
Edouard@2917: };
edouard@2920: