Java Script Adapter installieren
Für Blockly brauchen wir den Java Script Adapter. Um den zu installieren, starten wir wie immer erst unser ioBroker, Vorher noch 2 Links, Installation von ioBroker und zu Wikipedia.
https://umaschmidt.de/portainer/iobroker-portainer-volumes-macvlan/
https://de.wikipedia.org/wiki/Datei:IoBroker_Blockly_Getting_started_2_de.png
Im ioBroker unter Adapter geben wir bei „Nach Namen filtern“ einfach mal java ein. Um den javascript Adapter zu installieren, klicken wir wieder auf die drei Punkte und dann auf das kleine + links.
Nach einiger Zeit sollte die Installation abgeschlossen sein und es öffnen sich die Einstellungen des java script Adapters. Hier haben wir die Haupteinstellungen und die Astroeinstellungen. In den Haupteinstellungen setzen wir bei Kommando „setobject“ erlauben und bei Kommando „exec“ erlauben einen Haken. Exec brauch man um bei bestimmten Funktionen Ergebnisse in Datenpunkte schreiben zu können oder Informationen zu erhalten.
Dann klicken wir auf die Astroeinstellungen und geben die Tageszeiteinstellungen ein, z.B. Sonnenaufgang und Sonnenuntergang. Die Astrozeiten brauchen wir auch später in Blockly. Mit den Zeiten und dem Offset kann jeder selber mal spielen. Ich lasse das erst mal so und klicke auf Speichern und Schliessen.
Nach kurzer Zeit sollte das javacript.0 Symbol grün werden und wir könnten mit dem programmieren von Blockly Skripten beginnen.
Zur Kontrolle noch einmal auf den Werkzeugschlüssel klicken und dann in den Astroeinstellungen nach sehen ob rechts die Karte angezeigt wird. Sollte das nicht der Fall sein, die Einstellungen schließen und dann in die Systemeinstellungen von ioBroker gehen und den Längen- und Breitengrad kontrollieren.Sind die nicht vorhanden, einfach auf Google Maps mit Mauspfeil den Wohnort suchen, und dann rechte Maustaste. Dann sollten die Werte angezeigt werden. Die müssen wir dann in den ioBroker Systemeinstellungen eintragen.
Objectvariablen anlegen, einmal von Hand und einmal per skript
Bevor wir mit der Erstellung unseres ersten Blockly Scriptes beginnen, werden wir vorher noch ein paar ioBroker Objektvariablen anlegen, die wir später im Script brauchen werden. Es gibt zwei Möglichkeiten, einmal erstellen wir eine Variable von Hand, und später lassen wir Variablen über ein java script erstellen.
Fangen wir mit der ersten Variante an, dazu klicken wir auf Objekte, jetzt sehen wir die Objektordner unserer Instanzen. Oben ist ein Ordner „0_userdata“, da drunter sehen wir einen Ordner „0“, das ist der Ordner in dem wir unsere Variablen anlegen sollten. Um das übersichtlicher zu gestalten, sollte man hier auch Unterordner anlegen.
Wir erstellen einen Ordner „Beleuchtung“, in dem wir dann noch weitere Ordner für unsere Objektvariablen anlegen. Zuerst klicken wir einmal auf den Ordner „0_userdata“, dann auf den Ordner „0“. Wer meine anderen Beiträge gelesen hat, erkennt den Menü Ordner wieder, den wir auch schon für unser Menü angelegt hatten.
Jetzt einmal auf das „+“ Zeichen oben im Menü. Dann öffnet sich das folgende Fenster. Bei Typ wählen wir „Verzeichnis“, bei Name gebe ich „Beleuchtung“ ein, dann auf „Hinzufügen“. Unser Ordner ist erstellt.
Ein klick auf den Ordner „Beleuchtung“, dann wieder oben auf das „+“. Ein neues Fenster öffnet sich. Hier gebe ich jetzt bei Typ „Datenpunkt“ ein, bei Zustandstyp „Logikwert“ und bei Name nehme ich „Lampe_1“. Der Name ist frei wählbar. Dann wieder auf „hinzufügen“ und unsere Varable vom Typ „Logikwert“ ist erstellt.
Sehen wir uns die Variable an, so sehen wir in der Zeile ganz rechts den Wert „false“. Die Variable beschreiben wir gleich in Blockly. Genau so legen wir uns noch eine Variable für den Schalter an, bei Zustandstyp nehmen wir „Number“ und bei Name geben wir „Lampe_1_Schalter“ ein.
VIS Projekt
Als nächstes öffne ich den vis Editor und erstelle ein neues Projekt. Dazu ein klick auf Instanzen, dann bei vis.0 rechts auf den Pfeil. Es öffnet sich ein vorhandenes Projekt. Jetzt gehe ich auf Setup, dann auf „Neues Projekt…“ .Es öffnet sich ein neues Fenster. Da gebe ich einen Namen ein, z.B. „Test_Projekt“, und klicke auf Ok. Das neue Projekt öffnet sich mit der Standard „DemoView“. Diese lösche ich in dem ich auf „Views“ klicke und dann auf den Papierkorb.
Nun erstelle ich mir eine neue testview, indem ich auf das „+“ klicke, dann links in das Eingabefeld den Namen, frei wählbar, ich nehme „testview“, und habe eine leere neue view vor mir. Um dem ganzen ein bischen Farbe zu geben, wählen wir in den Eigenschaften bei „Thema“ auf „black-tie“, und darunter bei „keins“ auf „Blue marine“. Was wir jetzt brauchen ist ein Schalter und eine Glühlampe, die finden wir im linken Reiter, bei den widgets. Dazu scrollen wir etwas nach unten und ziehen uns die Lampe „widget Bulb on/off“, und noch weiter unten das widget „Radiobuttons on/off“, beide ziehen wir auf unsere Arbeitsfläche.
Mehr brauchen wir für unser erstes Blockly Skript erst mal nicht. Jetzt ein klick auf die Lampe, dann ein klick rechts in den Eigenschaften neben das Eingabefeld von Object ID: und suchen unsere Variable „Lampe_1“, Doppelklick auf den Ordner „0_userdata.0“, dann auf „Beleuchtung“ und zuletzt auf „Lampe_1“. Genau so mit dem Schalter, Object ID: dann unsere Variable „Lampe_1_Schalter“.
Das erste Blockly Skript
Wir haben jetzt eine testview angelegt, wir haben Variablen erstellt, nun erstellen wir unser erstes Blockly Skript. Wir verlassen den Editor und klicken links im Menü auf Skripte. Beim ersten Start, je nach Modus, sollte bis auf einen Ordner „common“, evtl. noch ein Ordner „global“ noch alles leer sein.
Ich hatte den Ordner „Beleuchtung“ schon vorher mal erstellt. Das machen wir jetzt einmal zusammen. Einen klick oben auf das Icon neben dem Stift, und folgendes Bild sehen wir jetzt. Unter Name sollte „Ordner 1“ stehen, und unter Ordner sollte „root“ stehen. Ist das nicht der Fall, klickt auf den Pfeil bei Ordner und wählt da das root Verzeichnis aus.
Also noch mal auf das Icon neben dem Stift, jetzt geben wir anstatt „Ordner 1“ „Beleuchtung“ ein und klicken auf „OK“. Nun sollte es so aussehen wir im vorigen Bild.
Jetzt wählen wir den Ordner „Beleuchtung“ an, der dann eine blaue Markierung bekommt, und erstellen noch einen Unterordner z.B. „Wohnzimmer“, unsere erste Lampe soll im Wohnzimmer sein.
Wenn wir dann doppelt auf Beleuchtung klicken, sehen wir da auch den Ordner „Wohnzimmer“ den wir einmal anwählen. Ist der blau markiert, klicken wir auf das „+“ Icon und folgendes Bild haben wir vor uns.
Hier kann eine Auswahl getroffen werden wie man programmieren will, wir haben uns für Blockly entschieden und wählen es einmal aus.
Hier geben wir bei Skript 1 den Namen „Lampe_1“ ein. Wir sehen bei Ordner schon Beleuchtung / Wohnzimmer, also hier sind wir richtig und klicken auf „OK“. Nun haben wir unsere Programmieroberfläche vor uns, sehen auch das dieses Skript noch nicht läuft.
Programmieren mit Blockly an sich hat eine lange Vorgeschichte und wurde ursprünglich mal für Kinder und Schüler entwickelt. Es werden immer einzelne Objekte zusammen gesteckt und mit Inhalten gefüllt. Der Benutzer macht was, und es wird was ausgeführt. Würden wir dieses leere Skript jetzt einmal starten, würde es einmal durchlaufen und mehr passiert nicht. Was wollen wir machen? Wir haben einen Schalter und eine Lampe. Mit dem Schalter soll die Lampe ein bzw. aus geschaltet werden. Wir müssen also den Schalter überwachen ob er seinen Zustand ändert. Das können wir jetzt mit einem Trigger Baustein machen. Sehen wir uns mal den Reiter „Trigger“ an.
Unter Trigger finden wir nur Bausteine die irgendetwas überwachen. Zustände, Zeiten, Astrozeiten, Zeitpläne usw.. Wir wollen unseren Schalter überwachen, das können wir z.B. mit dem 2 Baustein „falls Object“, den ziehen wir mal auf die Arbeitsfläche.
Bei „Object ID“ muss unser Schalter rein, den wollen wir ja überwachen. Bei geändert hat man jetzt mehrere Möglichkeiten wie wir sehen. Ich würde am Anfang immer „wurde aktualisiert“, oder „wurde geändert“ auswählen. Wir entscheiden uns für „wurde aktualisiert“. Das machen wir mal, ein klick auf „Object ID“ öffnet sich ein Fenster, wo wir unsere Variable auswählen können.
Dazu gehen wir unter „0_userdata/0/Beleuchtung“, da finden wir unsere Variablen. Wir klicken doppelt auf „Lampe_1_Schalter“ und haben unsere „Object ID“ gefüllt. Nun einmal auf „wurde geändert“ und wählen „wurde aktualisiert“ aus, obwohl in unserem Fall beides gehen würde. Der erste Schritt wäre getan.
Was brauchen wir als nächstes? Falls der Schalter betätigt wurde soll was passieren. Entweder geht die Lampe an, oder sie geht aus. Dazu klicken wir mal auf „Logik“, und siehe da, genau so einen Baustein gibt es da, „falls mache“, den nehmen wir mal.
Es soll der Zustand unseres Schalters abgefragt werden, hier gibt es mehrere Möglichkeiten. Ich zeige euch mal 2. Ich habe mir mal aus dem Reiter „Trigger“ den Baustein „Object ID“, wo wir dann „Wert“ auswählen können, aus „System“ den „steuere“ Baustein, und aus „Logik“ den „wahr“ Baustein heraus gesucht.
In „Object ID“ muss unsere „Lampe_1“, die wollen wir ja schalten. Klicken also auf „Object ID“ und suchen unsere „Lampe_1“ in den Objekten. Im Ordner „0_userdata.0.Beleuchtung“ sollten wir fündig werden. Um eine richtige Lampe oder Steckdose zu schalten setzen wir einen zweiten „steuere“ Baustein dazu und fügen dann bei der „Object ID“ den Staus der Lampe/Steckdose ein.
Dann habe nur zur Anschauung den kompletten Baustein kopiert, den Baustein „Wert“ löschen wir, und ersetzen ihn durch den „Gleich“ Baustein aus der Logik . In das linke Feld ziehen wir uns dann den „Wert von Objekt“ aus System, rechts kommt der „wahr“ auch aus Logik. Die Funktion wäre gleich der oberen. Da wir nur ein Objekt haben welches wir abfragen müssen, würde ich auch die obere Möglichkeit nehmen, die in dem Fall auch richtiger wäre.
Bei der Unteren sieht man auf Anhieb was gemacht wird, ist der Wert von unserem Schalter „wahr“, also true in der Programmiersprache, steuere die Lampe mit „wahr“. Wie wir aber sofort erkennen, würde unsere Lampe in beiden Fällen nur eingeschaltet, aber nie wieder aus geschaltet.
Um das zu ändern klicken wir erst mal auf das blau weiße Zahnrad und ziehen uns wie oben ein „sonst“ unter das „falls“, um das Fenster wieder zu schließen, noch mal auf das Zahnrad. Dann auf das „steuere Lampe_1“, rechte Maustaste und „kopieren“. Die Kopie setzen wir bei „sonst“ ein. Klicken wir auf das „wahr“, öffnet sich ein Fenster und dort klicken wir das „falsch“ an. Um das Skript zu starten einmal „Speichern“ und dann das „Play“ links neben dem Mülleimer anwählen, das Projekt oben rechts starten, fertig. Die Lampe kann nun mit „ON“ bzw. „OFF“ aus vis geschaltet werden. Das war unser erstes Blockly Skript. Das war doch einfach, oder?
Lampe in Automatik mit Astrofunktion oder von Hand schalten
Weil das so gut geklappt hat, wollen wir noch weitere Skripte erstellen und ioBroker vis anpassen. Wir können dann die Lampe von Hand Ein- Aus schalten oder auf Automatik stellen, so das unsere Lampe morgens um 04:00 Uhr eingeschaltet, und über die Astrofunktion „Sonnenaufgang“ wieder ausgeschaltet wird. Abends mit der Astrofunktion „Sonnenuntergang“ EIN, und um 23:00 Uhr wieder ausgeschaltet wird. Wir legen uns dann noch Objektvariablen an, allerdings nicht von Hand, sondern über eine Javaskript-Funktion, was die ganze Sache, hoffe ich, etwas einfacher macht.
Als erstes öffnen wir wieder unsere „testview“, suchen nach dem widget „Radiobuttons ValueList“ und ziehen uns das unter unseren alten Schalter. Dann kopieren wir unsere „Lampe_1“ und setzen sie neben den neuen Schalter.
Um einen Text neben die Lampe zu setzen ziehen wir uns ganz oben das „HTML“ widget neben die Lampe, schreiben rechts in den „Eigenschaften“ bei HTML „Lampe_1“ rein. Passen das farblich etwas an, dazu unten bei „CSS Font & Text“ Farbe auswählen, und machen das Feld vom Text im Editor etwas kleiner. Das selbe machen wir bei der zweiten Lampe, nur nennen sie „Lampe_2“. Dann sollte unsere view so aussehen.
Das nächste Skript, Astrozeiten
Unser nächstes Skript erstelle ich um die Astrozeiten aus zu werten. Wir gehen also wieder auf Skripte. Dann wählen wir den Ordner Beleuchtung an und erstellen dann mit klick auf das „+“ das Blockly Skript „Astrozeiten“.
Wir haben wieder unsere leere Arbeitsfläche vor uns. Jetzt ein Klick auf Funktionen. Dort wählen wir die „Javascript-Funktion etwas tun“ und ziehen sie auf die Arbeitsfläche, dann geben wir bei „etwas tun“, ich nehme, „Variablen erstellen“ ein, Text egal. Nun nochmal in Funktionen und sehen da jetzt die Funktion „variablen erstellen“. Diese Funktion ziehen wir auch in die Arbeitsfläche. Klicken wir in der Funktion rechts auf die Punkte sollte sich ein neues Fenster „Funktions-Editor“ aufmachen. Hier deklarieren wir unsere Variablen.
Hier geben wir jetzt für die Hilfs-Variablen Sonnenaufgang und Sonnenuntergang folgende Zeilen ein, einfach rechts auf kopieren und in den Funktions-Editor einfügen.
createState("0_userdata.0.Beleuchtung.Astrozeiten.HV-Sonnenaufgang", "false", {name: "HV-Sonnenaufgang", type: "boolean"});
createState("0_userdata.0.Beleuchtung.Astrozeiten.HV-Sonnenuntergang", "false", {name: "HV-Sonnenuntergang", type: "boolean"});
Eine kurze Erklärung:
Die Zeile 1, wenn wir uns die mal genau betrachten, bedeutet das wir eine Variable mit dem Namen „HV-Sonnenaufgang“ im Ordner „0_userdata.0.Beleuchtung.Astrozeiten“ erstellen, und die vom Type „boolean“ ist, die als Startwert ein „false“ hat.
Die Zeile 2, bedeutet das wir eine Variable mit dem Namen „HV-Sonnenuntergang“ im Ordner „0_userdata.0.Beleuchtung.Astrozeiten“ erstellen. Die vom Type „boolean“ ist, und die auch als Startwert ein „false“ hat.
Ich hoffe ich habe das verständlich erklärt. Wenn wir das Skript speichern und mal starten, werden die Variablen erstellt. Das Skript aber bitte wieder stoppen. Jetzt schauen wir mal unter unsere Objekte, da sollte folgender Ordner zu sehen sein. „0_userdata.0.Beleuchtung.Astrozeiten“ in dem Ordner „Astrozeiten“ sollten auch unsere beiden neuen Hilfsvariablen mit dem Wert „false“ sein.
Gehen wir wieder zu unserem Skript und machen weiter. Bei System finden wir ein gelbes „Kommentarfeld“, das ziehen wir rüber unter die Funktion. Ich schreibe als Text mal „Astro Hilfsvariablen für 10 min gesetzt lassen“ da rein. Unter Trigger finden wir einen Baustein mit Namen, „Astro Sonnenaufgang“, den ziehen wir ebenfalls rüber unter den Kommentar.
In den Trigger Sonnenaufgang ziehen wir uns nun 2 „steuere mit“ Bausteine und wählen die Variable „HV-Sonnenaufgang“. Der Obere soll auf „wahr“ abgefragt werden, der Untere soll nach 10min auf „falsch“ abgefragt werden. Das machen wir indem wir mal rechts neben „mit Verzögerung“ klicken, die „1000“ durch eine „10“ ersetzen, und aus „ms“ „min“ machen. Das selbe machen wir für den Sonnenuntergang. Die 10min könnte man auch reduzieren, das habe ich nur gemacht um das Signal sicher überall auswerten zu können. Das fertige Blockly Skript sollte dann wie folgt aussehen. Und wir können es mal starten.
Der Ablauf sieht so aus, wir haben jetzt eine Variable „HV-Sonnenaufgang“ die bei Sonnenaufgang für 10 min auf wahr gesetzt. Das selbe geschieht mit der „HV-Sonnenuntergang“, die wird bei Sonnenuntergang für 10 min auf wahr gesetzt. Damit können wir jetzt in unseren Skripten weiter arbeiten.
Unser nächstes Blockly Skript wird auch im Ordner „Beleuchtung“ erstellt. Wir nennen es „Beleuchtung Ein Aus schalten“ und fangen wieder mit einer Funktion an um unsere Variable „Beleuchtung_EIN_AUS_schalten“ zu erstellen. Im Funktions-Editor geben wir folgende Zeile ein, was die bedeutet sollte jetzt klar sein. Einfach wieder rechts auf Kopieren.
createState("0_userdata.0.Beleuchtung.Beleuchtung_EIN_AUS_schalten", "false", {name: "Beleuchtung_EIN_AUS_schalten", type: "boolean"});
Jetzt speichern wir das Skript und starten es kurz. Die Variable sollte angelegt sein. Dann erstellen wir einen Kommentar, „Beleuchtung Morgens um 04:00 einschalten!“ und setzen ihn direkt unter die Funktion. Nun aus Trigger den Baustein „Zeitplan“, den setzen wir direkt unter den Kommentar. Dann klicken wir bei Zeitplan auf die Sterne. Es öffnet sich ein Fenster „Zeitplan definieren…“, hier klicken wir auf „Wizard“ Bei Zeit wählen wir „Bestimmte Zeit“ und geben rechts „04:00“ Uhr ein, bei Zeitraum nehmen wir „Täglich“ rechts „Jeden Tag“, dann auf „OK“.
In den Zeitplan ziehen wir uns wieder ein „steuere Object ID mit“ Baustein. Das „Objeckt ID“ ersetzen wir durch unsere neue Variable „Beleuchtung_EIN_AUS_schalten“ und bei „mit“ nehmen wir das „wahr“ aus „Logik“. Unter „steuere“ ziehen wir uns noch aus „System“ das „debug output“, den Text ersetzen wir durch „Beleuchtung Morgens um 04:00 EIN!“. Durch das debug out Modul können wir unter Protokolle im linken Menü sehen ob unser Skript um 04:00 Uhr geschaltet hat.
Weiter geht es wieder mit einem Kommentar, „Beleuchtung morgens durch Sonnenaufgang aus!“. Unter den Kommentar jetzt wieder einen „Falls Objekt“, für „Object ID“ suchen wir „HV-Sonnenaufgang“, „wurde geändert“ lassen wir mal so. In das „Falls Objekt“ ziehen wir uns nun ein „Falls mache“ Baustein. In „Falls mache“ wieder ein „steuere Object ID mit“, die Object ID ersetzen wir wieder durch „Beleuchtung_EIN_AUS_schalten“ und bei „mit“ setzen wir ein „falsch“ ein. Nochmal ein „debug output“ mit Text „Beleuchtung bei Sonnenaufgang AUS!“. Das war jetzt der komplette Vorgang für morgens.
Nun begeben wir uns an Abends. Kommentar „Beleuchtung Abends mit Sonnenuntergang EIN!“, Ein „Falls Object“, die ID durch „HV-Sonnenuntergang“ tauschen, wieder ein „Falls mache“, steuere „Beleuchtung_EIN_AUS schalten“ mit „wahr“, zur Kontrolle wieder ein „debug output“ mit Text „Beleuchtung mit Sonnenuntergang Ein“. Jetzt noch einen Zeitplan analog zu dem vom Morgen, nur nehmen wir da 23:00 Uhr, und bei steuere wieder „Beleuchtung_EIN_AUS schalten“ mit „falsch“.
So sollte unser Skript für „Beleuchtung EIN/AUS schalten“ jetzt aussehen. Speichern und starten, dann sollte bei „Protokolle“ unsere Schaltungen angezeigt werden, wenn die Zeiten da waren. Ich weiß, das war jetzt sehr trocken. Für Leute die sich schon mehr mit Blockly beschäftigt haben, wahrscheinlich schon zu trocken. Wir können jetzt auch schneller vor gehen.
Das 4. Blockly Skript erstellen wir im Ordner „Wohnzimmer“ und nennen es „Lampe_2 mit Autobetrieb“. Um die ganze Sache abzukürzen, zeige ich erst das komplette Skript.
Als erstes wieder einen Kommentar. Dann eine Funktion für unsere beiden Variablen, die mit folgenden Befehlen in der Funktion erstellt werden. Folgende Zeilen kopieren und im Funktios-Editor einfügen.
createState("0_userdata.0.Beleuchtung.Betriebsart_Lampe_2", "0", {name: "Betriebsart_Lampe_2", type: "number"});
createState("0_userdata.0.Beleuchtung.Lampe_2", "false", {name: "Lampe_2", type: "boolean"});