Mit der Maximize Wrapper Card lassen sich beliebige Karten in einem Home-Assistant-Dashboard per Klick vergrößern. Die benutzerdefinierte Lovelace-Karte legt sich als Wrapper um eine vorhandene Karte und ergänzt eine Schaltfläche zum Maximieren und Wiederherstellen. Das ist besonders praktisch für Diagramme, Grundrisse, Kamerabilder oder andere Inhalte, die bei Bedarf mehr Platz benötigen.

Eine beliebige Lovelace-Karte maximieren

Die Maximize Wrapper Card funktioniert mit jeder Lovelace-Karte. Im maximierten Zustand berücksichtigt sie die Kopfzeile, die Seitenleiste und den Footer der aktuellen Home-Assistant-Ansicht. Gleichzeitig wird das Scrollen des Dashboards im Hintergrund gesperrt. Beim Schließen landet die eingebettete Karte wieder an ihrer ursprünglichen Position und Größe.

Zu den wichtigsten Funktionen gehören:

• beliebige Lovelace-Karten als Inhalt,
• Maximieren und Wiederherstellen direkt im Dashboard,
• korrekte Anpassung an Header, Sidebar und View-Footer,
• gesperrtes Hintergrund-Scrolling im maximierten Zustand,
• separate Rasterhöhen für die normale und die maximierte Ansicht sowie
• ein visueller Editor für die eingebettete Karte.

Installation über HACS

1. In HACS über das Menü den Punkt zum Hinzufügen eines benutzerdefinierten Repositorys öffnen.
2. Das Repository https://github.com/LiBe-net/max-wrapper eintragen und als Kategorie Dashboard auswählen.
3. Die Maximize Wrapper Card herunterladen.
4. Home Assistant beziehungsweise den Browser neu laden.

Über den folgenden Link kann das Repository auch direkt in HACS geöffnet werden:

Maximize Wrapper Card in HACS öffnen

HACS registriert die Datei max-wrapper.min.js automatisch als Lovelace-Ressource. Anschließend steht die Karte im visuellen Dashboard-Editor zur Verfügung.

Konfiguration

Im visuellen Editor kann die gewünschte Karte direkt als Inhalt ausgewählt und konfiguriert werden. Alternativ lässt sich der Wrapper auch per YAML anlegen:

type: custom:maximize-wrapper-card
card:
  type: entities
  title: Beispiel
  entities:
    - entity: sensor.example

Der komplette Inhalt unter card: entspricht der Konfiguration der Karte, die maximiert werden soll. Statt einer Entitäten-Karte können hier beispielsweise auch eine Statistik-Grafik, eine Kamera- oder eine benutzerdefinierte Karte verwendet werden.

Unterschiedliche Höhe beim Maximieren

Für Dashboard-Ansichten im Sections-Layout unterstützt der Wrapper getrennte grid_options. Mit grid_options wird die normale Darstellung festgelegt, während grid_options_full die Einstellungen für den maximierten Zustand ergänzt beziehungsweise überschreibt:

type: custom:maximize-wrapper-card
grid_options:
  rows: 6
grid_options_full:
  rows: 12
card:
  type: statistics-graph
  entities:
    - sensor.example

In diesem Beispiel belegt die Statistik-Grafik im Dashboard sechs Zeilen und nach dem Maximieren zwölf Zeilen. Einstellungen, die direkt von der eingebetteten Karte vorgegeben werden, haben dabei Vorrang.

Manuelle Installation

Ohne HACS kann max-wrapper.min.js aus dem GitHub-Repository nach /config/www/ kopiert werden. Danach wird unter Einstellungen > Dashboards > Ressourcen eine neue JavaScript-Modul-Ressource mit folgendem Pfad angelegt:

/local/max-wrapper.min.js

Nach dem Neuladen des Browsers kann die Karte mit dem Typ custom:maximize-wrapper-card verwendet werden.

Download und Quellcode

Der Quellcode, aktuelle Releases und weitere technische Details sind auf GitHub verfügbar: github.com/LiBe-net/max-wrapper. Das Projekt steht unter der MIT-Lizenz.