Skip to content

Sensor Card #1

Visualization

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

This card uses the Material 3 theme D06, TealBlue

You see different variations of the same card. These are controlled by variable settings

Description Aspect Ratio Target Size
A card that displays a sensor value. Both using a segmented arc and as state 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. Configurable colorstop
Icon Entity Icon. Configurable colorstop
SegArc Minimalistic implementation of segmented arc showing the sensors state. Configurable colorstop
Name / State Name and Value of Entity for setting name above state = true
State / Name Value and Name of Entity for setting name above state = false
State Secondary Info of entity
Bar 24 hour history, if history enabled through variable

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

Replace example entities with your entities!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
- type: 'custom:swiss-army-knife-card'
  entities:
    - entity: sensor.dsmr_reading_electricity_currently_delivered
      name: 'Sensor #1-1'
  layout:
    template:
      name: sak_layout_fce_sensor1
      variables:
        - sak_layout_sensor_history_disabled: true
        - sak_layout_sensor_scale_max: 2

########################################################################

- type: 'custom:swiss-army-knife-card'
  entities:
    - entity: sensor.dsmr_reading_electricity_currently_delivered
      name: 'Sensor #1-2'
  layout:
    template:
      name: sak_layout_fce_sensor1
      variables:
        - sak_layout_sensor_name_above_state: false
        - sak_layout_sensor_scale_max: 2
Data Default Required Description
entities The single entity on the card
sak_layout_sensor_name_above_state true Determines order of these two: name/state or state/name.

Note that both versions are defined. The setting only disables one of them and enables the other!
sak_layout_sensor_history_disabled false Disable history tool
sak_layout_sensor_colorstops_template colorstops_energy_2kw Specify the colorstop template if you specified colorstops for one of the tools
sak_layout_sensor_scale_max 2 Scale max must align to given colorstop and/or sensor range!
sak_layout_sensor_circle_style default Can be either default, or colorstops
sak_layout_sensor_icon_style default Can be either default, or colorstops
sak_layout_sensor_segarc_style colorlist Can be either colorlist, or colorstops

YAML Template Definition

1.0.0-rc.3

Full definition of card (variant 1a) 
  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
sak_layout_fce_sensor1:
  template:
    type: layout
    defaults: 
      - sak_layout_sensor_name_above_state: true
      - sak_layout_sensor_history_disabled: false
      - sak_layout_sensor_circle_style: default
      - sak_layout_sensor_icon_style: default
      - sak_layout_sensor_segarc_style: colorlist
      - sak_layout_sensor_scale_max: 2
      - sak_layout_sensor_colorstops_template: colorstops_energy_2kw

  layout:
    aspectratio: 4/1
    toolsets:
      # ================================================================
      - toolset: half-circle
        position:
          cx: 0                             # Center on cards border 
          cy: 50
        tools:
          # ------------------------------------------------------------
          - type: circle
            position:
              cx: 50
              cy: 50
              radius: 50
            show:
              style: '[[sak_layout_sensor_circle_style]]'
            entity_index: 0
            colorstops:
              template:
                name: '[[sak_layout_sensor_colorstops_template]]'
            styles:
              circle:
                stroke: none
                fill: var(--theme-sys-elevation-surface-neutral4)

          # ------------------------------------------------------------ 
          - type: 'segarc'
            id: 0
            position:
              cx: 50
              cy: 50
              start_angle: 25
              end_angle: 155
              width: 4
              radius: 58
            entity_index: 0
            scale:
              min: 0
              max: '[[sak_layout_sensor_scale_max]]'
              width: 6
              offset: 12
            show:
              scale: false
              style: '[[sak_layout_sensor_segarc_style]]'
              lastcolor: true
            segments:
              colorlist:
                gap: 1
                colors:
                  - var(--theme-sys-color-secondary)
              colorstops:
                template:
                  name: '[[sak_layout_sensor_colorstops_template]]'
                  variables:
                    - thegap: 2
            styles:
              foreground:
                fill: darkgrey
              background:
                fill: var(--theme-sys-color-secondary)
                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
            show:
              style: '[[sak_layout_sensor_icon_style]]'
            colorlist:
              colors:
                - var(--theme-sys-color-secondary)
            colorstops:
              template:
                name: '[[sak_layout_sensor_colorstops_template]]'
            styles:
              icon:
                fill: var(--theme-sys-color-secondary)
                opacity: 0.9

      # ================================================================
      - toolset: column-bar
        position:
          cx: 235                     # 400-70/2 + 70=235
          cy: 50
        tools:
          # ------------------------------------------------------------
          - type: bar
            id: 1
            disabled: '[[sak_layout_sensor_history_disabled]]'
            entity_index: 0
            position:
              orientation: vertical
              cx: 50
              cy: 50
              width: 330              # 400-70=330
              height: 100
              margin: 1
            hours: 24
            barhours: 1
            show:
              style: 'minmaxgradient'
            minmaxgradient:
              fill: true
              colors:
                min: var(--theme-sys-palette-secondary85)
                max: var(--theme-sys-palette-secondary65)
            styles:
              bar:
                stroke-linecap: square
                opacity: 0.25

      # ================================================================
      - toolset: column-name
        position:
          cx: 70                # Left part = 75, so 75+(300-75)/2
          cy: 50
        tools:
          # Variant 1a, name above state...
          # The YAML parser can't interpret logical operators, so we
          # have to use JavaScript to do this...
          # ------------------------------------------------------------
          - type: name
            position:
              cx: 50
              cy: 37
            variables:
              name_above_state: '[[sak_layout_sensor_name_above_state]]'
            disabled:  '[[[[ return !tool_config.variables.name_above_state; ]]]]'
            entity_index: 0
            styles:
              name:
                text-anchor: start
                font-size: 30em
                font-weight: 700
                opacity: 1
          # ------------------------------------------------------------
          - type: state
            position:
              cx: 50
              cy: 70
            variables:
              name_above_state: '[[sak_layout_sensor_name_above_state]]'
            disabled:  '[[[[ return !tool_config.variables.name_above_state; ]]]]'
            entity_index: 0
            styles:
              state:
                text-anchor: start
                font-size: 26em
                font-weight: 500
                opacity: 0.7

          # Variant 1b, state above name...
          # ------------------------------------------------------------
          - type: state
            position:
              cx: 50
              cy: 37
            disabled: '[[sak_layout_sensor_name_above_state]]'
            entity_index: 0
            styles:
              state:
                text-anchor: start
                font-size: 30em
                font-weight: 700
                opacity: 1
          # ------------------------------------------------------------
          - type: name
            position:
              cx: 50
              cy: 70
            disabled: '[[sak_layout_sensor_name_above_state]]'
            entity_index: 0
            styles:
              name:
                text-anchor: start
                font-size: 26em
                font-weight: 500
                opacity: 0.7