Mein Ziel war es, im ioBroker VIS einen Auszug aus dem Abfallkalender darzustellen, der mit Symbolen die nächsten vier Termine anzeigt. Ich realisiere das, indem ein Skript die Termine aus einer ical-Instanz liest und dann zusammen mit den Symbolen im VIS dargstellt.
Voraussetzungen
Eine eigene „ical“-Instanz für den Abfallkalender
Abfallsymbole
einen Google-Kalender für die Abfalltermine
Verbinden der ical-Instanz mit dem Google-Kalender
Zunächst erstellt ihr euch einen Google-Kalender, der nur für die Abfalltermine verwendet wird. Im Idealfall stellt euer Abfallunternehmen eine ics-Datei bereit, die in den Kalender importiert wird. Wichtig! Bei mir funktioniert das nur korrekt, wenn die Termine „ganztags“-Termine sind.
Die ical-Instanz benötigt einen URL auf den Kalender. Den bekommt man, wenn man in der Webansicht des Google-Kalenders auf die drei Punkte, dann Einstellungen und Freigabe klickt. Ziemlich weit unten findet sich dann der URL mit der Beschriftung Privatadresse im ical-Format. Diese Adresse wird für die ical-Instanz benötigt.
Adapterkonfiguration HaupteinstellungenKonfiguration der Kalender-AdresseUnter dem Menüpunkt Ereignisse habe ich Vacation deaktiviert.
Der Adapter wird nun neugestartet. In der Objekt-Ansicht von ioBroker kann nun geprüft werden, ob die Schritte erfolgreich waren. Dazu geht ihr mit der Maus über den Wert in der Zeile html und solltet dann im Popup schon ein paar Termine sehen.
ioBroker/Objekte/ical-Instanz
VIS vorbereiten
Damit VIS Bilder anzeigen kann, werden diese mit dem Dateimanager, der im VIS-Editor über Setup erreicht wird, hochgeladen. Ich habe denen folgende Namen gegeben
bt.png für Blaue Tonne
gt.png für Gelbe Tonne
st.png für Schwarze Tonne
Weitere Abfallereignisse sind für mich nicht relevant.
Die Bilder habe ich im Ordner /vis.0/main/bilder/abfall abgelegt.
Im VIS-Editor wird Anzeige des Abfall-Kalenders lediglich ein HTML-Widget angelegt, in die Eigenschaft HTML des Widgets schreiben wir {javascript.0.vis.Abfall}. Das ist ein Verweis auf einen State des Unterhalb des Objektes javascript.0.
Dieser State muss zunächst angelegt werden. Dazu wird under ioBroker/Objekte die Zeile javascript.0 markiert, dann ganz oben auf das Plussymbol Ein Tochterobjekt… klicken.
Den State javascript.0.vis.Abfall als Zeichenkette hinzufügen
Zur Formatierung verwende ich etwas CSS, das im VIS-Editor in der CSS-Eigenschaft einfügt wird.
Unter ioBroker/Skripte wird ein neues Skript erstellt. Als Typ ins Javascript zu wählen. Dort wird folgender Skripttext eingefügt.
on('ical.0.data.table', function(theObj) {
var obj = theObj.state.val;
MakeAbfallHTML(obj);
});
function MakeAbfallHTML(obj) {
var html = "<table class=Abfall><tr>";
for (i=0; i<4; i++) {
if (obj[i]) {
if (obj[i].event.indexOf("Gelber Sack") > -1) {
html = html + "<td class=Abfallimage><img width=120 height=120 src=/vis.0/main/bilder/abfall/gt.png></td>";
}
if (obj[i].event.indexOf("Papier") > -1) {
html = html + "<td class=Abfallimage><img width=120 height=120 src=/vis.0/main/bilder/abfall/bt.png></td>";
}
if (obj[i].event.indexOf("Haus") > -1) {
html = html + "<td class=Abfallimage><img width=120 height=120 src=/vis.0/main/bilder/abfall/st.png></td>";
}
}
}
html = html + "</tr><tr>";
for (i=0; i<4; i++) {
if (obj[i]) {
html = html + "<td class=AbfallText>"+obj[i].date+"</td>" ;
}
}
html = html + "</tr></table>";
console.log(html);
setState('javascript.0.vis.Abfall', html);
}
Das Skript reagiert auf drei Ereignisse, bei denen im Text die Begriffe
Gelber Sack
Papier
Haus
vorkommen und ordnet diesen Ereignissen die jeweiligen Bilder zu. Vergleiche dazu im Skript die Zeilen 12, 16 und 20 (siehe Bild). Diese Begriffe müssen gegebenenfalls an die Texte die in eurem Abfallkalender stehen, angepasst werden.
Ebenfalls könnte dies leicht zum Beispiel um Biotonne erweitert werden, wenn nach Zeile 22 folgender Code eingefügt wird und ein zusätzliches Bild bit.png hochgeladen wird.
if (obj[i].event.indexOf("Bio") > -1) {
html = html + "<td class=Abfallimage><img width=120 height=120 src=/vis.0/main/bilder/abfall/bit.png></td>";
}
20 Gedanken zu “Abfallkalender im ioBroker”
Hi vielen Dank für die schöne Anleitung. Ich hab sie gleich bei mir ausprobiert, leider werden die Bilder in der Vis App nicht dargestellt. Im Browser aber schon. Funktioniert das bei dir?
Ja es wird alles dargestellt. Kenne den Grund auch nicht warum das bei Dir nicht geht.
Hallo ! Wo hast die die netten Grafiken her ?
Die Grafiken waren irgendwo im Internet, haben aber möglicherweise Copyright, so dass sie hier nicht zum Download liege
Hallo,
was mach ich denn falsch??? bei mir wird gar nicht angezeigt. Ich finde deiner Idee nämlich wirklich toll.
bei mir wird ebenfalls nichts angezeigt. Könntest du die Anleitung nochmal überarbeiten?
Danke für die tolle Anleitung. Es hat alles sofort geklappt. Deine Bilder finde ich super, kann sie leider nirgends finden. Hättest Du einen Tipp für die Google-Suche?
Noch eine Frage:
Es werden immer die nächsten vier Ereignisse angezeigt. Was muss ich ändern, damit die nächsten 5 Termine angezeigt werden?
Im Sktipt ist dann zu ändern:
for (i=0; i<4; i++)
nach
for (i=0; i<5; i++)
Vielen Dank für das Super tolle Script! Es funktioniert Technisch. Leider bekomme ich nur die Grafiken nicht angezeigt 🙁 ich habe diese ebenso benannt wie du. Jemand zufällig eine Idee?
Hallo,
wirklich sehr sauber gelöst.
Bei mir werden die Bilder aber nicht angezeigt, da kommt oben links so ein unterbrochenes Zeichen.
Voreingestellte png Bilder werden angezeigt jedoch von mir neu hinzugefügte nicht (sonst in anderen Widget werden die angezeigt). Brauchen die Bilder ein bestimmtes Format oder eine bestimmte Auflösung ?
Gruß
Hakan
Brauchen die Bilder ein bestimmtes Format ?
Das funktioniert super, doch leider funktioniert es nur mit ganztägigen Terminen. Die .ics zum Import hat aber zeitliche Angaben.
Schon eine Idee wie man das anders hin bekommt?
Bei mir wird leider auch nichts angezeigt, finde aber auch den fehler nicht
Nochmal eine Anmerkung zu den Bilder. Die Bilder müssen an die Stelle hochgeladen, wie oben im Dateimanager-Bild angezeigt. Auch der Name muss übereinstimmen. Die Bilder werden automatisch auf 120×120 skaliert. Bitte auch Groß/Kleinschreibung beachten. Quelle: https://www.stumpf-metall.de/shop/piktogramm-set-oe-70-mm
An der oben genannten URL können die Bilder beispielsweise mit Snipping Tool ausgeschnitten werden und als png abgespeichert werden. (Dateinamen beachten, vgl. Bild Dateimanager)
Hi, auch ich habe mich Deiner Idee bedient.
Bei mir werden mehrere Termine angezeigt, ich möchte aber nur >einen< nächsten angezeigt bekommen.
Daher dachte ich mir, beide enthaltenen Zeilen
for (i=0; i<4; i++)
in
for (i=0; i<1; i++)
umzuändern. Aber trotzdem bleibt es dabei, dass mehrere kommende Termine angezeigt werden.
Habe ich noch einen Denkfehler?
Hallo.
Ich weiß nicht, welches Widget ich nehmen soll. Und wo ich dann „{javascript.0.vis.Abfall}“ einfügen soll.
Ist es richtig, dass ich einmal ein Objekt anlege „javascript.0.vis.Abfall“ und zusätzlich ein Skript anlege, welches unter „javascript.0.scriptEnabled.common.Müllabfuhr“ liegt?
(1) das „HTML-Widget“
(2) ja
Servus,
soweit läuft alles schon längere Zeit problemlos, allerdings habe ich heute ezwas im Log gesucht und durch Zufall folgenen Eintrag gefunden:
You are assigning a string to the state „javascript.0.vis.Abfall“ which expects a boolean. Please fix your code to use a boolean or change the state type to string.
Gibt es hierfür schon einen fix?
Gruß
Chris
Überprüfe doch mal, ob die der State „javascript.0.vis.Abfall“ dem Type „Zeichenkette“ gegeben hast. Dazu ist im Artikel weiter oben ein Bild mit der Bezeichnung „Den State javascript.0.vis.Abfall als Zeichenkette hinzufügen“
Hi vielen Dank für die schöne Anleitung. Ich hab sie gleich bei mir ausprobiert, leider werden die Bilder in der Vis App nicht dargestellt. Im Browser aber schon. Funktioniert das bei dir?
Ja es wird alles dargestellt. Kenne den Grund auch nicht warum das bei Dir nicht geht.
Hallo ! Wo hast die die netten Grafiken her ?
Die Grafiken waren irgendwo im Internet, haben aber möglicherweise Copyright, so dass sie hier nicht zum Download liege
Hallo,
was mach ich denn falsch??? bei mir wird gar nicht angezeigt. Ich finde deiner Idee nämlich wirklich toll.
bei mir wird ebenfalls nichts angezeigt. Könntest du die Anleitung nochmal überarbeiten?
Danke für die tolle Anleitung. Es hat alles sofort geklappt. Deine Bilder finde ich super, kann sie leider nirgends finden. Hättest Du einen Tipp für die Google-Suche?
Noch eine Frage:
Es werden immer die nächsten vier Ereignisse angezeigt. Was muss ich ändern, damit die nächsten 5 Termine angezeigt werden?
Im Sktipt ist dann zu ändern:
for (i=0; i<4; i++)
nach
for (i=0; i<5; i++)
Vielen Dank für das Super tolle Script! Es funktioniert Technisch. Leider bekomme ich nur die Grafiken nicht angezeigt 🙁 ich habe diese ebenso benannt wie du. Jemand zufällig eine Idee?
Hallo,
wirklich sehr sauber gelöst.
Bei mir werden die Bilder aber nicht angezeigt, da kommt oben links so ein unterbrochenes Zeichen.
Voreingestellte png Bilder werden angezeigt jedoch von mir neu hinzugefügte nicht (sonst in anderen Widget werden die angezeigt). Brauchen die Bilder ein bestimmtes Format oder eine bestimmte Auflösung ?
Gruß
Hakan
Brauchen die Bilder ein bestimmtes Format ?
Das funktioniert super, doch leider funktioniert es nur mit ganztägigen Terminen. Die .ics zum Import hat aber zeitliche Angaben.
Schon eine Idee wie man das anders hin bekommt?
Bei mir wird leider auch nichts angezeigt, finde aber auch den fehler nicht
Nochmal eine Anmerkung zu den Bilder. Die Bilder müssen an die Stelle hochgeladen, wie oben im Dateimanager-Bild angezeigt. Auch der Name muss übereinstimmen. Die Bilder werden automatisch auf 120×120 skaliert. Bitte auch Groß/Kleinschreibung beachten. Quelle: https://www.stumpf-metall.de/shop/piktogramm-set-oe-70-mm
An der oben genannten URL können die Bilder beispielsweise mit Snipping Tool ausgeschnitten werden und als png abgespeichert werden. (Dateinamen beachten, vgl. Bild Dateimanager)
Hi, auch ich habe mich Deiner Idee bedient.
Bei mir werden mehrere Termine angezeigt, ich möchte aber nur >einen< nächsten angezeigt bekommen.
Daher dachte ich mir, beide enthaltenen Zeilen
for (i=0; i<4; i++)
in
for (i=0; i<1; i++)
umzuändern. Aber trotzdem bleibt es dabei, dass mehrere kommende Termine angezeigt werden.
Habe ich noch einen Denkfehler?
Hallo.
Ich weiß nicht, welches Widget ich nehmen soll. Und wo ich dann „{javascript.0.vis.Abfall}“ einfügen soll.
Ist es richtig, dass ich einmal ein Objekt anlege „javascript.0.vis.Abfall“ und zusätzlich ein Skript anlege, welches unter „javascript.0.scriptEnabled.common.Müllabfuhr“ liegt?
(1) das „HTML-Widget“
(2) ja
Servus,
soweit läuft alles schon längere Zeit problemlos, allerdings habe ich heute ezwas im Log gesucht und durch Zufall folgenen Eintrag gefunden:
You are assigning a string to the state „javascript.0.vis.Abfall“ which expects a boolean. Please fix your code to use a boolean or change the state type to string.
Gibt es hierfür schon einen fix?
Gruß
Chris
Überprüfe doch mal, ob die der State „javascript.0.vis.Abfall“ dem Type „Zeichenkette“ gegeben hast. Dazu ist im Artikel weiter oben ein Bild mit der Bezeichnung „Den State javascript.0.vis.Abfall als Zeichenkette hinzufügen“