Eine der mächtigsten Karten in Home Assistant ist eindeutig die custom:button-card!
In diesem Wiki zeigen wir die gängigsten Beispiele.
- Schaltfläche
- Schaltfläche – Icon und Rahmen in Entitätsfarbe
- Schaltfläche – rotierendes Icon
- Schaltfläche – eigenes Icon
- Schaltfläche – show_state & change-color
- Schaltfläche – grid-layout
- Schaltfläche – grid-layout v2
- Schaltfläche – grid-layout v3
- Schaltfläche – state in Karte anzeigen
- Schaltfläche – mehrere Aktionen mit einer tap_action ausführen
- Schaltfläche – vertical stacks mit Buttons
- Schaltfläche – Aspect Ratio
- Schaltfläche – Navigation
- Schaltfläche – Temperatur-Karte mit custom-fields
- Schaltfläche – custom:auto-entities und button-card == was ist an?
- Schaltfläche – Bewegungssensoren
- Schaltfläche – Verbrauchsanzeige / change color
- Schaltfläche – nächster Sonnenstand
- Schaltfläche – Anzahl eingeschalteter Lampen
- Schaltfläche – Button ohne action
- Schaltfläche – Mouseover
- Schaltfläche – mehrere Zeilen im Namen verwenden
- Schaltfläche – Attribute auslesen
- Schaltfläche – Attribute für Cover Card
- Schaltfläche – Motion Sensor | Bewegungsmelder
- Climate-Card
Schaltfläche
Shopping-Empfehlungen
Passende smartswitch-Produkte
Weitere empfohlene Produkte für dein Smart Home
Lädt Produkte... (smartswitch → zigbee → sensor → automation)
configuration.yaml
1type: custom:button-card
2entity: switch.virtual_switch_1
3name: Wiki Steckdose
4size: 100%
5icon: mdi:power-plug
Schaltfläche – Icon und Rahmen in Entitätsfarbe
configuration.yaml
1type: custom:button-card
2entity: light.virtual_light_1
3name: WIKI LED
4size: 100%
5state:
6 - value: 'on'
7 styles:
8 icon:
9 - color: var(--button-card-light-color)
10styles:
11 card:
12 - box-shadow: 0px 0px 10px 1px var(--button-card-light-color)
13tap_action:
14 action: toggle
15hold_action:
16 action: more-info
Schaltfläche – rotierendes Icon
configuration.yaml
1type: custom:button-card
2entity: switch.virtual_switch_1
3name: WIKI Lüfter
4size: 100%
5icon: mdi:fan
6state:
7 - value: 'on'
8 styles:
9 icon:
10 - animation:
11 - rotating 1s linear infinite
12tap_action:
13 action: toggle
14hold_action:
15 action: more-info
Schaltfläche – eigenes Icon
configuration.yaml
1type: custom:button-card
2entity: switch.virtual_switch_1
3name: WIKI Lampe
4show_entity_picture: true
5size: 100%
6state:
7 - value: 'on'
8 entity_picture: /local/images/shys_on.png
9 - value: 'off'
10 entity_picture: /local/images/shys_aus.png
11styles:
12 card:
13 - font: 18px
14 - box-shadow: 0px 0px 10px 1px var(--button-card-light-color)
15tap_action:
16 action: toggle
Schaltfläche – show_state & change-color
configuration.yaml
1type: custom:button-card
2entity: binary_sensor.virtual_binary_sensor_door
3name: WIKI TÜR
4aspect_ratio: 1/1
5show_state: true
6state:
7 - value: 'on'
8 styles:
9 icon:
10 - color: red
11 - value: 'off'
12 styles:
13 icon:
14 - color: var(--button-card-light-color)
Schaltfläche – grid-layout
configuration.yaml
1type: custom:button-card
2name: WIKI Licht
3icon: mdi:ceiling-light
4entity: light.virtual_light_1
5color: auto
6size: 30%
7show_state: true
8show_label: true
9tap_action:
10 action: toggle
11hold_action:
12 action: more-info
13styles:
14 card:
15 - border-radius: 12px
16 - width: 105px
17 - height: 105px
18 grid:
19 - grid-template-areas: '"i" "n" "s" "l"'
20 - grid-template-columns: 1fr
21 - grid-template-rows: 1fr min-content min-content
22state:
23 - value: 'on'
24 styles:
25 name:
26 - color: white
27 state:
28 - color: gray
29 - value: 'off'
30 style:
31 - opacity: 0.4
32 styles:
33 icon:
34 - color: gray
35 name:
36 - color: gray
37 state:
38 - color: gray
39 - value: unavailable
40 style:
41 - opacity: 0.2
42 - color: red
Schaltfläche – grid-layout v2
configuration.yaml
1type: custom:button-card
2name: WIKI Licht
3icon: mdi:ceiling-light
4entity: light.virtual_light_1
5color: auto
6size: 30%
7show_state: true
8show_label: true
9tap_action:
10 action: toggle
11 haptic: light
12hold_action:
13 action: more-info
14 haptic: success
15styles:
16 card:
17 - border-radius: 12px
18 - width: 105px
19 - height: 105px
20 label:
21 - color: gray
22 - font-size: 11px
23 - font-family: Helvetica
24 - padding: 0px 10px
25 - justify-self: start
26 state:
27 - font-size: 11px
28 - padding: 0px 10px
29 - justify-self: start
30 - text-transform: capitalize
31 - font-weight: bold
32 - padding-left: 10px
33 grid:
34 - grid-template-areas: '"i" "n" "s" "l"'
35 - grid-template-columns: 1fr
36 - grid-template-rows: 1fr min-content min-content
37 img_cell:
38 - align-self: center
39 - text-align: start
40 - margin-left: 10px
41 name:
42 - justify-self: start
43 - padding-left: 10px
44 - font-weight: bold
45 - font-family: Helvetica
46 - font-size: 13px
47state:
48 - value: 'on'
49 styles:
50 name:
51 - color: white
52 state:
53 - color: gray
54 - value: 'off'
55 style:
56 - opacity: 0.4
57 styles:
58 icon:
59 - color: gray
60 name:
61 - color: gray
62 state:
63 - color: gray
64 - value: unavailable
65 style:
66 - opacity: 0.2
67 - color: red
Schaltfläche – grid-layout v3
configuration.yaml
1type: custom:button-card
2name: WIKI Licht
3icon: mdi:ceiling-light
4entity: light.virtual_light_1
5color: auto
6size: 50%
7show_state: true
8show_label: true
9tap_action:
10 action: toggle
11hold_action:
12 action: more-info
13styles:
14 card:
15 - border-radius: 12px
16 - width: 105px
17 - height: 105px
18 - background-color: white
19 label:
20 - color: gray
21 - font-size: 11px
22 - font-family: Helvetica
23 - padding: 0px 10px
24 - justify-self: start
25 state:
26 - font-size: 11px
27 - padding: 0px 10px
28 - justify-self: start
29 - text-transform: capitalize
30 - font-weight: bold
31 - padding-left: 10px
32 grid:
33 - grid-template-areas: '"i" "n" "s" "l"'
34 - grid-template-columns: 1fr
35 - grid-template-rows: 1fr min-content min-content
36 img_cell:
37 - align-self: center
38 - text-align: start
39 - margin-left: 10px
40 name:
41 - justify-self: start
42 - padding-left: 10px
43 - font-weight: bold
44 - font-family: Helvetica
45 - font-size: 13px
46state:
47 - value: 'on'
48 styles:
49 name:
50 - color: black
51 state:
52 - color: gray
53 - value: 'off'
54 style:
55 - opacity: 0.4
56 styles:
57 icon:
58 - color: gray
59 name:
60 - color: gray
61 state:
62 - color: gray
63 - value: unavailable
64 style:
65 - opacity: 0.2
66 - color: red
Schaltfläche – state in Karte anzeigen
configuration.yaml
1type: custom:button-card
2name: '[[[ return `Küche - ${states[''sensor.virtual_temperature_1''].state}°` ]]]'
Schaltfläche – mehrere Aktionen mit einer tap_action ausführen
configuration.yaml
1type: custom:button-card
2tap_action:
3 action: nothing
4 multi_calls: |
5 [[[
6 hass.callService(
7 "light",
8 "toggle",
9 { entity_id: "light.virtual_light_1" }
10 );
11 hass.callService(
12 "switch",
13 "toggle",
14 { entity_id: "switch.virtual_switch_1" }
15 );
16 ]]]
17
18icon: mdi:toggle-switch-outline
19name: Toggle
Schaltfläche – current state | operator
configuration.yaml
1type: custom:button-card
2entity: sensor.virtual_temperature_1
3name: WIKI TEMP
4show_state: true
5show_units: true
6styles:
7 card:
8 - filter: opacity (70%)
9 - height: 100px
10 name:
11 - font-size: 12px
12 - color: white
13state:
14 - value: 27
15 operator: '<='
16 styles:
17 card:
18 - background-color: red
19 - filter: opacity (100%)
20 - height: 100px
21 - animation: blink 2s ease innfinite
22 icon:
23 - color: yellow
24 name:
25 - color: yellow
26type: custom:button-card
27entity: sensor.virtual_temperature_1
28name: WIKI TEMP
29show_state: true
30show_units: true
31styles:
32 card:
33 - filter: opacity (70%)
34 - height: 100px
35 name:
36 - font-size: 12px
37 - color: white
38state:
39 - value: 27
40 operator: '<='
41 styles:
42 card:
43 - background-color: red
44 - filter: opacity (100%)
45 - height: 100px
46 - animation: blink 2s ease innfinite
47 icon:
48 - color: yellow
49 name:
50 - color: yellow
operator für state
| Operator | value | Beschreibung |
|---|---|---|
| < | 5 | Aktueller Zustand ist unterwertig |
<= | 4 | Aktueller Zustand ist unter- oder gleichwertig |
| == | 42 oder ‚on‘ | Dies ist die Standardeinstellung, wenn kein Operator angegeben ist. Der aktuelle Zustand ist gleich (== Javascript) dem Wert |
| >= | 32 | Der aktuelle Zustand ist höher oder gleich dem Wert |
| > | 12 | Der aktuelle Zustand ist dem Wert überlegen |
| != | ’normal‘ | Aktueller Zustand ist nicht gleich (!= Javascript) Wert |
| regex | ‚^norm.*$‘ | Der auf den aktuellen Zustand angewendete Wert-Regex stimmt überein |
| template | value muss ein Javascript-Ausdruck sein, der einen booleschen Wert zurückgibt. Wenn der boolesche Wert wahr ist, stimmt er mit diesem Zustand überein | |
| normal | N/A | Wenn nichts passt, wird dies verwendet |
Schaltfläche – vertical stacks mit Buttons
configuration.yaml
1type: vertical-stack
2cards:
3 - type: custom:button-card
4 color_type: label-card
5 color: rgb(44, 109, 214)
6 name: Spots
7 - type: horizontal-stack
8 cards:
9 - type: horizontal-stack
10 cards:
11 - type: custom:button-card
12 entity: switch.virtual_switch_1
13 icon: mdi:spotlight
14 show_name: false
15 show_label: true
16 label: 1
17 layout: custom
18 styles:
19 grid:
20 - display: flex
21 - position: relative
22 label:
23 - position: absolute
24 - left: 0
25 - right: 0
26 - top: 0
27 - bottom: 0
28 - text-align: right
29 - padding: 0px 5px
30 img_cell:
31 - align-items: center
32 - justify-content: center
33 - type: custom:button-card
34 entity: switch.virtual_switch_1
35 icon: mdi:spotlight
36 show_name: false
37 show_label: true
38 label: 2
39 layout: custom
40 styles:
41 grid:
42 - display: flex
43 - position: relative
44 label:
45 - position: absolute
46 - left: 0
47 - right: 0
48 - top: 0
49 - bottom: 0
50 - text-align: right
51 - padding: 0px 5px
52 img_cell:
53 - align-items: center
54 - justify-content: center
55 - type: custom:button-card
56 entity: switch.virtual_switch_1
57 icon: mdi:spotlight
58 show_name: false
59 show_label: true
60 label: 3
61 layout: custom
62 styles:
63 grid:
64 - display: flex
65 - position: relative
66 label:
67 - position: absolute
68 - left: 0
69 - right: 0
70 - top: 0
71 - bottom: 0
72 - text-align: right
73 - padding: 0px 5px
74 img_cell:
75 - align-items: center
76 - justify-content: center
77 - type: custom:button-card
78 entity: switch.virtual_switch_1
79 icon: mdi:spotlight
80 show_name: false
81 show_label: true
82 label: 4
83 layout: custom
84 styles:
85 grid:
86 - display: flex
87 - position: relative
88 label:
89 - position: absolute
90 - left: 0
91 - right: 0
92 - top: 0
93 - bottom: 0
94 - text-align: right
95 - padding: 0px 5px
96 img_cell:
97 - align-items: center
98 - justify-content: center
Schaltfläche – Aspect Ratio
configuration.yaml
1type: vertical-stack
2cards:
3 - type: horizontal-stack
4 cards:
5 - type: custom:button-card
6 name: 1/1
7 icon: mdi:lightbulb
8 aspect_ratio: 1/1
9 - type: custom:button-card
10 name: 2/1
11 icon: mdi:lightbulb
12 aspect_ratio: 2/1
13 - type: custom:button-card
14 name: 3/1
15 icon: mdi:lightbulb
16 aspect_ratio: 3/1
17 - type: custom:button-card
18 name: 4/1
19 icon: mdi:lightbulb
20 aspect_ratio: 4/1
21 - type: horizontal-stack
22 cards:
23 - type: custom:button-card
24 name: 1/1.2
25 icon: mdi:lightbulb
26 aspect_ratio: 1/1.2
27 - type: custom:button-card
28 name: 1/1.3
29 icon: mdi:lightbulb
30 aspect_ratio: 1/1.3
31 - type: custom:button-card
32 name: 1/1.4
33 icon: mdi:lightbulb
34 aspect_ratio: 1/1.4
35 - type: custom:button-card
36 name: 1/1.5
37 icon: mdi:lightbulb
38 aspect_ratio: 1/1.5
Schaltfläche – Navigation
configuration.yaml
1name: Erdgeschoss
2tap_action:
3 action: navigate
4 navigation_path: /lovelace/eg
5type: custom:button-card
Schaltfläche – Temperatur-Karte mit custom-fields
configuration.yaml
1type: custom:button-card
2aspect_ratio: 1/1
3icon: phu:wiser-thermostat-on
4entity: sensor.wz_temp
5name: Flur
6show_state: false
7custom_fields:
8 graph:
9 card:
10 type: custom:mini-graph-card
11 entities:
12 - sensor.wz_temp
13 show:
14 icon: false
15 name: false
16 state: false
17 animate: true
18 fill: false
19 line_width: 5
20 color_thresholds:
21 - value: 20
22 color: '#f39c12'
23 - value: 21
24 color: '#d35400'
25 - value: 21.5
26 color: '#c0392b'
27 style: |
28 ha-card {
29 background: rgb(36, 46, 66);
30 border-radius: 10px;
31 padding: 12%;
32 color: ivory;
33 opacity: 0.7;
34 font-size: 10px;
35 text-shadow: 0px 0px 5px black;
36 text-transform: capitalize;
37 font-weight: bold;
38 box-shadow: none;
39 overflow: hidden;
40 position: relative;
41 overflow: hidden;
42 }
43 [style*="--aspect-ratio"] > :first-child {
44 position: absolute;
45 top: 0;
46 left: 0;
47 height: 100%;
48 }
49 :element {
50 --aspect-ratio: 1/1;
51 }
52 temp: |
53 [[[
54 return `<ha-icon
55 icon="mdi:thermometer:"
56 style="width:20px;color:var(--accent-color);">
57 </ha-icon><span>${Math.round(entity.state)}°C</span>`
58 ]]]
59styles:
60 custom_fields:
61 graph:
62 - overflow: unset
63 card:
64 - overflow: unset
65 - background-color: '#242e42'
66 - border-radius: 10%
67 - color: ivory
68 - text-transform: capitalize
69 grid:
70 - grid-template-areas: '"n i" "temp hu" "graph graph"'
71 - grid-template-columns: 50% 50%
72 - grid-template-rows: 1fr 1fr 1fr
73 - overflow: unset
74 name:
75 - font-size: 16px
76 - color: white
77 - font-weight: 300
78 state:
79 - font-size: 2.4em
80 - color: white
81 - font-weight: bold
82 - color: white
83 - align-self: middle
84 - justify-self: start
Schaltfläche – custom:auto-entities und button-card == was ist an?
configuration.yaml
1type: custom:auto-entities
2card:
3 type: custom:layout-card
4 layout_type: horizontal
5 layout_options:
6 width: 100
7filter:
8 include:
9 - domain: light
10 options:
11 type: custom:button-card
12 entity_id: this.entity_id
13 layout: vertical
14 lock:
15 enabled: true
16 hold_action:
17 action: more-info
18 show_last_changed: true
19 aspect_ratio: 1/1
20 custom_fields:
21 type_icon: |
22 [[[ return `<ha-icon
23 icon="mdi:toggle-switch"
24 style="width: 25px; height: 25px; color: red;">
25 `
26 ]]]
27 timer:
28 card:
29 type: custom:button-card
30 name: Timer
31 show_name: false
32 show_icon: false
33 show_state: true
34 styles:
35 card:
36 - font-size: 12px
37 style: |
38 .t { padding: 0px; }
39 .flex { padding: 0px; }
40 styles:
41 custom_fields:
42 timer:
43 - color: gray
44 - font-size: 15px
45 - position: absolute
46 - left: 25%
47 - top: 8%
48 type_icon:
49 - color: gray
50 - font-size: 15px
51 - position: absolute
52 - left: 5%
53 - top: 5%
54 card:
55 - box-shadow: 0px 0px 10px 1px var(--button-card-light-color)
56 - background-color: '#242e42'
57 - border-radius: 10%
58 - padding: 12%
59 - color: ivory
60 - opacity: 1
61 - font-size: 10px
62 - text-shadow: 0px 0px 5px black
63 - text-transform: capitalize
64 icon:
65 - width: 40%
66 - padding-top: 20px
67 label:
68 - color: gray
69 - font-size: 10px
70 - justify-self: start
71 - padding-left: 10px
72 - padding-top: 0px
73 name:
74 - padding-left: 0px
75 - white-space: normal
76 - font-weight: 300
77 - font-size: 10px
78 - color: white
79 - opacity: 0.7
80 - align-self: middle
81 - justify-self: start
82 tap_action:
83 action: toggle
84 exclude:
85 - entity_id: light.alle_lampen
86 - entity_id: light.innenbeleuchtung
87 - entity_id: light.urlaubslichter
88 - entity_id: switch.test1
89 - entity_id: '*browser*'
90 - state: 'off'
91 - state: '0'
92 - state: unavailable
93 - state: docked
94sort:
95 method: none
96 reverse: false
97 numeric: false
98show_empty: false
99view_layout:
100 column: 1
Schaltfläche – Bewegungssensoren
configuration.yaml
1type: horizontal-stack
2cards:
3 - type: custom:button-card
4 entity: binary_sensor.ty20401777d8bfc0da0b91_2
5 icon: >-
6 [[[ if (entity.state == "off") return "mdi:motion-sensor-off"; else return
7 "mdi:motion-sensor" ]]]
8 show_icon: true
9 show_last_changed: false
10 aspect_ratio: 1/1
11 hold_action:
12 action: more-info
13 name: Motion Küche
14 show_state: true
15 state:
16 - styles:
17 card:
18 - background-color: '#242e42'
19 - border-radius: 10%
20 - padding: 12%
21 - color: ivory
22 - opacity: 0.7
23 - font-size: 10px
24 - text-shadow: 0px 0px 5px black
25 - text-transform: capitalize
26 grid:
27 - grid-template-areas: '"i bright" "n n" "s s"'
28 - grid-template-columns: 1fr 1fr
29 - grid-template-rows: 1fr min-content min-content
30 name:
31 - font-weight: 300
32 - font-size: 10px
33 - color: white
34 - opacity: 0.7
35 - align-self: middle
36 - justify-self: start
37 state:
38 - font-weight: bold
39 - font-size: 9px
40 - opacity: 0.7
41 - color: white
42 - align-self: middle
43 - justify-self: start
44 img_cell:
45 - justify-content: start
46 - align-items: start
47 - margin: none
48 icon:
49 - width: 100%
50 - opacity: 0.2
51 - color: white
52 custom_fields:
53 bright:
54 - align-self: start
55 - justify-self: end
56 - border-radius: 20px
57 - border-style: solid
58 - border-width: 1px
59 - font-size: 10px
60 - font-weight: 300
61 - box-shadow: 2px 2px rgba(0,0,0,0.7)
62 - border-color: '#67727e'
63 - padding: 15%
64 value: 'off'
65 - styles:
66 card:
67 - background-color: '#242e42'
68 - border-radius: 10%
69 - padding: 12%
70 - color: ivory
71 - font-size: 10px
72 - text-shadow: 0px 0px 5px black
73 - text-transform: capitalize
74 - box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px
75 grid:
76 - grid-template-areas: '"i bright" "n n" "s s"'
77 - grid-template-columns: 1fr 1fr
78 - grid-template-rows: 1fr min-content min-content
79 name:
80 - font-weight: 300
81 - font-size: 10px
82 - color: white
83 - align-self: middle
84 - justify-self: start
85 state:
86 - font-weight: bold
87 - font-size: 9px
88 - color: white
89 - align-self: middle
90 - justify-self: start
91 img_cell:
92 - justify-content: start
93 - align-items: start
94 - margin: none
95 icon:
96 - width: 100%
97 - color: white
98 custom_fields:
99 bright:
100 - align-self: start
101 - justify-self: end
102 - border-radius: 20px
103 - border-style: solid
104 - border-width: 1px
105 - font-size: 10px
106 - font-weight: 300
107 - box-shadow: 2px 2px rgba(0,0,0,0.7)
108 - border-color: '#67727e'
109 - padding: 15%
110 value: 'on'
111 - styles:
112 card:
113 - background-color: '#242e42'
114 - border-radius: 10%
115 - padding: 12%
116 - color: ivory
117 - opacity: 0.7
118 - font-size: 10px
119 - text-shadow: 0px 0px 5px black
120 - text-transform: capitalize
121 - box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px
122 grid:
123 - grid-template-areas: '"i bright" "n n" "s s"'
124 - grid-template-columns: 1fr 1fr
125 - grid-template-rows: 1fr min-content min-content
126 name:
127 - font-weight: 300
128 - font-size: 10px
129 - opacity: 0.7
130 - color: white
131 - align-self: middle
132 - justify-self: start
133 state:
134 - font-weight: bold
135 - opacity: 0.7
136 - font-size: 9px
137 - color: white
138 - align-self: middle
139 - justify-self: start
140 img_cell:
141 - justify-content: start
142 - align-items: start
143 - margin: none
144 icon:
145 - width: 100%
146 - opacity: 0.2
147 - color: white
148 custom_fields:
149 bright:
150 - align-self: start
151 - justify-self: end
152 - border-radius: 20px
153 - border-style: solid
154 - border-width: 1px
155 - font-size: 10px
156 - font-weight: 300
157 - box-shadow: 2px 2px rgba(0,0,0,0.7)
158 - border-color: '#67727e'
159 - padding: 15%
160 value: unavailable
161 - type: custom:button-card
162 entity: binary_sensor.ty20401777d8bfc0da6c43_4
163 icon: >-
164 [[[ if (entity.state == "off") return "mdi:motion-sensor-off"; else return
165 "mdi:motion-sensor" ]]]
166 show_icon: true
167 show_last_changed: false
168 aspect_ratio: 1/1
169 hold_action:
170 action: more-info
171 name: Motion Flur EG
172 show_state: true
173 state:
174 - styles:
175 card:
176 - background-color: '#242e42'
177 - border-radius: 10%
178 - padding: 12%
179 - color: ivory
180 - opacity: 0.7
181 - font-size: 10px
182 - text-shadow: 0px 0px 5px black
183 - text-transform: capitalize
184 grid:
185 - grid-template-areas: '"i bright" "n n" "s s"'
186 - grid-template-columns: 1fr 1fr
187 - grid-template-rows: 1fr min-content min-content
188 name:
189 - font-weight: 300
190 - font-size: 10px
191 - color: white
192 - opacity: 0.7
193 - align-self: middle
194 - justify-self: start
195 state:
196 - font-weight: bold
197 - font-size: 9px
198 - opacity: 0.7
199 - color: white
200 - align-self: middle
201 - justify-self: start
202 img_cell:
203 - justify-content: start
204 - align-items: start
205 - margin: none
206 icon:
207 - width: 100%
208 - opacity: 0.2
209 - color: white
210 custom_fields:
211 bright:
212 - align-self: start
213 - justify-self: end
214 - border-radius: 20px
215 - border-style: solid
216 - border-width: 1px
217 - font-size: 10px
218 - font-weight: 300
219 - box-shadow: 2px 2px rgba(0,0,0,0.7)
220 - border-color: '#67727e'
221 - padding: 15%
222 value: 'off'
223 - styles:
224 card:
225 - background-color: '#242e42'
226 - border-radius: 10%
227 - padding: 12%
228 - color: ivory
229 - font-size: 10px
230 - text-shadow: 0px 0px 5px black
231 - text-transform: capitalize
232 - box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px
233 grid:
234 - grid-template-areas: '"i bright" "n n" "s s"'
235 - grid-template-columns: 1fr 1fr
236 - grid-template-rows: 1fr min-content min-content
237 name:
238 - font-weight: 300
239 - font-size: 10px
240 - color: white
241 - align-self: middle
242 - justify-self: start
243 state:
244 - font-weight: bold
245 - font-size: 9px
246 - color: white
247 - align-self: middle
248 - justify-self: start
249 img_cell:
250 - justify-content: start
251 - align-items: start
252 - margin: none
253 icon:
254 - width: 100%
255 - color: white
256 custom_fields:
257 bright:
258 - align-self: start
259 - justify-self: end
260 - border-radius: 20px
261 - border-style: solid
262 - border-width: 1px
263 - font-size: 10px
264 - font-weight: 300
265 - box-shadow: 2px 2px rgba(0,0,0,0.7)
266 - border-color: '#67727e'
267 - padding: 15%
268 value: 'on'
269 - styles:
270 card:
271 - background-color: '#242e42'
272 - border-radius: 10%
273 - padding: 12%
274 - color: ivory
275 - opacity: 0.7
276 - font-size: 10px
277 - text-shadow: 0px 0px 5px black
278 - text-transform: capitalize
279 - box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px
280 grid:
281 - grid-template-areas: '"i bright" "n n" "s s"'
282 - grid-template-columns: 1fr 1fr
283 - grid-template-rows: 1fr min-content min-content
284 name:
285 - font-weight: 300
286 - font-size: 10px
287 - opacity: 0.7
288 - color: white
289 - align-self: middle
290 - justify-self: start
291 state:
292 - font-weight: bold
293 - opacity: 0.7
294 - font-size: 9px
295 - color: white
296 - align-self: middle
297 - justify-self: start
298 img_cell:
299 - justify-content: start
300 - align-items: start
301 - margin: none
302 icon:
303 - width: 100%
304 - opacity: 0.2
305 - color: white
306 custom_fields:
307 bright:
308 - align-self: start
309 - justify-self: end
310 - border-radius: 20px
311 - border-style: solid
312 - border-width: 1px
313 - font-size: 10px
314 - font-weight: 300
315 - box-shadow: 2px 2px rgba(0,0,0,0.7)
316 - border-color: '#67727e'
317 - padding: 15%
318 value: unavailable
319 - type: custom:button-card
320 entity: binary_sensor.presence_12
321 icon: >-
322 [[[ if (entity.state == "off") return "mdi:motion-sensor-off"; else return
323 "mdi:motion-sensor" ]]]
324 show_icon: true
325 show_last_changed: false
326 aspect_ratio: 1/1
327 hold_action:
328 action: more-info
329 name: Motion Küche
330 show_state: true
331 state:
332 - styles:
333 card:
334 - background-color: '#242e42'
335 - border-radius: 10%
336 - padding: 12%
337 - color: ivory
338 - opacity: 0.7
339 - font-size: 10px
340 - text-shadow: 0px 0px 5px black
341 - text-transform: capitalize
342 grid:
343 - grid-template-areas: '"i bright" "n n" "s s"'
344 - grid-template-columns: 1fr 1fr
345 - grid-template-rows: 1fr min-content min-content
346 name:
347 - font-weight: 300
348 - font-size: 10px
349 - color: white
350 - opacity: 0.7
351 - align-self: middle
352 - justify-self: start
353 state:
354 - font-weight: bold
355 - font-size: 9px
356 - opacity: 0.7
357 - color: white
358 - align-self: middle
359 - justify-self: start
360 img_cell:
361 - justify-content: start
362 - align-items: start
363 - margin: none
364 icon:
365 - width: 100%
366 - opacity: 0.2
367 - color: white
368 custom_fields:
369 bright:
370 - align-self: start
371 - justify-self: end
372 - border-radius: 20px
373 - border-style: solid
374 - border-width: 1px
375 - font-size: 10px
376 - font-weight: 300
377 - box-shadow: 2px 2px rgba(0,0,0,0.7)
378 - border-color: '#67727e'
379 - padding: 15%
380 value: 'off'
381 - styles:
382 card:
383 - background-color: '#242e42'
384 - border-radius: 10%
385 - padding: 12%
386 - color: ivory
387 - font-size: 10px
388 - text-shadow: 0px 0px 5px black
389 - text-transform: capitalize
390 - box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px
391 grid:
392 - grid-template-areas: '"i bright" "n n" "s s"'
393 - grid-template-columns: 1fr 1fr
394 - grid-template-rows: 1fr min-content min-content
395 name:
396 - font-weight: 300
397 - font-size: 10px
398 - color: white
399 - align-self: middle
400 - justify-self: start
401 state:
402 - font-weight: bold
403 - font-size: 9px
404 - color: white
405 - align-self: middle
406 - justify-self: start
407 img_cell:
408 - justify-content: start
409 - align-items: start
410 - margin: none
411 icon:
412 - width: 100%
413 - color: white
414 custom_fields:
415 bright:
416 - align-self: start
417 - justify-self: end
418 - border-radius: 20px
419 - border-style: solid
420 - border-width: 1px
421 - font-size: 10px
422 - font-weight: 300
423 - box-shadow: 2px 2px rgba(0,0,0,0.7)
424 - border-color: '#67727e'
425 - padding: 15%
426 value: 'on'
427 - styles:
428 card:
429 - background-color: '#242e42'
430 - border-radius: 10%
431 - padding: 12%
432 - color: ivory
433 - opacity: 0.7
434 - font-size: 10px
435 - text-shadow: 0px 0px 5px black
436 - text-transform: capitalize
437 - box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px
438 grid:
439 - grid-template-areas: '"i bright" "n n" "s s"'
440 - grid-template-columns: 1fr 1fr
441 - grid-template-rows: 1fr min-content min-content
442 name:
443 - font-weight: 300
444 - font-size: 10px
445 - opacity: 0.7
446 - color: white
447 - align-self: middle
448 - justify-self: start
449 state:
450 - font-weight: bold
451 - opacity: 0.7
452 - font-size: 9px
453 - color: white
454 - align-self: middle
455 - justify-self: start
456 img_cell:
457 - justify-content: start
458 - align-items: start
459 - margin: none
460 icon:
461 - width: 100%
462 - opacity: 0.2
463 - color: white
464 custom_fields:
465 bright:
466 - align-self: start
467 - justify-self: end
468 - border-radius: 20px
469 - border-style: solid
470 - border-width: 1px
471 - font-size: 10px
472 - font-weight: 300
473 - box-shadow: 2px 2px rgba(0,0,0,0.7)
474 - border-color: '#67727e'
475 - padding: 15%
476 value: unavailable
477 - type: custom:button-card
478 entity: binary_sensor.presence_12
479 icon: >-
480 [[[ if (entity.state == "off") return "mdi:motion-sensor-off"; else return
481 "mdi:motion-sensor" ]]]
482 show_icon: true
483 show_last_changed: false
484 aspect_ratio: 1/1
485 hold_action:
486 action: more-info
487 name: Motion WC EG
488 show_state: true
489 state:
490 - styles:
491 card:
492 - background-color: '#242e42'
493 - border-radius: 10%
494 - padding: 12%
495 - color: ivory
496 - opacity: 0.7
497 - font-size: 10px
498 - text-shadow: 0px 0px 5px black
499 - text-transform: capitalize
500 grid:
501 - grid-template-areas: '"i bright" "n n" "s s"'
502 - grid-template-columns: 1fr 1fr
503 - grid-template-rows: 1fr min-content min-content
504 name:
505 - font-weight: 300
506 - font-size: 10px
507 - color: white
508 - opacity: 0.7
509 - align-self: middle
510 - justify-self: start
511 state:
512 - font-weight: bold
513 - font-size: 9px
514 - opacity: 0.7
515 - color: white
516 - align-self: middle
517 - justify-self: start
518 img_cell:
519 - justify-content: start
520 - align-items: start
521 - margin: none
522 icon:
523 - width: 100%
524 - opacity: 0.2
525 - color: white
526 custom_fields:
527 bright:
528 - align-self: start
529 - justify-self: end
530 - border-radius: 20px
531 - border-style: solid
532 - border-width: 1px
533 - font-size: 10px
534 - font-weight: 300
535 - box-shadow: 2px 2px rgba(0,0,0,0.7)
536 - border-color: '#67727e'
537 - padding: 15%
538 value: 'off'
539 - styles:
540 card:
541 - background-color: '#242e42'
542 - border-radius: 10%
543 - padding: 12%
544 - color: ivory
545 - font-size: 10px
546 - text-shadow: 0px 0px 5px black
547 - text-transform: capitalize
548 - box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px
549 grid:
550 - grid-template-areas: '"i bright" "n n" "s s"'
551 - grid-template-columns: 1fr 1fr
552 - grid-template-rows: 1fr min-content min-content
553 name:
554 - font-weight: 300
555 - font-size: 10px
556 - color: white
557 - align-self: middle
558 - justify-self: start
559 state:
560 - font-weight: bold
561 - font-size: 9px
562 - color: white
563 - align-self: middle
564 - justify-self: start
565 img_cell:
566 - justify-content: start
567 - align-items: start
568 - margin: none
569 icon:
570 - width: 100%
571 - color: white
572 custom_fields:
573 bright:
574 - align-self: start
575 - justify-self: end
576 - border-radius: 20px
577 - border-style: solid
578 - border-width: 1px
579 - font-size: 10px
580 - font-weight: 300
581 - box-shadow: 2px 2px rgba(0,0,0,0.7)
582 - border-color: '#67727e'
583 - padding: 15%
584 value: 'on'
585 - styles:
586 card:
587 - background-color: '#242e42'
588 - border-radius: 10%
589 - padding: 12%
590 - color: ivory
591 - opacity: 0.7
592 - font-size: 10px
593 - text-shadow: 0px 0px 5px black
594 - text-transform: capitalize
595 - box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px
596 grid:
597 - grid-template-areas: '"i bright" "n n" "s s"'
598 - grid-template-columns: 1fr 1fr
599 - grid-template-rows: 1fr min-content min-content
600 name:
601 - font-weight: 300
602 - font-size: 10px
603 - opacity: 0.7
604 - color: white
605 - align-self: middle
606 - justify-self: start
607 state:
608 - font-weight: bold
609 - opacity: 0.7
610 - font-size: 9px
611 - color: white
612 - align-self: middle
613 - justify-self: start
614 img_cell:
615 - justify-content: start
616 - align-items: start
617 - margin: none
618 icon:
619 - width: 100%
620 - opacity: 0.2
621 - color: white
622 custom_fields:
623 bright:
624 - align-self: start
625 - justify-self: end
626 - border-radius: 20px
627 - border-style: solid
628 - border-width: 1px
629 - font-size: 10px
630 - font-weight: 300
631 - box-shadow: 2px 2px rgba(0,0,0,0.7)
632 - border-color: '#67727e'
633 - padding: 15%
634 value: unavailable
Schaltfläche – Verbrauchsanzeige / change color
configuration.yaml
1type: custom:button-card
2entity: sensor.waschmaschine_power
3state_display: '[[[ return Math.round(entity.state) + " W" ]]]'
4margin: none
5show_name: false
6show_icon: false
7show_state: true
8styles:
9 card:
10 - box-shadow: none
11 - font-size: 12px
12 state:
13 - color: |
14 [[[
15 if (states['sensor.waschmaschine_power'].state > 2)
16 return "red";
17 else
18 return "white";
19 ]]]
Schaltfläche – nächster Sonnenstand
configuration.yaml
1type: custom:button-card
2entity: sun.sun
3show_name: false
4show_state: false
5show_label: true
6size: 50px
7label: |
8 [[[
9 var next_event = states['sun.sun'].attributes.next_setting;
10 var text = "Sonnnenutergang";
11
12 if (states['sun.sun'].state == 'below_horizon'){
13 next_event = states['sun.sun'].attributes.next_rising;
14 text = "Sonnenaufgang";
15 }
16 var time = new Date(next_event).toLocaleTimeString('en',
17 { timeStyle: 'short', hour12: false, timeZone: 'Europe/Stockholm' });
18
19 return text + " um " + time;
20 ]]]
21state:
22 - value: above_horizon
23 color: yellow
24 icon: mdi:white-balance-sunny
25 - value: below_horizon
26 color: blue
27 icon: mdi:star-crescent
