Schlagwort-Archive: Visualisierung

Navigation Menü

VIS Navigations – Menü erstellen

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 Mfd icons as SVG in ioBroker
Installation von Mfd icons as SVG in ioBroker

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.

Installation von metro style Widgets in ioBroker
Installation von metro style Widgets in ioBroker

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)
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
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
Tile Navigations Element auf die View ziehen
Mfd icons Übersicht im Browser öffnen
Mfd icons Übersicht im Browser öffnen

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.

Navigationselement bearbeiten
Navigationselement bearbeiten

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

Ausrichtung und Größe des Navigationselements
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.

Widget markieren und kopieren
Widget markieren und kopieren

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
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)
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:

Einstellung der View für den Inhalt
Einstellung der View für den Inhalt

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)
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
Dem Navigations Widget die Seite zum Navigieren zuweisen

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

Farbwechsel

Shelly RGBW2 in ioBroker VIS: Farbwechsel

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

Shelly in ioBroker installieren
Shelly in ioBroker installieren
Konfiguration des Shelly Adapters
Konfiguration des Shelly Adapters

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 ioBroker installieren
Colorpicker in ioBroker installieren

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 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

Shelly Datenpunkte dem Widget zuweisen
Shelly Datenpunkte dem Widget zuweisen

Nun kannst Du dem Shelly seine Farben per VIS zuweisen

Widget-Ansicht in VIS

Farbzuweisung des Shelly über die VIS Oberfläche
Farbzuweisung des Shelly über die VIS Oberfläche
Diagramm

ioBroker VIS Bar Widget – farbige Visualisierung

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.

Einfache Bar mit Datenpunkt
Einfache Bar mit Datenpunkt

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.

Dynamische Bar mit Farbwechsel
Dynamische Bar mit Farbwechsel

Ansicht der Balken in VIS

So sehen die Balken dann in Aktion aus.

Dynamische Bar in Funktion
Dynamische Bar in Funktion
Smart-Home

Tablet als Visualisierungs-Front-End

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.

ProgrammZweckDownload
BatteryChargeLimitLadekontrolle des Tablets (Root erforderlichLink
iobroker VISVisualisierungs – Anzeige von ioBrokerLink
MacroDroidAutomatisierung von AndroidLink
MotionDetectorBewegungserkennungLink
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
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
Battery Optimization & Sensity Einstellung
Sensitivity Einstellung
Sensitivity 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.

Suspend Einstellung
Suspend Einstellung

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.

Motion Detector gestartet und aktiv
Motion Detector gestartet und aktiv

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

Neues Makro in MacroDroid anlegen
Neues Makro in MacroDroid anlegen

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
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

Geräteeinstellungen -> Bildschirmsperre -> Bildschirm entsperren
Geräteeinstellungen -> Bildschirmsperre -> Bildschirm entsperren
Bildschirm -> Bildschirm An/Aus -> Bildschirm an
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
Einstellungen für BatteryChargeLimit
Einstellungen für BatteryChargeLimit

Ü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.

VariableTypMaßeinheit
Ladestand TabletZahl%
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
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:

Beispiel für die Visualisierung
KeyMatic

Keymatic in VIS einbinden

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

Fehlerhafter Datenpunkt des Widgets
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:

Korrigierter Datenpunkt des Widgets
Korrigierter Datenpunkt des Widgets

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

Richtige Auswahl für das Lock Widget
Richtige Auswahl für das Lock Widget
Newsticker

Newsticker in VIS

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