Dashboard Layout Card V2 für Home Assistant

Dashboard/Cards/Frontend
1

Dashboard Layout Card V2 für Home Assistant

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

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 weniger eine einzelne Karte, sondern eher eine Dashboard-/Ansichts-Erweiterung für Home Assistant. Ziel ist ein flexibles Dashboard mit seitlichem Tab-Menü, Unterseiten und erweiterten Layout-Optionen.

Funktionen

  • eigene V2-Layouttypen:
    • custom:sections-layout-v2
    • custom:masonry-layout-v2
    • custom:horizontal-layout-v2
    • custom:vertical-layout-v2
    • custom:grid-layout-v2
  • seitliches Tab-Menü links oder rechts
  • Menü optional ausblendbar
  • Home-Eintrag im Menü
  • Unterseiten/Subviews mit gemeinsamem Menü
  • Unterstützung für Home-Assistant-Abschnitte
  • digitale oder analoge Uhr
  • Datum und Wochentag
  • einstellbare Uhr- und Datumsschriftgröße
  • Farben für aktive/inaktive Tabs
  • Textfarben für aktive/inaktive Tabs
  • Hover-Farben
  • Icon-Farbe und Icon-Hintergrund
  • Icon-Form: Kreis, abgerundetes Quadrat oder transparent
  • Tab-Umrandung
  • Ansichts-/Card-Umrandung
  • 3D-Effekt für Tabs und Ansicht
  • Abstand und Trenner im Menü
  • Trennerfarbe und optionaler 3D-Effekt für Trenner
  • Menü-Hintergrund als Farbe oder Bild
  • optionales Ausblenden von HA-Header und HA-Sidebar für bestimmte Benutzer

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

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
          home:
            title: Home
            path: home
            icon: mdi:home
          clock: analog
          analog_hour_marks: false
          analog_seconds: false
          date: true
          weekday: long
          style:
            icon_color: "#fbff00"
            icon_background_color: "#ffffff"
            icon_shape: circle
            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_shadow_frame_color: "transparent"
            card_border_color: "transparent"
            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
        pages:
          - title: Kellergeschoss
            path: keller
            icon: mdi:view-dashboard
            type: custom:sections-layout-v2
            layout_type: custom:sections-layout-v2
            max_columns: 6
          - type: divider
            color: "#ffffff"
            shadow_frame_color: "transparent"
          - title: Erdgeschoss
            path: erdgeschoss
            icon: mdi:view-dashboard
            type: custom:sections-layout-v2
            layout_type: custom:sections-layout-v2
            max_columns: 4
    sections:
      - type: grid
        cards: []

Status

Das Projekt ist aktuell experimentell, aber bereits nutzbar. Feedback, Tests und Ideen sind willkommen.

ein Minivideo und ein Screenshot ist auf

GitHub:

2 „Gefällt mir“