Wer eine individuelle Tankkarte haben möchte, für den eignet sich dieser Beitrag! Hier wird Schritt-für-Schritt gezeigt, wie man mit der Erstellung einer Karte anfängt.
Der Vorteil einer custom:button-card: „es lassen sich so gut wie alle anderen Karten dort implementieren“
Da wir diese ganzen Informationen aber zum jetzigen Zeitpunkt nicht benötigen, können wir alles auf „false“ ändern.
Nun benötigen wir einige sogenannte „custom_fields“. Hierdrin können wir dann mit „neuen“ Karten arbeiten. Außerdem müssen wir diese custom_fields platzieren. Das geht am einfachsten in einer „grid-area“. Hierfür nutze ich gerne die Seite: grid.layoutit.com
In grid.layoutit.com können wir uns die columns und rows so anpassen, wie wir meinen dass es am besten aussieht.
In der rechten Spalte sehen wir dann auch zugleich den CSS-Code ganz speziell mit den Elementen: grid-template-areas – grid-template-rows und grid-template-columns
In dem Bereich „styles“ können wir unsere Karte optisch anpassen. Hintergründe können geändert, Schattierungen angepasst und Rahmen hinzugefügt werden. Dies ist jedem selbst überlassen.
Für unsere Karte fügen wir beispielsweise folgendes hinzu:
Wie wir sehen, wir haben wir einen kleinen schwarzen Banner links mittig in der Karte. Dieser platziert sich genau dort, weil wir das custom_field genauso genannt haben, wie unser grid-template.
Zusätzlichen haben wir in grid-template-areas genau gesagt, an welchen Positionen sich unser „Price“ befindet. Nämlich in der ersten Spalte und in den ersten 3 Reihen
Grundsätzlich kann in dieser neuen custom_bard alles verwendet werden, was wir wollen
Für unsere Karte benötigen wir aber lediglich den „Namen“. Und als Name der Karte verwenden wir den Zustand unseres Sensors.
Dies funktioniert natürlich nur solange, wie die Tankstelle auch einen Preis liefert. Hat sie beispielsweise geschlossen, würde dort „unbekannt“ stehen. Für unsere Karte nun gerade nicht ideal! Also nutzen wir hier eine kleine „if-Abfrage“ um zu überprüfen, ob der Preis größer als 1 ist. Wenn dem nicht so ist, dann soll in Name „0,00“ stehen.
Wer hier grafische Anpassungen vornehmen möchte, legt hier eine neue Sektion „styles“ an.
Wie bei dem custom_field für Preis gehen wir vor für unsere Straße. Jedoch aufgeteilt in 3 Bereiche. „street_1“ für den Namen. „street_2“ für Straße und Hausnummer. Und „street_3“ für PLZ + Ort.
In der grid-area haben wir gesagt, dass „street_1,2+3“ jeweils 3 Spalten breit ist und nur 1 Reihe hoch. Außerdem nur neben dem „price“ steht.
Auch hier verwenden wir wieder eine custom:button-card. Als Name nutzen wir jedoch das Attribute: station.name aus unserem Sensor.
Wichtig: street_1 ist in der Reihe einzufügen, wo auch „price“ ist!
Unten links in der Ecke möchten wir sehen, ob unsere Tankstelle „geöffnet“ oder „geschlossen“ ist. Auch hier haben wir in der grid-area die Position für festgelegt.
In diesem custom_field nutzen wir nun aber keine weitere Karte, sondern verwenden hierfür einfach einen „Text“. Wir prüfen ob die Tankstelle einen Preis als „state“ übermittelt. Ist dieser größer als 1, dann hat sie geöffnet. Steht dort „false“ oder „unbekannt“, dann hat sie geschlossen
Auf gleicher Höhe wie unser geschlossen/geöffnet möchten wir die Entfernung zur Tankstelle stehen haben. In dieser Karte interessiert mich die Entfernung von meinem Mobiltelefon zu der Tankstelle. Natürlich könnt ihr das auch von eurem Standort (Home) prüfen.
Um dies zu ermitteln müssen wir uns zuerst einen Sensor anlegen.
Den Wert erreichen wir mit {{ distance(LONGITUTE, LATITUDE, ‚device_tracker.DEINMOBILTELEFON‘) | round(1) }}. Am Ende Runden wir das ganze auf eine Nachkommastelle.
Home Assistant NEUSTARTEN und im Code von unserer Karte folgendes als custom_field einfügen:
