Ich hab schon vor einiger Zeit eine Sidebar erstellt und komplett darauf vergessen, diese hier vorzustellen.
Nachdem meine Wand-Tabletts nicht wie meine Monitore ein 16:10 sondern ein 16:9 Format bekommen werden, hab ich den restlichen Platz genutzt, um noch ein Menü unterzubringen. Dieses könnte man im Prinzip auch mit einem Array von z.B. button-cards erstellen, einfacher geht es aber mit der Sidebar.
Der Code muss im Raw-Konfigurationseditor vom Dashboard erstellt werden, er ist über das Hamburger-Menü rechts oben erreichbar. Ich hab in diesem Bereich (also vor den views) aktuell nicht nur die Sidebar sondern auch den kiosk_mode und die decluttering_templates.
Hier ein kurzer Auszug der Sidebar, der komplette Code ist unten angehängt.
Und so sieht die Sidebar dann aus (der linke Teil mit der Uhr und den Menüpunkten)
HACS Dashboard scw2wi 2025-02-09.png
Was ich noch nicht herausgefunden habe, wie man die Menüpunkte in der Farbe umschalten kann (Geräte und Räume sind noch hardcoded auf Orange). Die Idee dahinter ist, dass alle Seiten wo etwas orange dargestellt wird, die Menüs dazu ebenfalls orange werden, dazu muss die Farb-Umschaltung natürlich steuerbar sein.
Ich bin aber aktuell bereits wieder am nächsten Thema dran, das wird eine Automation für die Bewässerung, passend zum GardenControl, aber auch zu jedem anderen System.
Weitere Beiträge dieser Serie:
HACS Wetterkarte
HACS Sonne & Mond (inkl. Tipps zur configuration.yaml)
HACS Schieberegler (inkl. Möglichkeiten der Icon Farbanpassung & erste Vorstellung Farbschema)
HACS Gauges (Tachoanzeigen, inkl. senkrechte Balken-Cards)
HACS stack-in-card für Raum-Card
HACS Graph-Cards
HACS Thermostat-Cards
HACS Entity Cards (inkl. stacking Beispiele mit der custom:button-card)
HACS Reminder (trash-card, atomic-calendar-revive)
HACS Person- & Öffi-Card (inkl. Geschichte zu ChatGPT)
HA-Behaglichkeits-Diagramm
HA Kurzeinführung
Dashboard-Entwurf
HACS Bewässerung
HA & Node-Red
HA Notifications
HA Recorder, SQLite, InfluxDB, Grafana
HA Python Scripts
Nachdem meine Wand-Tabletts nicht wie meine Monitore ein 16:10 sondern ein 16:9 Format bekommen werden, hab ich den restlichen Platz genutzt, um noch ein Menü unterzubringen. Dieses könnte man im Prinzip auch mit einem Array von z.B. button-cards erstellen, einfacher geht es aber mit der Sidebar.
Der Code muss im Raw-Konfigurationseditor vom Dashboard erstellt werden, er ist über das Hamburger-Menü rechts oben erreichbar. Ich hab in diesem Bereich (also vor den views) aktuell nicht nur die Sidebar sondern auch den kiosk_mode und die decluttering_templates.
Hier ein kurzer Auszug der Sidebar, der komplette Code ist unten angehängt.
HTML-Code:
sidebar: active: true bottomcard: true digitalClock: true clock: true width: mobile: 0 tablet: 10 desktop: 10 breakpoints: mobile: 768 tablet: 1600 sidebarMenu: - action: navigate name: Home icon: mdi:home navigation_path: /haus-1/home - action: navigate name: Status icon: mdi:account-supervisor navigation_path: /haus-1/status template: |- <li> {% set stunde = now().hour %} {% if stunde < 8 %} Dobro jutro 🌅 {% elif stunde < 18 %} Dobar dan 🌞 {% elif stunde < 21 %} Dobra večer 🌇 {% else %} Laku noć 😴 {% endif %} </li> bottomCard: type: grid cardOptions: columns: 1 square: false cards: - type: custom:button-card name: Kiosk-Mode entity: input_boolean.kiosk_mode show_icon: false tap_action: action: call-service service: input_boolean.toggle service_data: entity_id: input_boolean.kiosk_mode styles: card: - height: 40px - width: 130px - background-color: |- [[[ return states['input_boolean.kiosk_mode'].state == 'on' ? 'var(--paper-item-icon-color)' : 'var(--disabled-text-color)'; ]]] alignment: center
HACS Dashboard scw2wi 2025-02-09.png
Was ich noch nicht herausgefunden habe, wie man die Menüpunkte in der Farbe umschalten kann (Geräte und Räume sind noch hardcoded auf Orange). Die Idee dahinter ist, dass alle Seiten wo etwas orange dargestellt wird, die Menüs dazu ebenfalls orange werden, dazu muss die Farb-Umschaltung natürlich steuerbar sein.
Ich bin aber aktuell bereits wieder am nächsten Thema dran, das wird eine Automation für die Bewässerung, passend zum GardenControl, aber auch zu jedem anderen System.
Weitere Beiträge dieser Serie:
HACS Wetterkarte
HACS Sonne & Mond (inkl. Tipps zur configuration.yaml)
HACS Schieberegler (inkl. Möglichkeiten der Icon Farbanpassung & erste Vorstellung Farbschema)
HACS Gauges (Tachoanzeigen, inkl. senkrechte Balken-Cards)
HACS stack-in-card für Raum-Card
HACS Graph-Cards
HACS Thermostat-Cards
HACS Entity Cards (inkl. stacking Beispiele mit der custom:button-card)
HACS Reminder (trash-card, atomic-calendar-revive)
HACS Person- & Öffi-Card (inkl. Geschichte zu ChatGPT)
HA-Behaglichkeits-Diagramm
HA Kurzeinführung
Dashboard-Entwurf
HACS Bewässerung
HA & Node-Red
HA Notifications
HA Recorder, SQLite, InfluxDB, Grafana
HA Python Scripts
Kommentar