Empfohlene Produkte
Ausgewählte Empfehlungen für dein Smart Home Projekt
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“
Als erstes benötigen wir also eine custom:button-card aus HACS.
Shopping-Empfehlungen
Weitere empfohlene Produkte für dein Smart Home
1type: custom:button-card
2entity: sensor.tankerkoenig_shop_chill_diesel
3aspect_ratio: 3/1
4name: false
5show_name: true
6show_state: true
7show_icon: true
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
Dies fügen wir als erstes unserem Code hinzu…
1type: custom:button-card
2entity: sensor.tankerkoenig_shop_chill_diesel
3aspect_ratio: 3/1
4name: false
5show_name: false
6show_state: false
7show_icon: false
8styles:
9 grid:
10 - grid-template-areas: >
11 ". . . . ." "price street_1 street_1 street_1 ." "price street_2
12 street_2 street_2 ." "price street_3 street_3 street_3 richtung" "time .
13 . . km" ". . . . ."
14 - grid-template-columns: 2fr 1fr 1fr 1fr 1fr
15 - grid-template-rows: min-content 1fr 1fr 1fr 1fr min-content
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:
1card:
2 - background-color: '#4e5e78'
3 - border-radius: 2%
4 - padding: 5%
5 - opacity: 0.7sollte dann so aussehen:
1type: custom:button-card
2entity: sensor.tankerkoenig_shop_chill_diesel
3aspect_ratio: 3/1
4name: false
5show_name: false
6show_state: false
7show_icon: false
8styles:
9 grid:
10 - grid-template-areas: >
11 ". . . . ." "price street_1 street_1 street_1 ." "price street_2
12 street_2 street_2 ." "price street_3 street_3 street_3 richtung" "time .
13 . . km" ". . . . ."
14 - grid-template-columns: 2fr 1fr 1fr 1fr 1fr
15 - grid-template-rows: min-content 1fr 1fr 1fr 1fr min-content
16 card:
17 - background-color: '#4e5e78'
18 - border-radius: 2%
19 - padding: 5%
20 - opacity: 0.7auf grid.layoutit.com haben wir uns verschiedene custom_fields angelegt. In unserer Karte konzentrieren wir uns als erstes auf „price„.
Um den Preis dazustellen verwenden wir eine weitere custom:button-card.
1custom_fields:
2 price:
3 card:
4 type: custom:button-card
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.
1custom_fields:
2 price:
3 card:
4 type: custom:button-card
5 name: |
6 [[[
7 return ` ${states['sensor.tankerkoenig_shop_chill_diesel'].state}`;
8 ]]]
1name: |
2 [[[
3 if (states['sensor.tankerkoenig_shop_chill_diesel'].state > 1)
4 return ` ${states['sensor.tankerkoenig_shop_chill_diesel'].state}`;
5 else
6 return '0,00';
7 ]]]Wer hier grafische Anpassungen vornehmen möchte, legt hier eine neue Sektion „styles“ an.
1styles:
2 card:
3 - color: yellow
4 - font-size: 40pxWichtig ist, dass sich „styles“ in der Spalte einreiht, wo auch bereits „name“ und „type“ stehen.
Wie man seine eigene Schriftart zu Home-Assistant hinzufügen kann, erfahrt ihr hier:
Wiki: Eigene Schriftart in Home-Assistant hinzufügen
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!
1street_1:
2 card:
3 type: custom:button-card
4 name: >-
5 [[[ return
6 `${states['sensor.tankerkoenig_shop_chill_diesel'].attributes.station_name}`
7 ]]]
Mit „styles“ passen wir es denn wieder an unsere Karte an.
1street_1:
2 card:
3 type: custom:button-card
4 name: >-
5 [[[ return
6 `${states['sensor.tankerkoenig_shop_chill_diesel'].attributes.station_name}`
7 ]]]
8 styles:
9 card:
10 - background-color: transparent
11 - box-shadow: none
Für die anderen beiden custom_fields: „street_2“ und „street_3“ gehen wir ebenso vor.
1street_2:
2 card:
3 type: custom:button-card
4 name: >-
5 [[[ return
6 `${states['sensor.tankerkoenig_shop_chill_diesel'].attributes.street}
7 ${states['sensor.tankerkoenig_shop_chill_diesel'].attributes.house_number}`
8 ]]]
9 styles:
10 card:
11 - background-color: transparent
12 - box-shadow: none
13 street_3:
14 card:
15 type: custom:button-card
16 name: >-
17 [[[ return
18 `${states['sensor.tankerkoenig_shop_chill_diesel'].attributes.postcode}
19 ${states['sensor.tankerkoenig_shop_chill_diesel'].attributes.city}` ]]]
20 styles:
21 card:
22 - background-color: transparent
23 - box-shadow: none
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
1time: |
2 [[[
3 if (states['sensor.tankerkoenig_shop_chill_diesel'].state > 1)
4 return 'Geöffnet';
5 else
6 return 'close';
7 ]]]
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.
1- platform: template
2 sensors:
3 mobiltelefon_distance_to_buettner:
4 value_template: "{{ distance(53.519606, 7.278606, 'device_tracker.DEINMOBILTELEFON') | round(1) }}"
5 unit_of_measurement: 'km'Home Assistant NEUSTARTEN und im Code von unserer Karte folgendes als custom_field einfügen:
1km: '[[[ return `${states[''sensor.mobiltelefon_distance_to_buettner''].state} km` ]]]'
Wer über seiner Kilometer-Anzeige (Entfernung) noch ein kleines Icon haben möchte, der kann das mithilfe einer weiteren custom:button-card einbinden.
Mit dem Befehl „tap_action“ könnten wir dann beispielsweise auch direkt auf unsere Kartenansicht von HomeAssistant switchen
1richtung:
2 card:
3 type: custom:button-card
4 icon: mdi:navigation-variant
5 name: false
6 show_name: false
7 tap_action:
8 action: navigate
9 navigation_path: /map
10 styles:
11 card:
12 - background-color: '#242e42'
13 - height: 25px
14 - width: 25px
15 - box-shadow: none
16 icon:
17 - width: 15px
1type: custom:button-card
2entity: sensor.tankerkoenig_shop_chill_diesel
3show_icon: false
4hold_action:
5 action: more-info
6tap_action:
7 action: toggle
8aspect_ratio: 3/1
9name: false
10show_name: false
11show_state: false
12styles:
13 card:
14 - background-color: '#4e5e78'
15 - border-radius: 2%
16 - padding: 5%
17 - opacity: 0.7
18 grid:
19 - grid-template-areas: >
20 ". . . . ." "price street_1 street_1 street_1 ." "price street_2
21 street_2 street_2 ." "price street_3 street_3 street_3 richtung" "time .
22 . . km" ". . . . ."
23 - grid-template-columns: 2fr 1fr 1fr 1fr 1fr
24 - grid-template-rows: min-content 1fr 1fr 1fr 1fr min-content
25 custom_fields:
26 price:
27 - align-self: start
28 street_1: null
29 street_2: null
30 street_3: null
31 time:
32 - justify-self: start
33 - margin-top: '-35px'
34 - font-size: 13px
35 - margin-left: 10px
36 km:
37 - align-self: start
38 - justify-self: start
39 - margin-top: '-25px'
40 - font-size: 13px
41 richtung:
42 - align-self: start
43 - justify-self: end
44 - margin-right: 45px
45 - margin-top: '-25px'
46custom_fields:
47 price:
48 card:
49 type: custom:button-card
50 name: |
51 [[[
52 if (states['sensor.tankerkoenig_shop_chill_diesel'].state > 1)
53 return ` ${states['sensor.tankerkoenig_shop_chill_diesel'].state}`;
54 else
55 return '0,00';
56 ]]]
57 styles:
58 card:
59 - font-family: '-apple-system, digital-7'
60 - color: yellow
61 - font-size: 40px
62 street_1:
63 card:
64 type: custom:button-card
65 name: >-
66 [[[ return
67 `${states['sensor.tankerkoenig_shop_chill_diesel'].attributes.station_name}`
68 ]]]
69 styles:
70 card:
71 - background-color: transparent
72 - box-shadow: none
73 street_2:
74 card:
75 type: custom:button-card
76 name: >-
77 [[[ return
78 `${states['sensor.tankerkoenig_shop_chill_diesel'].attributes.street}
79 ${states['sensor.tankerkoenig_shop_chill_diesel'].attributes.house_number}`
80 ]]]
81 styles:
82 card:
83 - background-color: transparent
84 - box-shadow: none
85 street_3:
86 card:
87 type: custom:button-card
88 name: >-
89 [[[ return
90 `${states['sensor.tankerkoenig_shop_chill_diesel'].attributes.postcode}
91 ${states['sensor.tankerkoenig_shop_chill_diesel'].attributes.city}` ]]]
92 styles:
93 card:
94 - background-color: transparent
95 - box-shadow: none
96 time: |
97 [[[
98 if (states['sensor.tankerkoenig_shop_chill_diesel'].state > 1)
99 return 'Geöffnet';
100 else
101 return 'close';
102 ]]]
103 km: '[[[ return `${states[''sensor.karstens_distance_to_buettner''].state} km` ]]]'
104 richtung:
105 card:
106 type: custom:button-card
107 icon: mdi:navigation-variant
108 name: false
109 show_name: false
110 tap_action:
111 action: navigate
112 navigation_path: /map
113 styles:
114 card:
115 - background-color: '#242e42'
116 - height: 25px
117 - width: 25px
118 - box-shadow: none
119 icon:
120 - width: 15px