{"id":10937,"date":"2018-12-11T21:45:11","date_gmt":"2018-12-11T20:45:11","guid":{"rendered":"https:\/\/funrecycler.com\/?p=10937"},"modified":"2018-12-11T21:45:11","modified_gmt":"2018-12-11T20:45:11","slug":"abfallkalender-im-iobroker","status":"publish","type":"post","link":"https:\/\/funrecycler.com\/index.php\/2018\/12\/11\/abfallkalender-im-iobroker\/","title":{"rendered":"Abfallkalender im ioBroker"},"content":{"rendered":"Mein Ziel war es, im ioBroker VIS einen Auszug aus dem Abfallkalender darzustellen, der mit Symbolen die n\u00e4chsten 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.\n<img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-10938 size-full\" src=\"https:\/\/funrecycler.com\/wp-content\/uploads\/2018\/12\/abfall1.png\" alt=\"\" width=\"789\" height=\"275\" \/>\n<h2>Voraussetzungen<\/h2>\n<!-- \/wp:post-content -->\n<!-- wp:list -->\n<ul>\n \t<li>Eine eigene &#8222;ical&#8220;-Instanz f\u00fcr den Abfallkalender<\/li>\n \t<li>Abfallsymbole<\/li>\n \t<li>einen Google-Kalender f\u00fcr die Abfalltermine<\/li>\n<\/ul>\n<!-- \/wp:list -->\n<!-- wp:heading -->\n<h2>Verbinden der ical-Instanz mit dem Google-Kalender<\/h2>\n<!-- \/wp:heading -->\n<!-- wp:paragraph -->\nZun\u00e4chst erstellt ihr euch einen Google-Kalender, der nur f\u00fcr 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 &#8222;ganztags&#8220;-Termine sind.\n<!-- \/wp:paragraph -->\n<!-- wp:paragraph -->\nDie ical-Instanz ben\u00f6tigt einen URL auf den Kalender. Den bekommt man, wenn man in der Webansicht des Google-Kalenders auf die drei Punkte, dann <em>Einstellungen und Freigabe<\/em> klickt. Ziemlich weit unten findet sich dann der URL mit der <em>Beschriftung Privatadresse im ical-Format<\/em>. Diese Adresse wird f\u00fcr die ical-Instanz ben\u00f6tigt.\n<figure id=\"attachment_10940\" aria-describedby=\"caption-attachment-10940\" style=\"width: 1024px\" class=\"wp-caption aligncenter\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-10940 size-full\" src=\"https:\/\/funrecycler.com\/wp-content\/uploads\/2018\/12\/abfall2-1-1024x559.png\" alt=\"\" width=\"1024\" height=\"559\" \/><figcaption id=\"caption-attachment-10940\" class=\"wp-caption-text\">Adapterkonfiguration Haupteinstellungen<\/figcaption><\/figure>\n<figure style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-10941 size-full\" src=\"https:\/\/funrecycler.com\/wp-content\/uploads\/2018\/12\/abfall3-1024x373.png\" alt=\"\" width=\"1024\" height=\"373\" \/><figcaption class=\"wp-caption-text\">Konfiguration der Kalender-Adresse<\/figcaption><\/figure>\n&nbsp;\n<span style=\"font-size: 1rem\">Unter dem Men\u00fcpunkt <\/span><em style=\"font-size: 1rem\">Ereignisse<\/em><span style=\"font-size: 1rem\"> habe ich <\/span><em style=\"font-size: 1rem\">Vacation<\/em><span style=\"font-size: 1rem\"> deaktiviert.<\/span><!-- \/wp:paragraph -->\n<!-- wp:paragraph -->\nDer Adapter wird nun neugestartet. In der Objekt-Ansicht von ioBroker kann nun gepr\u00fcft werden, ob die Schritte erfolgreich waren. Dazu geht ihr mit der Maus \u00fcber den <em>Wert<\/em> in der Zeile <em>html<\/em> und solltet dann im Popup schon ein paar Termine sehen.\n<figure id=\"attachment_10942\" aria-describedby=\"caption-attachment-10942\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-10942 size-full\" src=\"https:\/\/funrecycler.com\/wp-content\/uploads\/2018\/12\/abfall4-1024x152.png\" alt=\"\" width=\"1024\" height=\"152\" \/><figcaption id=\"caption-attachment-10942\" class=\"wp-caption-text\">ioBroker\/Objekte\/ical-Instanz<\/figcaption><\/figure>\n<h2>VIS vorbereiten<\/h2>\n<!-- \/wp:paragraph -->\n<!-- wp:paragraph -->\nDamit VIS Bilder anzeigen kann, werden diese mit dem <em>Dateimanager<\/em>, der im VIS-Editor \u00fcber <em>Setup<\/em> erreicht wird, hochgeladen. Ich habe denen folgende Namen gegeben\n<!-- \/wp:paragraph -->\n<!-- wp:list -->\n<ul>\n \t<li><strong>bt.png<\/strong> f\u00fcr <em>Blaue Tonne<\/em><\/li>\n \t<li><strong>gt.png<\/strong> f\u00fcr <em>Gelbe Tonne<\/em><\/li>\n \t<li><strong>st.png<\/strong> f\u00fcr <em>Schwarze Tonne<\/em><\/li>\n<\/ul>\n<!-- \/wp:list -->\n<!-- wp:paragraph -->\nWeitere Abfallereignisse sind f\u00fcr mich nicht relevant.\n<figure id=\"attachment_10943\" aria-describedby=\"caption-attachment-10943\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-10943 size-full\" src=\"https:\/\/funrecycler.com\/wp-content\/uploads\/2018\/12\/abfall5-1024x433.png\" alt=\"\" width=\"1024\" height=\"433\" \/><figcaption id=\"caption-attachment-10943\" class=\"wp-caption-text\">Die Bilder habe ich im Ordner \/vis.0\/main\/bilder\/abfall abgelegt.<\/figcaption><\/figure>\nIm VIS-Editor wird Anzeige des Abfall-Kalenders lediglich ein HTML-Widget angelegt, in die Eigenschaft HTML des Widgets schreiben wir\u00a0<strong>{javascript.0.vis.Abfall}. <\/strong>Das ist ein Verweis auf einen State des Unterhalb des Objektes <em>javascript.0.<\/em>\n<!-- \/wp:paragraph -->\n<!-- wp:paragraph -->\nDieser State muss zun\u00e4chst angelegt werden. Dazu wird under <em>ioBroker\/Objekte<\/em> die Zeile <em>javascript.0<\/em> markiert, dann ganz oben auf das Plussymbol <em>Ein Tochterobjekt&#8230;\u00a0<\/em>klicken.\n<figure id=\"attachment_10944\" aria-describedby=\"caption-attachment-10944\" style=\"width: 1024px\" class=\"wp-caption alignnone\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-10944 size-full\" src=\"https:\/\/funrecycler.com\/wp-content\/uploads\/2018\/12\/abfall6-1024x464.png\" alt=\"\" width=\"1024\" height=\"464\" \/><figcaption id=\"caption-attachment-10944\" class=\"wp-caption-text\">Den State javascript.0.vis.Abfall als Zeichenkette hinzuf\u00fcgen<\/figcaption><\/figure>\nZur Formatierung verwende ich etwas CSS, das im VIS-Editor in der CSS-Eigenschaft einf\u00fcgt wird.\n<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-10946 size-full\" src=\"https:\/\/funrecycler.com\/wp-content\/uploads\/2018\/12\/abfall8.png\" alt=\"\" width=\"340\" height=\"396\" \/>\n<pre><code>table.Abfall {\n    color: white;\n}\ntd.Abfallimage {\n    background-color: gray;\n    padding:5px;\n}\ntd.AbfallText {\n    text-align: center;\n    padding: 5px 10px;\n    color: lightblue;\n}<\/code><\/pre>\n<h2>Skriptdatei erstellen<\/h2>\n<!-- \/wp:paragraph -->\n<!-- wp:paragraph -->\nUnter ioBroker\/Skripte wird ein neues Skript erstellt. Als Typ ins Javascript zu w\u00e4hlen. Dort wird folgender Skripttext eingef\u00fcgt.\n<pre><code>on('ical.0.data.table', function(theObj) {\n   var obj = theObj.state.val;\n   MakeAbfallHTML(obj);\n});\nfunction MakeAbfallHTML(obj) {\n    var html = \"&lt;table class=Abfall&gt;&lt;tr&gt;\";\n    for (i=0; i&lt;4; i++) {\n        if (obj[i]) {\n            if (obj[i].event.indexOf(\"Gelber Sack\") &gt; -1) {\n                html = html + \"&lt;td class=Abfallimage&gt;&lt;img width=120 height=120 src=\/vis.0\/main\/bilder\/abfall\/gt.png&gt;&lt;\/td&gt;\";\n            }\n            if (obj[i].event.indexOf(\"Papier\") &gt; -1) {\n                html = html + \"&lt;td class=Abfallimage&gt;&lt;img width=120 height=120  src=\/vis.0\/main\/bilder\/abfall\/bt.png&gt;&lt;\/td&gt;\";\n            }\n            if (obj[i].event.indexOf(\"Haus\") &gt; -1) {\n                html = html + \"&lt;td class=Abfallimage&gt;&lt;img width=120 height=120  src=\/vis.0\/main\/bilder\/abfall\/st.png&gt;&lt;\/td&gt;\";\n            }\n        }\n    }\n    html = html + \"&lt;\/tr&gt;&lt;tr&gt;\";\n    for (i=0; i&lt;4; i++) {\n        if (obj[i]) {\n            html = html + \"&lt;td class=AbfallText&gt;\"+obj[i].date+\"&lt;\/td&gt;\"   ;\n        }\n    }\n   html = html + \"&lt;\/tr&gt;&lt;\/table&gt;\";\n   console.log(html);\n   setState('javascript.0.vis.Abfall', html);\n}<\/code><\/pre>\nDas Skript reagiert auf drei Ereignisse, bei denen im Text die Begriffe\n<!-- \/wp:paragraph -->\n<!-- wp:list -->\n<ul>\n \t<li>Gelber Sack<\/li>\n \t<li>Papier<\/li>\n \t<li>Haus<\/li>\n<\/ul>\n<!-- \/wp:list -->\n<!-- wp:paragraph -->\nvorkommen und ordnet diesen Ereignissen die jeweiligen Bilder zu. Vergleiche dazu im Skript die Zeilen 12, 16 und 20 (siehe Bild). Diese Begriffe m\u00fcssen gegebenenfalls an die Texte die in eurem Abfallkalender stehen, angepasst werden.\nEbenfalls k\u00f6nnte dies leicht zum Beispiel um Biotonne erweitert werden, wenn nach Zeile 22 folgender Code eingef\u00fcgt wird und ein zus\u00e4tzliches Bild <strong>bit.png<\/strong> hochgeladen wird.\n<!-- \/wp:paragraph -->\n<!-- wp:code -->\n<pre class=\"wp-block-code\"><code>if (obj[i].event.indexOf(\"Bio\") &gt; -1) {\n                html = html + \"&lt;td class=Abfallimage&gt;&lt;img width=120 height=120  src=\/vis.0\/main\/bilder\/abfall\/bit.png&gt;&lt;\/td&gt;\";\n            }<\/code><\/pre>\n<!-- \/wp:code -->\n<!-- wp:paragraph -->\n&nbsp;\n&nbsp;\n&nbsp;","protected":false},"excerpt":{"rendered":"<p>Mein Ziel war es, im ioBroker VIS einen Auszug aus dem Abfallkalender darzustellen, der mit Symbolen die n\u00e4chsten<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1,20],"tags":[],"class_list":["post-10937","post","type-post","status-publish","format-standard","hentry","category-allgemein","category-tutorial"],"_links":{"self":[{"href":"https:\/\/funrecycler.com\/index.php\/wp-json\/wp\/v2\/posts\/10937","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/funrecycler.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/funrecycler.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/funrecycler.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/funrecycler.com\/index.php\/wp-json\/wp\/v2\/comments?post=10937"}],"version-history":[{"count":0,"href":"https:\/\/funrecycler.com\/index.php\/wp-json\/wp\/v2\/posts\/10937\/revisions"}],"wp:attachment":[{"href":"https:\/\/funrecycler.com\/index.php\/wp-json\/wp\/v2\/media?parent=10937"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/funrecycler.com\/index.php\/wp-json\/wp\/v2\/categories?post=10937"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/funrecycler.com\/index.php\/wp-json\/wp\/v2\/tags?post=10937"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}