# HG changeset patch
# User Edouard Tisserant
# Date 1655114638 -7200
# Node ID fce3d407bb462f8a3813607017b92e1d6f9444da
# Parent  7c27d57b6ec08c143ccfb1b047e2c64304a9a242
SVGHMI: add fading transition to make page switch feel more responsive on slow machines.

diff -r 7c27d57b6ec0 -r fce3d407bb46 svghmi/svghmi.js
--- a/svghmi/svghmi.js	Mon Jun 13 11:57:37 2022 +0200
+++ b/svghmi/svghmi.js	Mon Jun 13 12:03:58 2022 +0200
@@ -202,6 +202,17 @@
     });
 }
 
+
+function fading_page_switch(...args){
+    svg_root.classList.add("fade-out-page");
+
+    setTimeout(function(){
+        switch_page(...args);
+        svg_root.classList.remove("fade-out-page");
+    },10);
+}
+document.body.style.backgroundColor = "black";
+
 // subscribe to per instance current page hmi variable
 // PLC must prefix page name with "!" for page switch to happen
 subscribers(current_page_var_index).add({
@@ -209,7 +220,7 @@
     indexes: [current_page_var_index],
     new_hmi_value: function(index, value, oldval) {
         if(value.startsWith("!"))
-            switch_page(value.slice(1));
+            fading_page_switch(value.slice(1));
     }
 });
 
diff -r 7c27d57b6ec0 -r fce3d407bb46 svghmi/widget_jump.ysl2
--- a/svghmi/widget_jump.ysl2	Mon Jun 13 11:57:37 2022 +0200
+++ b/svghmi/widget_jump.ysl2	Mon Jun 13 12:03:58 2022 +0200
@@ -66,10 +66,9 @@
                 /* TODO: in order to allow jumps to page selected through for exemple a dropdown,
                    support path pointing to local variable whom value 
                    would be an HMI_TREE index and then jump to a relative page not hard-coded in advance */
-
                 if(!that.disabled) {
                     const index = that.indexes.length > 0 ? that.indexes[0] + that.offset : undefined;
-                    switch_page(name, index);
+                    fading_page_switch(name, index);
                 }
             }
         }
@@ -143,6 +142,19 @@
     }
 }
 
+emit "cssdefs:jump"
+||
+.fade-out-page {
+    animation: fadeOut 0.6s;
+}
+
+@keyframes fadeOut {
+    0% { opacity: 1; }
+    100% { opacity: 0; }
+}
+
+||
+
 emit "declarations:jump"
 ||
 var jumps_need_update = false;