beremiz

SVGHMI: re-organize animate() to ensure that page fade-out is always visible, also make fade-out curve more aggressive to enhance visual feedback.

2022-07-12, Edouard Tisserant
406eb8a13648
Parents 4ee33be5b8b6
Children 611fd1f44ce9
SVGHMI: re-organize animate() to ensure that page fade-out is always visible, also make fade-out curve more aggressive to enhance visual feedback.
2 files changed, 44 insertions(+), 24 deletions(-)
  • +43 -23
    svghmi/svghmi.js
  • +1 -1
    svghmi/widget_jump.ysl2
    • --- a/svghmi/svghmi.js Fri Jul 08 11:58:10 2022 +0200
    +++ b/svghmi/svghmi.js Tue Jul 12 12:12:52 2022 +0200
    @@ -59,32 +59,49 @@
    // Called on requestAnimationFrame, modifies DOM
    var requestAnimationFrameID = null;
    function animate() {
    - // Do the page swith if any one pending
    - if(page_switch_in_progress){
    - if(current_subscribed_page != current_visible_page){
    - switch_visible_page(current_subscribed_page);
    + let rearm = true;
    + do{
    + if(page_fading == "pending" || page_fading == "forced"){
    + if(page_fading == "pending")
    + svg_root.classList.add("fade-out-page");
    + page_fading = "in_progress";
    + if(page_fading_args.length)
    + setTimeout(function(){
    + switch_page(...page_fading_args);
    + },1);
    + break;
    }
    - page_switch_in_progress = false;
    + // Do the page swith if pending
    + if(page_switch_in_progress){
    + if(current_subscribed_page != current_visible_page){
    + switch_visible_page(current_subscribed_page);
    + }
    - if(page_fading_in_progress){
    - svg_root.classList.remove("fade-out-page");
    - page_fading_in_progress = false;
    - }
    - }
    + page_switch_in_progress = false;
    - while(widget = need_cache_apply.pop()){
    - widget.apply_cache();
    - }
    + if(page_fading == "in_progress"){
    + svg_root.classList.remove("fade-out-page");
    + page_fading = "off";
    + }
    + }
    - if(jumps_need_update) update_jumps();
    + while(widget = need_cache_apply.pop()){
    + widget.apply_cache();
    + }
    +
    + if(jumps_need_update) update_jumps();
    - apply_updates();
    + apply_updates();
    - pending_widget_animates.forEach(widget => widget._animate());
    - pending_widget_animates = [];
    + pending_widget_animates.forEach(widget => widget._animate());
    + pending_widget_animates = [];
    + rearm = false;
    + } while(0);
    requestAnimationFrameID = null;
    +
    + if(rearm) requestHMIAnimation();
    }
    function requestHMIAnimation() {
    @@ -212,14 +229,17 @@
    }
    -var page_fading_in_progress = false;
    +var page_fading = "off";
    +var page_fading_args = "off";
    function fading_page_switch(...args){
    - svg_root.classList.add("fade-out-page");
    - page_fading_in_progress = true;
    + if(page_fading == "in_progress")
    + page_fading = "forced";
    + else
    + page_fading = "pending";
    + page_fading_args = args;
    - setTimeout(function(){
    - switch_page(...args);
    - },1);
    + requestHMIAnimation();
    +
    }
    document.body.style.backgroundColor = "black";
    --- a/svghmi/widget_jump.ysl2 Fri Jul 08 11:58:10 2022 +0200
    +++ b/svghmi/widget_jump.ysl2 Tue Jul 12 12:12:52 2022 +0200
    @@ -145,7 +145,7 @@
    emit "cssdefs:jump"
    ||
    .fade-out-page {
    - animation: fadeOut 0.6s both;
    + animation: cubic-bezier(0, 0.8, 0.6, 1) fadeOut 0.6s both;
    }
    @keyframes fadeOut {