Neues YouTube-Video: Visualisierung im Devices-Adapter

[holly200289]

<style>
#w_id_<%- widgetid %> { height: 100%; display: flex; flex-direction: column; overflow: hidden; }
#w_id_<%- widgetid %> .content-area { flex: 1; border: 1px solid #444; position: relative; overflow: auto; padding: 10px; }
#w_id_<%- widgetid %> .slide { display: none; }
#w_id_<%- widgetid %> .slide.active { display: block; animation: vis-fade 0.5s ease-in; }
#w_id_<%- widgetid %> .controls { display: flex; justify-content: space-between; align-items: center; background: #222; padding: 5px; color: #fff; }
@keyframes vis-fade { from { opacity: 0; } to { opacity: 1; } }
</style>

<div id="w_id_<%- widgetid %>">
<div class="content-area">
<% if (rss && rss.articles && rss.articles.length > 0) { %>
<% rss.articles.forEach(function(item, index){ %>
<div class="article slide">
<p><small><%- vis.formatDate(item.pubdate, "DD.MM.YYYY HH:mm") %></small></p>
<h3><%- item.title %></h3>
<div><%- item.description %></div>
</div>
<% }); %>
<% } else { %>
<p>Keine Feeds gefunden. Prüfe die Instanz-Einstellungen.</p>
<% } %>
</div>
<div class="controls">
<button onclick="window'go_<%- widgetid %>'">◀</button>
<span class="pager"></span>
<button onclick="window'go_<%- widgetid %>'">▶</button>
</div>
</div>

<script>
// Sofort ausführen, um Variablen zu isolieren
(function() {
const id = 'w_id_<%- widgetid %>';
const speed = 5000; // 5 Sekunden
let cur = 0;
let timer;

    function refresh() {
        const el = document.getElementById(id);
        if (!el) return;
        const slides = el.querySelectorAll('.slide');
        const pager = el.querySelector('.pager');
        if (slides.length === 0) return;
        
        slides.forEach((s, i) => s.classList.toggle('active', i === cur));
        if (pager) pager.innerText = (cur + 1) + " / " + slides.length;
    }

    function start() {
        stop();
        timer = setInterval(() => window['go_<%- widgetid %>'](1), speed);
    }

    function stop() {
        if (timer) clearInterval(timer);
    }

    // Globaler Hook für Buttons
    window['go_<%- widgetid %>'] = function(n) {
        const slides = document.getElementById(id).querySelectorAll('.slide');
        cur = (cur + n + slides.length) % slides.length;
        refresh();
        start(); // Reset Timer
    };

    // Warte kurz, bis VIS das HTML gerendert hat
    setTimeout(() => {
        refresh();
        start();
    }, 500);
})();

</script>

[holly200289]

funkoniert leider nicht wenn man es in dem VIs modus versetzt

[OliverIO]

@holly200289

wo hast das her?

[holly200289]

Warum fragst du ?

[holly200289]

Ich habe noch eine version die Funkoniert allerdings, die kannst du gerne haben.

[holly200289]

ich teste das Script gerade

[OliverIO]

@holly200289

@holly200289 sagte:

Warum fragst du ?

sowie du es eingefügt hast ist es schwer zum kopieren gewesen.
wenn du code einfügst musst du die immer in code tags setzen,
das ist der knopf über dem eingabefeld im forum mit </>
ansonsten wird die formatierung von code zerhauen
deswegen hat es jetzt länger gedauert

<style>
#w_id_<%- widgetid %> { 
    height: 100%; display: flex; flex-direction: column; overflow: hidden; 
}
#w_id_<%- widgetid %> .content-area { 
    flex: 1; border: 1px solid #444; position: relative; overflow: auto; padding: 10px;
}
#w_id_<%- widgetid %> .slide {
    display: none;
}
#w_id_<%- widgetid %> .slide.active {
    display: block; animation: vis-fade 0.5s ease-in;
}
#w_id_<%- widgetid %> .controls {
    display: flex; justify-content: space-between; align-items: center; background: #222; padding: 5px; color: #fff;
}
@keyframes vis-fade {
    from { 
        opacity: 0; 
    } to { 
        opacity: 1; 
    } 
}
</style>

<div id="w_id_<%- widgetid %>">
<div class="content-area">
<% 
if (rss && rss.articles && rss.articles.length > 0) { 
    rss.articles.forEach(function(item, index){ 
%>
    <div class="article slide">
        <p><small><%- vis.formatDate(item.pubdate, "DD.MM.YYYY HH:mm") %></small></p>
        <h3><%- item.title %></h3>
        <div><%- item.description %></div>
    </div>
<%
    }); 
} else { 
%>
<p>Keine Feeds gefunden. Prüfe die Instanz-Einstellungen.</p>
<% } %>
</div>
<div class="controls">
    <button onclick="window'go_<%- widgetid %>'">◀</button>
    <span class="pager"></span>
    <button onclick="window'go_<%- widgetid %>'">▶</button>
</div>
</div>

<script>
// Sofort ausführen, um Variablen zu isolieren
(function() {
    debugger;
const id = 'w_id_<%- widgetid %>';
const speed = 5000; // 5 Sekunden
let cur = 0;
let timer;

    function refresh() {
        const el = document.getElementById(id);
        if (!el) return;
        const slides = el.querySelectorAll('.slide');
        const pager = el.querySelector('.pager');
        if (slides.length === 0) return;
        
        slides.forEach((s, i) => s.classList.toggle('active', i === cur));
        if (pager) pager.innerText = (cur + 1) + " / " + slides.length;
    }
 
    function start() {
        stop();
        timer = setInterval(() => window['go_<%- widgetid %>'](1), speed);
    }
 
    function stop() {
        if (timer) clearInterval(timer);
    }
 
    // Globaler Hook für Buttons
    window['go_<%- widgetid %>'] = function(n) {
        const slides = document.getElementById(id).querySelectorAll('.slide');
        cur = (cur + n + slides.length) % slides.length;
        refresh();
        start(); // Reset Timer
    };
 
    // Warte kurz, bis VIS das HTML gerendert hat
    setTimeout(() => {
        refresh();
        start();
    }, 500);
})();
</script>

ich muss mal ein Hinweis in der Doku noch hinzufügen.

Problem ist hier die komprimierte css Darstellung. Da fummelt dann das Binding von vis rein. der Mechanismuss sucht immer nach dem Muster { .... }
Daher muss json und css im Template die Klammern immer auf separate Zeilen stellen.

[holly200289]

ah okay, ich habe den Code generieren lassen von KI, möchtest du dir den neuen Code mal ansehen, bzw. mal drüber fliegen ob der so okay ist ?

[holly200289]

Du hast da schon gute viel arbeit reingesteckt, und vorallen mit den vorlagen finde ich das super.

[OliverIO]

@holly200289 sagte:

den neuen Code mal ansehen

ja, aber bitte in code tags setzen

[holly200289]

 <style>
    #rss_container_<%- widgetid %> { 
        height: 100%; 
        width: 100%;
        display: flex; 
        flex-direction: column; 
    }
    #rss_container_<%- widgetid %> .slide { 
        display: none; 
        padding: 10px;
    }
    #rss_container_<%- widgetid %> .active { 
        display: block; 
        animation: fadeRss 0.5s;
    }
    @keyframes fadeRss { from { opacity: 0; } to { opacity: 1; } }
</style>

<div id="rss_container_<%- widgetid %>">
    <div class="rss_content" style="flex: 1; overflow: auto;">
        <% if (rss && rss.articles) { %>
            <% rss.articles.forEach(function(item, index){ %>
                <div class="slide <%- index === 0 ? 'active' : '' %>">
                    <small><%- vis.formatDate(item.pubdate, "DD.MM.YYYY HH:mm") %></small>
                    <h3 style="margin: 8px 0;"><%- item.title %></h3>
                    <div><%- item.description %></div>
                </div>
            <% }); %>
        <% } %>
    </div>
</div>

<script>
    (function() {
        // Wir suchen das Element direkt über die Widget-ID, die VIS übergibt
        var parentId = 'rss_container_<%- widgetid %>';
        var container = document.getElementById(parentId);
        if (!container) return;

        var slides = container.getElementsByClassName('slide');
        var currentIndex = 0;
        var intervalTime = 10000; // 5 Sekunden

        if (slides.length > 1) {
            setInterval(function() {
                // Aktuellen Slide ausblenden
                slides[currentIndex].classList.remove('active');
                
                // Index erhöhen
                currentIndex++;
                if (currentIndex >= slides.length) {
                    currentIndex = 0;
                }
                
                // Nächsten Slide einblenden
                slides[currentIndex].classList.add('active');
            }, intervalTime);
        }
    })();
</script>

[holly200289]

jetzt müsste es richtig sein

[OliverIO]

@holly200289

ich teste hier mit dem tagesschau rss.
da ist ein bild drin, dessen größe korrigiert werden muss

 <style>
    #rss_container_<%- widgetid %> { 
        height: 100%; 
        width: 100%;
        display: flex; 
        flex-direction: column; 
    }
    #rss_container_<%- widgetid %> .slide { 
        display: none; 
        padding: 10px;
    }
    #rss_container_<%- widgetid %> .active { 
        display: block; 
        animation: fadeRss 0.5s;
    }
    #rss_container_<%- widgetid %> img {
        width: calc(<%- style.width %> - 15px);
        height: auto;
    }    
    @keyframes fadeRss { from { opacity: 0; } to { opacity: 1; } }
</style>
 
<div id="rss_container_<%- widgetid %>">
    <div class="rss_content" style="flex: 1; overflow: auto;">
        <% if (rss && rss.articles) { %>
            <% rss.articles.forEach(function(item, index){ %>
                <div class="slide <%- index === 0 ? 'active' : '' %>">
                    <small><%- vis.formatDate(item.pubdate, "DD.MM.YYYY HH:mm") %></small>
                    <h3 style="margin: 8px 0;"><%- item.title %></h3>
                    <div><%- item.description %></div>
                </div>
            <% }); %>
        <% } %>
    </div>
</div>
 
<script>
    (function() {
        // Wir suchen das Element direkt über die Widget-ID, die VIS übergibt
        var parentId = 'rss_container_<%- widgetid %>';
        var container = document.getElementById(parentId);
        if (!container) return;
 
        var slides = container.getElementsByClassName('slide');
        var currentIndex = 0;
        var intervalTime = 10000; // 5 Sekunden
 
        if (slides.length > 1) {
            setInterval(function() {
                // Aktuellen Slide ausblenden
                slides[currentIndex].classList.remove('active');
                
                // Index erhöhen
                currentIndex++;
                if (currentIndex >= slides.length) {
                    currentIndex = 0;
                }
                
                // Nächsten Slide einblenden
                slides[currentIndex].classList.add('active');
            }, intervalTime);
        }
    })();
</script>

[holly200289]

aber sonst ist der ist das Skript brauchbar oder ?

[OliverIO]

evtl noch eine anmerkung zum setInterval.

Es ist besser, insbesondere hier, den setInterval Teil in eine eigene Funktion zu setzen
Die Funktion ruft dann die eigene Funktion wieder mit setTimeout wieder auf.

So wie es jetzt ist, wird es irgendwann zu Speicherprobleme führen.
Jedesmal wenn der RSS Datenpunkt aktualisiert wird, wird der widgetinhalt ersetzt.
Allerdings wird dadurch der alte setInterval Aufruf nicht entfernt. Mit dem Austausch kommt dann aber ein neuer setInterval dazu.

Jetzt kannst du dir evtl vorstellen was passiert, wenn 10 mal der datenpunkt aktualisiert wurde. Dann versuchen 10 parallele setInterval Aufrufe geichzeitig den Artikel zu wechseln.

Sag der KI, sie soll den Code mit setTimeout formulieren um evtl Speicherprobleme zu verhindern.

Anonsten ist der Code OK
Es fehlen nun die Knöpfe, so ist man auf den automatismus angewiesen, auch wenn der angezeigte Artikel gerade nicht interessiert
Wenn du aber eine möglichst cleane Darstellung haben willst ist das OK

[holly200289]

Ich habe das jetzt nochmal mit setTimeout durch die KI überarbeiten lassen, schaue mal bitte drüber

[holly200289]

<style>
    #rss_wrapper_<%- widgetid %> { 
        height: 100%; 
        width: 100%;
        overflow: hidden;
    }
    #rss_wrapper_<%- widgetid %> .slide { 
        display: none; 
        padding: 10px;
    }
    #rss_wrapper_<%- widgetid %> .active { 
        display: block; 
        animation: fadeInRSS 0.6s ease-in-out;
    }
    @keyframes fadeInRSS { from { opacity: 0; } to { opacity: 1; } }
</style>

<div id="rss_wrapper_<%- widgetid %>">
    <% if (rss && rss.articles && rss.articles.length > 0) { %>
        <% rss.articles.forEach(function(item, index){ %>
            <div class="slide <%- index === 0 ? 'active' : '' %>">
                <small><%- vis.formatDate(item.pubdate, "DD.MM.YYYY HH:mm") %></small>
                <h3 style="margin: 8px 0;"><%- item.title %></h3>
                <div class="rss-desc"><%- item.description %></div>
            </div>
        <% }); %>
    <% } else { %>
        <p>Lade Feeds...</p>
    <% } %>
</div>

<script>
    (function() {
        // Das setTimeout sorgt dafür, dass VIS Zeit zum Rendern hat
        setTimeout(function() {
            var containerId = 'rss_wrapper_<%- widgetid %>';
            var root = document.getElementById(containerId);
            if (!root) return;

            var slides = root.getElementsByClassName('slide');
            var current = 0;
            var pause = 5000; // 5 Sekunden pro Artikel

            if (slides.length > 1) {
                setInterval(function() {
                    // Alten Slide verstecken
                    slides[current].classList.remove('active');
                    
                    // Index weiterzählen
                    current = (current + 1) % slides.length;
                    
                    // Neuen Slide zeigen
                    slides[current].classList.add('active');
                }, pause);
            }
        }, 1500); // 1,5 Sekunden Verzögerung beim Start
    })();
</script>

[OliverIO]

Leider nein.
Das problematische setInterval ist noch drin

<style>
    #rss_wrapper_<%- widgetid %> { 
        height: 100%; 
        width: 100%;
        overflow: hidden;
    }

    #rss_wrapper_<%- widgetid %> .slide { 
        display: none; 
        padding: 10px;
    }

    #rss_wrapper_<%- widgetid %> .active { 
        display: block; 
        animation: fadeInRSS 0.6s ease-in-out;
    }

    @keyframes fadeInRSS {
        from { opacity: 0; }
        to { opacity: 1; }
    }
</style>

<div id="rss_wrapper_<%- widgetid %>">
    <% if (rss && rss.articles && rss.articles.length > 0) { %>
        <% rss.articles.forEach(function(item, index){ %>
            <div class="slide <%- index === 0 ? 'active' : '' %>">
                <small><%- vis.formatDate(item.pubdate, "DD.MM.YYYY HH:mm") %></small>
                <h3 style="margin: 8px 0;"><%- item.title %></h3>
                <div class="rss-desc"><%- item.description %></div>
            </div>
        <% }); %>
    <% } else { %>
        <p>Lade Feeds...</p>
    <% } %>
</div>

<script>
    (function() {
        var containerId = 'rss_wrapper_<%- widgetid %>';
        var timeoutKey = '__rssTimeout_' + containerId;

        /*
         * Falls das Template wegen geänderter RSS-Daten erneut gerendert wird,
         * wird ein eventuell noch laufender Timeout dieses Widgets entfernt.
         */
        if (window[timeoutKey]) {
            clearTimeout(window[timeoutKey]);
            window[timeoutKey] = null;
        }

        function startSlider() {
            var root = document.getElementById(containerId);
            if (!root) return;

            var slides = root.getElementsByClassName('slide');
            var current = 0;
            var pause = 5000;

            if (slides.length <= 1) return;

            function showNextSlide() {
                /*
                 * Bei jedem Durchlauf erneut prüfen, ob der Container noch existiert.
                 * Falls VIS das Widget neu gerendert oder entfernt hat, endet die Kette.
                 */
                root = document.getElementById(containerId);
                if (!root) {
                    window[timeoutKey] = null;
                    return;
                }

                slides = root.getElementsByClassName('slide');
                if (slides.length <= 1) {
                    window[timeoutKey] = null;
                    return;
                }

                if (current >= slides.length) {
                    current = 0;
                }

                slides[current].classList.remove('active');

                current = (current + 1) % slides.length;

                slides[current].classList.add('active');

                window[timeoutKey] = setTimeout(showNextSlide, pause);
            }

            window[timeoutKey] = setTimeout(showNextSlide, pause);
        }

        /*
         * Verzögerter Start, damit VIS Zeit zum Rendern hat.
         * Auch dieser Start-Timeout wird beim erneuten Rendern oben abgeräumt.
         */
        window[timeoutKey] = setTimeout(startSlider, 1500);
    })();
</script>

[holly200289]

Du hast das Skript überarbeitet richtig ?

[OliverIO]

@holly200289
chatgpt hat es gemacht