NEWS
Test/Support für Adapter rssfeed und vis-2-widgets-rssfeed
-
Neue Version 0.0.19
- Der Fehler im marquee / Laufband ist gefunden und wurde in dieser Version behoben.
Warum dieser Fehler nicht in allen Browsern zu jedem Zeitpunkt aufgetreten ist ist mir schleierhaft.
Zum Hintergrund. Der Text war da, allerdings ist er zu Beginn komplett verdeckt und wird erst durch eine Animation im Sichtfenster teilweise sichtbar gemacht.
Durch ein css Fehler im neuen Widget ist die Animation nicht gestartet.
Die css-Anweisung im alten widget war korrekt und hat die Animation im neuen widget gleich mitgestartet. - Der Fehler im marquee / Laufband ist gefunden und wurde in dieser Version behoben.
-
@bahnuhr
Die Vorgaben kommen meist vom feed-Lieferanten, da er selbst das html in den feed einbettet.
Über generelle Vorgaben kann man mit css formatieren. probiere mal dieses Template, welches ich mit css erweitert habe.
Zeile 6: Das div mit der css-Klasse myrss dient dazu den Inhalt vom Rest der Seite abzugrenzen. sonst ändern sich alle Bilder
Zeile 2-4: Diese css-Anweisung sagt, das alle img-Tags innerhalb des divs mit der Klasse myrss höchstens 100 Pixel breit sein darf. alternativ könnte man auch mit max-height arbeiten.<style> .myrss img { max-width: 100px; } </style> <div class="myrss"> <%= meta.title %> <% articles.forEach(function(item){ %> <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> -
@bahnuhr
Die Vorgaben kommen meist vom feed-Lieferanten, da er selbst das html in den feed einbettet.
Über generelle Vorgaben kann man mit css formatieren. probiere mal dieses Template, welches ich mit css erweitert habe.
Zeile 6: Das div mit der css-Klasse myrss dient dazu den Inhalt vom Rest der Seite abzugrenzen. sonst ändern sich alle Bilder
Zeile 2-4: Diese css-Anweisung sagt, das alle img-Tags innerhalb des divs mit der Klasse myrss höchstens 100 Pixel breit sein darf. alternativ könnte man auch mit max-height arbeiten.<style> .myrss img { max-width: 100px; } </style> <div class="myrss"> <%= meta.title %> <% articles.forEach(function(item){ %> <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>@OliverIO Zumindest bei mir "same procedure as vorher..." Funktioniert erst wenn ich wieder das alte Marquee mit reinpacke.
-
@OliverIO Zumindest bei mir "same procedure as vorher..." Funktioniert erst wenn ich wieder das alte Marquee mit reinpacke.
-
Aufgrund aktueller Nachfrage hier noch ein Template für Mehrspalten-Layout.
Die relevante Einstellung ist hier
columns <ersterWertistSpaltenbreite> <zweiterWertIstAnzahlSpalten><style> .myrss img { max-width: 190px; } .myrss { -webkit-columns: 200px 5; -moz-columns: 200px 5; columns: 200px 5; } .article { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } </style> <div class="myrss"> <%= meta.title %> <% 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> -
@SBorg
dann bitte auf kommandozeile mal git upload rssfeed machen
das vis fenster komplett schließen und wieder öffnen@OliverIO Hoffe iobroker tut es auch, natürlich blind C&P durchgeführt... ;)

Aber nein, geht leider noch immer nicht. Hat die VIS noch einen Cache?
-
@OliverIO Hoffe iobroker tut es auch, natürlich blind C&P durchgeführt... ;)

Aber nein, geht leider noch immer nicht. Hat die VIS noch einen Cache?
@SBorg
Manchmal dauert der upload etwas, da vis da noch etwas im hintergrund macht, obwohl die kommandozeile schon fertig istdas schließen von vis ist schon für die hartnäckigen Fälle.
kennst du dich mit der developer console im browser aus?
falls ja, dann könntest du mir mal nachschauen, wie die css-eigenschaft des html-elements
#w00028.marquee spanEs sollte dann so aussehen:

Im speziellen geht es um die animation eigenschaftAnstatt w00028 dann deine id des widgets
-
@SBorg
Manchmal dauert der upload etwas, da vis da noch etwas im hintergrund macht, obwohl die kommandozeile schon fertig istdas schließen von vis ist schon für die hartnäckigen Fälle.
kennst du dich mit der developer console im browser aus?
falls ja, dann könntest du mir mal nachschauen, wie die css-eigenschaft des html-elements
#w00028.marquee spanEs sollte dann so aussehen:

Im speziellen geht es um die animation eigenschaftAnstatt w00028 dann deine id des widgets
@OliverIO sagte in Test Adapter rssfeed v0.0.x:
developer console im browser aus?
bisserl, deswegen hat es auch nur ne halbe Stunde gedauert :grin:
<style> #w03425 .marquee { max-width: 100vw; /* iOS braucht das */ white-space: nowrap; overflow: hidden; background-color: #29b11b; /* Hintergrundfarbe des Lauftextes. Auskommentieren, um Transparent zu erhalten */ font-size:20px; } #w03425 .marquee span { display: inline-block; padding-left: 100%; animation: marquee 69s linear infinite; color: #FFFFFF; /* Textfarbe des Lauftextes */ } /* Optional: mouseover (oder Tipp auf dem Touchscreen) pausiert die Laufschrift */ #w03425 .marquee span:hover { animation-play-state: paused } /* Make it move */ @keyframes .w03425.marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } </style>Hmm, mir fehlt dort anscheinend die Widget-ID?
-
@OliverIO sagte in Test Adapter rssfeed v0.0.x:
developer console im browser aus?
bisserl, deswegen hat es auch nur ne halbe Stunde gedauert :grin:
<style> #w03425 .marquee { max-width: 100vw; /* iOS braucht das */ white-space: nowrap; overflow: hidden; background-color: #29b11b; /* Hintergrundfarbe des Lauftextes. Auskommentieren, um Transparent zu erhalten */ font-size:20px; } #w03425 .marquee span { display: inline-block; padding-left: 100%; animation: marquee 69s linear infinite; color: #FFFFFF; /* Textfarbe des Lauftextes */ } /* Optional: mouseover (oder Tipp auf dem Touchscreen) pausiert die Laufschrift */ #w03425 .marquee span:hover { animation-play-state: paused } /* Make it move */ @keyframes .w03425.marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } } </style>Hmm, mir fehlt dort anscheinend die Widget-ID?
-
@SBorg
das ist noch die alte css definition, dann adapter nochmal neu installieren.
was steht im reiter adapter den für eine version bei rssfeed? da muss 0.0.19 stehen@OliverIO tut es auch, aber ich lösche nochmals alles, geht ja fix :)

-
@SBorg
das ist noch die alte css definition, dann adapter nochmal neu installieren.
was steht im reiter adapter den für eine version bei rssfeed? da muss 0.0.19 stehen@OliverIO Nö, alles gelöscht, neu installiert und alles neu gestartet, will nicht tuten...
Alten Marquee rein --> funktioniert -
Unter Abteilung Tester konnte ich kein Topic anlegen. Bitte dort hin verschieben.
Nachdem ich immer weider lese, wie sich die Leute mit rss-Feeds abmühen,
habe ich einen Adapter dazu geschrieben.
Dieser hat aktuell minimale Fähigkeiten, man kann damit aber
schon annehmbare Ergebnisse erzielen.Verwendete Bausteine
Um die Flexibilität bei der Anzeige der Feeds bieten zu können, erfolgt die Formatierung der Ausgabe
über ein template-system.
Eine Vorlage werde ich hier weiter unten kopieren.
Beschreibung der Formatierung und Syntax finden sich auf den folgenden Seiten
https://ejs.co/ und https://github.com/mde/ejsEinlesen der Feeds.
Dazu verwende ich ein node modul namens feedparser.
Dieses Modul kann verschiedene RSS-Standards (RSS, Atom, and RDF).
Dazu ist er noch dazu in der Lage, die Attribute zu normalisieren, so das es in der Ausgabe egal ist,
wie der jeweilige Standard ein bestimmtes Feld nennt.
https://github.com/danmactough/node-feedparserInstallation und Einrichtung
Schritt 1 - Installation
Der Adapter ist aktuell nur auf github verfügbar.
Name des Repository ist https://github.com/oweitman/iobroker.rssfeedSchritt 2 - Instanz hinzufügen
Der Adapter müsste dann im Abschnitt adapter im iobroker angezeigt werden.
Manchmal kommt es vor, das insbesondere bei Webänderungen (Widgets/Konfigurationsdialog) die Änderungen nicht sichtbar sind, muss evtl. auf der Kommandozeile folgender Befehl ausgeführt werden:
iobroker upload rssfeed
Im rechten Bereich in der Zeile des Adapters kann über den Plus-Knopf eine Instanz hinzugefügt werdenSchritt 3 - Konfiguration
Die Konfiguration ist relativ simpel. Es gibt nur wenige Felder
Refresh: ist die generelle Vorgabe, wie oft in Minuten der Feed neu abgerufen werden soll. Voreinstellung ist 60
Maximale Artikel im Datenpunkt: Hier kann die Gesamtmenge der zu verarbeitenden Daten begrenz werden.Dann je neuen Feed:
Name: Ein eindeutiger Name, darf nicht doppelt vorkommen
Url: Die vollständige Adresse des Feed (mit http:// oder https://)
Refresh: Bei Erfassung kann ein abweichender Wert angegeben werden. Ansonsten wird die generelle Vorgabe genommenNach Neustart und Abruf der Daten ist der Feed als JSON-Datenpunkt im Objektbaum zu finden.
Schritt 4 - vis und widgets
Um die Feeds anzuzeigen gibt es ein widget. Dieses kann über den Suchfilter in vis mittels rssfeed gefunden werden.
Das widget hat folgende Einstellmöglichkeiten
rss_oid Hier wird der JSON-Datenpunkt des gewünschten feeds ausgewählt. Ich habe festgestellt, das der Objektbrowser hier nicht imnmer zufriedenstellend funktioniert, da er die im JSON enthaltenen HTML-Anteile versucht dazustellen.
Alternativ die Datenpunkt ID direkt aus vis kopieren.
template: Hier kann ein template erfasst werden, welches javascript und html gemischt enthalten kann.maxarticles: Hier kann widget individuell die Anzahl der Artikel begrenzt werden.
Alle anderen Einstellungen sind identisch zu den anderen widgets, Die Formatvorgaben gellten generell für alle widgetinhalte
Die widgets rssfeed Meta helper und rssfeed Article helper unterstützen bei der Erstellung eines Templates,
indem dort komfortabel die meta-Informationen und die Attribute eines Artikels angezeigt werden.
Im widget rssfeed Article Helper kann man den Artikel auswählen, dessen Attribute angezeigt werden soll, sowie das Präfix anpassen, so dass es einfacher ist dieses in das Template zu kopieren.Ein weiteres widget hat nichts direkt mir rssfeed zu tun und ist in diesem adapter voraussichtlich temporär zu Gast.
Template anhand von Beispielen
Ein Beispiel, welches ich mit den folgenden RSS Feeds getestet habe:<%= meta.title %> <% articles.forEach(function(item){ %> <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;" /> <% }); %>Das Templatesystem arbeitet mit bestimmten Tags.
Die verwendeten Tags bedeuten das folgenden
<%= Der Inhalt des enthaltenen Ausdrucks/Variable wird escaped ausgegenen.
<%- Der Inhalt des enthaltenen Ausdrucks/Variable wird unescaped ausgegenen.
<% Tag ohne Ausgabe, wird für javascriptanweisungen verwendet
%> ist generell ein schließender Tag um eines der vorherigen abzuschließen
Alles was außerhalb dieser Tags ist, wird genau so dann angezeigt bzw. wenn es HTML ist als HTML interpretiert ausgegeben. (siehe bspw das p-tag,div-tag,small-tagInnerhalb des Templates habt ihr 2 vorgegebene variablen zur Verfügung
meta: Hier sind alle Metainformationen zum Feed enthalten. Die folgenden Inhalte stehen zur Verfügung. Ich denke die Bezeichner sind selbst erklärend. In der Hilfe werde ich diese noch genauer Beschreiben. bzw den Inhalt spezifizieren (manche sind Arrays)
meta.title
meta.description
meta.link
meta.xmlurl
meta.date
meta.pubdate
meta.author
meta.language
meta.image
meta.favicon
meta.copyright
meta.generator
meta.categoriesarticles: Ist ein Array mit einzelnen Elementen (javascript array). Jedes Element hat die folgenden Eigenschaften.
Damit es zum Beispiel passt mache ich hier mal das Prefix item davor. Aber wenn ihr wollt könnt ihr das selbst wählen. Es muss dann nur in der Schleife (forEach) entsprechend benannt werden. Auch hjier sind die Bezeichner erst einmal selbst erklärend. Nicht in jedem Feed sind alle attribute auch gefüllt. Die wichtigsten sind im obigen Template bereits enthalten.item.title
item.description
item.summary
item.link
item.origlink
item.permalink
item.date
item.pubdate
item.author
item.guid
item.comments
item.image
item.categories
item.source
item.enclosures"<%= meta.title %> <% articles.forEach(function(item){ %> <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;" /> <% }); %>Kurze Beschreibung was in den einzelnen Zeilen passiert
Z1: Der Feed-titel wird ausgegeben
Z2: Ohne Ausgabe. Schleife über alle articles, bei jedem Durchgang wird das aktuelle Element der variable item zugewiesen.
Z3: Datum und Uhrzeit wird ausgegeben und wird in einem p/small-Tag eingeschlossen zur Formatierung. Zur Formatierung wird die vis-eigene Datumsformatfunktion verwendet. Beschreibung ist im adapter vis zu finden.
Z4: Der Titel des Artikels wird ausgegeben. Zur Formatierung wird der Tag für Überschrift 3 verwendet
Z5: Der Inhalt des Artikels wird ausgegeben und in einem p-Tag eingeschlossen. Hier ist, zumindest bei den beiden Beispielen, HTML-code enthalten, der meist ein Bild, sowie beschreibenden Text mitbringt
Z6: Ein div-Tag, das ausgegeben werden muss, um eine spezielle Formatierung im Feed wieder aufzuheben.
Z7: Ohne Ausgabe. Hier wird die Schleife geschlossen. Alles was zwischen Z2 und Z7 definiert wurde, wird für jeden einzelnen Artikel wiederholt.Ich freue mich über reges testen und Vorschlag von Erweiterungen.
Fehler können hier, aber auch auf github https://github.com/oweitman/ioBroker.rssfeed
gemeldet werden.Hallo, kann ich es irgendwie auslesen und in einen DP schreiben ob ein Einsatz vorhanden ist?

ERLEDIGT
-
Hallo, kann ich es irgendwie auslesen und in einen DP schreiben ob ein Einsatz vorhanden ist?

ERLEDIGT
-
@sigi234
kann man, mit einem skript. da bin ich aber nicht so firm mit serverseitigen skripten@OliverIO sagte in Test Adapter rssfeed v0.0.x:
@sigi234
kann man, mit einem skript. da bin ich aber nicht so firm mit serverseitigen skriptenGibt es schon
https://forum.iobroker.net/topic/29148/hilfe-bei-rss-feed-benötigt/86?page=2
-
Neue Version 0.0.20
- Dem Templateeditor wurde nun der ejs-Syntax beigebracht. Die hässlichen Fehler-Marker sind nun weg
- Der Adapter wurde nun für die Aufnahme ins latest-repository vorbereitet und sollte dort in den nächsten Tagen auftauchen. Dann wird die Installation auch einfacher
-
Neue Version 0.0.20
- Dem Templateeditor wurde nun der ejs-Syntax beigebracht. Die hässlichen Fehler-Marker sind nun weg
- Der Adapter wurde nun für die Aufnahme ins latest-repository vorbereitet und sollte dort in den nächsten Tagen auftauchen. Dann wird die Installation auch einfacher
-
@sigi234 sagte in Test Adapter rssfeed v0.0.x:
@OliverIO sagte in Test Adapter rssfeed v0.0.x:
Die hässlichen Fehler-Marker sind nun weg
Welche?
Diese hier

-
Aufgrund aktueller Nachfrage hier noch ein Template für Mehrspalten-Layout.
Die relevante Einstellung ist hier
columns <ersterWertistSpaltenbreite> <zweiterWertIstAnzahlSpalten><style> .myrss img { max-width: 190px; } .myrss { -webkit-columns: 200px 5; -moz-columns: 200px 5; columns: 200px 5; } .article { -webkit-column-break-inside: avoid; page-break-inside: avoid; break-inside: avoid; } </style> <div class="myrss"> <%= meta.title %> <% 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>@OliverIO sagte in Test Adapter rssfeed v0.0.x:
Aufgrund aktueller Nachfrage hier noch ein Template für Mehrspalten-Layout.
Die relevante Einstellung ist hier
columns <ersterWertistSpaltenbreite> <zweiterWertIstAnzahlSpalten>sehr cool, besten Dank.
Kann man das noch optimieren ?
Ich weiß, liegt an der Breite, geht auch weg wenn man die Tabelle breiter zieht.
Trotzdem die Frage nach der Verbesserung....

