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	weather card	Eine Wetterkarte mit vielen Details und animierten Icons
https://github.com/ricardoquecria/caule-themes-pack-1	caule	Ein Theme mit mehren Varianten

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: <positionsname>
  
  
  
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