ioBroker vis Menü. In diesem Beitrag möchte ich euch zeigen, wie man dieses mit Hilfe des Material-Design-Webfont und dem Material-Design-Widget Adaptern erstellen kann. Bei mir läuft das ioBroker vis Menü schon seit mehr als 2 Jahren auf meinem Netbook, und es gab noch nie Probleme damit.
Wie ihr ioBroker installiert findet ihr hier unter folgendem Link:
Die Konfiguration ist vielleicht an manchen Stellen nicht ganz so einfach wenn man es noch nie gemacht hat, aber in dieser Schritt für Schritt Anleitung werde ich euch das von der Installation der Adapter, bis zum kleinen fertigen Menü zeigen.
Fangen wir mit dem Wichtigsten an, mit den Adaptern. Dazu öffnen wir unser ioBroker und gehen mal in die Systemeinstellungen, mit klick auf den Werkzeugschlüssel.
Dann klicken wir auf die Repositories, hier sollten eigentlich 2 Quellen vorhanden sein. Einmal „stable“ und einmal die „beta“ Variante. Wie die Namen es schon sagen, eine stabile lauffähige Version der Adapterquelle, und eine beta oder noch in der Testphase befindliche Variante.
Für unsere Adapter muss hier auf jedem Fall der Haken bei beta gemacht werden und dann mit „speichern und schliessen“ beendet werden, das war der erste und wichtigste Schritt, denn sonst haben wir die Material Adapter gar nicht erst zur Verfügung.
Wichtig an dieser Stelle ist, man sollte hinterher wieder „stable“ anwählen und speichern, sonst bekommt man auch die Updates für die installierten Adapter immer aus der beta Version. Ich habe damit zwar noch keine Probleme gehabt, aber das muss ja nichts heißen. Bitte dran denken.
Nachdem jetzt unser Fenster geschlossen ist, und wir uns jetzt in der beta variante befinden, geben wir oben unter „Nach Namen filtern“ mal Material ein. Es sollten die Material Adapter angezeigt werden, und auch unsere beiden „Material Design Webfont“ und „Material Design Widgets“ Adapter dort zu sehen sein.
Ein klick auf die drei Punkte,
und dann ein klick auf das kleine „+“ Zeichen, und der Adapter wird installiert.
Das wiederholen wir dann bei dem „Material Design Widgets“ Adapter, erst die drei Punkte dann das „+“.
Schauen wir jetzt in die Instanzen, sehen wir auch unsere beiden neuen Adapter.
Für die spätere Installation unseres ioBroker vis Menüs brauchen wir auch noch eine Variable die für die Anwahl der einzelnen views benötigt wird. Wie wir die anlegen zeige ich euch jetzt. Dazu klicken wir links auf Objekte, dann in dem neuen Fenster auf den Ordner „0_userdata“, dann auf die „0“ und dann oben auf das „+“.
Ich lege erst mal einen neuen Ordner an, dem ich den Name Menue gebe.
Das sollte so aussehen.
Jetzt ein klick auf den Orden „Menue“, wieder auf das „+“ und legen uns unsere Variable an, ich nenne sie „Menue_ID“, Name frei wählbar. Dazu geben wir jetzt bei „Typ = Datenpunkt“, bei „Zustandstyp = Zahl“, bei „Name = Menue_ID“ ein, und klicken auf auf „Hinzufügen“.
Das war es. Unsere neue Variable sollte zu sehen sein. Schaut man in dieser Zeile ganz rechts bei „Wert“ so sollte da eine „0“ drin stehen. Der Wert ändert sich dann je nach Anwahl der einzelnen Menüpunkte, oder Seiten.
Jetzt folgt der Teil, in dem wir unser ioBroker vis Menü erstellen. Dazu klicken wir auf Instanzen, dann starten wir unsere vis mit klick auf den Pfeil nach rechts. Wer wie ich hier in meinem nackten Testsystem startet, hat natürlich auch zuerst einmal die „DemoView“ vor sich. Diese löschen wir erst mal.
In der oberen Zeile muss Views angewählt sein, dann ein klick auf den kleinen Papierkorb unter dem Hilfe Button. Noch eine Bestätigung und dann ist die DemoView weg.
Dann erstellen wir erstmal folgende neue views, Namen natürlich frei wählbar. Ich nehme:
index
view_index
view_beleuchtung
view_heizung
Um beim späteren Test besser erkennen zu können auf welcher Seite wir uns befinden, ziehe ich mir in jede View ein „HTML Widget“ setze es an diese Positionen:
z.B.:
Left: 30px
Top: 80px
Bei HTML: rechts in den Einstellungen, wird der Name eingegeben, z.B. „Beleuchtung“.
Ich habe den views_index, heizung und beleuchtung jetzt Namen gegeben und fange nun mit dem Menü an. Dazu gebe ich als Suchkriterium mal materialdesign ein, und suche darunter die view Top App Bar. Dieses ziehe ich mir jetzt auf unsere Arbeitsfläche.
Dann sollte das Ganze so aussehen wie im folgenden Bild. Man kann schon ein bischen von unserem ioBroker vis Menü erkennen.
Das widget ist automatisch immer oben links, ich habe noch keine Einstellung gefunden das zu ändern. Sollte jemand rausbekommen wie das geht, bitte unten im Kommentar an mich senden, ich würde das dann in meinem Beitrag anpassen.
Klicken wir jetzt mal in unser widget, sehen wir rechts eine Spalte mit den Eigenschaften. Hier werde ich ein paar Änderungen vornehmen. Zum Einen bei der „Anzahl der Navigationselementen“, hier gebe ich mal eine 2 ein, d.h. wir haben dann 3 Reiter in unserem Menü, wir fangen immer bei 0 an, z.B. 0 = Übersicht, 1 = Beleuchtung und 2 = Heizung.
Weiter unten bei „CSS Allgemein“ vergebe ich die Positionen, Breite und Höhe des Menükopfes, als Beispiel:
Left: 0px
Top: 0px
Width: 1680px
Height: 65px
Wie gesagt, das ist nur ein Beispiel, das kann jeder an seine eigene Hardware anpassen.
Als nächstes sehen wir oben die drei Einstellungen für die „Navigationsleiste: Element [0], [1], [2]“.
Hier klicken wir mal auf das Dreieck von Element [0], es öffnet sich ein weiteres Fenster. Bei Beschriftung [0]: geben wir mal „Übersicht“ ein, alles Andere lassen wir erst mal so wie es ist. Hier kann dem Menü das Design angepasst werden, Farben, Schriftgrößen, Markierungen usw. Das kann jeder mal für sich ausprobieren. Hier tiefer einzusteigen, würde glaube ich den Rahmen sprengen. Sollten dazu Fragen sein, bitte unten im Kommentar an mich, vielleicht würde dann diesen Beitrag erweitern, oder noch einen zusätzlichen erstellen.
Die Konfiguration für Element [1], Beschriftung [1] = „Beleuchtung“, bei Element [2], Beschriftung [2] = „Heizung“ sollte so aussehen.
Jetzt kommt unsere Variable zur Geltung, die wir vorhin angelegt haben, dazu klicken wir bei Object ID: rechts neben dem Eingabefeld auf das Symbol:, siehe oben.
Im Datenexplorer und suchen unsere Variable, klicken doppelt auf „Menue_ID“ und dann sollte sich das Fenster schließen, und die Variable sollte bei unserer „Object ID:“ eingetragen sein, sollte dies nicht der Fall sein, dann unten auf „Auswählen“ klicken. Spätestens dann sollte die Variable in unserem Fenster unter der Object ID: erscheinen.
Jetzt brauchen wir ein weiteres widget, dazu beim Filter wo noch Materialdesign drin steht, jetzt mal basic eintragen, und mal nach „view in widget 8“ suchen, und auf die Arbeitsfläche ziehen. Hier sehen wir nun folgendes, „Fehler view wurde nicht gefunden“, das macht aber nichts, ein klick auf das widget und wir sehen rechts wieder die Einstellungen.
Hier geben wir folgende Werte ein:
Left: 0px
Top: 0px
Width: 1680px
Height: 1050px
Weiter oben ändern wir auch hier wieder die „Werteanzahl bis“, auf 2, wir erinnern uns 0,1,2.
Setzen noch einen Haken bei „Dauernd:“, und bei Views tragen wir wie im Bild unsere views ein.
View für Tab [0]: view_index
View für Tab [1]: view_beleuchtung
View für Tab [2]: view_heizung
Als letztes tragen wir auch hier bei Object ID: unsere Variable ein, die selbe wie vorhin.
Nun steht nichts mehr im Wege unser selbst erstelltes ioBroker vis Menü zu starten, dazu klicken wir links auf die view „index“, und dann oben rechts auf das Play Symbol.
Über den Kreis mit den 3 Linien können wir unser Menü jetzt testen. Das Angewählte Fenster sollte oben im Kopf zu sehen sein, und in unserem neu geöffnetenmFenster.
So sollte das Menü ausgeklappt aussehen.
