# Lovelace Dashboard - Von scratch erstellen

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

# Room Card

Beschreibung:

Mit Der Room Card kann man Entitäten eines Raumes auf eine Karte packen.

Die Room Card ist in 3 Bereiche eingeteilt:  
Wir gehen von oben links nach rechts usw. durch

Oben links:  
  
Das Icon des Raumes als Button, das alle Entitäten auf einmal ein oder ausschaltet dessen Entitäten eine an/aus Funktion haben

Oben rechts:

Eine Info Leiste wo zustände der Entitäten dargestellt werden können, wie Temperatur, füllstände, Offen / geschlossenstände etc.

Mitte:

die Geräte des Raumes die man bedienen will oder mehr Informationen möchte.  
Einige Geräte brauchen zum Beispiel hier nicht rein. Wenn man zum Beispiel nur einen Temperatursensor hat. Da reicht die Info oben rechts. Nur zur Veranschaulichung das man in die Mitte nicht jedes Gerät auflisten muss ;-)

Die Abschnitte:

Kartendefinition und das das Icon

Eine Vollständige Liste aller MDI Icons (MaterialDesignIcons) [https://materialdesignicons.com/](https://materialdesignicons.com/)

```
type: custom:room-card #Kartendefinition
title: Wohnen # Der Titel
entity: light.wohnzimmerlichter #die gruppe oder die entität die damit ein oder ausgeschaltet werden kann. Hier sind alle Lichter im Wohnzimmer drin.
#denn das ist in der Regel das was man schnell ein und Ausschalten möchte. Gruppen können unter Geräte Helfer erstellt werden.
icon: mdi:sofa # das Icon
show_icon: true #soll das icon angezeigt werden
content_alignment: center # ausrichtung
tap_action: #was soll bei einmal tippen passieren
  action: navigate #weclhe action hier naviegierne
  navigation_path: '#lichtwohnzimmer' hier wird ein Popup aufgerufen. Siehe Wiki Bubble Card
double_tap_action: #was bei doppelt click oder tippen passieren soll
  action: toggle #die Aktion toggle schaltet ein gerät ein/oder aus, immer entgegensetzt seines jeweiligen aktiven status
```

Nu gehts nach rechts weiter zu den Info Icons.

Tipp Bei dem Entity Wert, den Geräte typ eintragen und ein einen " ." setzten dann kommt eine Vorschlagsliste:  
In der Liste setht ganz hinten auch der aktuelle Wert des Services drin.

[![Menü_013.png](https://wiki.hacker-net.de/uploads/images/gallery/2024-09/scaled-1680-/5baOEILTZHrBVv4v-menu-013.png)](https://wiki.hacker-net.de/uploads/images/gallery/2024-09/5baOEILTZHrBVv4v-menu-013.png)

Nun der Code:

```
 info_entities:
              - entity: cover.rolllade_kleines_kuchenfenster
                show_icon: true
                icon:
                  conditions:
                    - icon: mdi:window-shutter
                      condition: below #werte above = über,below=darunter oder state damit kann wird halt der text verglichen vom state mit dem value
                      #current position gibt es bei Geräten die ein Position übermitteln wie Rolläden zum beispiel
                      #Wenn geräte spezielle Werte zum abfragen haben dann ins Gerät schon schauen,
                      #ansonsten braucht nichts angegeben werden, weil dann wird value aus dem standard sensor der Entität genommen.
                      Für eine Batterie wie hier, habe ich das auskommentiert, aber man soll ja wissen das es das gibt.
                      #attribute: current_position
                      value: 50
                      styles:
                        color: red
                    - icon: mdi:window-shutter-open
                      condition: above
                      #attribute: current_position
                      value: 51
                      styles:
                        color: green
         
```

Es können mehrere Entitäten untereinander gepackt werden in den Info Entitäten.  
Diese werden dann von links nach rechts angezeigt der Reihenfolge nach, der Letzte Eintrag ist ganz rechts.

Nun gehts weiter mit den Entitäten die auch als Button verwendet werden können und einen Status durch Icon wechsel anzeigen können

```
entities:
  - entity: light.living_room_main_light
    name: Wohnzimmer Licht
    state_color: true #soll die farbe wiedergeben die das Entity hat, bei licht  die die Lichtfarbe wenn es eine RGB Lampe ist ansonsten 
    #wird halt die standard Farbe für und aus genutzt. Wird State color auskommentiert bleibt es bei ner standardfarbe die nicht wechselt
    #tap_action: #auch hier kann eine action hinterlegt werden, wird keine Action hinterlegt wird die Standard Karte der Entität in einem Popup geöffnet
      #action: toggle #die Aktion toggle schaltet ein gerät ein/oder aus, immer entgegensetzt seines jeweiligen aktiven status
  - entity: media_player.fire_tv_192_168_2_61
    name: FireTV
    show_icon: true
    icon: mdi:set-top-box
    state_color: true
  - entity: media_player.echo_show_wohnzimmer
    name: Echo
    show_icon: true
    state_color: true
    icon: mdi:speaker-wireless
  - entity: fan.zion_air
    state_color: true
    name: Luftreiniger
  - entity: fan.ventilator_wohnen
    state_color: true
    name: Ventilator
  - entity: vacuum.roborock_s8_maxv_ultra
    state_color: true
    name: Staubi
  - entity: sensor.zion_pad_2_battery_level
    name: Emilys iPad
    state_color: true
  - entity: sensor.zion_pad_battery_level
    name: iPad Pro
    state_color: true

```

Beispiele:

Weite Info Karten Entitäten Beipiele:

Temperatur Sensor

```
 - entity: sensor.temperatur_wohnzimmer_sonoff_temperature
    format: precision1 #auf wie vile stellen hinterm Komma gerundet, hier eine Stelle,
    styles:
      #mit templates kann man sein ganz eigenen style betreiben. mit dem wort entity.state wird aus dem oben angeben sensor der wert gezogen.
      #und je nach status hier eine farbe zurück gegben. Es kann jeder Wert geändert werden, der in Styles verfügbar ist
      #in unssrem Beispiel ist die tmeperatur unter 20 grad dann hellblau
      #ist der wert größer oder gleich 25 dann rot, bei 23 grad orange und bei 21 hellgrün
      template: >
        if (entity.state < 20) return 'color: lightblue';  if (entity.state >=
        25)return 'color: red';  if (entity.state >= 23) return 'color: orange';
        if (entity.state >= 21) return 'color: lightgreen';  
 
```

Rauchmelder

```
  - entity: binary_sensor.smoke_detected_1
    show_icon: true
    state_color: true
```

# Swipe Card

Beschreibung:

Die Swipe Karte ist eine Karte auf der die größe einer Karte einnimmt aber darau mehrer Karten hinterlegt werden können. In einer art Karusell kann man dann durch die Karten wischen. Wie bei einer Diashow von Webseiten wo man ja auch durch die Bilder wischen kann. Hier kann man dann noch angeben ob Punkte Striche oder gar nichts angezeigt werden soll auf welcher Seite man sich befindet.

Installation:

Aus dem HACS Store die Swipe Karte installieren. Suchebgriff swipe card

Auf Add Karte klicken und die Swipe Karte auswählen.  
Leider ist die Swipe Karte nur mit yaml Konfigurierbar aber trotzdem simpel.

Unser Basiscode nachdem wir die Karte hinzugefügt haben.  
Nicht sehr spektakulär.

```
type: custom:swipe-card
cards: []

```

Als erstes vergeben wir wieder ein psotion , vorrausgesetzt Ihr nutzt die Grid Card, sonst natürlich nicht

```
type: custom:swipe-card
view_layout: #unsere positionsangbe
  grid-area: middle
cards: []

```

Nun stellen wir die Eigenschaften unserer Swipe Karte ein.  
Hier eine Komplettliste aller Paramter auf der Seite des Entwicklers:

[https://swiperjs.com/swiper-api#parameters](https://swiperjs.com/swiper-api#parameters)

```
type: custom:swipe-card
view_layout:
  grid-area: middle
parameters:
  spaceBetween: 8 #abstand zwischen den swipe Karten beim wischen siehe Screenschot unten.
  effect: coverflow #der typ der animation beim wechseln / wischen der karte
  grabCursor: false #Auf System mit Mauzeiger unterstützung wird dann hier das Handsymbol angezeigt, 
  #ich deaktiviere es, weil beim anklicken von Elemnten doch stören kann, auf mobilen geräten gibt es eh keinen Cursor
  #außer es ist eine maus angeschlossen.
  centeredSlides: false #da es dann probleme mit Vertikalen und Horizontalen STack Karten innerhalb der Swipe Karte kommt und ich
  #diese Karten aber darin einbetten möchte
  slidesPerView: auto #Dies hab ich auf Auto gelassen
  coverFlowEffect: #wie der Flow aussehen soll. Einfach ausprobieren oder so lassen.
    rotate: 50
    stretch: 0
    depth: 100
    modifier: 1
    slideshadows: true
  pagination:
    type: progressbar #wie der Seitenzähler angezeigt werden soll, mögliche werte: 	'progressbar' | 'bullets' | 'fraction' | 'custom'
  
  
cards: []

```

Damit hätten wir die Grundeinstellung erledigt.  
Nun Können wir darin, unsere Karten hinzufügen.  
Beispiel mit einer Vertikal Stack Karte und einer Rollanden Karte.  
  
Ein Nachteil hat die Swipe Karte. Man kann darin nicht den Visuellen Editor für die darin enthaltenden Karten nutzen.  
Tipp: Die Karte erst fertig konfigurieren, Code kopieren und in die Vertical / bzw. Sipe Karte einfügen, je nach dem.

Im Ersten Kart Abschnitt der Vertical Stack und im Vertical Stack die Karte für die Rollade. Wir können jetzt weite Karten im Vertical stack hinzufügen. Ich hab den Abschnitt Parameter hier mal rausgelassen, damits überscihtliocher ist

```
type: custom:swipe-card
view_layout:
  grid-area: middle
#hier wären die parameter
cards:
  - type: vertical-stack
    cards:
      - type: custom:shutter-row
        move_up_button: {}
        move_stop_button: {}
        move_down_button: {}
        entity: cover.rollade_wohnzimmer_cover
```

Weiteren Vertical Stack für die zweite Seite. Da blenden wir jetzt ne Wetter Karte ein. Auch schöne Custom Wetter Card mit Animation.

```
type: custom:swipe-card
view_layout:
  grid-area: middle
  #hier wären die parameter
cards:
  - type: vertical-stack
    cards:
      - type: custom:shutter-row
        move_up_button: {}
        move_stop_button: {}
        move_down_button: {}
        entity: cover.rollade_wohnzimmer_cover
  - type: vertical-stack
    cards:
      - type: custom:weather-card
        entity: weather.home
        forecast: true
        details: true
        current: true
        hourly_forecast: true
```

Uns so sieht das Ergebnis aus, beim wischen

[![Bildschirmfoto vom 2024-09-08 17-38-48.png](https://wiki.hacker-net.de/uploads/images/gallery/2024-09/scaled-1680-/zBUgmbBCUkHqqSDY-bildschirmfoto-vom-2024-09-08-17-38-48.png)](https://wiki.hacker-net.de/uploads/images/gallery/2024-09/zBUgmbBCUkHqqSDY-bildschirmfoto-vom-2024-09-08-17-38-48.png)

Fertig

# Bubble Card

Beschreibung:

Die Bubble Card ist eine Custom Lovelace Card, die es ermöglicht VerticalStack Karten in einem Popup anzuzeigen.