HACS - Sidebar & KioskMode

[scw2wi]

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.

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

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

[basaltnischl]

Hallo Walther,

ich habe die Sidecar auch getestet, jedoch ist die nicht wirklich an der Seite.
hab ich was vergessen? Ist meine erste Woche mit HS ….

title: My Dashboard
views:
  - title: Home
    path: home
    type: sidebar
    cards:
      - type: custom:sidebar-card
        digitalClock: false
        digitalClockWithSeconds: false
        date: false
        sidebarMenu:
          - action: navigate
            navigation_path: /lovelace/home
            icon: mdi:home
            name: Home
          - action: navigate
            navigation_path: /lovelace/lights
            icon: mdi:lightbulb
            name: Lights
          - action: navigate
            navigation_path: /lovelace/automation
            icon: mdi:cog-outline
            name: Automations
          - action: navigate
            navigation_path: /lovelace/climate
            icon: mdi:thermostat
            name: Climate
          - action: navigate
            navigation_path: /lovelace/security
            icon: mdi:security
            name: Security
        hideTopMenu: true
        hideHassSidebar: true
        width:
          mobile: 0
          tablet: 14
          desktop: 14​

IMG_1057.jpg

[scw2wi]

Hast du den Code über den RAW-Konfigurationseditor eingefügt, so wie ich das beschrieben habe?

Dein Code lautet:

views:
  - title: Home
    path: home
    type: sidebar
    cards:
      - type: custom:sidebar-card
        sidebarMenu:​
          ...

Mein Code sieht jedoch komplett anders aus:

sidebar:
  ...
  sidebarMenu:
    ...
views:
  - type: sections
    title: Home
    path: home
    sections:
​

Erkennst du den Unterschied?
Bei mir ist die Sidebar vor allen Views, bei dir ist sie im ersten View.

[basaltnischl]

Danke, so funktioniert es.

[scw2wi]

Wer meine Sidebar kennt, dem ist sicher schon aufgefallen, dass die Begrüßung links unten mit der Uhrzeit wechselt (von Guten Morgen bis Gute Nacht), aber bisher immer nur in einer Sprache.

Ich hab den Code jetzt dahingehend erweitert, dass mehrere Sprachen rotieren.
Die Anzeige sieht dann ungefähr so aus, hier am Beispiel von chinesisch.

HACS - Sidebar - Sprachanzeige.png

Ich definiere zuerst ein Array mit der Sprachabkürzung, den 4 Begrüßungen und optional auch noch dem Namen der Sprache ausgeschrieben, wo das notwendig ist. Früher wäre die Erstellung so eines Arrays eine stundenlange Arbeit gewesen, heute dauert das mit ChatGPT wenige Minuten.

Dann hole ich mir Tag, Uhrzeit, usw und setze das Intervall auf Minuten (es geht aber auch mit Stunde oder Tag, wenn es langsamer wechseln soll).

Vor einer Reise lerne ich immer die Sprache des Ziellandes (zumindest versuche ich es). In diesem Fall setze ich eine fixe Fokus-Sprache, die dann bevorzugt angezeigt wird.

Ich kann die Fokus-Sprache aber auch rotieren lassen, also z.B. jeden Tag eine andere Fokus-Sprache zum lernen (aber z.B. nur von den Sprachen 2 bis 16). Diese wird dann zu jeder geraden Minute angezeigt, und die restlichen Sprachen rotieren dann in den ungeraden Minuten einfach durch.

Es ist ne Spielerei, das ist mir schon klar, aber mir gefällt's und wenn es noch jemand anschauen will, der Code ist wie üblich angefügt. Achtung: Der Code zeigt nur den Teil für das Template. Wo das im gesamten Code der Sidebar eingefügt werden muss zeigt der Code in Post #1.

[Sven1973]

kann man die ansicht damit auch auf eine bestimmte Größe begrenzen?
Mein Tablet in der Wand hat eine Full-HD auflösung also 1920x1080. kann ich die Ansicht irgendwie auf die Größe begrenzen?
Ich möchte gern das scrollen verhindern.

[scw2wi]

Ich musste tatsächlich ohne Sidebar vertikal scrollen. Mit der Sidebar werden die 4 Sections kleiner skaliert, damit in Summe auch weniger hoch und das scrollen vermieden. Das gleiche hätte ich aber auch dadurch erreichen können, in den Sections weniger Cards anzuzeigen, und damit kleiner zu halten.

Eine echte Begrenzung kenne ich dagegen nicht.

Mein Ziel war einfach, ein Dashboard genau in dem Seitenverhältnis zu gestalten, in dem es dann auch angezeigt wird. Den Rest soll dann die automatische Skalierung machen, und das funktioniert bei mir auch recht gut.