# 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

[![Auswahl_395.png](https://wiki.hacker-net.de/uploads/images/gallery/2024-08/scaled-1680-/2WSHS03V5PTaj82W-auswahl-395.png)](https://wiki.hacker-net.de/uploads/images/gallery/2024-08/2WSHS03V5PTaj82W-auswahl-395.png)

welche Karten sind dies :

<table border="1" id="bkmrk-addon-git-url-suchbe" style="border-collapse: collapse; width: 132.222%; height: 410.884px;"><tbody><tr style="height: 46.5167px;"><td style="width: 57.9668%; height: 46.5167px;">**Addon GIT URL**  
</td><td style="width: 21.2586%; height: 46.5167px;">**Suchbegriff in HACS unter repo hinzufügen**  
</td><td style="width: 20.7642%; height: 46.5167px;">**Beschreibung** </td></tr><tr style="height: 35.3167px;"><td style="width: 57.9668%; height: 35.3167px;">[https://github.com/thomasloven/lovelace-layout-card](https://github.com/thomasloven/lovelace-layout-card)</td><td style="width: 21.2586%; height: 35.3167px;">lovelace-layout-card</td><td style="width: 20.7642%; height: 35.3167px;">Dies ist eine Grid Card, mit der Man Karten anordnen kann  
</td></tr><tr style="height: 35.3167px;"><td style="width: 57.9668%; height: 35.3167px;">[https://github.com/bramkragten/custom-ui/tree/master/swipe-card](https://github.com/bramkragten/custom-ui/tree/master/swipe-card)</td><td style="width: 21.2586%; height: 35.3167px;">swipe</td><td style="width: 20.7642%; height: 35.3167px;">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  
</td></tr><tr style="height: 35.3167px;"><td style="width: 57.9668%; height: 35.3167px;">[https://github.com/piitaya/lovelace-mushroom/](https://github.com/piitaya/lovelace-mushroom/)</td><td style="width: 21.2586%; height: 35.3167px;">mushroom  
</td><td style="width: 20.7642%; height: 35.3167px;">Eine Sammlung von Karten für Diverse Geräte. Die Rolläden Karte find ich besonders Chic:  
Mushroom Cover-Kartenkonfiguration  
</td></tr><tr style="height: 35.3167px;"><td style="width: 57.9668%; height: 35.3167px;">[https://github.com/wassy92x/lovelace-digital-clock/](https://github.com/wassy92x/lovelace-digital-clock/)</td><td style="width: 21.2586%; height: 35.3167px;">digital-clock</td><td style="width: 20.7642%; height: 35.3167px;">Eine schlichte moderne Uhr Karte mit Datum   
</td></tr><tr style="height: 52.1167px;"><td style="width: 57.9668%; height: 52.1167px;">[https://github.com/marcokreeft87/room-card/](https://github.com/marcokreeft87/room-card/) entwicklung eingestellt wurde geforkt vom Eintrag drunter</td><td style="width: 21.2586%; height: 52.1167px;">room-card</td><td style="width: 20.7642%; height: 52.1167px;">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.  
</td></tr><tr style="height: 35.3167px;"><td style="width: 57.9668%; height: 35.3167px;">[https://github.com/viseradius/room-card](https://github.com/viseradius/room-card) ist ein Fork von dem drüber  
</td><td style="width: 21.2586%; height: 35.3167px;">room-card</td><td style="width: 20.7642%; height: 35.3167px;">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.</td></tr><tr style="height: 35.3167px;"><td style="width: 57.9668%; height: 35.3167px;">[https://github.com/berrywhite96/lovelace-shutter-row](https://github.com/berrywhite96/lovelace-shutter-row)</td><td style="width: 21.2586%; height: 35.3167px;">shutter row</td><td style="width: 20.7642%; height: 35.3167px;">Eine Karte mit mehr Einstellungsmöglichketen als die Mushroom Rolladen Karte.  
</td></tr><tr style="height: 35.3167px;"><td style="width: 57.9668%; height: 35.3167px;">[https://github.com/Clooos/Bubble-Card/](https://github.com/Clooos/Bubble-Card/)</td><td style="width: 21.2586%; height: 35.3167px;">bubble-card</td><td style="width: 20.7642%; height: 35.3167px;">Eine Karte die Als Aktion Aufgerufen wird. Sprich ein Dashboard was in einem Popup aufgerufen wird.  
</td></tr><tr style="height: 29.7167px;"><td style="width: 57.9668%; height: 29.7167px;">[https://github.com/bramkragten/weather-card](https://github.com/bramkragten/weather-card)

wird von jemand anders auch geplfegt, beide repos sind aktiv

[https://github.com/r0bb10/weather-card](https://github.com/r0bb10/weather-card)

</td><td style="width: 21.2586%; height: 29.7167px;">weather card  
</td><td style="width: 20.7642%; height: 29.7167px;">Eine Wetterkarte mit vielen Details und animierten Icons  
</td></tr><tr style="height: 35.3167px;"><td style="width: 57.9668%; height: 35.3167px;">[https://github.com/ricardoquecria/caule-themes-pack-1](https://github.com/ricardoquecria/caule-themes-pack-1)</td><td style="width: 21.2586%; height: 35.3167px;">caule</td><td style="width: 20.7642%; height: 35.3167px;">Ein Theme mit mehren Varianten  
</td></tr><tr><td style="width: 57.9668%;">[https://github.com/custom-cards/button-card](https://github.com/custom-cards/button-card)

</td><td style="width: 21.2586%;">button-card</td><td style="width: 20.7642%;">Eine Card die Einen Button beinhaltet wo man aber ein ICON hinzufügen kann, mit bloinken oder anderen States etc.  
</td></tr></tbody></table>

### 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.

[![Auswahl_070.png](https://wiki.hacker-net.de/uploads/images/gallery/2024-09/scaled-1680-/HTCd4QM2kpXStF97-auswahl-070.png)](https://wiki.hacker-net.de/uploads/images/gallery/2024-09/HTCd4QM2kpXStF97-auswahl-070.png)

Zum testen die Wettervorhersage

[![Auswahl_071.png](https://wiki.hacker-net.de/uploads/images/gallery/2024-09/scaled-1680-/DGDuPSMc20gi4qFr-auswahl-071.png)](https://wiki.hacker-net.de/uploads/images/gallery/2024-09/DGDuPSMc20gi4qFr-auswahl-071.png)

Diese steht jetzt am Anfang, wir müssen ihr noch die Position mitteilen

[![Auswahl_072.png](https://wiki.hacker-net.de/uploads/images/gallery/2024-09/scaled-1680-/D3nBtfSyEkpTBOgw-auswahl-072.png)](https://wiki.hacker-net.de/uploads/images/gallery/2024-09/D3nBtfSyEkpTBOgw-auswahl-072.png)

Nun gehen wir auf der Karte auf bearbeiten

[![Auswahl_073.png](https://wiki.hacker-net.de/uploads/images/gallery/2024-09/scaled-1680-/ArDWHfx4xlDSvYmx-auswahl-073.png)](https://wiki.hacker-net.de/uploads/images/gallery/2024-09/ArDWHfx4xlDSvYmx-auswahl-073.png)

und in den Code Editor

[![Auswahl_074.png](https://wiki.hacker-net.de/uploads/images/gallery/2024-09/scaled-1680-/fQ9PTUTkMjDVJ25O-auswahl-074.png)](https://wiki.hacker-net.de/uploads/images/gallery/2024-09/fQ9PTUTkMjDVJ25O-auswahl-074.png)

Nun sehen wir den Editor und fügen folgendes darunter:

[![Auswahl_075.png](https://wiki.hacker-net.de/uploads/images/gallery/2024-09/scaled-1680-/zhGwyBuwrCR5fpqN-auswahl-075.png)](https://wiki.hacker-net.de/uploads/images/gallery/2024-09/zhGwyBuwrCR5fpqN-auswahl-075.png)

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

[![Auswahl_076.png](https://wiki.hacker-net.de/uploads/images/gallery/2024-09/scaled-1680-/bjInjSDC6KRXGXfb-auswahl-076.png)](https://wiki.hacker-net.de/uploads/images/gallery/2024-09/bjInjSDC6KRXGXfb-auswahl-076.png)