In diesem Beitrag möchte ich euch zeigen wie wir unser ioBroker vis menü aus dem Teil 1 mit Untermenüs ausstatten und die Optik etwas anpassen. Icons im Menü verändern usw. Ich glaube das könnte für den Einen oder Anderen recht interessant sein, also weiterlesen.
Link zu Teil 1 https://umaschmidt.de/iobroker/iobroker-vis-menue-mit-top-app-bar/
Dazu starte ich erst mal das ioBroker vis Menü aus dem ersten Teil.
Hier möchte ich das Menü noch um einen Reiter „System“, und die Reiter „Beleuchtung“ und „Heizung“ mit Untermenüs ausstatten. Wie das geht erfahrt ihr jetzt. Wir starten ioBroker vis und öffnen unser Projekt aus Teil 1. Dann erstelle ich die neuen views. Wie immer könnt ihr die benennen wie ihr wollt, ich nenne sie wie folgt.
view_system
view_bel_wohnzimmer
view_bel_kueche
view_bel_schlafzimmer
view_heiz_wohnzimmer
view_heiz_kueche
view_heiz_schlafzimmer
Erweitern wir unser ioBroker Menü als erstes um den Reiter System. Dazu gehen wir wieder in die view „index“, klicken einfach mal mitten auf den Arbeitsplatz, und sollten wieder in dem widget „view in widget 8“ sein. Rechts in den Einstellungen ändern wir die „werteanzahl“auf 3, und tragen bei views unsere „view_system“ ein.
Dann klicken wir auf das Menü und gehen wieder rechts in die Einstellungen. Auch hier erhöhen wir die Anzahl der Navigationselemente auf 3. Dadurch erhalten wir weiter unten in den Einstellungen einen neuen Punkt, Navigationsleiste: Element [3]. Da klicken wir einmal drauf und tragen bei Beschriftung [3] „System“ ein. Wenn das ioBroker vis Menü jetzt gestartet würde, könnte man das Ergebnis schon sehen.
Als nächstes wollen wir mal die icons links im Menü anpassen, einfach auf das Menü klicken und unter Einstellungen auf „Navigationsleiste: Element[0]“. Nun sehen wir weiter unten den Punkt „Bild [0]:“, da rechts auf „Bild auswählen“ klicken. Jetzt sehen wir einen Datei Manager vor uns, wo Bilddateien ausgewählt werden könnten.
Es gibt auch in anderen Ordnern Bilder, oder lädt sich seine eigenen Bilder hoch. Eigene Bilder im richtigen Format für icons, können allerdings nur in den Ordner VIS.0 hoch geladen werden. Dazu oben links 4 mal auf das blaue icon mit dem weißen Pfeil klicken, dann sollten die Ordner vis und vis.0 erscheinen. Jetzt auf vis.0 klicken und ihr solltet euer Projekt sehen.
In meinem Fall wäre das der Ordner Menue. Schaut man jetzt oben in die Menüleiste, ist da ein Pfeil nach oben. Dann öffnet sich ein neues Fenster. „Dropbox Hier Dateien reinziehen oder klicken“. Hier könnte man seine eigenen Bilder reinziehen und sie dann auch auswählen. Also Bild aussuchen und dann auf „Auswählen“ klicken.
Mein ioBroker vis Menü sieht momentan aus wie auf dem folgenden Bild,
Um den Text im Menükopf zu ändern gehen wir auf Einstellungen, dann auf „Navigationsleiste: Layout“, und dann auf „Kopfzeile Text:“. Hier muss die Formatierung eingehalten werden,
<h4 class=’mdc-drawer__title‘>Material Design Widgets</h4><h6 class=’mdc-drawer__subtitle‘>by Scrounger</h6>
Es darf nur der blau markierte Text geändert werden. Jetzt begeben wir uns an die Untermenüs. Einmal ein klick auf die Arbeitsfläche des „view in widget 8“ und dann in die Einstellungen. Hier muss die „Wertanzahl bis“ auf „9“ erhöht werden, 3 views für die Beleuchtung sollen dazu kommen, und 3 views für die Heizung plus die 3 die wir ursprünglich hatten. Jetzt die „View für Tab [0]“ bis „View für Tab [9] so anpassen wie im unteren Bild.
„View für Tab [1]“ kann frei bleiben, muss aber für den Beleuchtungsordner angelegt werden
„View für Tab [5]“ kann frei bleiben, muss aber für den Heizungsordner angelegt werden
Das mag einem etwas komisch vorkommen, ist aber so, man muss es halt nur wissen. Jetzt klicken wir nochmal auf den Menü Kopf, gehen in die Einstellungen unter „Navigationsleiste: Element [1]“. Element [0] ist unsere Übersicht, Element [1] ist unser Menüpunkt für die Beleuchtung. In Element [1] klicken wir rechts neben das Eingabefeld von „Untermenüs [1]:“. Es öffnet sich ein Fenster in dem wir nun ein paar Zeilen json formatierten Text eingeben müssen. Für ältere Versionen unserer Adapter kann es sein das die Konfiguration anders aussieht. Hier mal ein Link.
https://forum.iobroker.net/topic/39447/gel%C3%B6st-dropdown-oder-hamburger-men%C3%BC
Den Text habe ich mal unten zum Kopieren eingefügt. „text“: „Wohnzimmer“ ist der Name für das subitem (Untermenüname). „icon“: „/vis/icon/lamp.png“, ist das icon links neben dem Namen. Das kann auch angepasst werden. „userGroups“: [„administrator“, „user“], und „behaviorNotInUserGroup“: „disabled“ diese Einstellungen lassen wir erst mal so, die sind für angelegte Benutzer und Benutzergruppen. Um hier Änderungen zu machen, sollten schon Kenntnisse in diesem Breich vorliegen. Für das Untermenü [1] sollte der Text wie folgt aussehen, einfach Kopieren und einfügen.
[
{
"text": "Wohnzimmer",
"icon": "/vis/icon/lamp.png",
"userGroups": ["administrator", "user"],
"behaviorNotInUserGroup": "disabled"
},
{
"text": "Küche",
"icon": "/vis/icon/lamp.png",
"userGroups": ["administrator", "user"],
"behaviorNotInUserGroup": "disabled"
},
{
"text": "Schlafzimmer",
"icon": "/vis/icon/lamp.png",
"userGroups": ["administrator", "user"],
"behaviorNotInUserGroup": "disabled"
}
]
Für das Untermenü [2] sollte der Text dann so aussehen, einfach Kopieren und einfügen.
[
{
"text": "Wohnzimmer",
"icon": "/vis/icon/temperature.png",
"userGroups": ["administrator", "user"],
"behaviorNotInUserGroup": "disabled"
},
{
"text": "Küche",
"icon": "/vis/icon/temperature.png",
"userGroups": ["administrator", "user"],
"behaviorNotInUserGroup": "disabled"
},
{
"text": "Schlafzimmer",
"icon": "/vis/icon/temperature.png",
"userGroups": ["administrator", "user"],
"behaviorNotInUserGroup": "disabled"
}
]
Wenn ihr alles so gemacht habt wie beschrieben wurde, sollte das ioBroker vis Menü wie folgt aussehen.
Ausgeklappt sieht es dann bei mir so aus.
Sollte alles so sein, habt ihr es geschafft und könnt das ioBroker vis Menü nun nach euren Wünschen anpassen. Herzlichen Glückwunsch. Über einen Daumen hoch oder einen Kommentar ob alles so funktioniert hat, oder vielleicht noch Fragen offen sind, würde ich mich sehr freuen.
Users who liked this: