Skip to content

Sensor Card #4

Series 2 will be released in 2025!

Sensor card #4 is more or less a show case for the different types of sparkline chart types and variants that are possible with the sparkline tool.

Visualization

Below the different variations of this card. The card template takes care of displaying the choosen sparkline chart.

  • Sensor with Sparkline "Line"

    A sensor card with a sparkline line showing the history of today.

    Line Example - Light Line Example - Dark

    Line Example

  • Sensor with Sparkline "Line/MinMax"

    A sensor card with a sparkline line showing the history of today with Min/Max values on the background to show variations.

    Line/MinMax Example - Light Line/MinMax Example - Dark

    Line/MinMax Example

  • Sensor with Sparkline "Area"

    A sensor card with a sparkline showing the history of today...

    Area Example - Light Area Example - Dark

    Area Example

  • Sensor with Sparkline "Barcode"

    A sensor card with a sparkline showing the history of today.

    Barcode Example - Light Barcode Example - Dark

    Barcode Example

  • Sensor with Sparkline "Barcode/Audio"

    A sensor card with a sparkline showing the history of today.

    Barcode/Audio Example - Light Barcode/Audio Example - Dark

    Barcode/Audio Example

  • Sensor with Sparkline "Barcode/Sta..."

    A sensor card with a sparkline showing the history of today.

    Barcode/Stalagmites Example - Light Barcode/Stalagmites Example - Dark

    Barcode/Stalagmites Example

  • Sensor with Sparkline "Bar"

    A sensor card with a sparkline showing the history of today.

    Bar Example - Light Bar Example - Dark

    Bar Example

  • Sensor with Sparkline "Dots"

    A sensor card with a sparkline showing the history of today.

    Dots Example - Light Dots Example - Dark

    Dots Example

  • Sensor with Sparkline "Graded/Rank"

    A sensor card with a sparkline graded/rank order showing the history of today.
    This visualization was developed for Awair Elements, but can be used for other sensors too, if you want grading.

    Graded/Rank Order Example - Light Graded/Rank Order Example - Dark

    Graded/Rank Order Example

  • Sensor with Sparkline "Equalizer"

    A sensor card with a sparkline equalizer showing the history of today.

    Equalizer Example - Light Equalizer Example - Dark

    Equalizer Example

Design

The sensor #4 design is clean and fairly straightforward. It has a 1/1 aspectratio and is meant to be part of a grid with 2 columns in order to be readable on mobile devices.

Description Aspect Ratio Target Size
A card that shows actual and historical sensor data in different ways. 1/1 Grid with 2 columns

Tools used

The card is built with 8 tools. You can find the numbers as 'dref: 1' in the template itself for easy referencing.

Swiss Army Knife Functional Card Design Sensor Card #4 Swiss Army Knife Functional Card Design Sensor Card #4

Number Tool Description
1 circle Circle as background for the icon. Background color is determined by the colorstop for the main entity
2 icon Icon of the entity
3 segarc SegArc around the circle. Color according to the colorstop for the entity
4 state State that displays the value of the entity
5 area Location of the entity
6 name Short description of the entity's sensor
7 sparkline Sparkline showing today's historical entity state
8 icon Icon as background for the card. Can be switched on/off

Template variables for sak_layout_fce2_sensor4

Data Default Required Description
entities The sensor entity
sak_layout_ sparkline_type graded The sparkline chart type
sak_layout_ sparkline_variant rank_order The sparkline chart variant type
sak_layout_ background_icon_disabled false Shows the background icon yes/no
sak_layout_ colorstop_v1 sak_colorstops_ awair_temperature_v1 Colorstop template v1 (used by segarc for instance)
sak_layout_ colorstop_v2 sak_colorstops_ awair_temperature_v2 Colorstop template v2 (new for sparkline tool)
sak_layout_ scale_max 100 scale min defaults to 0
sak_layout_ sparkline_show_dots false Show dots. Only valid for line and area types
sak_layout_ sparkline_show_minmax false Show min/max values next to the average value. Only valid for line and area types

YAML Template Definition

4.0.1

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
222
223
224
225
226
227
228
229
230
sak_layout_fce2_sensor4:
  template:
    type: layout
    defaults: 
        # Chart types barcode, dots, line, area, bar or graded work nicely
        # The equalizer not!
      - sak_layout_sparkline_type: graded
        # Check documentation for chart variant per chart type
      - sak_layout_sparkline_variant: rank_order
      - sak_layout_background_icon_disabled: false
      - sak_layout_colorstop_v1: sak_colorstops_awair_temperature_v1
      - sak_layout_colorstop_v2: sak_colorstops_awair_temperature_v2
      - sak_layout_scale_max: 100

  layout:
    aspectratio: 1/1
    toolsets:
      # ==============================================================================
      - toolset: background-icon
        position:
          cx: 100
          cy: 37.5
        tools:
          # ------------------------------------------------------------
          - type: icon
            # When disabled, SAK will not use this tool
            disabled: '[[sak_layout_background_icon_disabled]]'
            position:
              cx: 50
              cy: 50
              align: center
              icon_size: 50
            entity_index: 0
            styles:
              icon:
                fill: var(--theme-sys-elevation-surface-neutral3)
      # ==============================================================================
      - toolset: circle-with-icon
        position:
          cx: 20
          cy: 20
        tools:
          # ------------------------------------------------------------
          - type: 'segarc'
            entity_index: 0
            position:
              cx: 50
              cy: 50
              start_angle: 0
              end_angle: 360
              width: 2
              radius: 12.5
            scale:
              min: 0
              max: '[[sak_layout_scale_max]]'
            show:
              scale: false
              style: 'colorstops'
              lastcolor: true
            segments:
              colorstops:
                template: 
                  name: '[[sak_layout_colorstop_v1]]'
            styles:
              foreground:
                fill: var(--theme-gradient-color-02)
              background:
                fill: var(--primary-background-color)
          # ------------------------------------------------------------
          - type: circle
            position:
              cx: 50
              cy: 50
              radius: 9
            entity_index: 0
            colorstops:
              template: 
                name: '[[sak_layout_colorstop_v1]]'
            show:
              style: colorstops
            styles:
              circle:
                transition: fill 2s ease
                stroke-width: 2em
          # ------------------------------------------------------------
          - type: icon
            position:
              cx: 50
              cy: 50
              align: center
              icon_size: 15
            entity_index: 0
            styles:
              icon:
                fill: var(--primary-background-color)
      # ==============================================================================
      - toolset: area-name
        position:
          cx: 7.5
          cy: 45
        tools:
          # ------------------------------------------------------------
          - type: area
            position:
              cx: 50
              cy: 50
            entity_index: 0
            show:
              ellipsis: 12
            styles: 
              area: 
                text-anchor: start
                font-size: 12em
                font-weight: 700
                opacity: 1
          # ------------------------------------------------------------
          - type: name
            position:
              cx: 50
              cy: 62.5
            entity_index: 0
            show:
              ellipsis: 16
            styles: 
              name: 
                text-anchor: start
                font-size: 10em
                font-weight: 400
                opacity: 0.6

      # ==============================================================================
      - toolset: score-state
        position:
          cx: 92.8
          cy: 15
        tools:
          # ------------------------------------------------------------
          - type: state
            position:
              cx: 50
              cy: 50
            entity_index: 0
            show: 
              uom: end
            styles:
              state:
                font-size: 15em
                text-anchor: end
                font-weight: 700
              uom:
                font-weight: 600

      # ===============================================================
      - toolset: graph-sensor
        position:
          cx: 50
          cy: &sensor_cy 78
        tools:
          # ------------------------------------------------------------
          - type: sparkline
            position: &graph_pos
              cx: 50
              cy: 50
              width: 85
              height: 25
            entity_index: 0
            entity_indexes:
              - entity_index: 0
            period:
              calendar:
                period: day
                offset: 0
                duration:
                  hour: 24
                bins:
                  per_hour: 1
            sparkline:
              animate: true
              show:
                chart_type: '[[sak_layout_sparkline_type]]'
                chart_variant: '[[sak_layout_sparkline_variant]]'
                fill: fade
              state_values:
                aggregate_func: avg
              area:
                line_width : 1.5
              bar:
                line_width : 0.1
                colum_spacing: 1
              dots:
                line_width: 2
              equalizer:
                value_buckets: 5
              graded:
                square: true
                line_width : 1.5
              line:
                line_width : 1.5
              x_lines:
                lines:
                  - name: x_axis
                    zpos: below 
                    yshift: 15
                  - name: ticks
                    zpos: below 
                    yshift: 16
              colorstops_transition: hard
              colorstops:
                template:
                  name: '[[sak_layout_colorstop_v2]]'
              styles: &graded_rank_order_styles
                barcode_graph:
                  rx: 50%
                  ry: 5%
                graded_background:
                  transition: fill 2s ease
                  rx: 50%
                  ry: 50%
                graded_foreground:
                  transition: fill 2s ease
                  rx: 50%
                  ry: 50%
                x_axis:
                  stroke: var(--theme-sys-elevation-surface-neutral6)
                  stroke-width: 0.2rem
                ticks:
                  stroke: var(--theme-sys-elevation-surface-neutral6)
                  stroke-dasharray: 2, 117.5
                  stroke-dashoffset: 0
                  stroke-width: 0.75rem

Interaction

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

Examples

Below some examples using this template. Each example shows a different sparkline chart and/or variant to show you which variables are used to control the template.

Line Example

4.0.1

Line Example - Dark Line Example - Light

Replace example entities with your entities!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
- type: 'custom:swiss-army-knife-card'
  entities:
    - entity: sensor.awair_element_study_pm2_5
      name: 'PM2.5'
      area: 'Study'
      icon: mdi:dots-hexagon
  layout:
    template:
      name: sak_layout_fce2_sensor4
      variables:
        - sak_layout_sparkline_type: line
        - sak_layout_background_icon_disabled: false
        - sak_layout_colorstop_v1: sak_colorstops_awair_pm25_v1
        - sak_layout_colorstop_v2: sak_colorstops_awair_pm25_v2
        - sak_layout_scale_max: 100

Line/MinMax Example

4.0.1

Draws the actual line (average values) and the min/max values on the background.

Line/MinMax Example - Dark Line/MinMax Example - Light

Replace example entities with your entities!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
- type: 'custom:swiss-army-knife-card'
  entities:
    - entity: sensor.awair_element_study_pm2_5
      name: 'PM2.5'
      area: 'Study'
      icon: mdi:dots-hexagon
  layout:
    template:
      name: sak_layout_fce2_sensor4
      variables:
        - sak_layout_sparkline_type: line
        - sak_layout_background_icon_disabled: false
        - sak_layout_colorstop_v1: sak_colorstops_awair_pm25_v1
        - sak_layout_colorstop_v2: sak_colorstops_awair_pm25_v2
        - sak_layout_scale_max: 100
        - sak_layout_sparkline_show_minmax: true

Area Example

4.0.1

Area Example - Dark Area Example - Light

Replace example entities with your entities!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
- type: 'custom:swiss-army-knife-card'
  entities:
    - entity: sensor.kitchen_group_energy_power
      name: 'Power'
      area: 'Kitchen'
  layout:
    template:
      name: sak_layout_fce2_sensor4
      variables:
        - sak_layout_sparkline_type: area
        - sak_layout_background_icon_disabled: false
        - sak_layout_colorstop_v1: sak_colorstops_energy_4000w_v1
        - sak_layout_colorstop_v2: sak_colorstops_energy_4000w_v2
        - sak_layout_scale_max: 250

Barcode Example

4.0.1

Barcode Example - Dark Barcode Example - Light

Replace example entities with your entities!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
- type: 'custom:swiss-army-knife-card'
  entities:
    - entity: sensor.awair_element_study_carbon_dioxide
      name: 'CO2'
      area: 'Study'
  layout:
    template:
      name: sak_layout_fce2_sensor4
      variables:
        - sak_layout_sparkline_type: barcode
        - sak_layout_background_icon_disabled: false
        - sak_layout_colorstop_v1: sak_colorstops_awair_co2_v1
        - sak_layout_colorstop_v2: sak_colorstops_awair_co2_v2
        - sak_layout_scale_max: 3000

Barcode/Audio Example

4.0.1

Barcode/Audio Example - Dark Barcode/Audio Example - Light

Replace example entities with your entities!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
- type: 'custom:swiss-army-knife-card'
    entities:
    - entity: sensor.kitchen_group_energy_voltage
      name: 'Voltage'
      area: 'Kitchen'
  layout:
    template:
      name: sak_layout_fce2_sensor4
      variables:
        - sak_layout_sparkline_type: barcode
        - sak_layout_sparkline_variant: audio
        - sak_layout_background_icon_disabled: false
        - sak_layout_colorstop_v1: sak_colorstops_awair_voc_v1
        - sak_layout_colorstop_v2: sak_colorstops_awair_voc_v2
        - sak_layout_scale_max: 250

Barcode/Stalagmites Example

4.0.1

Barcode/Stalagmites Example - Dark Barcode/Stalagmites Example - Light

Replace example entities with your entities!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
- type: 'custom:swiss-army-knife-card'
  entities:
    - entity: sensor.awair_element_study_carbon_dioxide
      name: 'CO2'
      area: 'Study'
  layout:
    template:
      name: sak_layout_fce2_sensor4
      variables:
        - sak_layout_sparkline_type: barcode
        - sak_layout_sparkline_variant: stalagmites
        - sak_layout_background_icon_disabled: false
        - sak_layout_colorstop_v1: sak_colorstops_awair_co2_v1
        - sak_layout_colorstop_v2: sak_colorstops_awair_co2_v2
        - sak_layout_scale_max: 3000

Bar Example

4.0.1

Bar Example - Dark Bar Example - Light

Replace example entities with your entities!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
- type: 'custom:swiss-army-knife-card'
  entities:
    - entity: sensor.awair_element_study_humidity
      name: 'Humidity'
      area: 'Study'
      decimals: 0
  layout:
    template:
      name: sak_layout_fce2_sensor4
      variables:
        - sak_layout_sparkline_type: bar
        - sak_layout_background_icon_disabled: false
        - sak_layout_colorstop_v1: sak_colorstops_awair_humidity_v1
        - sak_layout_colorstop_v2: sak_colorstops_awair_humidity_v2
        - sak_layout_scale_max: 100

Dots Example

4.0.1

Dots Example - Dark Dots Example - Light

Replace example entities with your entities!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
- type: 'custom:swiss-army-knife-card'
  entities:
    - entity: sensor.awair_element_study_pm2_5
      name: 'PM2.5'
      area: 'Study'
      icon: mdi:dots-hexagon
  layout:
    template:
      name: sak_layout_fce2_sensor4
      variables:
        - sak_layout_sparkline_type: dots
        - sak_layout_background_icon_disabled: false
        - sak_layout_colorstop_v1: sak_colorstops_awair_pm25_v1
        - sak_layout_colorstop_v2: sak_colorstops_awair_pm25_v2
        - sak_layout_scale_max: 100

Graded/Rank Order Example

4.0.1

Graded/Rank Order Example - Dark Graded/Rank Order Example - Light

Replace example entities with your entities!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
- type: 'custom:swiss-army-knife-card'
  entities:
    - entity: sensor.awair_element_study_carbon_dioxide
      name: 'CO2'
      area: 'Study'
  layout:
    template:
      name: sak_layout_fce2_sensor4
      variables:
        - sak_layout_background_icon_disabled: false
        - sak_layout_colorstop_v1: sak_colorstops_awair_co2_v1
        - sak_layout_colorstop_v2: sak_colorstops_awair_co2_v2
        - sak_layout_scale_max: 3000

Equalizer Example

4.0.1

Fill field must be set to false

Otherwise the equalizer does strange things with the first row.

Equalizer Example - Dark Equalizer Example - Light

Replace example entities with your entities!

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
- type: 'custom:swiss-army-knife-card'
  entities:
    - entity: sensor.awair_element_study_carbon_dioxide
      name: 'CO2'
      area: 'Study'
  layout:
    template:
      name: sak_layout_fce2_sensor4
      variables:
        - sak_layout_sparkline_type: equalizer
        - sak_layout_background_icon_disabled: false
        - sak_layout_colorstop_v1: sak_colorstops_awair_co2_v1
        - sak_layout_colorstop_v2: sak_colorstops_awair_co2_v2
        - sak_layout_scale_max: 3000