svghmi/widget_animaterotation.ysl2
author Edouard Tisserant
Wed, 15 Jun 2022 11:39:14 +0200
changeset 3514 f86ffe291fea
parent 3241 fe945f1f48b7
permissions -rw-r--r--
SVGHMI: fading page switch : defer update of classList to next animate() call when finishing transition.

classList update was happening in the same call as switch_page(), but this call is not meant to do any change in the DOM. This was triggering unwanted style and layout recomputation.
// widget_animaterotation.ysl2

widget_desc("AnimateRotation") {
    longdesc
    ||
    AnimateRotation - DEPRECATED, do not use.
    Doesn't follow WYSIWYG principle, and forces user to add animateTransform tag in SVG (using inkscape XML editor for exemple)
    ||

    shortdesc > AnimateRotation - DEPRECATED

    path name="speed" accepts="HMI_INT,HMI_REAL" > speed
    
}

widget_class("AnimateRotation") {
    ||
        frequency = 5;
        speed = 0;
        widget_center = undefined;

        dispatch(value) {
            this.speed = value / 5;

            //reconfigure animation
            this.request_animate();
        }

        animate(){
           // change animation properties
           // TODO : rewrite with proper es6
           for(let child of this.element.children){
                if(child.nodeName == "animateTransform"){
                    if(this.speed > 0){
                        child.setAttribute("dur", this.speed+"s");
                        child.setAttribute("from", "0 "+this.widget_center[0]+" "+this.widget_center[1]);
                        child.setAttribute("to", "360 "+this.widget_center[0]+" "+this.widget_center[1]);
                    }
                    else if(this.speed < 0){
                        child.setAttribute("dur", (-1)*this.speed+"s");
                        child.setAttribute("from", "360 "+this.widget_center[0]+" "+this.widget_center[1]);
                        child.setAttribute("to", "0 "+this.widget_center[0]+" "+this.widget_center[1]);
                    }
                    else{
                        child.setAttribute("from", "0 "+this.widget_center[0]+" "+this.widget_center[1]);
                        child.setAttribute("to", "0 "+this.widget_center[0]+" "+this.widget_center[1]);
                    }
                }
           }
        }

        init() {
            let widget_pos = this.element.getBBox();
            this.widget_center = [(widget_pos.x+widget_pos.width/2), (widget_pos.y+widget_pos.height/2)];
        }
    ||
}