Design Functional Card Light Card Light Card
This card uses the Material 3 theme D06, TealBlue
This light card and the light card with slider are kept almost identical
This means you can mix lights with and without brightness slider, as their size is the same.
Description Aspect Ratio Target Size A card that can control a light 4/1 Grid with 2 columns
SAK Tool Used for Circle The half circle, as the left part of the circle is cutoff by the card. Animated, state dependent Icon Entity Icon. Animated, state dependent Switch The Switch to toggle the light Name Name of Entity State Value of Entity
Interaction Part Description Left part Toggles the light once tapped Other parts All tools connected to an entity do show by default the "more-info" dialog once clicked
Usage
Replace example entities with your entities!
- type : 'custom:swiss-army-knife-card'
entities :
- entity : light.1st_floor_hall_light
name : 'Light'
icon : mdi:dome-light
layout :
template :
name : sak_layout_fce_light
Data Default Required Description entities The single entity on the card sak_layout_light_toggle_service true The actual service to call to toggle the light. If you have a switch to control the light, the light.toggle service won't work and you have to replace this with switch.toggle
YAML Template Definition
Full definition of layout template 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 sak_layout_fce_light :
template :
type : layout
defaults :
- sak_layout_light_toggle_service : light.toggle
layout :
aspectratio : 3/1
toolsets :
# ================================================================
- toolset : column-icon
position :
cx : 0
cy : 50
tools :
# ------------------------------------------------------------
- type : circle
position :
cx : 50
cy : 50
radius : 50
entity_index : 0
animations :
- state : 'on'
styles :
circle :
fill : var(--theme-sys-color-primary)
- state : 'off'
styles :
circle :
fill : var(--theme-sys-color-secondary-container)
user_actions :
tap_action :
haptic : light
actions :
- action : call-service
service : light.toggle
styles :
circle :
fill : var(--theme-sys-color-secondary-container)
stroke : var(--theme-sys-color-secondary)
stroke-width : 0em
# ------------------------------------------------------------
- type : icon
position :
cx : 75
cy : 50
align : center
icon_size : 30
entity_index : 0
animations :
- state : 'on'
styles :
icon :
fill : var(--primary-background-color)
- state : 'off'
styles :
icon :
fill : var(--theme-sys-color-secondary)
styles :
icon :
fill : var(--theme-sys-color-secondary)
pointer-events : none
# ================================================================
- toolset : switch
position :
cx : 25 # On 1/3 of card width
cy : 75
scale : 1.8
tools :
# ------------------------------------------------------------
- type : switch
position :
cx : 50
cy : 50
orientation : 'horizontal'
track :
width : 15
height : 5
radius : 2.5
thumb :
width : 3
height : 3
radius : 2.5
offset : 4.5
entity_index : 0
user_actions :
tap_action :
haptic : light
actions :
- action : call-service
service : '[[sak_layout_light_toggle_service]]'
styles :
track :
--switch-checked-track-color : var(--primary-background-color)
--switch-unchecked-track-color : var(--theme-sys-color-secondary)
# --switch-checked-button-color:
thumb :
--thumb-stroke : 'var(--primary-background-color)'
# ================================================================
- toolset : column-name
position :
cx : 70
cy : 50
tools :
# ------------------------------------------------------------
- type : name
position :
cx : 50
cy : 30
entity_index : 0
styles :
name :
text-anchor : start
font-size : 25em
font-weight : 700
opacity : 1
# ------------------------------------------------------------
- type : state
position :
cx : 50
cy : 70
entity_index : 0
show :
uom : none
styles :
state :
text-anchor : start
font-size : 20em
font-weight : 500
opacity : 0.7
