[COMPOSITE] Liste d'Etats en mode Bandeau Breaking News

[WITNicolas]

Un petit bandeau qui défile de la gauche vers la droite en affichant les ressources

Choisir l'ensemble (pas nécessaire d'avoir des reflets)
Les cycles sont séparés par une image
La vitesse est le temps que mettra la liste pour atteindre le bord de l'ecran, donc une valeur petite accelere.

SYNAPPS-STUDIO-COMPOSITE|{"config":{"key":"breakingNews","name":"BreakingNews","properties":{"horizontalAlignment":"expand"},"additionalDefs":{"propSET":{"type":"text","label":"Ensemble","value":"SET6"},"image":{"type":"picture","label":"Image","value":"data:image/png;base64,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"},"speed":{"type":"number","value":10,"min":0}}},"leadActor":{"type":"layout/stack","key":"stackBreakingNews","children":[{"type":"redy/wos-state-list","key":"setBreakingNews","properties":{"columns":"[\"name\",\"state\"]","collection":"SET6","height":"0px","width":"0px","autoRefreshDelay":10,"enabled":false},"additionals":{"speed":10},"additionalDefs":{"image":{"type":"picture"},"speed":{"type":"number","min":0}},"bindings":{"additionals.image":"stage@properties.image","properties.collection":"stage@properties.propSET","additionals.speed":"stage@properties.speed"},"events":{"onRequestDone":["// =====================================================","// Construction des items (optimisé)","// =====================================================","const items = this.data","    .map(item => `${item.name} : ${item.state}`);","","if (items.length === 0) {","    context.getActor(\"breakingNews\").properties.content = \"Aucune donnée\";","    return;","}","","// =====================================================","// Paramètres","// =====================================================","const logoUrl = this.additionals.image || \"\";","const duration = Number(this.additionals.speed) || 90;","const offset = (Date.now() / 1000) % duration;","","// =====================================================","// Construction du cycle (optimisé)","// =====================================================","const separator = '<span class=\"synSeparator\">•</span>';","const cycle = items.join(separator);","","// =====================================================","// Bloc (optimisé avec template literal)","// =====================================================","const logoBlock = logoUrl","    ? `<span class=\"synLogoContainer\"><img src=\"${logoUrl}\" class=\"synLogo\" /></span>`","    : \"\";","","const bloc = `<span class=\"synCycle\">${cycle}</span>${logoBlock}`;","","// =====================================================","// Nombre de répétitions (optimisé avec repeat)","// =====================================================","const repetitions = 5;","const contenu = bloc.repeat(repetitions);","const translatePercent = 100 / repetitions;","","// =====================================================","// HTML (optimisé)","// =====================================================","const html = `","<style>","html, body {","    margin: 0;","    padding: 0;","    width: 100%;","    height: 100%;","    overflow: hidden;","}","",".synTicker {","    width: 100%;","    height: 100%;","    overflow: hidden;","    position: relative;","    display: flex;","    align-items: center;","    box-sizing: border-box;","    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);","    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);","}","",".synTrack {","    position: absolute;","    top: 50%;","    left: 0;","    display: inline-flex;","    align-items: center;","    white-space: nowrap;","    width: max-content;","    transform: translateY(-50%);","    animation: synTickerMove ${duration}s linear infinite;","    animation-delay: -${offset}s;","}","",".synCycle {","    display: inline-flex;","    align-items: center;","    white-space: nowrap;","}","",".synSeparator {","    margin-left: 15px;","    margin-right: 15px;","    opacity: 0.6;","}","",".synLogoContainer {","    display: inline-flex;","    align-items: center;","    justify-content: center;","    margin-left: 40px;","    margin-right: 40px;","}","",".synLogo {","    height: 20px;","    width: auto;","    max-width: none;","    object-fit: contain;","}","","@keyframes synTickerMove {","    from {","        transform: translateY(-50%) translateX(0);","    }","    to {","        transform: translateY(-50%) translateX(-${translatePercent}%);","    }","}","</style>","","<div class=\"synTicker\">","    <div class=\"synTrack\">","        ${contenu}","    </div>","</div>","`;","","context.getActor(\"breakingNews\").properties.content = html;"]}},{"type":"display/html","key":"breakingNews","properties":{"horizontalAlignment":"expand"}}],"properties":{"horizontalAlignment":"expand","verticalAlignment":"expand","orientation":"horizontal"}}}

[AdrienAzay]

J'adore l'idée, merci Nicolas !!