[SCENE] Defilement automatique de scenes

[WITNicolas]

Une scene qui permet de faire défiler automatique des scenes pour un écran de sensibilisation

Dans l'acteur STACKROOT pour modifier le fond dans la propriété Image de Fond

Dans l'acteur SCREEN1

Il suffit de régler le timer, le fondu et de rajouter autant de propriétés additionnelles scenes (il faut laisser les noms par défaut : prop1 prop2 etc....), l'ordre est modifiable.

La propriété play ? permet de lancer le carroussel. (par défaut il est actif)

Cette propriété est également pilotée par l'icone présente en bas à droite de l'écran, un clic dessus permet de stopper ou relancer le défilement.

SYNAPPS-STUDIO-SCENE|{"config":{"key":"sceneCarrousel","name":"Carrousel"},"leadActor":{"type":"layout/stack","key":"stackRoot","children":[{"type":"layout/view-box","key":"view-box1","children":[{"type":"layout/canvas","key":"canvas1","properties":{"horizontalAlignment":"expand","verticalAlignment":"expand","height":"1080px","width":"1920px"},"children":[{"type":"display/screen","key":"screen1","properties":{"height":"1080px","width":"1920px"},"additionalDefs":{"onOff":{"type":"boolean","label":"Play ?"},"timerPeriod":{"type":"number","label":"Timer","min":1,"max":999,"unit":"sec."},"fade":{"type":"number","label":"Fade","min":1,"max":999,"unit":"sec."},"prop1":{"type":"scene"},"prop2":{"type":"scene"},"prop3":{"type":"scene"}},"additionals":{"onOff":true,"timerPeriod":10,"fade":1,"prop1":"sceneJrnlNew","prop2":"sceneJrnlPending","prop3":"sceneMeteo"},"events":{"onInit":["// Nettoyage de sécurité","if (this._timer) {","    clearInterval(this._timer);","}","","// Construction de la liste des scènes","this._scenes = [];","","for (const key in this.additionals) {","","    if (","        key.startsWith(\"prop\") &&","        this.additionals[key]","    ) {","        this._scenes.push(this.additionals[key]);","    }","}","","// Aucune scène","if (this._scenes.length === 0) {","    return;","}","","// Initialisation","this._index = 0;","this._isTransitioning = false;","","// Première scène","this.properties.sceneKey = this._scenes[0];","this.properties.opacity = 100;","","// Fonction de mise à jour des indicateurs","this.updateDots = () => {","","    const html = this._scenes","        .map((scene, i) => {","","            if (i === this._index) {","","                return `","                <div style=\"","                    width:18px;","                    height:18px;","                    border-radius:50%;","                    background:#00ff00;","                    margin:12px auto;","                    box-shadow:0 0 10px #00ff00;","                \"></div>`;","            }","","            return `","            <div style=\"","                width:10px;","                height:10px;","                border-radius:50%;","                background:#666;","                margin:16px auto;","            \"></div>`;","","        })","        .join(\"\");","","    const dots = context.getActor(\"dots\");","","    if (dots) {","        dots.properties.content = html;","    }","};","","// Affichage initial","this.updateDots();","","// Durées","const periodMs =","    Math.max(","        Number(this.additionals.timerPeriod) || 10,","        1","    ) * 1000;","","const fadeMs =","    Math.max(","        Number(this.additionals.fade) || 1,","        0.1","    ) * 1000;","","","// Fonction de changement avec fondu","this.changeSceneWithFade = (newScene) => {","","    if (this._isTransitioning) {","        return;","    }","","    this._isTransitioning = true;","","    const stepMs = 20;","    const steps = Math.max(","        Math.floor(fadeMs / stepMs),","        1","    );","","    let step = 0;","","    // Fade Out","    const fadeOut = setInterval(() => {","","        step++;","","        this.properties.opacity =","            Math.max(","                0,","                Math.round(","                    100 * (1 - (step / steps))","                )","            );","","        if (step >= steps) {","","            clearInterval(fadeOut);","","            // Changement de scène","            this.properties.sceneKey = newScene;","","            // Mise à jour des points","            this.updateDots();","","            step = 0;","","            // Fade In","            const fadeIn = setInterval(() => {","","                step++;","","                this.properties.opacity =","                    Math.min(","                        100,","                        Math.round(","                            100 * (step / steps)","                        )","                    );","","                if (step >= steps) {","","                    clearInterval(fadeIn);","","                    this.properties.opacity = 100;","                    this._isTransitioning = false;","                }","","            }, stepMs);","","        }","","    }, stepMs);","","};","","","// Timer principal","this._timer = setInterval(() => {","","    if (!this.additionals.onOff) {","        return;","    }","","    const nextIndex =","        (this._index + 1) %","        this._scenes.length;","","    this._index = nextIndex;","","    this.changeSceneWithFade(","        this._scenes[nextIndex]","    );","","}, periodMs);"]}},{"type":"layout/stack","key":"stackBottom","children":[{"type":"display/text","key":"nomScene","properties":{"content":"Text","bottom":"0px","right":"0px","left":"0px","textAlign":"center","horizontalAlignment":"expand","verticalAlignment":"middle"},"bindings":{"properties.content":"actor#screen1@displayedScene.name"}},{"type":"display/html","key":"iconePause","properties":{"content":"<i class=\"icon-{{icon}}\"></i>","right":"30px","fontSize":"30px","borderWidth":"6px","borderRadius":"118px 118px 118px 118px ","textAlign":"center","toolTip":"Cliquer pour mettre en pause / démarrer"},"additionalDefs":{"icon":{"type":"icon","label":"Icône","description":"Web Hosting Hub Glyphs"}},"additionals":{"icon":"pause"},"bindings":{"additionals.icon":"actor#screen1@additionals.onOff","properties.color":"actor#screen1@additionals.onOff","properties.opacity":"actor#screen1@additionals.onOff"},"events":{"additionals/icon/binding/onReadTransform":["return context.value ? 'play':'pause';"],"properties/color/binding/onReadTransform":["return context.value ? 'green':'red';"],"properties/opacity/binding/onReadTransform":["return context.value ? '50':'100';"],"onClick":["context.getActor('screen1').additionals.onOff = ! context.getActor('screen1').additionals.onOff",""]}}],"properties":{"backgroundColor":"rgba(255, 255, 255, 0.8)","bottom":"0px","right":"0px","left":"0px","fontSize":"2vmin","orientation":"horizontal","paddingRight":"10px","paddingLeft":"40px"}}]}],"properties":{"horizontalAlignment":"expand","verticalAlignment":"expand"}},{"type":"layout/stack","key":"stackPoint","children":[{"type":"display/html","key":"dots","properties":{"content":"<b>HTML</b>","right":"0px","verticalAlignment":"middle"},"events":{"onRender":["context.getActor(\"screen1\").updateDots()"]}}],"properties":{"top":"0px","bottom":"0px","right":"0px","paddingRight":"10px","paddingLeft":"10px","width":"40px"}}],"properties":{"backgroundImage":"repeating-linear-gradient(45deg, hsla(207,0%,63%,0.05) 0px, hsla(207,0%,63%,0.05) 1px,transparent 1px, transparent 11px,hsla(207,0%,63%,0.05) 11px, hsla(207,0%,63%,0.05) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(0deg, hsla(207,0%,63%,0.05) 0px, hsla(207,0%,63%,0.05) 1px,transparent 1px, transparent 11px,hsla(207,0%,63%,0.05) 11px, hsla(207,0%,63%,0.05) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(135deg, hsla(207,0%,63%,0.05) 0px, hsla(207,0%,63%,0.05) 1px,transparent 1px, transparent 11px,hsla(207,0%,63%,0.05) 11px, hsla(207,0%,63%,0.05) 12px,transparent 12px, transparent 32px),repeating-linear-gradient(90deg, hsla(207,0%,63%,0.05) 0px, hsla(207,0%,63%,0.05) 1px,transparent 1px, transparent 11px,hsla(207,0%,63%,0.05) 11px, hsla(207,0%,63%,0.05) 12px,transparent 12px, transparent 32px),linear-gradient(90deg, rgb(17, 17, 17),rgb(66, 66, 66));","backgroundPosition":"center center","backgroundRepeat":"no-repeat","orientation":"horizontal","paddingLeft":"40px"}}}

[WITNicolas]

Ajout de l'indicateur de scene affichée et restantes sur la partie droite de l'écran.
Le nombre de points suit le nombre de scene à faire dérouler

Révision de la mise en page avec ajout de bordure autour de l'écran