Direkt zum Hauptinhalt

Ein Dashboard mit Roomcards und Gridcards

Beschreibung:

Ein Dashboard von Grund auf erstellen.
Dazu benutzen wir ein paar custom cards aund ein Thempack aus dem HACS.
In Hacs gehen dann Frontend und dann auf Repo und Suchbegriff eingeben.

Auswahl_395.png

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-1caule

Grundgerü

Designen

Gundgerüst:

Den Kiosk mode aktiveieren: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.

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:
        '(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"

 

 

 

 

 


nach oben