Neues YouTube-Video: Visualisierung im Devices-Adapter

[OliverIO]

@holly200289

nein bei "template"
https://github.com/oweitman/ioBroker.rssfeed#base-template-rss-feed-widget-2

es ist ja eine mischung aus skript/html/css
ist im detail in der doku beschrieben

[holly200289]

Ich füge das in das RSS Vorlage Feld, aber leider kommt ein fehler

[OliverIO]

@holly200289

ok, da hat sich an 2 stellen ein leerzeichen eingeschlichen, wahrscheinlich durch den markdown formatter

<!--
    available variables:
    widgetid      ->  id of the widget
    rss.meta      ->  all meta informations of an feed, details see Meta Helper widget
    rss.articles  ->  all articles as array, details see Article Helper widget
    style         ->  all style settings for the widget

    all variables are read only
    -->
<style>
    #<%- widgetid %> img {
        width: calc(<%- style.width %> - 15px);
        height: auto;
    }
    #<%- widgetid %> img.rssfeed {
        width: auto;
        height: auto;
    }
</style>
<p><%- rss.meta.title %></p>
<% rss.articles.forEach(function(item){ %>
<div class="article">
    <p><small><%- vis.formatDate(item.pubdate, "TT.MM.JJJJ SS:mm") %></small></p>
    <h3><%- item.title %></h3>
    <p><%- item.description %></p>
    <div style="clear:both;"></div>
</div>
<% }); %>

[holly200289]

Das hat geklappt, hierbei gibt es keinen Fehler, ich glaube es gibt auch eine Vorlage die es wie eine Diashow anzeigt, hat sich in die Vorlage vieleicht auch ein Fehler eingeschlichen ?

[holly200289]

code_text
```<!--
 available variables:
 widgetid      ->  id of the widget
 rss.articles  ->  all articles as array, details see Article Helper widget
 style         ->  all style settings for the widget

 all variables are read only
-->

<style>
    #<%- widgetid % > img {
        width: calc(<%- style.width || '230px' %> - 15px);
        height: auto;
    }
    #<%- widgetid % > img.rssfeed {
        width: auto;
        height: auto;
    }

    .container {
        overflow: hidden;
        height: 100%;
    }
    .content {
        position: relative;
        border: 1px solid #ccc;
        overflow: scroll;
        height: 90%;
    }

    .slide {
        position: absolute;
        display: none;
    }

    .slide.active {
        display: contents;
    }

    .controls {
        margin-top: 10px;
    }
</style>

<div class="container">
    <div class="content">
        <% rss.articles.forEach(function(item){ %>
        <div class="article slide">
            <p>
                <small><%- vis.formatDate(item.pubdate, "TT.MM.JJJJ SS:mm") %></small>
            </p>
            <h3><%- item.title %></h3>
            <p><%- item.description %></p>
            <div style="clear:both;"></div>
        </div>
        <% }); %>
    </div>
    <div class="controls">
        <button onclick="prevSlide()">Zurück</button>
        <button onclick="nextSlide()">Weiter</button>
    </div>
</div>

<script>
    currentSlide = 0;
    slides = document.querySelectorAll('.slide');

    function showSlide(index) {
        slides.forEach((slide, i) => {
            if (i === index) {
                slide.classList.add('active');
            } else {
                slide.classList.remove('active');
            }
        });
    }

    function prevSlide() {
        currentSlide = currentSlide > 0 ? currentSlide - 1 : slides.length - 1;
        showSlide(currentSlide);
    }

    function nextSlide() {
        currentSlide = currentSlide < slides.length - 1 ? currentSlide + 1 : 0;
        showSlide(currentSlide);
    }
    showSlide(currentSlide);
</script>

[OliverIO]

@holly200289

ja, hol es dir nochmal von github.
da habe ich es soeben korrigiert.
ansonsten kannst du den fehler daran erkennen

die folgende zeile

    #<%- widgetid % > img.rssfeed {

muss wie folgt sein

    #<%- widgetid %> img.rssfeed {

zwischen dem % und der schließenden klammer > darf kein leerzeichen sein.
das hat wie gedacht ein autoformatter von markdown in vscode verursacht.

[holly200289]

Blättert das skript alleine weiter ?

[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>