Scene Card
This card uses the Material 3 theme D06, TealBlue
Its a card, but it just demonstrates how to use the scene user action on a tool
| Description | Aspect Ratio | Target Size |
A card that shows an icon and text, and has a scene user action. | 3/1 | Grid with 3 columns |
| SAK Tool | Used for |
| Icon | Some fixed Icon |
| Text | Scene text |
| RectEx | A rectangle covering the whole card to act as a button to handle the activate scene action |
Interaction
| Part | Description |
| Card | This card activates the scene for you |
Usage
1.0.0-rc.3
| - type: 'custom:swiss-army-knife-card'
layout:
template:
name: sak_layout_fce_scene
variables:
- sak_layout_scene_icon: mdi:script
- sak_layout_scene_text: 'Scene'
- sak_layout_scene_id: 'scene.unknown'
- sak_layout_scene_transition: 2.5
|
| Data | Default | Required | Description |
| sak_layout_scene_icon | mdi:script | | The used icon on the card |
| sak_layout_scene_text | | | The text displayed on the card |
| sak_layout_scene_id | | | The entity id of the scene that should be called |
| sak_layout_scene_transition | 2.5 | | The scene transition time in seconds |
YAML Template Definition
1.0.0-rc.3
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 | sak_layout_fce_scene:
template:
type: layout
defaults:
- sak_layout_scene_icon: mdi:script
- sak_layout_scene_text: 'Scene'
- sak_layout_scene_id: 'scene.unknown'
- sak_layout_scene_transition: 2.5
layout:
styles:
card:
border-radius: 25em
background: var(--theme-sys-color-secondary-container)
aspectratio: 3/1
toolsets:
# ================================================================
- toolset: column-icon
position:
cx: 50
cy: 50
tools:
# ------------------------------------------------------------
- type: icon
position:
cx: 50
cy: 50
align: center
icon_size: 50
icon: '[[sak_layout_scene_icon]]'
styles:
icon:
fill: var(--secondary-text-color)
opacity: 0.9
# ================================================================
- toolset: button-text
position:
cx: 175
cy: 50
tools:
# ------------------------------------------------------------
- type: text
position:
cx: 50
cy: 50
text: '[[sak_layout_scene_text]]'
styles:
text:
text-anchor: middle
font-size: 30em
font-weight: 700
opacity: 1
# ================================================================
- toolset: button-cover
position:
cx: 150
cy: 50
tools:
# ------------------------------------------------------------
- type: rectex
position:
cx: 50
cy: 50
height: 100
width: 300
user_actions:
tap_action:
haptic: light
actions:
- action: navigate
service: scene.turn_on
service_data:
entity_id: '[[sak_layout_scene_id]]'
transition: '[[sak_layout_scene_transition]]'
styles:
rectex:
fill: rgba(0,0,0,0)
|