Abfallkalender im ioBroker

      2 Kommentare zu Abfallkalender im ioBroker
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 Haupteinstellungen

Konfiguration der Kalender-Adresse

  Unter 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.
table.Abfall {
    color: white;
}

td.Abfallimage {
    background-color: gray;
    padding:5px;
}

td.AbfallText {
    text-align: center;
    padding: 5px 10px;
    color: lightblue;
}

Skriptdatei erstellen

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>";
            }
     

2 thoughts on “Abfallkalender im ioBroker

  1. Daniel

    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?

    Reply

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.