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.