View difference between Paste ID: jR2TXE9b and CRF4bis3
SHOW: | | - or go back to the newest paste.
1
            ### Aircon ###
2
              - type: vertical-stack
3
                cards:
4
5
                  - type: "custom:button-card"
6
                    template: mv_section_labels
7
                    name: Aircon
8
9
                  - type: custom:stack-in-card
10
                    mode: vertical
11
                    cards: 
12
                    - type: horizontal-stack
13
                      cards:
14
15
                      - type: custom:button-card 
16
                        entity: switch.aircon
17
                        template: aircon_setting
18
                        style:
19
                           padding-top: 5%
20
                           padding-bottom: -5%
21
22
                      - type: custom:stack-in-card
23
                        mode: vertical
24
                        cards: 
25
         
26
                            - type: 'custom:button-card'
27
                              template: temp_sensor_inside
28
                              entity: sensor.launceston_current_temp
29
                 
30
                    - type: horizontal-stack
31
                      cards:
32
                          - type: vertical-stack
33
                            cards:
34
                              - type: 'custom:button-card'
35
                                template: ac_mode_set_up
36
                                entity: input_select.aircon_speed
37
                                icon: mdi:plus-circle
38
                                name: Speed
39
                                styles:
40
                                  icon: 
41
                                    - color: var(--primary-button-colour)
42
43
                              - type: 'custom:button-card'
44
                                template: ac_mode_set_down
45
                                entity: input_select.aircon_speed
46
                                icon: mdi:minus-circle
47
                                styles:
48
                                  icon: 
49
                                    - color: var(--primary-button-colour)
50
51
                          - type: vertical-stack
52
                            cards:
53
                              - type: 'custom:button-card'
54
                                template: ac_mode_set_up
55
                                entity: input_select.aircon_temp_cool
56
                                icon: mdi:thermometer-chevron-up
57
                                name: Cool
58
                                styles:
59
                                  icon: 
60
                                    - color: var(--primary-button-colour)
61
                                state:
62
                                  - value: >
63
                                      [[[
64
                                        return (states['input_select.aircon_mode'].state === 'Cool');
65
                                      ]]]
66
                                    operator: template
67
                                    color: var(--low-colour)
68
69
                              - type: 'custom:button-card'
70
                                template: ac_mode_set_down
71
                                entity: input_select.aircon_temp_cool
72
                                icon: mdi:thermometer-chevron-down
73
                                name: Cool
74
                                styles:
75
                                  icon: 
76
                                    - color: var(--primary-button-colour)
77
                                state:
78
                                  - value: >
79
                                      [[[
80
                                        return (states['input_select.aircon_mode'].state === 'Cool');
81
                                      ]]]
82
                                    operator: template
83
                                    color: var(--low-colour)
84
85
                          - type: vertical-stack
86
                            cards:
87
                              - type: 'custom:button-card'
88
                                template: ac_mode_set_up
89
                                entity: input_select.aircon_temp_heat
90
                                icon: mdi:thermometer-chevron-up
91
                                styles:
92
                                  icon: 
93
                                    - color: var(--primary-button-colour)
94
                                name: Heat
95
                                state:
96
                                  - value: >
97
                                      [[[
98
                                        return (states['input_select.aircon_mode'].state === 'Heat');
99
                                      ]]]
100
                                    operator: template
101
                                    color: var(--high-colour)
102
103
                              - type: 'custom:button-card'
104
                                template: ac_mode_set_down
105
                                entity: input_select.aircon_temp_heat
106
                                icon: mdi:thermometer-chevron-down
107
                                styles:
108
                                  icon: 
109
                                    - color: var(--primary-button-colour)
110
                                state:
111
                                  - value: >
112
                                      [[[
113
                                        return (states['input_select.aircon_mode'].state === 'Heat');
114
                                      ]]]
115
                                    operator: template
116
                                    color: var(--high-colour)
117
118
119
button_card_templates:  
120
##########  
121
  haptic:
122
    tap_action:
123
      haptic: light
124
      action: more-info
125
    hold_action:
126
      haptic: success
127
      action: more-info
128
    double_tap_action:
129
      haptic: success
130
      action: more-info
131
    state:
132
      - value: Unknown 
133
        icon: 'mdi:help'
134
        color: black
135
    style: |
136
        ha-card {
137
          box-shadow: none;
138
        }
139
##########          
140
  mv_section_labels:
141
    name: Label
142
    color_type: label-card
143
    color: var(primary-background-color)
144
    styles:
145
      card:
146
        - height: 10px
147
        - background-color: var(paper-card-background-color)
148
        - border-radius: 2%
149
        - color: auto
150
      name:
151
        - font-weight: bold
152
        - font-size: 20px
153
        - color: var(primary-text-color)
154
        - align-self: middle
155
        - justify-self: middle
156
##########  
157
  aircon_setting:
158
    template: haptic
159
    styles:
160
      card:
161
        - font-weight: bold
162
        - font-size: 13px
163
        - color: var(primary-text-color)
164
        - align-self: start
165
        - justify-self: start
166
        - padding-bottom: 0px
167
        - text-shadow: 0px 0px 5px black
168
        - text-transform: capitalize
169
        - color: auto
170
      icon:
171
        - width: 68%
172
        - margin-top: 5%
173
      grid:
174
        - grid-template-areas: '"i" "n"'  
175
        - grid-template-columns: 1fr
176
        - grid-template-rows: 2fr min-content
177
      name:
178
        - font-weight: bold
179
        - font-size: 14px
180
        - color: var(primary-text-color)
181
        - align-self: middle
182
        - justify-self: middle
183
        - padding-bottom: 0px
184
    show_name: true
185
    show_label: false
186
    show_state: false
187
    name: >
188
     [[[
189
        var onoff = states['switch.aircon'].state;
190
        var mode = states['input_select.aircon_mode'].state;
191
        var speed = states['input_select.aircon_speed'].state;
192
        if (speed == '1') var speed = '⪦1⪧'; if (speed == '2') var speed = '⪦2⪧';
193
        if (speed == '3') var speed = '⪦3⪧'; if (speed == '4') var speed = '⪦4⪧';
194
        if (speed == '5') var speed = '⪦5⪧'; if (speed == '0') var speed = '⪦0⪧';
195
        var ctemp = states['input_select.aircon_temp_cool'].state;
196
        var htemp = states['input_select.aircon_temp_heat'].state;
197
        if (mode == 'Cool') var temp = ctemp; else  var temp = htemp;
198
        if (mode == 'Fan') return (speed + "    "); 
199
        else return (speed + " " + temp + "ºc ");
200
      ]]]
201
    show_icon: true
202
    icon: >
203
      [[[
204
        var ac = states['switch.aircon'].state;
205
        var acmode = states['input_select.aircon_mode'].state;
206
        if (acmode === 'Fan') return 'mdi:fan';
207
        if (acmode === 'Cool') return 'mdi:snowflake';
208
        if (acmode === 'Heat') return 'mdi:white-balance-sunny'
209
      ]]]
210
    state:
211
      - value: >
212
          [[[
213
            return (states['switch.aircon'].state === 'off');
214
          ]]]
215
        operator: template
216
        color: var(--primary-button-colour)
217
      - value: >
218
          [[[
219
            return (states['input_select.aircon_mode'].state === 'Heat');
220
          ]]]
221
        operator: template
222
        color: var(--high-colour)
223
      - value: >
224
          [[[
225
            return (states['input_select.aircon_mode'].state === 'Cool');
226
          ]]]
227
        operator: template
228
        color: var(--low-colour)
229
      - value: >
230
          [[[
231
            return (states['input_select.aircon_mode'].state === 'Fan');
232
          ]]]
233
        operator: template
234
        color: var(--mid-colour)
235
    double_tap_action:
236
      action: call-service
237
      service: switch.turn_off
238
      service_data:
239
        entity_id: switch.aircon
240
    tap_action:
241
      action: call-service
242
      service: input_boolean.turn_on
243
      service_data:
244
        entity_id: input_boolean.aircon_change_settings
245
    hold_action:
246
       action: call-service
247
       service: input_select.select_next
248
       service_data:
249
        entity_id: input_select.aircon_mode
250
###########
251
  aircon_mode_set:
252
    template: haptic
253
    size: 40%
254
    show_state: false
255
    styles:
256
      card:
257
        - font-size: 10px
258
      name:
259
        - font-size: 10px
260
        - color: var(primary-text-color)
261
##########  
262
  ac_mode_set_down:
263
    show_name: false
264
    template: aircon_mode_set
265
    styles:
266
      card: 
267
        - margin-bottom: 5%
268
      icon: 
269
        - margin-bottom: 5%
270
    tap_action:
271
      action: call-service
272
      service: input_select.select_previous
273
      service_data:
274
        entity_id: entity
275
    double_tap_action:
276
      action: call-service
277
      service: input_select.select_next
278
      service_data:
279
        entity_id: entity
280
    hold_action:
281
      action: more-info  
282
##########  
283
  ac_mode_set_up:
284
    show_name: true
285
    template: aircon_mode_set
286
    styles:
287
      name:
288
        - font-weight: bold
289
        - font-size: 11px
290
        - color: var(primary-text-color)
291
        - align-self: end
292
        - justify-self: middle
293
        - margin-top: 5%
294
    tap_action:
295
      action: call-service
296
      service: input_select.select_next
297
      service_data:
298
        entity_id: entity
299
    double_tap_action:
300
      action: call-service
301
      service: input_select.select_previous
302
      service_data:
303
        entity_id: entity
304
    hold_action:
305
      action: more-info  
306
##########  
307
  temp_sensor_inside:
308
    template: tap_info_2
309
    show_name: false
310
    show_state: false
311
    show_icon: false
312
    tap_action:
313
      action: more-info
314
    size: 60%
315
    styles:   
316
      grid:
317
        - grid-template-areas: '"graph"'  
318
        - grid-template-columns: 1fr
319
        - grid-template-rows: 1fr
320
      custom_fields:
321
      card:
322
        # - transform: scale(.8)
323
        - align-self: end
324
        - justify-self: end
325
        - font-size: 11px
326
        - text-shadow: 0px 0px 5px black
327
    custom_fields:
328
     graph:
329
        card:
330
          type: 'custom:flex-horseshoe-card'
331
          entities:
332
            - entity: sensor.launceston_current_temp
333
              decimals: 1
334
              units: 'ºc'
335
              name: Current
336
            - entity: sensor.launceston_max_temp
337
              decimals: 1
338
              name: Max
339
              units: 'ºc'
340
            - entity: sensor.dark_sky_summary
341
              icon: >
342
               [[[
343
                 return states['sensor.dark_sky_icon_mdi'.state]
344
               ]]]
345
              name: 'Climate'
346
            - entity: sensor.dark_sky_humidity
347
              decimals: 0
348
              units: '%'
349
              name: Current
350
            - entity: sensor.launceston_min_temp
351
              decimals: 0
352
              units: 'ºc'
353
              name: Min
354
          show:
355
            scale_tickmarks: false
356
            horseshoe_style: 'lineargradient'
357
          layout:
358
            hlines:
359
              - id: 0
360
                xpos: 50
361
                ypos: 38
362
                length: 40
363
                styles:
364
                  - stroke: var(--primary-text-color);
365
                  - stroke-width: 5;
366
                  - opacity: 0.9;
367
                  - stroke-linecap: round;
368
                color: '#FFF6E3'
369
            vlines:
370
              - id: 0
371
                xpos: 50
372
                ypos: 56
373
                length: 25
374
                styles:
375
                  - stroke: var(--primary-text-color);
376
                  - opacity: 0.5;
377
                  - stroke-width: 2;
378
                  - stroke-linecap: round;
379
            states:
380
              - id: 0
381
                entity_index: 2 #dark_sky_summary
382
                xpos: 50
383
                ypos: 30
384
                styles:
385
                  - font-size: 2em;
386
                  - opacity: 0.9;
387
              - id: 1
388
                entity_index: 0  # temp_lounge
389
                xpos: 46
390
                ypos: 54
391
                styles:
392
                  - font-size: 2em;
393
                  - text-anchor: end;
394
              - id: 2
395
                entity_index: 1  #launceston_current_temp
396
                xpos: 54
397
                ypos: 54
398
                styles:
399
                  - font-size: 2em;
400
                  - text-anchor: start;
401
              - id: 3
402
                entity_index: 3  # hm_lounge
403
                xpos: 46
404
                ypos: 80
405
                styles:
406
                  - font-size: 2em;
407
                  - text-anchor: end;
408
              - id: 4
409
                entity_index: 4  #dark_sky_humidity
410
                xpos: 54
411
                ypos: 80
412
                styles:
413
                  - font-size: 2em;
414
                  - text-anchor: start;
415
            names:
416
              # - id: 0
417
              #   entity_index: 1
418
              #   xpos: 50
419
              #   ypos: 100
420
              #   styles:
421
              #     - font-size: 2em;
422
              - id: 1
423
                entity_index: 0
424
                xpos: 46
425
                ypos: 64
426
                styles:
427
                  - font-size: 1em;
428
                  - text-anchor: end;
429
                  - opacity: 0.7;
430
              - id: 2
431
                entity_index: 1
432
                xpos: 56
433
                ypos: 61
434
                styles:
435
                  - font-size: 0.8em;
436
                  - text-anchor: start;
437
                  - opacity: 0.7;
438
              - id: 3
439
                entity_index: 4
440
                xpos: 56
441
                ypos: 69
442
                styles:
443
                  - font-size: 0.8em;
444
                  - text-anchor: start;
445
                  - opacity: 0.7;
446
          horseshoe_scale:
447
            min: -10
448
            max: 45
449
            color: 'var(--primary-background-color)'
450
            width: 6
451
          color_stops:
452
            -10: var(--low-colour)
453
            # 0: var(--low-colour)
454
            # 14: var(--low-colour)
455
            # 25: var(--mid-colour)
456
            # 26: var(--high-colour)
457
            45: var(--high-colour)