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.

welche Karten sind dies :

Addon GIT URL	Suchbegriff in HACS unter repo hinzufügen
https://github.com/thomasloven/lovelace-layout-card	lovelace-layout-card
https://github.com/bramkragten/custom-ui/tree/master/swipe-card	swipe
https://github.com/piitaya/lovelace-mushroom/	mushroom
https://github.com/wassy92x/lovelace-digital-clock/	digital-clock
https://github.com/marcokreeft87/room-card/	room-card
https://github.com/Clooos/Bubble-Card/	bubble-card
https://github.com/ricardoquecria/caule-themes-pack-1	caule

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