Skip to content

Person Card

Visualization

Swiss Army Knife Functional Card Person D06 Light Home Swiss Army Knife Functional Card Person D06 Light Not Home
Swiss Army Knife Functional Card Person D06 Light Home
Swiss Army Knife Functional Card Person D06 Dark Home Swiss Army Knife Functional Card Person D06 Dark Not Home

This card uses the Material 3 theme D06, TealBlue

This card shows you some possibilities to apply JavaScript to the animations section

The card seems like a standard, simple card, but isn't due to some Home Assistant functionalities and the possibilities of using either an icon or an entity picture for the person.

The use of JavaScript to fetch the zone's Icon, to do some state dependent color changes and taking care of the "use entity_picture yes/no" setting are nice examples of the possibilities that JavaScript adds to tools. It are just a few lines, but very powerful!

It also takes care of fetching the icon of additional zones (ie not the home zone).

Description Aspect Ratio Target Size
A card that shows in which zone a person is, or if in no known zone as away / not home. 4/1 Grid with 2 columns
SAK Tool Used for
Icon Background Icon (only in first screenshot) 😄
Circle The half circle, as the left part of the circle is cutoff by the card
Icon Entity Icon. Animated, state dependent and only visible if no entity_picture should be displayed
UserSvg Shows the Entity Picture. Only visible if entity_picture should be displayed
Icon Zone Icon, ie where is the person according to the zone configuration. Animated, state dependent
Name Name of Entity
State State of entity

Interaction

Part Description
Card All tools connected to an entity do show by default the "more-info" dialog once clicked

Usage

1.0.0-rc.3

Using the default mode: an icon for the person entity: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
- type: 'custom:swiss-army-knife-card'
  entities:
    - entity: person.marco
      name: 'Person'
      icon: mdi:face-man
  layout:
    template:
      name: sak_layout_fce_person
      variables:
        - sak_layout_fce_person_zone_entities:
            - zone.the_gym
            - zone.marco_work
            - zone.marco_parents
            - zone.zoo
Using an entity_picture for the person entity. Picture can be defined here, or (default) the entity_picture defined for the person is used: 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
- type: 'custom:swiss-army-knife-card'
  entities:
    - entity: person.tha_washer
      name: 'Tha Washer'
      icon: mdi:face-man
      entity_picture: "/local/images/tha-washer.jpg"
  layout:
    template:
      name: sak_layout_fce_person
      variables:
        - sak_layout_fce_person_use_entity_picture: true
        - sak_layout_fce_person_zone_entities:
            - zone.the_gym
            - zone.marco_work
            - zone.marco_parents
            - zone.zoo

Data Default Required Description
entities The person entity
sak_layout_fce_person_zone_entities The list of zone entities for this person to be displayed. There is no limit, it is really a list which is used when the person is not at home!
sak_layout_fce_person_use_entity_picture false If set to true, an entity picture is displayed instead of the persons icon. Default the picture configured for the person is used, but can be overridden by specifying an entity_picture in the entity configuration in the view

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
 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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
sak_layout_fce_person:
  template:
    type: layout
    defaults: 
      - sak_layout_fce_person_use_entity_picture: false
  layout:
    aspectratio: 4/1
    toolsets:
      # ================================================================
        # Extra background icon. Just for fun and filling some space
      - toolset: background-icon
        position:
          cx: 350
          cy: 50
        tools:
          # ------------------------------------------------------------
          - type: icon
            position:
              cx: 50
              cy: 50
              align: center
              icon_size: 100
            icon: mdi:map-marker-radius-outline
            styles:
              icon:
                fill: var(--theme-sys-elevation-surface-neutral2)

      # ================================================================
      - toolset: half-circle
        position:
          cx: 0                             # Center on cards border 
          cy: 50
        tools:
          # ------------------------------------------------------------
          - type: circle
            position:
              cx: 50
              cy: 50
              radius: 50
            styles:
              circle:
                stroke: var(--theme-sys-color-secondary)
                stroke-width: 3em
                opacity: 0.5

      # ================================================================
      - toolset: column-icon
        position:
          cx: 25
          cy: 50
        tools:
          # ------------------------------------------------------------
          - type: icon
            position:
              cx: 50
              cy: 50
              align: center
              icon_size: 45
            entity_index: 0
            variables:
              sak_layout_fce_person_use_entity_picture: '[[sak_layout_fce_person_use_entity_picture]]'
            animations:
                # Return current state, so always a match!
              - state: '[[[ return state; ]]]'
                styles:
                  icon:
                    # Set fill depending on being at home!
                    fill: >
                      [[[ if (['home', 'not_home'].includes(state)) return 'var(--theme-sys-color-primary)';
                          return 'var(--theme-sys-color-tertiary)';
                      ]]]
                    # Hide icon if using entity_picture!
                    display: >
                      [[[ if (tool_config.variables.sak_layout_fce_person_use_entity_picture) return 'none';
                          return 'initial';
                      ]]]
            styles:
              icon:
                fill: var(--theme-sys-color-secondary)
                opacity: 0.9

          # ------------------------------------------------------------
          - type: usersvg
            position:
              cx: 50
              cy: 50
              height: 45
              width: 45
            entity_index: 0
            variables:
              sak_layout_fce_person_use_entity_picture: '[[sak_layout_fce_person_use_entity_picture]]'
            clip_path:
              position:
                cx: 50
                cy: 50
                height: 40            # Slightly crop image (from 45->40)
                width: 40
                radius:
                  all: 20             # Radius 20 results in full circle
            style: 'images'
            images:                   # Fetch entity_picture from config or entity itself
              - default: >
                  [[[
                    if (tool_config.variables.sak_layout_fce_person_use_entity_picture) {
                      return (entity_config?.entity_picture ||
                             entity.attributes?.entity_picture || 'none');
                    } else {
                      return 'none';
                    }
                  ]]]
            animations:
                # Return current state, so always a match!
              - state: '[[[ return state; ]]]'
                image: default
                styles:
                  icon:
                    # Hide usersvg tool if using icon!
                    display: >
                      [[[ if (!tool_config.variables.sak_layout_fce_person_use_entity_picture) return 'none';
                          return 'initial';
                      ]]]

      # ================================================================
      - toolset: zone-icon
        position:
          cx: 40
          cy: 18
        tools:
          # ------------------------------------------------------------
          - type: circle
            position:
              cx: 50
              cy: 50
              radius: 14
            entity_index: 0
            animations:
                # Return current state, so always a match!
              - state: '[[[ return state; ]]]'
                styles:
                  circle:
                    # Set fill depending on being at home or some unwanted state!
                    fill: >
                      [[[ if (state == 'home') return 'var(--theme-sys-color-primary)';
                          if (state == 'not_home') return 'var(--brand-google-red)';
                          if (['unavailable', 'unknown'].includes(state)) return 'black';
                          return 'var(--theme-sys-color-tertiary)';
                      ]]]
            styles:
              circle:
                fill: var(--brand-google-red)
                stroke: var(--primary-background-color)
                stroke-width: 2em

          # ------------------------------------------------------------
          - type: icon
            position:
              cx: 50
              cy: 50
              align: center
              icon_size: 18
            entity_index: 0
            variables:
              zone_ids: '[[sak_layout_fce_person_zone_entities]]'
            animations:
                # Return current state, so always a match!
              - state: '[[[ return state; ]]]'
                # Fetch icon of zone. If no match on zone, the state 'not_home' is given.
                # Check that state, and return the 'not home' icon in that case!
                icon: >
                  [[[ if (state == 'not_home') return 'mdi:home-off-outline';
                      if (state == 'home') return states['zone.home'].attributes.icon;
                      // For not home, we get the friendly name as input. Must find that one to retrieve
                      // the zone's id...

                      for (var i=0; i<tool_config.variables.zone_ids.length; i++) {
                        var zone = states[tool_config.variables.zone_ids[i]];
                        if (zone && zone.attributes.friendly_name == state) {
                          return states[zone.entity_id].attributes.icon;
                        }
                      }
                      return 'mdi:map-marker-question';
                  ]]]
                styles:
                  icon:
                    fill: var(--primary-background-color)
            styles:
              icon:
                fill: var(--primary-background-color)

      # ================================================================
      - toolset: column-name
        position:
          cx: 70
          cy: 50
        tools:
          # ------------------------------------------------------------
          - type: name
            position:
              cx: 50
              cy: 37
            entity_index: 0
            styles:
              name:
                text-anchor: start
                font-size: 30em
                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: 26em
                font-weight: 500
                opacity: 0.7