Skip to content

Scene Card

Swiss Army Knife Functional Card Scene D06 Light
Swiss Army Knife Functional Card Scene D06 Dark

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

1
2
3
4
5
6
7
8
9
- 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)