Wie wir die Benzinpreise in HomeAssistant hinzufügen finden wir bereits in diesem Wiki.
Wer seine Ansicht etwas anders gestalten möchte, der kann sich zum Beispiel die Icons für sein Fahrzeugmodell und die jeweils beliebtesten Tankstellen (in diesem Beispiel sind es 3 Stück) raussuchen und eine für sich individuelle Tankkarte erstellen.
configuration.yaml
1type: custom:stack-in-card
2card_mod:
3 style: |
4 ha-card {
5 --ha-card-background: rgb(30, 42, 64);
6 #color: white;
7 #text-transform: uppercase;
8 #font-size: 125%;
9 #font-weight: 100;
10 #letter-spacing: 10px;
11 background-color: '#242e42';
12 border-radius: 2%;
13 #opacity: 0.7;
14 #text-shadow: 0px 0px 5px black;
15 #text-transform: capitalize
16 }
17style:
18 .: |
19 ha-card {
20 padding-left: 10px;
21 padding-bottom: 10px;
22 padding-top: 10px;
23 background-color: #242e42;
24 }
25cards:
26 - type: vertical-stack
27 cards:
28 - type: horizontal-stack
29 cards:
30 - type: markdown
31 content: ' '
32 style:
33 .: |
34 ha-card {
35 background-color: transparent !important;
36 box-shadow: none !important;
37 }
38 - type: horizontal-stack
39 cards:
40 - type: picture
41 image: /local/images/tankstation_logos/sprinter.png
42 style:
43 .: |
44 ha-card {
45 background-color: transparent !important;
46 box-shadow: none !important;
47 margin-bottom: 5px;
48 margin-left: 0px;
49 margin-right: 0px;
50 }
51 ha-card img{
52 height: 43px;
53 width: 70px;
54 margin: auto;
55 }
56 - type: picture
57 image: /local/images/tankstation_logos/sharan.png
58 style:
59 .: |
60 ha-card {
61 padding: auto;
62 background-color: transparent !important;
63 box-shadow: none !important;
64 margin-bottom: 5px;
65 margin-left: 0px;
66 margin-right: 0px;
67 }
68 ha-card img{
69 height: 43px;
70 width: 70px;
71 margin: auto;
72 }
73 - type: horizontal-stack
74 cards:
75 - type: markdown
76 content: |
77 <table>
78 <tr>
79 <td width="50px;">
80 <img src = '/local/images/tankstation_logos/buettner.png' align='top' height='40'></img>
81 </td>
82 <td>
83 Büttner | Rosenstrasse
84 </td>
85 </tr>
86 </table>
87 style:
88 .: |
89 ha-card {
90 max-height:51px;
91
92 padding-top: 0px;
93 background-color: transparent !important;
94 box-shadow: none !important;
95 }
96 ha-markdown {
97 font-size: 90%;
98 font-weight: 100;
99 color: white;
100 }
101 .no-header {
102 padding: 0px !important;
103 }
104 - type: horizontal-stack
105 cards:
106 - type: custom:badge-card
107 badges:
108 - entity: sensor.none_rosenstrasse_49_diesel
109 name: ' '
110 style: |
111 :host {
112 --label-badge-text-color: white;
113 --label-badge-red: #069B;
114 #--label-badge-background-color: gray;
115 --ha-label-badge-label-color: white;
116 }
117 - type: custom:badge-card
118 badges:
119 - entity: sensor.none_rosenstrasse_49_super
120 name: ' '
121 style: |
122 :host {
123 --label-badge-text-color: white;
124 --label-badge-red: gray;
125 #--label-badge-background-color: red;
126 --ha-label-badge-label-color: white;
127 }
128 - type: horizontal-stack
129 cards:
130 - type: markdown
131 content: |
132 <table>
133 <tr>
134 <td width="50px;">
135 <img src = '/local/images/tankstation_logos/score.png' align='top' height='40'></img>
136 </td>
137 <td>
138 Score | Burgstrasse
139 </td>
140 </tr>
141 </table>
142 style:
143 .: |
144 ha-card {
145 max-height:51px;
146
147 padding-top: 0px;
148 background-color: transparent !important;
149 box-shadow: none !important;
150 }
151 ha-markdown {
152 font-size: 90%;
153 font-weight: 100;
154 color: white;
155 }
156 .no-header {
157 padding: 0px !important;
158 }
159 - type: horizontal-stack
160 cards:
161 - type: custom:badge-card
162 badges:
163 - entity: sensor.score_burgstr_50_b_diesel
164 name: ' '
165 style: |
166 :host {
167 --label-badge-text-color: white;
168 --label-badge-red: #069B;
169 #--label-badge-background-color: gray;
170 --ha-label-badge-label-color: white;
171 }
172 - type: custom:badge-card
173 badges:
174 - entity: sensor.score_burgstr_50_b_super
175 name: ' '
176 style: |
177 :host {
178 --label-badge-text-color: white;
179 #--label-badge-text-weight: bold;
180 --label-badge-red: gray;
181 #--label-badge-background-color: red;
182 --ha-label-badge-label-color: white;
183 }
184 - type: horizontal-stack
185 cards:
186 - type: markdown
187 content: |
188 <table>
189 <tr>
190 <td width="50px;">
191 <img src = '/local/images/tankstation_logos/aral.png' align='top' height='40'></img>
192 </td>
193 <td>
194 Aral | Norddeicher Strasse
195 </td>
196 </tr>
197 </table>
198 style:
199 .: |
200 ha-card {
201 max-height:51px;
202
203 padding-top: 0px;
204 background-color: transparent !important;
205 box-shadow: none !important;
206 }
207 ha-markdown {
208 font-size: 85%;
209 font-weight: 100;
210 color: white;
211 }
212 .no-header {
213 padding: 0px !important;
214 }
215 - type: horizontal-stack
216 cards:
217 - type: custom:badge-card
218 badges:
219 - entity: sensor.aral_norddeicher_strasse_31_32_diesel
220 name: ' '
221 style: |
222 :host {
223 --label-badge-text-color: white;
224 --label-badge-red: #069B;
225 #--label-badge-background-color: gray;
226 --ha-label-badge-label-color: white;
227 }
228 - type: custom:badge-card
229 badges:
230 - entity: sensor.aral_norddeicher_strasse_31_32_super
231 name: ' '
232 style: |
233 :host {
234 --label-badge-text-color: white;
235 --label-badge-red: gray;
236 #--label-badge-background-color: red;
237 --ha-label-badge-label-color: white;
238 }