In diesem Beitrag zeige ich dir alles zur Layout card von Thomas Loven, welche du über HACS zu deinem Home Assistant hinzufügen kannst. Möchtest du das Layout deines Dashboards in Home Assistant individuell gestalten? Dann solltest du dir diesen Beitrag genau ansehen.
Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenInhaltsverzeichnis
Installation Layout Card
Im HACS klickst du unter Frontend auf Repositories durchsuchen und herunterladen. Nun suchst du nach der Layout Card und lädst die Software herunter. Danach muss der Browser Cache neu geladen werden. Für eine sichere Installation empfehle ich einen Neustart von Home Assistant.
Um die Verwendung der Layout Card besser darstellen zu können, habe ich ein weiteres Dashboard zu meinem Home Assistant hinzugefügt (Einstellungen -> Dashboards -> Dashboard hinzufügen. Bei der Layout Card stehen dir 4 Layouts zur Verfügung.
horizontale Ansicht
Bei der horizontalen Ansicht wird das Layout nebeneinander dargestellt.
In den Dashboardeinstellungen wählst du horizontal (layout-card) aus. Hast du diese Ansichtsart ausgesucht, kannst du über die Schaltfläche Add Card nun neue Karten hinzufügen. Wie du auf dem folgenden Bild sehen kannst, werden die die einzelnen Karten in drei Spalten nebeneinander dargestellt. Fügst du die vierte Karte hinzu, wird diese in der nächsten Zeile in der ersten Spalte hinzugefügt.
Möchtest du beispielsweise die fünfte Karte in der dritten Spalte hinzufügen, musst du im yaml Code der Karte noch folgenden Code hinzufügen.
view_layout: column: 3
Nun wird die fünfte Karte in der dritten Spalte der zweiten Zeile eingefügt. Fügst du nun weitere Karten hinzu (siehe oben), werden diese Karten aufgefüllt. Die siebte Karte wird in der zweiten Zeile, zweite Spalte hinzugefügt. Hast du Fragen zur horizontalen Ansicht, dann kannst du diese gerne in den Kommentaren stellen.
vertikale Ansicht
Im Gegensatz zu der horizontalen Ansicht werden bei der vertikalen Ansicht die Karten untereinander angeordnet. Mit dieser Ansichtsart hast du automatisch ein responsive Design. Bei Verwendung der Dashboardseite auf einem Desktop oder Tablet werden die Karten teilweise nebeneinander (standardmäßig drei Spalten) dargestellt. Ist die Auflösung deines Endgerätes nicht so groß (Smartphone), werden die einzelnen Spalten untereinander in einer Spalte angezeigt. Möchtest du die Karten in unterschiedlichen Spalten anordnen, kannst du, wie bei der horizontalen Ansicht, mit folgendem Code die Zuordnung übernehmen (möchtest du die Karte in der zweiten Spalte anordnen, musst du natürlich im folgenden Code „column: 2“ eintragen.
view_layout: column: 3
Mit der vertikalen Ansicht erstellst du ein dynamsiches Dashboard. Hast du Fragen zu der vertijaken Ansicht, kannst du deine Fragen gerne in den Kommentaren stellen.
Grid Ansicht
Mit der Grid Ansicht hast du alle Möglichkeiten zur indivduellen Gestaltung deines Dashboards.
In meinem Beispiel baue ich ein Dashboard bestehend aus einer Kopfzeile, einem Bereich in der Mitte, welcher sich in drei Spalten teilt und einer Fu0zeile.
Auf der Konfigurationsseite zum Dashboard wählst du die Grid Card aus und fügst im unteren Bereich folgenden Code ein.
grid-template-columns: 33% auto 33% grid-template-rows: auto grid-template-areas: | "kopf kopf kopf" "links mitte rechts" ". fuß ."
Nachdem du den Code aus dem obigen Code kopiert hast, musst du deine Karten einzelnen Bereichen (area) zuordnen. Im Yaml Code der Karte fügst du folgende Zeilen hinzu. Im folgenden Beispiel wird die Karte den Bereich kopf hinzugefügt.
view_layout: grid-area: kopf
Hast du eine Karte einem Bereich zugeordnet, kannst du keine weiteren Karten diesem Bereich zuordnen. Möchtest du zwei Karten einem Bereich hinzufügen, solltest du vertikale Stapel verwenden. Hast du Fragen zur Grid Ansicht, stelle diese gerne in den Kommentaren.
Nächster Schritt:Home Assistant – Leitfaden (DE)
Bewerte diesen Beitrag
Dein Feedback ist mir wichtig! Hat dir der Beitrag geholfen oder fehlte dir etwas? Schreib’s mir gerne in die Kommentare oder bewerte den Artikel – so kann ich meine Inhalte noch besser machen.
Support & Hilfe
Du hast eine Frage oder brauchst Unterstützung? Über meinen Support kannst du ganz einfach ein Ticket erstellen – ich helfe dir so schnell wie möglich weiter.
Meine Produktempfehlungen für dich
Einige der folgenden Produktlinks sind sogenannte Affiliate-Links. Wenn du darüber etwas kaufst, erhalte ich eine kleine Provision – für dich bleibt der Preis natürlich gleich.
- ✔ Leistungsstarker Raspberry Pi 5 mit 8GB RAM: Ideal für anspruchsvolle Projekte wie Smart Home, Home Assistant oder Retro Gaming – flüssige Performance für Einsteiger und Profis.
- ✔ Original 27W Netzteil: Stabile und zuverlässige Stromversorgung für Ihren Raspberry Pi 5.
- ✔ Original Gehäuse mit Lüfter: Schützt Ihren Raspberry Pi und sorgt für optimale Kühlung bei intensiver Nutzung.
- ✔ 128GB Speicherkarte: Bietet großzügigen Speicherplatz für Ihr Betriebssystem, Anwendungen und Dateien.
- ✔ USB-Kartenleser für Speicherkarten: Einfache und schnelle Einrichtung ihres Betriebssystem am PC oder Laptop.
- ✔ Aluminium-Kühlkörper: Zusätzliche Kühlung für eine zuverlässige Leistung und Langlebigkeit.
- ✔ 4K Micro-HDMI-Kabel 1 Meter: Perfekt für gestochen scharfe Videoausgabe auf kompatiblen 4K-Monitoren oder Fernsehern.
- ✔ Hochwertige db-tronic-Verpackung: Robuste und elegante Verpackung, ideal für sicheren Versand und als Geschenk geeignet.
- Vorgeflasht mit Z-Stack 3.x.0-Koordinator-Firmware
- Basis auf TI CC2652P + CP2102(N)
- Dieser zigbee 3.0 USB-Dongle-p als ZigBee-Gateway zur Verwaltung von Untergeräten in Open-Source-Plattformen mit HomeAssistant oder Zigbee2MQTT
- SMA-Schnittstelle externe Antenne,Aluminiumgehäuse reduziert effektiv Signalstörungen von Peripheriegeräten, +20dBm Ausgangsverstärkung
- Kann in ZigBee-Routing-Firmware flashen, als Router im ZigBee-Netzwerk die Netzwerkreichweite erweitern
- 1.SLZB-MR1: Ein Multi-Radio-, Dual-Antennen-Zigbee- und Thread-Koordinator basierend auf den Modulen CC2652P7 und EFR32MG21. Er integriert Zigbee und Thread in einem einzigen Gerät. Kann als Zigbee 3.0-Gateway in den Open-Source-Automatisierungsplattformen – Zigbee2MQTT, Home Assistant, ZHA – verwendet werden.
- 2.Funktioniert in beiden Modi – LAN und USB. Der Modus kann über die Firmware oder per Knopfdruck geändert werden.
- 3. Sie können einem Server beliebig viele Zigbee-Koordinatoren hinzufügen. So können Sie problemlos verschiedene Räume und Gebäude abdecken und sie mit derselben Home Assistant-Instanz verbinden.
- 4. Das Gerät kann entweder über PoE oder USB-C mit Strom versorgt werden.
- 5. Es gibt zwei separate Antennen - eine für jeden SoC - und beide sind mit Leistungsverstärkern ausgestattet, die eine Sendeleistung von über 20 dBm ermöglichen. Die Antennen selbst haben einen Gewinn von mindestens 5 dBi.
Transparenzhinweis
*Die mit Sternchen markierten Links sind sogenannte „Affiliate-Links“. Als Amazon-Partner verdiene ich an qualifizierten Verkäufen. Wird über diese ein Einkauf getätigt, werde ich mit einer kleinen Provision beteiligt – ohne das Kosten für dich entstehen. Vielen Dank für deinen Support!
Gerne darfst du aber auch meine Arbeit über eine Pay Pal Spende unterstützen.
Beitragsversion
Dieser Beitrag wird regelmäßig aktualisiert, um dir stets die aktuellsten Informationen zu bieten.
08/2023: Veröffentlichung des Beitrages