ioBroker VIS – Dateimanager
In dieser Artikelreihe zeige ich Dir den ioBroker VIS-Editor. Im Artikel werfen wir einen Blick auf die Hierarchie der ioBroker VIS-Visualisierung.
In der neuen ioBroker VIS Artikelreihe zeige ich Dir die Grundlagen der VIS-Visualisierung sowie die Vorgehensweise zur Erstellung einer Visualisierung. Wir beginnen mit den Grundlagen und der Bedienung des VIS-Editors und erstellen dann gemeinsam ein Navigationskonzept sowie eine einfache Visualisierung mit verschiedenen Widgets. Ich zeige Dir zusätzliche Widgets und Tipps und Tricks zur VIS-Visualisierung.
In diesem Teil der Artikelreihe zeige ich Dir den Dateimanager im ioBroker VIS-Editor. Mit dem Dateimanager kannst Du eigene Grafiken zu Deiner Visualisierung hinzufügen, welche z.B. nicht direkt per URL von einem anderen Webserver eingebunden werden sollen.
Um den Dateimanager zu starten, klickst Du im VIS-Editor im Bereich Setup auf den Menüpunkt Dateimanager.
Jetzt öffnet sich der Dateimanager im Verzeichnis /vis.0/. In diesem und allen darunter liegenden Verzeichnissen kannst Du über die hier mit roten Pfeil markierte Upload-Funktion eine Datei von Deiner Festplatte auf die ioBroker Installation hochladen. In allen anderen Verzeichnissen ist kein Upload möglich.
Nach dem Klick auf die Upload-Funktion öffnet sich nun der Upload-Bereich. Um eine Datei hochzuladen kannst Du hier entweder auf die Schrift „Hier Datei reinziehen oder klicken“ klicken, oder die Datei per Drag&Drop in den Bereich ziehen.
Mit einem Klick auf die Schrift öffnet sich nun der Öffnen-Dialog des jeweiligen Betriebssystems. Über diesen Dialog kannst Du die hochzuladende Datei wählen und mit OK bestätigen.
Hier siehst Du nun die Vorschau der hochzuladenden Datei. Mit einem Klick auf die Schaltfläche Upload wird die Datei in die ioBroker Installation übertragen.
Im Dateimanager wird die neu hochgeladene Datei nun wie folgt dargestellt.
Gerade bei der Verwendung von transparenten, hellen Icons werden diese hier häufig im hellen Editor nicht dargestellt. Für dieses Problem kannst Du hier gelb markierte Schaltfläche verwenden. Über diese Schaltfläche wird der Hintergrund des Dateimanagers dunkler (grau) dargestellt. Somit kannst Du die Icons besser erkennen.
- Ein einfaches On/Off Widget für Leuchtmittel
- Number Widget für die Anzeige von Sensor-Informationen
- String Widget für die Anzeige von Zeichenfolgen
- iFrame Widget für die Einbettung von Webseiten
- Image Widget für die Einbettung von Fotos und Bilddateien
- Colorpicker zur Steuerung von RGB-Leuchtmitteln
- LastChange Widget für die Anzeige von Datenpunkt-Änderungen
- Radiobuttons ValueList
- View als Popup anzeigen
- Statusbalken (Bar) Widget
- Widget für die Anzahl von wichtigen Meldungen (Red Number Widget)
- Widget für Wert-Skala (MeterGauge)
- JSON Table Widget
- Alternatives Wetter-Widget
- View Auflösung für verschiedene Geräte
- Views / Widgets exportieren und importieren
- Widgets enable/disable
- Scrollbare Views
- System-Befehl über Visualisierung ausführen
- Flot-Diagram in View integrieren
- Kalender in View darstellen
- Ereignisgesteuerter View-Wechsel
- Widgets über Datenpunkt ein- und ausblenden