Dashboard Layout Card V2 für Home Assistant (überarbeitet neue Feature)

Dashboards
1

Dashboard Layout Card V2 für Home Assistant

Ich habe einen V2-Fork der bekannten lovelace-layout-card erstellt:

GitHub: https://github.com/rockbaer2007/lovelace-layout-card-v2

Die Card ist parallel zur originalen layout-card installierbar und überschreibt diese nicht. Alle neuen Elemente verwenden eigene *-v2 Namen.

Was ist das?

Die Dashboard Layout Card V2 ist keine einzelne Karte, sondern eine Dashboard-/Ansichts-Erweiterung für Home Assistant. Ziel ist ein flexibles Dashboard mit seitlichem Menü, Unterseiten, Submenüs und erweiterten Layout-/Style-Optionen, besonders für Tablet-, Kiosk- und Wanddisplay-Setups.

Aktueller Stand

Das Projekt ist weiterhin experimentell, aber bereits nutzbar. Inzwischen sind deutlich mehr Einstellungen direkt im Editor verfügbar. Feedback, Tests, Fehlerberichte und Ideen sind ausdrücklich willkommen.

Funktionen

  • eigene V2-Layouttypen:
    • custom:sections-layout-v2
    • custom:masonry-layout-v2
    • custom:horizontal-layout-v2
    • custom:vertical-layout-v2
    • custom:grid-layout-v2
  • parallel zur originalen layout-card installierbar
  • seitliches Tab-Menü links oder rechts
  • Menü optional ausblendbar
  • Home-Eintrag im Menü
  • globaler Icon-only-Modus, zusätzlich automatisch mobil bis 600 px
  • Icon-only ist gut für Kiosk-/Tablet-Ansichten geeignet
  • Submenü-Spalte neben dem Hauptmenü
  • Submenüs zeigen nur die Unterseiten des aktuell gewählten Hauptmenüpunktes
  • erster Submenübutton kann als Startseite des Hauptmenüpunktes dienen oder deaktiviert werden
  • Unterseiten/Subviews mit gemeinsamem Menü
  • neue Unterseiten standardmäßig als Sections V2
  • Unterstützung für Home-Assistant-Abschnitte
  • Verschieben von Sections-V2-Abschnitten im Bearbeitungsmodus
  • digitale oder analoge Uhr
  • Datum und Wochentag
  • einstellbare Uhr-, Datum- und Icon-Größe
  • gespeicherte Werte wie icon_size: 48px werden im Editor wieder korrekt in Slider und Zahlenfeld geladen
  • optionale Stunden-/Minutenmarkierungen und Sekundenzeiger der Analoguhr
  • Tages-Symbol über Helper für Feiertage, Geburtstag und Weihnachten/Advent
  • Farben für aktive/inaktive Tabs
  • Textfarben für aktive/inaktive Tabs
  • Hover-Farben
  • Icon-Farbe, aktive Icon-Farbe, Icon-Hintergrund und aktiver Icon-Hintergrund
  • Icon-Form: Kreis oder abgerundetes Quadrat
  • eigene Farben je Home-, Hauptmenü- und Submenü-Eintrag
  • Farbfavoriten: bis zu 20 Farben, in allen Farbfeldern auswählbar
  • Farbfelder können einzeln je Eintrag auf globale Farben zurückgesetzt werden
  • Tab-/Menü-Umrandung mit Opacity
  • Ansichts-/Card-Umrandung mit Opacity
  • Status- und Benachrichtigungsrahmen mit Opacity
  • 3D-Effekt für Tabs, Card/Ansicht und Trenner
  • Abstand und Trenner im Menü
  • Trennerfarbe, Trennerhöhe, Trenner-Opacity und optionaler 3D-Effekt für Trenner
  • Menü-Hintergrund als Farbe oder Bild
  • Submenü-Hintergrund separat einstellbar
  • Benachrichtigungsbox über Text-Helfer
  • im Icon-only-Modus erscheint die Benachrichtigung als Popup-Button
  • bis zu vier Statuswerte im Menü
  • optionales Ausblenden von Home-Assistant-Header und HA-Sidebar
  • sichtbare Benutzer konfigurierbar
  • YAML-Backup-Export direkt aus dem Editor
  • Editorfenster öffnet breiter und kann per Doppelklick auf den oberen Rand erweitert werden

Editor-Tabs

Der Editor ist inzwischen in Tabs aufgeteilt:

Tab Inhalt
Menü Menüposition, Menütitel, globaler Icon-only-Modus
Hauptseite Home-Eintrag, Titel, Pfad, Icon, Farben, Sections-V2-Spalten, dichte Platzierung, zusätzlicher Platz oben, Theme-Übernahme
Anzeige Uhr, Datum, Wochentag, Analog-Uhr-Optionen, Tages-Symbol und Helper
Seiten Hauptmenü-Seiten, Abstände, Trenner, Layouttyp, Farben, Reset auf globale Farben, Submenü-Verhalten
Submenü Unterseiten der ausgewählten Hauptseite
Meldungen Benachrichtigung, Popup, Statuswerte, Rahmenfarben und Opacity
Styles Global globale Farben, Rahmen, 3D-Effekte, Icon-Größe, Icon-Form, Hintergründe, Submenü-Hintergrund
Farben bis zu 20 Farbfavoriten mit eigenem Speicherbutton
Backup YAML-Export des aktuellen Dashboard-Standes
Erweitert HA-Chrome, sichtbare Benutzer und JSON-Spezialoptionen

Benachrichtigung und Statuswerte

Für die Benachrichtigung empfiehlt sich ein Text-Helfer, zum Beispiel:

input_text.dashboard_notification

Ist der Helper leer, unknown oder unavailable, wird keine Meldung angezeigt. Sobald Text vorhanden ist, erscheint die Meldung im Menü. Im Icon-only-Modus wird sie über einen kompakten Hinweisbutton als Popup angezeigt.

Zusätzlich können bis zu vier Statuswerte im Menü angezeigt werden, zum Beispiel Temperaturen, Luftfeuchte, Poolwasser oder andere Sensorwerte.

Hintergrundbilder

Für Menü-Hintergründe funktionieren Hochformat-Bilder besonders gut. Ein gutes Seitenverhältnis ist ungefähr:

1:2,5

Andere Formate funktionieren auch, können durch cover aber zugeschnitten werden.

Die Bilder müssen in Home Assistant unter www liegen, zum Beispiel:

/config/www/image/back2.jpg

Im Editor wird dann verwendet:

/local/image/back2.jpg

Bitte nur eigene Bilder oder Bilder mit passender freier/Open-Source-Lizenz verwenden.

Installation über HACS

Repository als benutzerdefiniertes Frontend-Repository hinzufügen:

https://github.com/rockbaer2007/lovelace-layout-card-v2

Danach sollte Home Assistant diese Ressource laden:

/hacsfiles/lovelace-layout-card-v2/dashboard-layout-card-v2.js

Falls noch eine alte Version angezeigt wird:

  • HACS-Repositories aktualisieren
  • Browser-Cache leeren
  • Dashboard hart neu laden
  • bei Bedarf die Ressource mit Versionsparameter neu laden, zum Beispiel ?v=0.1.165

Beispiel

views:
  - type: custom:sections-layout-v2
    path: home
    title: Home
    icon: mdi:home
    layout:
      dashboard_layout_v2:
        menu:
          position: left
          title: Haus
          show_home: true
          icon_only: false
          home:
            title: Home
            path: home
            icon: mdi:home
          clock: analog
          analog_hour_marks: true
          analog_minute_marks: true
          analog_seconds: false
          date: true
          weekday: long
          notify:
            enabled: true
            entity: input_text.dashboard_notification
            border_color: '#ff0033'
            border_opacity: 80
          status:
            enabled: true
            border_color: '#ffffff'
            border_opacity: 60
            items:
              - entity: sensor.aussen_temperatur
                label: Außen Temp
                unit: °C
          style:
            icon_color: '#fbff00'
            icon_active_color: '#1a63f4'
            icon_background_color: '#191c3e'
            icon_background_active_color: ''
            icon_shape: rounded-square
            icon_size: 48px
            active_tab_color: '#333aff'
            inactive_tab_color: '#bfbfbf'
            hover_tab_color: '#33ffe7'
            active_tab_text_color: '#ffffff'
            inactive_tab_text_color: '#000000'
            hover_tab_text_color: '#000000'
            tab_border_color: transparent
            tab_border_opacity: 80
            tab_shadow_frame_color: transparent
            card_border_color: transparent
            card_border_opacity: 100
            shadow_frame_color: transparent
            shadow_frame_offset: 4px
            clock_size: 96px
            date_size: 12px
            weekday_wrap_size: 21px
            background_mode: image
            background_image: /local/image/back2.jpg
            submenu_background_color: '#111827'
            submenu_background_opacity: 75
        color_presets:
          - name: Icon gelb
            value: '#fbff00'
          - name: Blau aktiv
            value: '#333aff'
        pages:
          - title: Kellergeschoss
            path: keller
            icon: mdi:home-floor-negative-1
            type: custom:sections-layout-v2
            layout_type: custom:sections-layout-v2
            max_columns: 6
            subpages:
              - title: Technik
                path: keller-technik
                icon: mdi:tools
                type: custom:sections-layout-v2
                layout_type: custom:sections-layout-v2
          - type: divider
            color: '#ffffff'
            divider_opacity: 80
            shadow_frame_color: transparent
            height: 4px
          - title: Erdgeschoss
            path: erdgeschoss
            icon: mdi:home-floor-0
            type: custom:sections-layout-v2
            layout_type: custom:sections-layout-v2
            max_columns: 4
    max_columns: 4
    sections:
      - type: grid
        cards: []

  - type: custom:sections-layout-v2
    title: Kellergeschoss
    path: keller
    icon: mdi:home-floor-negative-1
    subview: true
    layout:
      dashboard_layout_v2:
        inherits_from: home
    max_columns: 6
    sections:
      - type: grid
        cards: []

Screenshot und Video

Ein Screenshot und ein Minivideo sind in der Open-Source-Doku zu sehen:

https://opensource.ugso-software.de/sammlung/ha-dashboard

Links

GitHub:

https://github.com/rockbaer2007/lovelace-layout-card-v2

Open-Source-Doku:

https://opensource.ugso-software.de/sammlung/ha-dashboard

das Dashboard unterstützt jetzt 3 Sprachen DE / EN / FR (automatisch Browsersprache)

2 „Gefällt mir“