beremiz

SVGHMI: add fading transition to make page switch feel more responsive on slow machines.

2022-06-13, Edouard Tisserant
fce3d407bb46
Parents 7c27d57b6ec0
Children 7d4a16e59337
SVGHMI: add fading transition to make page switch feel more responsive on slow machines.
2 files changed, 26 insertions(+), 3 deletions(-)
  • +12 -1
    svghmi/svghmi.js
  • +14 -2
    svghmi/widget_jump.ysl2
    • --- 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));
    }
    });
    --- 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;