201         }

   201         }

   202     });

   202     });

   203 }

   203 }

   204 

   204 

   205 

   205 

   206 function fading_page_switch(...args){

   207 function fading_page_switch(...args){

   207     svg_root.classList.add("fade-out-page");

   208     svg_root.classList.add("fade-out-page");

   208 

   210 

   209     setTimeout(function(){

   211     setTimeout(function(){

   210         switch_page(...args);

   212         switch_page(...args);

   213 }

   214 }

   214 document.body.style.backgroundColor = "black";

   215 document.body.style.backgroundColor = "black";

   215 

   216 

   216 // subscribe to per instance current page hmi variable

   217 // subscribe to per instance current page hmi variable

   217 // PLC must prefix page name with "!" for page switch to happen

   218 // PLC must prefix page name with "!" for page switch to happen

   511             parent.appendChild(element);

   512             parent.appendChild(element);

   512         }

   513         }

   513     }

   514     }

   514 

   515 

   515     svg_root.setAttribute('viewBox',new_desc.bbox.join(" "));

   516     svg_root.setAttribute('viewBox',new_desc.bbox.join(" "));

   516     current_visible_page = page_name;

   520     current_visible_page = page_name;

   517 };

   521 };

   518 

   522 

   519 // Once connection established

   523 // Once connection established

   520 ws.onopen = function (evt) {

   524 ws.onopen = function (evt) {