Schlagwort-Archive: VIS

In VIS auf Onkyo Favoriten zugreifen und steuern

Um auf die verschiedenen Internet Radio Favoriten Deines Onkyo Receivers von VIS aus zugreifen zu können benötigst du ein ctrl – Icon State Widget.

Zuerst aber legst Du dir die Favoriten über die Weboberfläche deines Onkyo Receivers an. Dazu öffnest Du die IP des Receivers in einem Browser deiner Wahl und wechselst auf den Tab “My Favorites”.

Hier kannst Du nun die Namen der gewünschten Radio Station und deren URL eingeben.

Internet Radio Favoriten anlegen

Du kannst in der ersten Spalte bereits eine ID ablesen, die uns später den Zugriff auf den Favoriten erlaubt. Mit einem Klick auf “Save” werden die eingegebenen Favoriten abgespeichert.

Favoriten Zugriff in VIS anlegen

Um nun einen Favoriten mit einem Klick aktivieren zu können, ziehst Du dir das folgende Widget auf deine View.

ctrl - Icon State Widget — ctrl – Icon State Widget

Diesem Widget weist du nun den folgenden Datenpunkt zu:

onkyo.0.Zone1.NetRadioPreset

Damit du nun diesen Datenpunkt verändern kannst, musst natürlich noch ein Wert übergeben werden. Dieser Wert entspricht der ID des Favoriten, den Du gerne abspielen möchtest. Dem Widget kannst Du nun auch noch einen Text zuweisen, damit Du weißt, welcher Favorit hier abgespielt werden soll.

Wenn Du nun deine View aufrufst und das Widget anklickst, sollte sich der Receiver automatisch einschalten, den Kanal auf .Net stellen und den entsprechenden Sender wiedergeben. Damit ist das Widget schon einmal funktional.

Favoriten Widget mit Senderlogo

Zu schöneren Ansicht in der View kannst Du dem Favoriten auch ein Senderlogo hinterlegen.

Über die Google Bildersuche kannst Du passende Senderlogos suchen und herunterladen. Diese werden über den integrierten Dateimanager wie folgt hochgeladen.

Senderlogos über den Dateimanager hochladen

Nachdem Du nun die Logos via Dateimanager hochgeladen hast, kannst Du sie dem entsprechenden Favoriten hinzufügen.

Dazu wählst du erneut das Widget aus, entfernst den vorher eingegebenen Text und erreichst über das kleine Symbol neben “Quelle” den Dateimanager erneut. Dort kannst Du das Senderlogo auswählen und dem Widget zuweisen. Über width und height im Bereich CSS Allgemein kannst Du die entsprechende Breite und Höhe definieren.

Eine passende View für den Receiver stelle ich Dir im nächsten Beitrag vor.

ioBroker eigene Protokoll Funktion (Logging) erstellen

Schreibe eine Antwort

Über ein kleines Javascript lässt sich eine Protokoll Funktion in ioBroker erstellen. Diese ordnet die Ereignisse chronologisch, färbt sie entsprechend ihrer Bedeutung (Info, Warnung, Fehler) ein und weist ihnen ein kleines Symbol zu.

Javascript erstellen

Zuerst erstellst Du ein neues Javascript im Bereich global.

 // Hauptdatenpunkt unterhalb javascript
  var datenpunkt = "Ereignisprotokoll.";
  
  // Mögliche Protokoll-Texte
  const texte = ["Info","Warnung","Fehler"];
  
  // Farben zu den Texten (schwarz, gelb, rot)
  const farbe = ["#000000","#F0DB4F","#EF5350"];
  
  // Symbole zu den Texten
  const symbol = ["&#9432;","&#9888;","&#9760;"];
   
  function Protokoll(typ, Text) {
      // Protokoll abholen
      var Protokoll_Liste = getState(datenpunkt+"Ereignisse").val;
      var datum = formatDate(new Date(), "TT.MM.JJ hh:mm:ss");
  
      // Neues Protokoll generieren
      let tmp_Protokoll = datum + "<span style=\"display:inline-block;width:90px;margin-left:10px;color:" + farbe[typ] + "\">"
      + symbol[typ] + " " + texte[typ] + "</span>" + Text + "<br>";
  
      // Neues Protokoll an den Anfang setzen
      Protokoll_Liste = tmp_Protokoll + Protokoll_Liste;
  
      // Neues Protokoll in Datenpunkt speichern
      setState(datenpunkt + "Ereignisse", Protokoll_Liste);
  }
  
  // Zugehörige Datenpunkte erstellen
  function erstelleDatenpunkte() {
      // Datenpunkt Protokoll
      createState(datenpunkt+"Ereignisse", "", false, {
          name: "Ereignisprotokolle",
          desc: "Protokoll Funktion über JavaScript",
          type: "string",
          role: "text",
          unit: ""
      });    
  }
  
  // einmaliger Aufruf zum Erstellen der DP's
  erstelleDatenpunkte();

Skript verwenden

Da das Skript im globalen Bereich von Javascript liegt, kann jedes Skript nun auf diese Funktion zugreifen. Der Aufruf erfolgt nach folgendem Schema.

Beispiel 1:

 Protokoll(0, "Ich bin eine Information!");

Beispiel 2:

 Protokoll(1, "Ich bin eine Warnung!");

Beispiel 3:

 Protokoll(2, "Ich bin ein Fehler!");

Tür- bzw. Fensterkontakt protokollieren

In diesem Skript wird das Öffnen und schließen eines Fensters protokolliert.

 // Protokoll - 0 - Information
  on({id: "hm-rpc.0.LEQ01737XX.1.STATE", change: "ne"}, function (obj) {
      if (obj.state.val === true) {
          Protokoll(0, "Wohnzimmer Fenster wurde geöffnet!");
      } else {
          Protokoll(0, "Wohnzimmer Fenster wurde geschlossen!");
      }
  });

Die erste Zahl ist jeweils einem Index zugewiesen. Hier 0 = Information, 1 = Warnung und 2 = Fehler. Der Text danach kann frei im Funktionsaufruf belegt werden.

Protokoll in VIS einbinden

Damit Du nun nicht nur eine Ereignisdatenbank in ioBroker hast, sondern sie auch darstellen lassen kannst, benötigst du nur ein HTML Widget, welches Du auf einer View platzierst.

Dem Widget weisen wir nun den Datenpunkt aus dem Skript hinzu.

 {javascript.0.Ereignisprotokoll.Ereignisse}

Die Schriftfarbe lässt sich über über die Eigenschaften des Widgets anpassen.

Farbanpassung des HTML Widget

Widget in View anzeigen

Nun kannst Du deine View öffnen und die Ereignisse anzeigen lassen.

Scrollbare Ereignisanzeige

Die Ereignisanzeige wird bei jedem Aufruf natürlich um ein Element verlängert. Damit Du in der Liste noch die Möglichkeit hast, ältere Elemente abzurufen, kannst Du das Scrollen der Liste aktivieren. Dies geschieht über:

Scrollen der Ereignisse ermöglichen

overflow-y ist in dem Falle der senkrechte Scrollbalken; overflow-x der Vertikale.

So sieht es aus:

Ereignisanzeige für geöffnete/geschlossene Fenster

Die Protokollfunktion aus dem Beispiel oberhalb sieht in VIS so aus:

Ereignisanzeige für geöffnete/geschlossene Fenster

Shelly RGBW2 synchronisieren

Schreibe eine Antwort

Wenn du z.B. mehrere Shelly RGBW2 Dein Eigen nennst, ist es in manchen Situationen toll, wenn diese die RGB-Streifen synchron schalten würden. Hast Du z.B. in Deinem Wintergarten mehrere RGB-Streifen installiert und sie alle mit einem Shelly RGBW2 ausgestattet, so macht es dort natürlich Sinn, wenn alle Farben gleich sind.

Somit kannst Du einen Shelly RGBW2 als “Master” festlegen, der seine Farbwerte an die anderen RGBW2 weitergibt und zusätzlich die “Slave” Shelly aus- und einschaltet.

Als Raffinesse, wird noch die Helligkeit am Ende des Skriptes in alle Shelly synchronisiert.

Installation des Shelly Adapter

Nach kurzer Zeit stehen die Datenpunkte aller gefundenen Shellys unter shelly.0 zur Verfügung.

Skript zur Synchronisation

Datenpunkt des Master & der Slave Shelly

//Skript zum Synchronisieren des Shelly RGBW2
 var master = "shelly.0.SHRGBW2#6F65EB#1.color";
 
 //Hier den Datenpunkt des 1. Slave Shelly eingeben
 var slave_1 = "shelly.0.SHRGBW2#6F65AB#1.color";
 
 //Hier den Datenpunkt des 2. Slave Shelly eingeben
 var slave_2 = "shelly.0.SHRGBW2#6F65BB#1.color";
 
 //Hier den Datenpunkt des 3. Slave Shelly eingeben
 var slave_3 = "shelly.0.SHRGBW2#6F65CB#1.color";
 
 //Reagiere auf die Farbe des Master Shelly bei jedem Wechsel
 on({id: master+".rgbw", change: "any"}, function (obj) 
 {
     //Farbe des 1. Slave Shelly setzen
     setState(slave_1+".rgbw", obj.state.val);
     
     //Farbe des 2. Slave Shelly setzen
     setState(slave_2+".rgbw", obj.state.val); 
     
     //Farbe des 3. Slave Shelly setzen
     setState(slave_3+".rgbw", obj.state.val);
 });
 
 //Reagiere auf ein- und ausschalten des Master
 on({id: master+".Switch", change: "any"}, function (obj) 
 {
     //Zustand des 1. Slave Shelly setzen
     setState(slave_1+".Switch", obj.state.val);
     
     //Zustand des 2. Slave Shelly setzen
     setState(slave_2+".Switch", obj.state.val); 
     
     //Zustand des 3. Slave Shelly setzen
     setState(slave_3+".Switch", obj.state.val);
 });
 
 //Reagiere auf die Helligkeit des Master
 on({id: master+".gain", change: "any"}, function (obj) 
 {
     //Helligkeit des 1. Slave Shelly setzen
     setState(slave_1+".gain", obj.state.val);
     
     //Helligkeit des 2. Slave Shelly setzen
     setState(slave_2+".gain", obj.state.val); 
     
     //Helligkeit des 3. Slave Shelly setzen
     setState(slave_3+".gain", obj.state.val);
 });

Nicht benötigte Datenpunkte im Skript kannst Du mit // vor der jeweiligen Zeile auskommentieren oder einfach löschen.

VIS Navigations – Menü erstellen

2 Antworten

Wäre es nicht schön, wenn man ein Menü oberhalb der VIS hätte, in der Du die einzelnen Unterseiten erreichen kannst? Ich zeige Dir in diesen Tutorial, wie Du das bewerkstelligen kannst.

Installation von Mfd icons as SVG

Ich verwende in meinen Menüs gerne kleine Symbole, die visuell den Bereich anzeigen, um den es geht. Dazu verwende ich die Icons im SVG Format, da man diese später auch noch einfärben kann, wenn man möchte.

Installation von metro style Widgets

Um ein schönes Menü zu erstellen, benötigst du die metro Style Widgets. Diese beinhalten eine ganze Reihe an Navigations- aber auch State-Elementen.

View für das Navigationsmenü erstellen

Zuerst erstellst Du eine leere View und benennst diese Navigation. Solltest Du bereits eine View haben, so kannst Du diese kopieren, um die Eigenschaften (Theme, Schrift usw.) zu übernehmen. Anschließend löschst Du alle Elemente auf der neuen/kopierten View.

Neue View erstellen oder kopieren (Duplizieren)

Wenn die View kopiert oder erstellt worden ist, machst Du Dir Gedanken, wie das Menü aussehen soll. Ich habe mich für eine Höhe von 30 Pixel und einer Breite von 1280 Pixel entschieden. Somit passt die View gut auf ein Tablet mit 10.5 Zoll. Möchtest Du lieber größere Menü Punkte, so kannst Du die Höhe an deine Bedürfnisse anpassen.

Maße der View für die Navigation angeben

Navigationselemente hinzufügen

Nun kannst Du aus der linken Seite das Tile Navigation Element auf die View ziehen und es bearbeiten. Ich habe mich für folgende Einstellungen entschieden. Damit das kleine Icon aus den Mfd Symbolen erscheint, gibst Du es als Abzeichen URL an. Da VIS die Vektorgrafiken leider nicht in der Vorschau anzeigen kann, ist es hilfreich, die Seite der Symbole in einem neuen Browser Fenster zu öffnen. Dann erscheinen alle Symbole und Du kannst Dir den Namen des Symbols merken, welches Du einfügen möchtest.
Die Übersicht erreichst Du nach der Installation unter:
https://IP-DEINER-VIS:8082/icons-mfd-svg/index.html

Tile Navigations Element auf die View ziehen

Navigationselement anpassen

Um das Navigationselement anzupassen, klickst Du es an und bearbeitest seine Eigenschaften auf der rechten Seite. Die View zum Navigieren bleibt erst mal leer – dazu kommen wir später.

Ich habe mein erstes Navigationselement oben links positioniert und in der Höhe und Breite angepasst.

Ausrichtung und Größe des Navigationselements

Nun kannst Du das Element markieren und kopieren. So ersparst Du Dir die erneute Formatierung des Widget. Das Widget kannst Du dann neben das soeben erstellte Widget ziehen und VIS richtet es passend aus.

Diese Schritte kannst Du nun für die Anzahl der Navigationselemente so oft wiederholen, wie Du es benötigst.

View mit Navigationsbereich und Inhalt in VIS erstellen

Um die Navigation in VIS zu integrieren, ist es notwendig, eine eindeutige Namensgebung der Views an sich und der View mit Navigation einzuhalten. Ich benenne meine Views nach dem Schema:
View mit dem Inhalt: _Hauptseite
View mit Navigation und Inhalt: Hauptseite
Navigation: Navigation
Somit weiß ich, das die Inhalte der View in _Hauptseite stehen und die View mit Navigation und Inhalt in Hauptseite.
Dies klingt im ersten Moment etwas verwirrend, wird aber nach diesem Absatz deutlicher 🙂

Nun erstellst Du eine weitere View mit leerem Inhalt (oder Du kopierst eine zwecks Übernahme des Layout) und benennst diese Hauptseite (oder, wie Deine View heißen soll) . Diese View bekommt 2 Bereiche, die Du mit view in widget unterteilst. Ziehe zuerst ein Widget auf die View und stelle es wie folgt ein.

"view in widget" auf die View ziehen — “view in widget” auf die View ziehen

Einstellungen der View für die Navigation

Die View erhält, wie oben schon angesprochen, eine Höhe von 30px und eine Breite von 100%. Positioniert wird sie bei 0px left und 0px top. Als Name gibst Du den der Navigation an. Eine Autovervollständigung hilft Dir beim Auswählen der richtigen View.

Navigationsbereich (Oberer Teil)

Damit nun noch der Inhalt einer View unterhalb sichtbar wird, ziehst Du erneut ein view in widget auf die gleiche View. Dieses stellst Du dann wie folgt ein:

Diese View wird bei 0px left und 30px top (Differenz zur Navigations View) positioniert.
Damit die Höhe einheitlich ist, kannst Du sie berechnen lassen. Dazu dient calc(100% - 30px). Hier wird von der Höhe von 100% 30px abgezogen. Als Viewname ist hier der Name der View mit dem Inhalt (_Hauptseite) anzugeben. Nach diesen Schritten passen beide View Widgets perfekt auf die Seite.

Bereich für die Navigation (Oberer Teil)
Bereich für den Inhalt (Unterer Teil)

Nun gehst Du nochmals in die View Navigation. Denn dort haben wir eben die View noch nicht angegeben. Dies holen wir jetzt nach, da die komplette View (Navigation und Inhalt) nun erstellt ist.

Markiere dazu das Widget mit der Beschriftung Hauptseite und wähle auf der rechten Seite im Bereich View zum Navigieren die zuvor erstellte Seite aus. Auch hier hilft die Autovervollständigung bei der Auswahl.

Dem Navigations Widget die Seite zum Navigieren zuweisen

Um nun den weiteren Elementen diese Navigation zuzuweisen, wiederholst Du die oberen Schritte.

Shelly RGBW2 in ioBroker VIS: Farbwechsel

Schreibe eine Antwort

Wer einen Shelly RGBW2 sein eigen nennt, steuert diesen wohl mehr oder weniger mit der App oder gar mit Alexa, um seine Farbe einzustellen. Damit man jedoch auch die Farbe auf einer Tablet Visualisierung einstellen kann, kann man VIS nutzen.

Shelly Adapter in ioBroker installieren

Hierzu installiert man den Adapter Shelly in ioBroker

Nach kurzer Zeit stehen die Datenpunkte aller gefundenen Shellys unter shelly.0 zur Verfügung.

Colorpicker Widget in ioBroker installieren

Hierzu installiert man einfach den Adapter color picker style Widgets in ioBroker.

Colorpicker in VIS auswählen

Nachdem die Widgets nun installiert wurden, gibt es einen neuen Bereich in VIS, hinter dem sich die 5 verschiedenen Colorpicker verbergen. Da der Shelly RGBW2 eher für hellere Farben konzipiert wurde, wähle ich das color RGBColor Widget aus und ziehe es auf meine View.

color RGBColor Widget auf die View ziehen

color RGB Spectrum ist fast ähnlich, zeigt aber auch die sehr dunklen Farben an. Hier ein Vergleich:

Es ist natürlich Geschmackssache, welches Widget Du verwenden möchtest. Von der Einstellung her sind sie beide gleich. Ich verwende im weiteren Verlauf das color RGBColor Widget.

Datenpunkte des Shelly RGBW2 dem Widget zuweisen

Die jeweiligen Datenpunkte des Shelly findest Du hier:
Rot: shelly.0.SHRGBW2#ID_DES_SHELLY#1.color.red
Grün: shelly.0.SHRGBW2#ID_DES_SHELLY#1.color.green
Blau: shelly.0.SHRGBW2#ID_DES_SHELLY#1.color.blue

Nun kannst Du dem Shelly seine Farben per VIS zuweisen

Widget-Ansicht in VIS

Farbzuweisung des Shelly über die VIS Oberfläche

ioBroker VIS Bar Widget – farbige Visualisierung

Schreibe eine Antwort

In VIS gibt es standardmäßig ein Bar Widget, mit dem sich ein Füllbalken in einer Farbe darstellen lässt. Eine Farbe ist vielleicht nützlich, um den Fortschritt anzeigen zu lassen. Möchte man aber z.B. eine Auslastung anzeigen, die den Status “normal”, “erhöht” und “kritisch” visuell darstellen soll, stößt man mit einer Farbe schnell an seine Grenzen. Es sei denn, man legt den Balken 3 Mal mit verschiedenen Farben an und blendet ihn je nach Wert aus. Das geht auch einfacher!

Einfache Bar

Dazu legt man sich das Bar Widget auf die VIS und passt die entsprechenden Werte an.
Ich benutze hier den Datenpunkt von ioBroker, der den freien RAM in % anzeigt. Als Farbe habe ich rot gewählt und die Ausrichtung ist horizontal.

Bar mit dynamischer Farbe

Wie oben schon erwähnt, könnte man das Bar Widget nun 3 Mal an der gleichen Stelle positionieren und die Farben grün, gelb und rot für die Zustände normal, erhöht und kritisch nutzen und sie jeweils ausblenden. Das wäre natürlich machbar aber unsinnig, da VIS dies per JavaScript erledigen kann. Damit man nun auf einen Blick sehen kann, wie hoch die Auslastung ist und ob sich der Wert im Bereich normal, erhöht und kritisch befindet, kann man für sich selbst überlegen, welche Werte sinnvoll sind.

Ich würde hier empfehlen, das jeder Wert unter 50 als normal gilt, Werte bis 66 als erhöht und alles über 66 gilt als kritisch. Dies kann aber individuell angepasst werden. Um nun die Farbe dynamisch anpassen zu lassen, kopierst Du bitte folgendes in den Bereich Skripte in der View. Sollten Dir die Werte nicht zusagen, so kannst Du diese in den “Highlight”-Zeilen angegebenen Werte anpassen.

function colorBarHex(i)
 {
     var hex = "#3D993F";
 
     if ( i < 50 ) 
     {
         hex = "#3D993F"; // Grün
     }
     else
     {
         if ( i < 66 ) 
         {
             hex = "#FFCC00"; // Gelb
         }
         else
         {
             hex = "#D91616"; // Rot
         }
     }
     
     return hex; 
 }

Damit das Skript nun auch die richtige Farbe an das Bar Widget zurück gibt, muss dieses an den Farbwert gebunden werden. Als Farbwert setzen wir also folgenden Code:

{i:system.host.ioBroker.mem;colorBarHex(i)}

Die gschweiften Klammern sagen VIS, das es sich hier um eine Funktion handelt.
i ist hier eine temporäre Variable, der der Wert des Datenpunktes system.host.ioBroker.mem zugewiesen wird. colorBarHex() ist die JavaScript Funktion, die wir oben in den Bereich Skripte kopiert haben. Ihr wird der Parameter i übergeben.

Ansicht der Balken in VIS

So sehen die Balken dann in Aktion aus.

Tablet als Visualisierungs-Front-End

Schreibe eine Antwort

Wer sein Smart – Home umfangreich eingerichtet hat, möchte auch gerne mit diesem an einer (oder mehr) zentralen Stelle(n) agieren und seine Geräte steuern oder Status – Mitteilungen einsehen können.

Dies kann mit einem (alten, nicht mehr benötigten) Tablet ermöglicht werden. Ich nutze hier ein Samsung – Tablet (Samsung Galaxy Tab S 10.5). Als OS bediene ich mich dem Lineage OS (https://wiki.lineageos.org/devices/chagallwifi). Zusätzlich sind die folgenden Programme installiert, deren Einrichtung ich hier erläutere.

Programm	Zweck	Download
BatteryChargeLimit	Ladekontrolle des Tablets (Root erforderlich	Link
iobroker VIS	Visualisierungs – Anzeige von ioBroker	Link
MacroDroid	Automatisierung von Android	Link
MotionDetector	Bewegungserkennung	Link

Benötigte Programme für ein Smart – Home Tablet

Konfiguration von MotionDetector

Die App Motion Detector dient dem Zweck, eine Bewegung der Frontkamera zu erfassen, um so das Display einzuschalten, wenn man sich nähert. Die App wird wie folgt eingestellt.

Zuerst startest Du die App und stellst den Schieber bei Notification/Send auf AN. Der Haken bei Receive wird aktiviert, damit andere Anwendungen das Signal (Intent) empfangen können, sobald Motion Detector eine Bewegung erkennt.

Notification Einstellungen in Motion Detector

In den weiteren Einstellungen aktivierst Du noch den Autostart und kannst ggf. die Camera auf Front einstellen.

Camera - Einstellung & Autostart in Motion Detector — Camera – Einstellung & Autostart in Motion Detector

Im weiteren Verlauf solltest Du noch die Battery Optimization einstellen und die Empfindlichkeit unter Sensitivity an Deine Umgebung anpassen. Folgende Einstellungen habe ich bei mir aktiviert. Somit erkennt das Tablet auch in der Nacht Bewegungen und schaltet sich ein.

Battery Optimization & Sensity Einstellung

Bei Suspend kannst Du einstellen, wie lange die App keine erneute Bewegung nach einer erkannten Bewegung erfasst und somit auch keine Benachrichtigung (Intent) sendet.

Auf der Hauptseite des Motion Detector muss die Erkennung noch aktiviert werden. Dazu das blaue Kamera – Symbol anklicken und man sieht direkt, das die Kamera neue Events registriert. Um Dich zu versichern kannst Du auch ein paar Mal mit der Handfläche an der Kamera vorbei streichen und sehen, wie sich die Zahl der Events verändert.

Konfiguration von MacroDroid

Ich persönlich arbeite sehr gerne mit MacroDroid, da es im Gegensatz zu Tasker sehr zuverlässig läuft und schnell und einfach zu bedienen ist. Wer an dieser Stelle schon Tasker installiert hat, kann die ähnlichen Befehle auch dort einbinden – die Vorgehensweise ändert sich nur ein Wenig.

Du erstellst in MacroDroid ein neues Makro

Makroname:
Den Namen kannst Du frei wählen. Z.B. Bewegung – Display an

Auslöser:
Klicke auf das kleine Plus bei Auslöser Geräteereignisse -> Intent erhalten und trage dort folgendes ein:

org.motion.detector.ACTION_GLOBAL_BROADCAST

Auslöser hinzufügen -> Geräteereignisse -> Intent erhalten

Aktionen:
Abermals über das Plus zwei Aktionen anlegen:
Geräteeinstellungen -> Bildschirmsperre -> Bildschirm entsperren -> OK
Bildschirm -> Bildschirm An/Aus -> Bildschirm an -> OK

Bildschirm -> Bildschirm An/Aus -> Bildschirm an

Über die Taste =+ am unteren Bildschirmrand speicherst Du das Makro ab und aktivierst es gleichzeitig.

Konfiguration von ioBroker VIS

Die notwendigen Einstellungen kannst Du in der VIS App auf dem Tablet tätigen. Gib’ zuerst die Adresse und Zugangsdaten ein und wähle OK. Danach wird die Konfiguration neu geladen und das Projekt ist – sollten die Zugangsdaten stimmen – auswählbar.
Erscheint auch mit korrekten Zugangsdaten kein Projekt in der Auswahlliste, so scrolle einmal ganz nach unten und wähle dort Mobile Verbindung -> Erlaube selbstsignierte Zertifikate -> aktiv

SSID Name: Name des W-Lans (so weiss VIS, ob es im heimischen W-LAN ist)
Socket URL: Adresse des ioBroker VIS mit Port 8082 (https://192.168.2.105:8082)
Anwender: Unter diesem Benutzer ist das Projekt gespeichert (Standard: Admin)
Kennwort: Falls ioBroker mit einem Kennwort gesichert ist, dieses hier eintragen
Kennwort-Wiederholung: Das Kennwort des Benutzers nochmal eingeben
Projekt: Name des Projekt, welches VIS laden soll
Erlaube selbstsignierte Zertifikate: Unbedingt aktivieren, da sonst keine Verbindung zustande kommt

Sobald alle Einstellungen erfolgt sind und VIS als Oberfläche erscheint, lässt Du das Tablet einfach liegen und wartest, bis sich das Display abdunkelt oder ausschaltet. Dann kannst Du durch eine Bewegung testen, ob diese erfasst wird und sich das Display einschaltet.

BatteryChargeLimit einrichten

Da das Tablet non-stop mit dem Ladegerät verbunden ist, würde es sich jedes Mal direkt bei 99% Akkustand wieder aufladen. Dies schadet dem Akku sehr. Der beste Ladestand eines Akkus beträgt zwischen 60 – 80%. Um dies zu erreichen kannst Du entweder die Möglichkeit einer Smart – Home Steckdose nutzen, die Du per Macrodroid einschalten lässt, sobald ein gewisser Ladestand unterschritten ist oder Du nutzt die App BatteryChargeLimit, die dies völlig unabhängig auf einem gerooteten Tablet durchführt.

Folgende Einstellungen sind hier zu tätigen:

Aktiviere Battery Charge Limit
Laden bis max. 80%
Wiederaufladen unter 60%
Die App findet automatisch die passende Steuerdatei

Überwachung des Tablet Ladestand in der HomeMatic

Mit MacroDroid lässt sich natürlich auch noch der aktuelle Ladestand auf die HomeMatic bringen. Dazu habe ich ein eigenes Skript, welches alle 2 Minuten den aktuellen Ladestand in die CCU schreibt.

Variable	Typ	Maßeinheit
Ladestand Tablet	Zahl	%

Ladestand des Tablets alle 2 Minuten an die CCU übermitteln

Dazu kannst Du ein neues Makro erstellen, welches folgenden Auslöser hat:
Tag/Zeit -> Intervall, regelmäßiges -> alle 2 Minuten

Als Aktion wählst Du:
Anwendungen -> Webseite öffnen / HTTP Get und wählst dort zusätzlich (HTTP GET (Ohne Web Browser) aus.
Als URL trägst Du dort folgendes ein:

http://IP-DEINER-CCU:8181/x.exe?Antwort=dom.GetObject("Ladestand Tablet").State([battery])

Ladestand des Tablets alle 2 Minuten an die CCU übermitteln

Jetzt wird alle 2 Minuten der Ladestand des Tablets automatisch in die Variable geschrieben. Auf der CCU kann man nun mit dem Wert weiter arbeiten und zugehörige Programme erstellen. Zum Beispiel -> Ladestand unter 50% -> sende eine E-Mail als Hinweis.

Geschafft!

Ein fertiges Tablet sieht in etwa so aus:

Keymatic in VIS einbinden

Schreibe eine Antwort

Da das “Lock” Widget von HQ-Widgets sich nicht richtig mit meinem Schloss verhalten wollte, stelle ich hier einen Hinweis/Anleitung bereit, wie man das Widget trotzdem verwenden kann.

Fehlerhafter Datenpunkt des Widgets

Hier ist ersichtlich, das Inhibit natürlich das falsche State ist. Wählt man dieses aus, so blockiert man sich das Schloss und kann es weder über die Fernbedienung noch über die Taste am Schloss steuern. Erst, wenn Inhibit wieder auf false steht, kann das Schloss wieder gesteuert werden.

Abhilfe:

Man wählt dort das x und schon kann man den passenden State zum Schloss auswählen.

Newsticker in VIS

Schreibe eine Antwort

Ich habe seiner Zeit einen Newsticker für die Visualisierung in ioBroker gesucht und leider – oder besser glücklicherweise – bin ich nicht fündig geworden und habe selbst einen Newsticker in PHP geschrieben.

In VIS lässt sich der Newsticker ganz einfach per <iframe>-Tag einbinden.

Hier geht es zum Skript:
PHP Skript zum Erstellen eines Newstickers