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
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
wird von jemand anders auch geplfegt, beide repos sind aktiv
https://github.com/r0bb10/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 |
| button-card | Eine Card die Einen Button beinhaltet wo man aber ein ICON hinzufügen kann, mit bloinken oder anderen States etc. |
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: trueDanach 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: headerrDer Komplette Code der Karte:
type: weather-forecast
entity: weather.home
forecast_type: daily
view_layout:
grid-area: headerrNun steht unsere Karte im der headerr rechts Position
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/
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 statusNu 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.
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
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_coverWeiteren 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: trueUns so sieht das Ergebnis aus, beim wischen
Fertig
Bubble Card
Beschreibung:
Die Bubble Card ist eine Custom Lovelace Card, die es ermöglicht VerticalStack Karten in einem Popup anzuzeigen.