Heizung – Dashboard für Thermostate auf dem ... - Wiki

Heute machen wir uns an ein Dashboard für eine Steuerung unserer Heizkörper.

Gedacht ist dies, um es auf seinem Tablet anzeigen zu lassen. Auf einem PC oder Notebook ist dies natürlich auch möglich. Mobil leider nicht. Dafür ist diese Karte **nicht** optimiert!

Was wir benötigen:

input_boolen.waerme_RAUMNAME_an_und_aus
input_select.modus_waerme
input_number.gewunschte_temperatur_THERMOSTATNAME_zu_hause
input_number.gewunschte_temperatur_THERMOSTATNAME_zu_abwesend
input_number.gewunschte_temperatur_THERMOSTATNAME_zu_nacht

Das Dashboard besteht aus:

Das „Grundgerüst“ ist als Ansichtsart: Vertical (Layout-Card)

Mit „max_cols: 5“ sagen wir, das unser Dashboard 5 Spalten hat. Unsere einzelnen Karten weisen wir gleich verschiedenen Spalten zu.

Anschließend beginnen wir mit einem leeren Dashboard und fangen an, dies zu bestücken.

Oben links in der Ecke haben wir unseren Short-Button um immer auf die gewünschte Startseite zu gelangen.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
type: custom:button-card
view_layout:
  column: 1
icon: mdi:home-outline
style:
  .: |
    ha-card {
      background-color: rgba(0,0,0,0.0);
      box-shadow: none;
      border-radius: 20px;
    }
tap_action:
  action: navigate
  navigation_path: /tablet/start
height: 1100
styles:
  card:
    - height: 150px
  icon:
    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
size: 50px

Hier finden wir den Parameter „view_layout“ mit „column: 1“

Dies wird wichtig um die Spalten zu definieren, in den wir unsere Karten positionieren wollen. In unserem Fall „Spalte 1“. Da noch keine Karte vorhanden ist, beginnen wir somit „oben links“.

Angenommen wir fügen jetzt eine weitere Karte unter „column: 1“ hinzu, wird diese automatisch **unter** die zuletzt vorhandene positioniert…uws…

Als nächstes erstellen wir unser „Menü“

Da jeder Button untereinander ist, verwenden wir hierfür den type:vertical-stack

Jede custom:button-card sieht quasi folgendermaßen aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
type: custom:mod-card
card:
  type: custom:button-card
  tap_action:
    action: call-service
    service: input_select.select_option
    service_data:
      entity_id: input_select.modus_waerme
      option: zuhause
  icon: null
  name: zu Hause
  style:
    .: |
      ha-card {
        #background-color: rgba(30, 42, 64,10);
        border-radius: 20px;
        height: 60px;
        margin-left: 50px;
        box-shadow: {{ '0px 0px 10px 5px rgba(10,100,140,1), inset 1px 1px 1px 0px rgba(255,255,255,0.2), 4px 4px 5px 1px rgba(0,0,0,0.3)' if is_state('input_select.modus_waerme', 'Hjemme') else 'inset 1px 1px 1px 0px rgba(255,255,255,0.2), 4px 4px 5px 1px rgba(0,0,0,0.3)' }};
      }
  styles:
    icon:
      - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
    card:
      - transform: scale(1.0, 1.0)
      - width: 200px
    name:
      - font-size: 20px
      - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))

Hier setzen wir unseren ersten erstellen input_select ein.

In diesem Beispiel nenne ich ihn **input_select.modus_waerme** und bestücke ihn mit den Namen von meinem Menü (zuhause, abwesend, nacht)
In Kombinatuon custom:mod-card können wir uns so unsere „Optionen“ im Menü definieren.

option: zuhause
option: abwesend
option: nacht

Das gesamte Menü sieht dann so aus:

Ganz unten im code sehen wir wieder: „view_layout: && column: 1“.

Damit sagen wir, dass es in Spalte 1 steht. Da wir zuvor schon einen Button in Spalte 1 angelegt haben, rutscht diese Karte nun automatisch darunter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
type: vertical-stack
cards:
  - type: custom:mod-card
    card:
      type: custom:button-card
      tap_action:
        action: call-service
        service: input_select.select_option
        service_data:
          entity_id: input_select.modus_waerme
          option: zuhause
      icon: null
      name: zu Hause
      style:
        .: |
          ha-card {
            #background-color: rgba(30, 42, 64,10);
            border-radius: 20px;
            height: 60px;
            margin-left: 50px;
            box-shadow: {{ '0px 0px 10px 5px rgba(10,100,140,1), inset 1px 1px 1px 0px rgba(255,255,255,0.2), 4px 4px 5px 1px rgba(0,0,0,0.3)' if is_state('input_select.modus_waerme', 'zuhause') else 'inset 1px 1px 1px 0px rgba(255,255,255,0.2), 4px 4px 5px 1px rgba(0,0,0,0.3)' }};
          }
      styles:
        icon:
          - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
        card:
          - transform: scale(1.0, 1.0)
          - width: 200px
        name:
          - font-size: 20px
          - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
  - type: custom:mod-card
    card:
      type: custom:button-card
      tap_action:
        action: call-service
        service: input_select.select_option
        service_data:
          entity_id: input_select.modus_waerme
          option: abwesend
      icon: null
      name: Abwesend
      style:
        .: |
          ha-card {
            #background-color: rgba(30, 42, 64,10);
            border-radius: 20px;
            height: 60px;
            margin-left: 50px;
            box-shadow: {{ '0px 0px 10px 5px rgba(10,100,140,1), inset 1px 1px 1px 0px rgba(255,255,255,0.2), 4px 4px 5px 1px rgba(0,0,0,0.3)' if is_state('input_select.modus_waerme', 'abwesend') else 'inset 1px 1px 1px 0px rgba(255,255,255,0.2), 4px 4px 5px 1px rgba(0,0,0,0.3)' }};
          }
      styles:
        icon:
          - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
        card:
          - transform: scale(1.0, 1.0)
          - width: 200px
        name:
          - font-size: 20px
          - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
  - type: custom:mod-card
    card:
      type: custom:button-card
      tap_action:
        action: call-service
        service: input_select.select_option
        service_data:
          entity_id: input_select.modus_waerme
          option: nacht
      icon: null
      name: Nacht
      style:
        .: |
          ha-card {
            #background-color: rgba(30, 42, 64,10);
            border-radius: 20px;
            height: 60px;
            margin-left: 50px;
            box-shadow: {{ '0px 0px 10px 5px rgba(10,100,140,1), inset 1px 1px 1px 0px rgba(255,255,255,0.2), 4px 4px 5px 1px rgba(0,0,0,0.3)' if is_state('input_select.modus_waerme', 'nacht') else 'inset 1px 1px 1px 0px rgba(255,255,255,0.2), 4px 4px 5px 1px rgba(0,0,0,0.3)' }};
          }
      styles:
        icon:
          - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
        card:
          - transform: scale(1.0, 1.0)
          - width: 200px
        name:
          - font-size: 20px
          - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
  - type: custom:mod-card
    card:
      type: custom:button-card
      tap_action:
        action: call-service
        service: input_boolean.toggle
        data: {}
        service_data:
          entity_id: input_boolean.automatik_waerme
      icon: null
      name: Auto
      style:
        .: |
          ha-card {
            #background-color: rgba(30, 42, 64,10);
            border-radius: 20px;
            height: 60px;
            margin-left: 50px;
            box-shadow: {{ '0px 0px 10px 5px rgba(10,100,140,1), inset 1px 1px 1px 0px rgba(255,255,255,0.2), 4px 4px 5px 1px rgba(0,0,0,0.3)' if is_state('input_boolean.automatik_waerme', 'on') else 'inset 1px 1px 1px 0px rgba(255,255,255,0.2), 4px 4px 5px 1px rgba(0,0,0,0.3)' }};
          }
      styles:
        icon:
          - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
        card:
          - transform: scale(1.0, 1.0)
          - width: 200px
        name:
          - font-size: 20px
          - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
view_layout:
  column: 1

Jetzt kümmern wir uns um den „Hauptteil“.

Damit die Karten sich nicht ungewollt verschieben, bauen wir als erstes einen „Platzhalter“ ein.

1
2
3
4
type: custom:gap-card
view_layout:
  column: 2
height: 45

Das sagt nichts anderes, dass wir eine Karte an Spalte 2 positionieren, mit einer Höhe von 45px.

Als nächste Karte erstellen wir uns einen Button, der uns ein Menü öffnet, bzw. schließt.

Wie wir sehen, verwenden wir hier eine type: horizontal-stack

Karte 1 und 3 sind auch wieder „Platzhalter“, und nur die mittlere Karte ist ein Button.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
type: horizontal-stack
cards:
  - type: custom:gap-card
  - type: custom:mod-card
    card:
      type: custom:button-card
      tap_action:
        action: call-service
        service: input_boolean.toggle
        data: {}
        service_data:
          entity_id: input_boolean.waerme_RAUMNAME_an_und_aus
      icon: mdi:power
      show_name: false
      name: Auto
      style:
        .: |
          ha-card {
            #background-color: rgba(0,0,0,0.1);
            border-radius: 20px;
            box-shadow: {{ '0px 0px 10px 5px rgba(10,100,140,1), inset 1px 1px 1px 0px rgba(255,255,255,0.2)' if is_state('input_boolean.
waerme_RAUMNAME_an_und_aus', 'on') else 'inset 1px 1px 1px 0px rgba(255,255,255,0.2), 4px 4px 5px 1px rgba(0,0,0,0.3)' }};
          }
      styles:
        icon:
          - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
        card:
          - transform: scale(1.0, 1.0)
          - height: 50px
        name:
          - font-size: 20px
          - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
  - type: custom:gap-card
view_layout:
  column: 2

Hier benötigen wir einen „input_boolean“. Der Übersichtshalber benenne ich diesen so, wie der Raum heisst.

Natürlich kann man diesen Button auch verwenden, um das Thermostat ein und auszuschalten. Definiert es so, wie ihr es euch gefällt.

Die folgende Karte ist eine type: custom:mini-graph-card, die uns die Temperaturkurve unseres Thermostats und ggfs. der ermittelten Temperatur im Raum anzeigt. (Dies variiert ggfs. etwas davon, wie und ob ihr die Temperatur im Raum ermitteln könnt)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
type: custom:mini-graph-card
entities:
  - entity: sensor.THERMOSTATNAME_temperature
  - entity: sensor.RAUMNAME_temperature
    color: rgba(0,0,0,0.5)
    y_axis: secondary
    aggregate_func: min
    show_state: false
    show_line: false
    show_points: false
    show_label: false
    show_legend: false
view_layout:
  column: 2
style:
  .: |
    ha-card {
      #background-color: rgba(0,0,0,0.1);
      box-shadow: none;
      #text-shadow: 3px 3px 5px rgb(0 0 0 / 0.4);
      border-radius: 20px;
      color: {{ 'rgba(225,225,225,1)' if is_state('input_boolean.waerme_RAUMNAME_an_und_aus', 'on') else 'rgba(225,225,225,0.3)' }};
name: LoremIpsum
points_per_hour: 1
tap_action:
  action: none
show:
  fill: fade
  icon: false
  graph: true
  labels: false
animate: true
decimals: 1
align_state: center
align_header: center
hour24: true
aggregate_func: last
styles:
  name:
    - filter: drop-shadow(3px 5px 2px rgb(255 0 0 / 0.4))
line_color: rgba(10,100,140,1)
hours_to_show: 24

Da wir uns nun noch die Möglichkeit geben wollen, die Temperatur einstellen zu können und sehen zu können, in welchem „Menü-Modus“ wir uns befinden (zuHause, abwesend, nacht) erstellen wir uns eine weitere Karte vom Typ.

Prinzipiell sind hier nur 3 Karten sichtbar.

Wir benötigen in diesem Fall am 9. Denn wir brauchen jeweils 3 Karten pro „Menü-Modus“. Und je nachdem welcher Menü-Modus gewählt ist, benötigen wir unterschiedliche Karten mit unterschiedlichen operationen.

Fangen wir an:

1
2
3
4
5
6
7
8
9
type: custom:mod-card
view_layout:
  column: 2
style:
  .: |
    ha-card {
      opacity: {{ '100%' if is_state('input_boolean.waerme_RAUMNAME_an_und_aus', 'on') else '0%' }};
    }
card:

Wir nutzen die type: custom:mod-card und sagen hiermit, dass diese Karte nur gezeigt, wenn unser Powerknopf (input_boolean.waerme_RAUMNAME_an_und_aus) aktiviert ist.

1
2
3
4
5
6
7
type: custom:state-switch
  entity: input_select.modus_waerme
  default: 1
  transition: null
  transition_time: 200
  states:    
    zuhause:

Hiermit definieren wir unser Menü „zuhause“.

Alles war hier drunter (richtig eingerückt) gegliedert ist, ist nur sichtbar, wenn im Menü „zu Hause“ ausgewählt ist.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
type: horizontal-stack
      view_layout:
        column: 3
      cards:
        - type: horizontal-stack
          cards:
            - type: custom:mod-card
              style:
                .: |
                  ha-card {
                    background-color: transparent;
                    border-radius: 20px;
                  }
              card:
                type: custom:button-card
                entity: input_number.gewunschte_temperatur_THERMOSTATNAME_zu_hause
                show_icon: false
                show_label: false
                tap_action:
                  action: call-service
                  service: |
                    [[[
                      if( entity.entity_id.startsWith("input_number.") )
                        return "input_number.increment";
                      if( entity.entity_id.startsWith("counter.") )
                        return "counter.increment";
                      return "";
                    ]]]
                  service_data:
                    entity_id: '[[[ return entity.entity_id ]]]'
                icon: ''
                name: +
                style:
                  .: |
                    ha-card {
                      #background-color: rgba(0,0,0,0.1);
                      box-shadow: 4px 4px 5px 1px rgba(0,0,0,0.3), inset 1px 1px 1px 0px rgba(255,255,255,0.2);
                      border-radius: 20px;
                      height: 80px;
                    }
                styles:
                  icon:
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
                  card:
                    - transform: scale(0.8, 0.8)
                    - height: 80px
                    - weight: 80px
                  name:
                    - font-size: 20px
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
        - type: horizontal-stack
          cards:
            - type: custom:mod-card
              style:
                .: |
                  ha-card {
                    background-color: transparent;
                    border-radius: 20px;

                  }
              card:
                type: custom:button-card
                entity: input_number.gewunschte_temperatur_
THERMOSTATNAME_zu_hause
                show_icon: false
                show_label: false
                show_state: true
                show_name: false
                tap_action:
                  action: call-service
                  service: |
                    [[[
                      if( entity.entity_id.startsWith("input_number.") )
                        return "input_number.increment";
                      if( entity.entity_id.startsWith("counter.") )
                        return "counter.increment";
                      return "";
                    ]]]
                  service_data:
                    entity_id: '[[[ return entity.entity_id ]]]'
                icon: ''
                name: zu Hause
                units: °C
                aspect_ratio: 2/1
                style:
                  .: |
                    ha-card {
                      #background-color: rgba(0,0,0,0.1);
                      box-shadow: 4px 4px 5px 1px rgba(0,0,0,0.3), inset 1px 1px 1px 0px rgba(255,255,255,0.2);
                      #border-radius: 20px;
                      #margin-top: 10px;

                    }
                styles:
                  icon:
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
                  card:
                    - transform: scale(0.8, 0.8)
                    - height: 80px
                    - weight: 154px
                  state:
                    - font-size: 30px
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
                  name:
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
                state_display: |
                  [[[
                    return ((Math.round(Number(entity.state)))+'°');
                  ]]]
        - type: horizontal-stack
          cards:
            - type: custom:mod-card
              style:
                .: |
                  ha-card {
                    background-color: transparent;
                    border-radius: 20px;
                  }
              card:
                type: custom:button-card
                entity: input_number.gewunschte_temperatur_
THERMOSTATNAME_zu_hause
                show_icon: false
                show_label: false
                tap_action:
                  action: call-service
                  service: |
                    [[[
                      if( entity.entity_id.startsWith("input_number.") )
                        return "input_number.decrement";
                      if( entity.entity_id.startsWith("counter.") )
                        return "counter.decrement";
                      return "";
                    ]]]
                  service_data:
                    entity_id: '[[[ return entity.entity_id ]]]'
                icon: ''
                name: '-'
                style:
                  .: |
                    ha-card {
                      #background-color: rgba(0,0,0,0.1);
                      box-shadow: 4px 4px 5px 1px rgba(0,0,0,0.3), inset 1px 1px 1px 0px rgba(255,255,255,0.2);
                      border-radius: 20px;
                      height: 80px;
                    }
                styles:
                  icon:
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
                  card:
                    - transform: scale(0.8, 0.8)
                  name:
                    - font-size: 20px
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))

Und diese Karte benötigen wir nun noch zweimal. Wobei „nur noch“ die entity in den jeweiligen Helper für unser Menü umbenannt werden muss. Also haben wir einmal: – input_number.gewunschte_temperatur_THERMOSTATNAME_zu_hause – input_number.gewunschte_temperatur_THERMOSTATNAME_abwesend – input_number.gewunschte_temperatur_THERMOSTATNAME_nacht

Die ganze Karte sieht dann wie folgt aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
type: custom:mod-card
view_layout:
  column: 2
style:
  .: |
    ha-card {
      opacity: {{ '100%' if is_state('input_boolean.waerme_RAUMNAME_an_und_aus', 'on') else '0%' }};
    }
card:
  type: custom:state-switch
  entity: input_select.modus_waerme
  default: 1
  transition: null
  transition_time: 200
  states:
    zuhause:
      type: horizontal-stack
      view_layout:
        column: 3
      cards:
        - type: horizontal-stack
          cards:
            - type: custom:mod-card
              style:
                .: |
                  ha-card {
                    background-color: transparent;
                    border-radius: 20px;
                  }
              card:
                type: custom:button-card
                entity: input_number.gewunschte_temperatur_THERMOSTATNAME_zu_hause
                show_icon: false
                show_label: false
                tap_action:
                  action: call-service
                  service: |
                    [[[
                      if( entity.entity_id.startsWith("input_number.") )
                        return "input_number.increment";
                      if( entity.entity_id.startsWith("counter.") )
                        return "counter.increment";
                      return "";
                    ]]]
                  service_data:
                    entity_id: '[[[ return entity.entity_id ]]]'
                icon: ''
                name: +
                style:
                  .: |
                    ha-card {
                      #background-color: rgba(0,0,0,0.1);
                      box-shadow: 4px 4px 5px 1px rgba(0,0,0,0.3), inset 1px 1px 1px 0px rgba(255,255,255,0.2);
                      border-radius: 20px;
                      height: 80px;
                    }
                styles:
                  icon:
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
                  card:
                    - transform: scale(0.8, 0.8)
                    - height: 80px
                    - weight: 80px
                  name:
                    - font-size: 20px
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
        - type: horizontal-stack
          cards:
            - type: custom:mod-card
              style:
                .: |
                  ha-card {
                    background-color: transparent;
                    border-radius: 20px;

                  }
              card:
                type: custom:button-card
                entity: input_number.gewunschte_temperatur_THERMOSTATNAME_zu_hause
                show_icon: false
                show_label: false
                show_state: true
                show_name: false
                tap_action:
                  action: call-service
                  service: |
                    [[[
                      if( entity.entity_id.startsWith("input_number.") )
                        return "input_number.increment";
                      if( entity.entity_id.startsWith("counter.") )
                        return "counter.increment";
                      return "";
                    ]]]
                  service_data:
                    entity_id: '[[[ return entity.entity_id ]]]'
                icon: ''
                name: zu Hause
                units: °C
                aspect_ratio: 2/1
                style:
                  .: |
                    ha-card {
                      #background-color: rgba(0,0,0,0.1);
                      box-shadow: 4px 4px 5px 1px rgba(0,0,0,0.3), inset 1px 1px 1px 0px rgba(255,255,255,0.2);
                      #border-radius: 20px;
                      #margin-top: 10px;

                    }
                styles:
                  icon:
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
                  card:
                    - transform: scale(0.8, 0.8)
                    - height: 80px
                    - weight: 154px
                  state:
                    - font-size: 30px
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
                  name:
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
                state_display: |
                  [[[
                    return ((Math.round(Number(entity.state)))+'°');
                  ]]]
        - type: horizontal-stack
          cards:
            - type: custom:mod-card
              style:
                .: |
                  ha-card {
                    background-color: transparent;
                    border-radius: 20px;
                  }
              card:
                type: custom:button-card
                entity: input_number.gewunschte_temperatur_THERMOSTATNAME_zu_hause
                show_icon: false
                show_label: false
                tap_action:
                  action: call-service
                  service: |
                    [[[
                      if( entity.entity_id.startsWith("input_number.") )
                        return "input_number.decrement";
                      if( entity.entity_id.startsWith("counter.") )
                        return "counter.decrement";
                      return "";
                    ]]]
                  service_data:
                    entity_id: '[[[ return entity.entity_id ]]]'
                icon: ''
                name: '-'
                style:
                  .: |
                    ha-card {
                      #background-color: rgba(0,0,0,0.1);
                      box-shadow: 4px 4px 5px 1px rgba(0,0,0,0.3), inset 1px 1px 1px 0px rgba(255,255,255,0.2);
                      border-radius: 20px;
                      height: 80px;
                    }
                styles:
                  icon:
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
                  card:
                    - transform: scale(0.8, 0.8)
                  name:
                    - font-size: 20px
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
    abwesend:
      type: horizontal-stack
      view_layout:
        column: 3
      cards:
        - type: horizontal-stack
          cards:
            - type: custom:mod-card
              style:
                .: |
                  ha-card {
                    background-color: transparent;
                    border-radius: 20px;
                  }
              card:
                type: custom:button-card
                entity: input_number.gewunschte_temperatur_THERMOSTATNAME_abwesend
                show_icon: false
                show_label: false
                tap_action:
                  action: call-service
                  service: |
                    [[[
                      if( entity.entity_id.startsWith("input_number.") )
                        return "input_number.increment";
                      if( entity.entity_id.startsWith("counter.") )
                        return "counter.increment";
                      return "";
                    ]]]
                  service_data:
                    entity_id: '[[[ return entity.entity_id ]]]'
                icon: ''
                name: +
                style:
                  .: |
                    ha-card {
                      #background-color: rgba(0,0,0,0.1);
                      box-shadow: 4px 4px 5px 1px rgba(0,0,0,0.3), inset 1px 1px 1px 0px rgba(255,255,255,0.2);
                      border-radius: 20px;
                      height: 80px;
                    }
                styles:
                  icon:
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
                  card:
                    - transform: scale(0.8, 0.8)
                    - height: 80px
                    - weight: 80px
                  name:
                    - font-size: 20px
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
        - type: horizontal-stack
          cards:
            - type: custom:mod-card
              style:
                .: |
                  ha-card {
                    background-color: transparent;
                    border-radius: 20px;

                  }
              card:
                type: custom:button-card
                entity: input_number.gewunschte_temperatur_THERMOSTATNAME_abwesend
                show_icon: false
                show_label: false
                show_state: true
                show_name: false
                tap_action:
                  action: call-service
                  service: |
                    [[[
                      if( entity.entity_id.startsWith("input_number.") )
                        return "input_number.increment";
                      if( entity.entity_id.startsWith("counter.") )
                        return "counter.increment";
                      return "";
                    ]]]
                  service_data:
                    entity_id: '[[[ return entity.entity_id ]]]'
                icon: ''
                name: Abwesend
                units: °C
                aspect_ratio: 2/1
                style:
                  .: |
                    ha-card {
                      #background-color: rgba(0,0,0,0.1);
                      box-shadow: 4px 4px 5px 1px rgba(0,0,0,0.3), inset 1px 1px 1px 0px rgba(255,255,255,0.2);
                      #border-radius: 20px;
                      #margin-top: 10px;

                    }
                styles:
                  icon:
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
                  card:
                    - transform: scale(0.8, 0.8)
                    - height: 80px
                    - weight: 154px
                  state:
                    - font-size: 30px
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
                  name:
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
                state_display: |
                  [[[
                    return ((Math.round(Number(entity.state)))+'°');
                  ]]]
        - type: horizontal-stack
          cards:
            - type: custom:mod-card
              style:
                .: |
                  ha-card {
                    background-color: transparent;
                    border-radius: 20px;
                  }
              card:
                type: custom:button-card
                entity: input_number.gewunschte_temperatur_THERMOSTATNAME_abwesend
                show_icon: false
                show_label: false
                tap_action:
                  action: call-service
                  service: |
                    [[[
                      if( entity.entity_id.startsWith("input_number.") )
                        return "input_number.decrement";
                      if( entity.entity_id.startsWith("counter.") )
                        return "counter.decrement";
                      return "";
                    ]]]
                  service_data:
                    entity_id: '[[[ return entity.entity_id ]]]'
                icon: ''
                name: '-'
                style:
                  .: |
                    ha-card {
                      #background-color: rgba(0,0,0,0.1);
                      box-shadow: 4px 4px 5px 1px rgba(0,0,0,0.3), inset 1px 1px 1px 0px rgba(255,255,255,0.2);
                      border-radius: 20px;
                      height: 80px;
                    }
                styles:
                  icon:
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
                  card:
                    - transform: scale(0.8, 0.8)
                  name:
                    - font-size: 20px
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
    nacht:
      type: horizontal-stack
      view_layout:
        column: 3
      cards:
        - type: horizontal-stack
          cards:
            - type: custom:mod-card
              style:
                .: |
                  ha-card {
                    background-color: transparent;
                    border-radius: 20px;
                  }
              card:
                type: custom:button-card
                entity: input_number.gewunschte_temperatur_THERMOSTATNAME_nacht
                show_icon: false
                show_label: false
                tap_action:
                  action: call-service
                  service: |
                    [[[
                      if( entity.entity_id.startsWith("input_number.") )
                        return "input_number.increment";
                      if( entity.entity_id.startsWith("counter.") )
                        return "counter.increment";
                      return "";
                    ]]]
                  service_data:
                    entity_id: '[[[ return entity.entity_id ]]]'
                icon: ''
                name: +
                style:
                  .: |
                    ha-card {
                      #background-color: rgba(0,0,0,0.1);
                      box-shadow: 4px 4px 5px 1px rgba(0,0,0,0.3), inset 1px 1px 1px 0px rgba(255,255,255,0.2);
                      border-radius: 20px;
                      height: 80px;
                    }
                styles:
                  icon:
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
                  card:
                    - transform: scale(0.8, 0.8)
                    - height: 80px
                    - weight: 80px
                  name:
                    - font-size: 20px
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
        - type: horizontal-stack
          cards:
            - type: custom:mod-card
              style:
                .: |
                  ha-card {
                    background-color: transparent;
                    border-radius: 20px;

                  }
              card:
                type: custom:button-card
                entity: input_number.gewunschte_temperatur_THERMOSTATNAME_nacht
                show_icon: false
                show_label: false
                show_state: true
                show_name: false
                tap_action:
                  action: call-service
                  service: |
                    [[[
                      if( entity.entity_id.startsWith("input_number.") )
                        return "input_number.increment";
                      if( entity.entity_id.startsWith("counter.") )
                        return "counter.increment";
                      return "";
                    ]]]
                  service_data:
                    entity_id: '[[[ return entity.entity_id ]]]'
                icon: ''
                name: Nacht
                units: °C
                aspect_ratio: 2/1
                style:
                  .: |
                    ha-card {
                      #background-color: rgba(0,0,0,0.1);
                      box-shadow: 4px 4px 5px 1px rgba(0,0,0,0.3), inset 1px 1px 1px 0px rgba(255,255,255,0.2);
                      #border-radius: 20px;
                      #margin-top: 10px;

                    }
                styles:
                  icon:
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
                  card:
                    - transform: scale(0.8, 0.8)
                    - height: 80px
                    - weight: 154px
                  state:
                    - font-size: 30px
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
                  name:
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
                state_display: |
                  [[[
                    return ((Math.round(Number(entity.state)))+'°');
                  ]]]
        - type: horizontal-stack
          cards:
            - type: custom:mod-card
              style:
                .: |
                  ha-card {
                    background-color: transparent;
                    border-radius: 20px;
                  }
              card:
                type: custom:button-card
                entity: input_number.gewunschte_temperatur_TEMP_nacht
                show_icon: false
                show_label: false
                tap_action:
                  action: call-service
                  service: |
                    [[[
                      if( entity.entity_id.startsWith("input_number.") )
                        return "input_number.decrement";
                      if( entity.entity_id.startsWith("counter.") )
                        return "counter.decrement";
                      return "";
                    ]]]
                  service_data:
                    entity_id: '[[[ return entity.entity_id ]]]'
                icon: ''
                name: '-'
                style:
                  .: |
                    ha-card {
                      #background-color: rgba(0,0,0,0.1);
                      box-shadow: 4px 4px 5px 1px rgba(0,0,0,0.3), inset 1px 1px 1px 0px rgba(255,255,255,0.2);
                      border-radius: 20px;
                      height: 80px;
                    }
                styles:
                  icon:
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))
                  card:
                    - transform: scale(0.8, 0.8)
                  name:
                    - font-size: 20px
                    - filter: drop-shadow(3px 5px 2px rgb(0 0 0 / 0.4))

Wenn wir jetzt zwischen den Menüpunkten wechseln, wechselt sich auch automatisch die „Ansicht“ der Karte.

Der mittelere Button zeigt uns, welcher Menüpunkt gerade ausgewählt ist.

Mit den beiden äußeren Buttons können wir die Temperatur anpassen.

Hierfür habe ich pro Menü-Punkt eine Automation erstellt, die eigentlich nichts anderes macht, als den Wert vom imput_number als service: climate.set_temperature setzt.

Dies könnte man sich auch sparen und service: climate.set_temperature direkt mit in den Button einpflanzen. Da es aber user gibt, die ihre Thermostate **nicht** über den service: climate.set_temperature steuern können, müsste die Automatisierung an dieser Stelle angepasst werden.

Aus diesem Grund habe ich mich hier auch auf diesen Weg konzentriert.

Unsere Automatisierung sieht dann folgendermaßen aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
alias: sollwert_temperatur_RAUMNAME_zuhause
description: ""
trigger:
  - platform: state
    entity_id:
      - input_number.gewunschte_temperatur_THERMOSTATNAME_zu_hause
condition: []
action:
  - service: climate.set_temperature
    data_template:
      entity_id: climate.DEINETHERMOSTATENTITÄT
      temperature: &gt;-
        {{ states('input_number.
gewunschte_temperatur_THERMOSTATNAME_zu_hause
') | float
        }}
mode: single

Diese Automatisierung benötigen wir nun auch 3 mal.

alias: sollwert_temperatur_RAUMNAME_zuhause
alias: sollwert_temperatur_RAUMNAME_abwesend
alias: sollwert_temperatur_RAUMNAME_nacht

Als nächtes setzen wir uns erneut eine weitere Platzhalter-Karte:

1
2
3
4
type: custom:gap-card
view_layout:
  column: 2
height: 45

Damit haben wir den ersten Block unserer Temperatur-Steuerung fertig.

Damit wir nun nicht wieder alles von vorne anfangen müssen, können wir uns nun jede einzelne Karte aus der Spalte einmal „duplizieren“.

Das einzige was wir anpassen müssen, ist die Position in „column“ und die jeweiligen HELPER input_boolean.waerme_RAUMNAME_an_und_aus und input_number.gewunschte_temperatur_THERMOSTATNAME_zu_hause (+ abwesend ++ nacht)

Das ganze machen wir insgesamt für 3 Spalten und et viola wir können 4 Thermostate abbilden.

Wenn wir das ganze jetzt nochmal exakt so duplizieren. Also Karte für Karte und das Spalte in Spalte, jedoch die colums **NICHT** verändern, sondern lediglich unsere Helper und Entitäten anpassen, dann rutschen diese duplizierten Karten automatisch an die nächst freie Position unserer jeweiligen Spalte.

Dafür haben wir auch unsere letzte Platzhalter-Karte erstellt, damit wir zwangsläufig einen schönen Abstand schaffen.

Am Ende sollte das ganze dann so aussehen:

Ich hoffe diese Karte bringt euch genauso viel Inspiration, wie sie mir gebracht hat, als ich sie auf https://community.home-assistant.io gefunden habe! Ich bin gespannt, ob ihr diese vielleicht noch mit anderen Funktionen / Karten erweitert?!

Kommt gerne in den Discord und zeigt was ihr daraus gemacht habt!

Da dieses Dashboard für ein dunkles Theme erstellt wurde, sah es bei einem hellen Theme nicht unbedingt gut aus… Aus diesem Grund habe ich alle Stellen im Code auskommentiert.

Außerdem habe ich „show_name“ auf false gesetzt. Das macht die Anzeige der Temperatur etwas größer und somit angenehmer zu lesen. Ursprünglich war gedacht sich hier den Namen anzeigen zu lassen, damit man sehen kann in welcher Menüoption (zuhause, abwesend, nacht) man sich befindet. Aber dies erkennen wir auch schön im Menü selbst durch den farblich hinterlegten Button.

Heizung – Dashboard für Thermostate auf dem Tablet

📦 Empfohlene Gadgets

Passende smartswitch-Produkte

Artikel teilen

Heizung &#8211; Dashboard für Thermostate auf dem Tablet

📦 Empfohlene Gadgets

Passende smartswitch-Produkte

Artikel teilen

Heizung – Dashboard für Thermostate auf dem Tablet