Dashboard Grundgerüst und installation Custom Cards Beschreibung: Ein Dashboard von Grund auf erstellen. Dazu benutzen wir ein paar custom cards und ein Themepack aus dem HACS. In HACS gehen dann Frontend und dann auf Repo und Suchbegriff eingeben. Diese Karten werden wir in den nächsten Kapiteln verwenden welche Karten sind dies : Addon GIT URL Suchbegriff in HACS unter repo hinzufügen Beschreibung https://github.com/thomasloven/lovelace-layout-card lovelace-layout-card Dies ist eine Grid Card, mit der Man Karten anordnen kann https://github.com/bramkragten/custom-ui/tree/master/swipe-card swipe Eine Karte in der Man man mehrer Karten legen kann und einfach durch wischen von einer zur anderen Karte wechsel, aber nur den Platz einer Karte braucht https://github.com/piitaya/lovelace-mushroom/ mushroom Eine Sammlung von Karten für Diverse Geräte. Die Rolläden Karte find ich besonders Chic: Mushroom Cover-Kartenkonfiguration https://github.com/wassy92x/lovelace-digital-clock/ digital-clock Eine schlichte moderne Uhr Karte mit Datum https://github.com/marcokreeft87/room-card/ entwicklung eingestellt wurde geforkt vom Eintrag drunter room-card Eine Karte mit der Sich räume mit einem Oberbegriff Icon ausstatten lässt, was dann eine Gruppe an/ausschalten kann. Dann eine Info Symbolzeile hat und dann noch eine Geräte Liste beinhalten kann. https://github.com/viseradius/room-card ist ein Fork von dem drüber room-card Eine Karte mit der Sich räume mit einem Oberbegriff Icon ausstatten lässt, was dann eine Gruppe an/ausschalten kann. Dann eine Info Symbolzeile hat und dann noch eine Geräte Liste beinhalten kann. https://github.com/berrywhite96/lovelace-shutter-row shutter row Eine Karte mit mehr Einstellungsmöglichketen als die Mushroom Rolladen Karte. https://github.com/Clooos/Bubble-Card/ bubble-card Eine Karte die Als Aktion Aufgerufen wird. Sprich ein Dashboard was in einem Popup aufgerufen wird. https://github.com/bramkragten/weather-card   wird von jemand anders auch geplfegt, beide repos sind aktiv   https://github.com/r0bb10/weather-card   weather card Eine Wetterkarte mit vielen Details und animierten Icons https://github.com/ricardoquecria/caule-themes-pack-1 caule Ein Theme mit mehren Varianten https://github.com/custom-cards/button-card button-card Eine Card die Einen Button beinhaltet wo man aber ein ICON hinzufügen kann, mit bloinken oder anderen States etc. Designen Grundgerüst: Den Kiosk mode aktivieren, wenn man dies denn möchte, ansonsten überspringen kiosk_mode: user_settings: - users: - wall-unit kiosk: true hide_header: true hide_sidebar: true hide_menu_button: true hide_overflow: true Danach unser Layout: Wir wollen 3 Spalten und die Anzahl der Zeilen soll sich nach unten automatisch erweitern. Ist die maximale breite des Fensters nur noch 93 Pixel oder weniger dann nehme eine zweite Anordnung. Hier bei uns alles untereinander.  Wofür ist das. Wenn das Fenster kleiner als 93 Pixel ist zum Beispiel auf dem Smartphone soll alles untereinander angezeigt werden. Und schon ist das Dashboard responsive Beschreibung des Codes views: #Unser Theme aus dem Theme pack, Schwarz mit Blau find ich ganz gut - theme: Caule Black Blue #Title vom Tab title: Home path: grid type: custom:grid-layout layout: #die Breiten der Spalten grid-template-columns: 25% 40% 35% Die Breite der Zeilen, sollen hier automatisch angepasst werden grid-template-rows: auto #Unsere Areas, sprich Spaltennamen. Werden zwei Spaltennamen gleich benannt unter / übereinander so werden die zellen zu einer großen Verbunden #Wir denken da an Excel. #Wir haben die Erste Zeile ist unser Message bereich, ähnlich wie die Statusleiste beim Smartphone #Headerlinks header mitte und headerrechts kann man reinpacken was man möchte das gleich bei den headern untern #Dann haben wir einen Trenner für die Footer. Falls man unten noch was drin haben will, angeleht an eine Webseite mit Footern. #Dafür stehen uns auch Zwei Zeilen zur Verfügung grid-template-areas: | "messages messages messages" "headerl headerm headerr" "headerlu headerm headerru" "divider divider divider" "left middle right" "footer1 footer2 footer3" "footer4 footer5 footer6" mediaquery: # ist die maximale breite nur noch 93 pixel oder weniger dann nehme diese anordung. hier bei uns alles untereinander '(max-width: 932px)': grid-template-columns: 100% grid-template-areas: | "messages" "headerl" "headerm" "headermu" "headerr" "headerlu" "headerru" "divider" "left" "middle" "right" "footer1" "footer2" "footer3" "footer4" "footer5" "footer6" Nun können Karten in den Platzhaltern positioniert werden. Jetzt verlassen wir wieder den Code-Editor. Dann einfach eine Karte hinzufügen. Zum testen die Wettervorhersage Diese steht jetzt am Anfang, wir müssen ihr noch die Position mitteilen Nun gehen wir auf der Karte auf  bearbeiten und in den Code Editor Nun sehen wir den Editor und fügen folgendes darunter: Der Positions-code view_layout: grid-area: Das waren unsere definierten Psoitionen: "messages messages messages" "headerl headerm headerr" "headerlu headerm headerru" "divider divider divider" "left middle right" "footer1 footer2 footer3" "footer4 footer5 footer6" Beispiel: view_layout: grid-area: headerr Der Komplette Code der Karte: type: weather-forecast entity: weather.home forecast_type: daily view_layout: grid-area: headerr Nun steht unsere Karte im der headerr rechts Position