Skip to content

Pollen Radar Card Examples

Visualization

Description Aspect Ratio
A card that shows the pollen status from Kleenex Pollen Radar 1/1
FHS Demonstrated Functionality
same_as Repeated horizontal lines with dy and dlength
same_as Repeated horseshoes with colored scale and large radius to look horizontal
same_as Icon state maps using the replace functionality of same_as to replace the state map
ref() Some of the Icon state maps are defined as constants, and used via the ref() function
calc() Extensive use of the calc() function to calculate positions and radiuses
Icon Icon with state map and external SVG files to display the trees/grass and weed pictures.
Horseshoes Horseshoes with state map and color stop.

More Visualizations

5.4.7-dev.12

Card 55 shows three horseshoes that show the state of the pollen for trees, grass and weed.

  • The pollen levels are displayed as levels
  • Labels are displayed on the state of the horseshoes
  • The active state has bold text
  • two arc shapes are used as background for the icon (external svg) and the text

Card 54 is a slight variation of card 55.

  • A grayscale color filter is configured to lower the intensity of the colors

The color filters do not alter external images and svgs

Card 53 shows a more traditional horseshoe

  • It shows the labels separate, around the horseshoe
  • A grayscale color filter is configured to lower the intensity of the colors

Card 52 is another variation.

  • It displays the pollen levels as a mode/single state, so only the active state is displayed

Integrations

These demo cards require:

  • The Kleenex Pollen Radar custom integration available through HACS.
  • Some SVG files from Github to be put in the www/images/kleenex folder
    • /local/images/kleenex/pollen_tree_low.svg, moderate, high and very_high
    • /local/images/kleenex/pollen_grass_low.svg, moderate, high and very_high
    • /local/images/kleenex/pollen_weed_low.svg, moderate, high and very_high

The Kleenex integration does NOT translate the very_high state. You have to override that label in the label settings of the horseshoe

Images and colors used for this card are adapted versions from Isabella Alströms pollen images

Interaction

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

YAML Card Definitions

5.4.7

YAML Definition for card #34 
  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
        - type: custom:flex-horseshoe-card
          # Entities Section
          entities:
            - entity: sensor.kleenex_pollen_radar_zoefdehaas_bomen_niveau
              area: ':34:'
              name: 'Trees'
            - entity: sensor.kleenex_pollen_radar_zoefdehaas_gras_niveau
              name: 'Grass'
              area: 'Kleenex Pollen'
            - entity: sensor.kleenex_pollen_radar_zoefdehaas_kruiden_niveau
              name: 'Weed'

          # Constants Section
          constants:
            radius0: 5000
            xpos0: 15
            dxPos1: 35
            dxPos2: 35
            pollen_tree_map:
              map:
                - state: 'low'
                  icon: url(/local/images/kleenex/pollen_tree_low.svg)
                - state: 'moderate'
                  icon: url(/local/images/kleenex/pollen_tree_moderate.svg)
                - state: 'high'
                  icon: url(/local/images/kleenex/pollen_tree_high.svg)
                - state: 'very_high'
                  icon: url(/local/images/kleenex/pollen_tree_very_high.svg)
            pollen_grass_map:
              map:
                - state: 'low'
                  icon: url(/local/images/kleenex/pollen_grass_low.svg)
                - state: 'moderate'
                  icon: url(/local/images/kleenex/pollen_grass_moderate.svg)
                - state: 'high'
                  icon: url(/local/images/kleenex/pollen_grass_high.svg)
                - state: 'very_high'
                  icon: url(/local/images/kleenex/pollen_grass_very_high.svg)
          layout:
            areas:
              - entity_index: 0
                xpos: 0
                ypos: 100
                styles:
                  - font-size: 0.75em
                  - text-transform: none     
                  - text-anchor: start                       
              - entity_index: 1
                xpos: 50
                ypos: 12
                styles:
                  - font-size: 1.7em
                  - text-transform: none     
            icons:
              - entity_index: 0
                xpos: calc(xpos0)
                ypos: 70
                icon_size: 4.5
                state_map:
                  ref(pollen_tree_map)

              - entity_index: 1
                same_as: 0
                same_as_dxpos: calc(dxPos1)
                same_as_replace:
                  - state_map
                state_map:
                  ref(pollen_grass_map)

              - entity_index: 2
                same_as: 1
                same_as_dxpos: calc(dxPos2)
                same_as_replace:
                  - state_map
                state_map:
                  map:
                    - state: 'low'
                      icon: url(/local/images/kleenex/pollen_weed_low.svg)
                    - state: 'moderate'
                      icon: url(/local/images/kleenex/pollen_weed_moderate.svg)
                    - state: 'high'
                      icon: url(/local/images/kleenex/pollen_weed_high.svg)
                    - state: 'very_high'
                      icon: url(/local/images/kleenex/pollen_weed_very_high.svg)

            # hlines section
            hlines:
              - xpos: 50
                ypos: 15
                length: 80
                styles:
                  - stroke: var(--disabled-text-color);
              - same_as: 0
                same_as_dypos: 3        # Shift 3 downwards
                same_as_dlength: 7.5    # increase length by 7.5
              - same_as: 1
                same_as_dypos: 3        # Shift 3 downwards
                same_as_dlength: 7.5    # increase length by 7.5

            # States section
            states:
              - entity_index: 0
                xpos: calc(xpos0)
                ypos: 90
                styles:
                  - font-size: 1.0em
              - entity_index: 1
                same_as: 0
                same_as_dxpos: calc(dxPos1)
              - entity_index: 2
                same_as: 1
                same_as_dxpos: calc(dxPos2)

            # Names section
            names:
              - entity_index: 0
                xpos: calc(xpos0)
                ypos: 45
                styles:
                  - font-size: 1.0em
                  - text-transform: none     
              - entity_index: 1
                same_as: 0
                same_as_dxpos: calc(dxPos1)
              - entity_index: 2
                same_as: 1
                same_as_dxpos: calc(dxPos2)

            # Horseshoes section
            horseshoes:
                # This horseshoe looks like a horizontal progress bar!
                # Use a big radius (5000) and extremely small arc (0.3)
              - entity_index: 0
                xpos: calc(xpos0)
                ypos: calc(-radius0 + xpos0 + 15)
                radius: calc(radius0)
                tickmarks_radius: calc(radius0)
                arc_degrees: .3
                flip: y

                show:
                  horseshoe: true
                  scale_tickmarks: false
                  horseshoe_style: colorstop
                  scale_style: colorstop
                  labels_at: none
                  ticks: false
                  label_badges: false
                  label_background: none
                # 
                horseshoe_scale:
                  min: 0
                  max: 4
                  width: 6
                  color: gray
                  gap: 0
                  styles:
                    - opacity: 0.6;
                #
                horseshoe_tickmarks:
                  ticks_major:
                    ticksize: 1
                    color_mode: colorstop
                    width: 12
                    offset: -3
                    thickness: 3
                    styles:
                      - stroke: var(--primary-text-color);
                      - fill: var(--primary-text-color);
                      - opacity: 0.7;
                #
                horseshoe_labels:
                  distance_min: 0.3
                  ticksize_min: 0.3
                  orientation: horizontal
                  offset: -34
                  badges:
                    radius: 6
                    color: var(--card-background-color)
                    border_color: var(--divider-color)
                    padding: 0
                    height: 10    # 12 is same as font-size of 1em    
                  styles:
                    - font-size: 0.7em
                #
                horseshoe_state:
                  width: 12
                  state_map:
                    map:
                      - state: 'low'
                        value: 0.99
                      - state: 'moderate'
                        value: 1.99
                      - state: 'high'
                        value: 2.99
                      - state: 'very_high'
                        value: 3.99
                  styles:
                    - stroke-linecap: butt
                #
                color_stops:
                  gap: 0.01 # Needs very small gap as arc is 0.3 degrees
                  colors:
                    0: '#838383'
                    1: '#fcc449'
                    2: '#ed8003'
                    3: 'red'

              # The full `same_as` functionality at its best:
              # repeated horseshoe takes only a few lines of YAML
              #
              # Saving around 60-70 lines of YAML per horseshoe config!
              - entity_index: 1
                same_as: 0
                same_as_dxpos: calc(dxPos1)
                show:
                  labels_at: none
              - entity_index: 2
                same_as: 1
                same_as_dxpos: calc(dxPos2)

5.4.7-dev.12

YAML Definition for card #55 
  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
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
- type: custom:flex-horseshoe-card
  entities:
    - entity: sensor.kleenex_pollen_radar_zoefdehaas_bomen_niveau
    # - entity: input_select.fake_pollen_trees
      area: ':55v2:'
      name: 'Trees'
    - entity: sensor.kleenex_pollen_radar_zoefdehaas_gras_niveau
      name: 'Grass'
      area: 'Kleenex Pollen'
    - entity: sensor.kleenex_pollen_radar_zoefdehaas_kruiden_niveau
      name: 'Weed'

  aspectratio: 3/1.2
  constants:
    radius0: 38 #36
    xpos0: 50
    dxPos1: 100
    dxPos2: 100
    arcsUpperArcDegrees: 210
    pollen_tree_map:
      map:
        - state: 'low'
          value: 0
          icon: url(/local/images/kleenex/pollen_tree_low.svg)
        - state: 'moderate'
          value: 1
          icon: url(/local/images/kleenex/pollen_tree_moderate.svg)
        - state: 'high'
          value: 2
          icon: url(/local/images/kleenex/pollen_tree_high.svg)
        - state: 'very_high'
          value: 3
          icon: url(/local/images/kleenex/pollen_tree_very_high.svg)
    pollen_grass_map:
      map:
        - state: 'low'
          value: 0
          icon: url(/local/images/kleenex/pollen_grass_low.svg)
        - state: 'moderate'
          value: 1
          icon: url(/local/images/kleenex/pollen_grass_moderate.svg)
        - state: 'high'
          value: 2
          icon: url(/local/images/kleenex/pollen_grass_high.svg)
        - state: 'very_high'
          value: 3
          icon: url(/local/images/kleenex/pollen_grass_very_high.svg)

  layout:
    arcs:
      - id: upperhalf_0
        xpos: calc(xpos0)
        ypos: 70
        radius: calc(radius0 - 10)
        arc_degrees: calc(arcsUpperArcDegrees)
        styles:
          fill: var(--disabled-text-color)
          fill-opacity: 0.3
          stroke-opacity: 0.3
          stroke-width: 1
          stroke: gray
      - id: upperhalf_1
        same_as: upperhalf_0
        same_as_dxpos: calc(dxPos1)
      - same_as: upperhalf_1
        same_as_dxpos: calc(dxPos2)

      - id: lowerhalf_0
        xpos: calc(xpos0)
        ypos: 70
        radius: calc(radius0 - 10)
        arc_degrees: calc(360 - arcsUpperArcDegrees - 10)
        flip: y
        styles:
          stroke-opacity: 0.3
          stroke-width: 1
          stroke: gray
      - id: lowerhalf_1
        same_as: lowerhalf_0
        same_as_dxpos: calc(dxPos1)
      - same_as: lowerhalf_1
        same_as_dxpos: calc(dxPos2)
    areas:
      - entity_index: 0
        xpos: 0
        ypos: 120
        styles:
          - font-size: 0.75em
          - text-transform: none     
          - text-anchor: start                       
      - entity_index: 1
        xpos: 150
        ypos: 10
        styles:
          - font-size: 1.7em
          - text-transform: none     
    icons:
      - entity_index: 0
        xpos: calc(xpos0)
        yposc: 60
        size: 4.5
        state_map:
          ref(pollen_tree_map)

      - entity_index: 1
        xpos: calc(xpos0)
        same_as: 0
        same_as_dxpos: calc(dxPos1)
        same_as_replace:
          - state_map
        state_map:
          ref(pollen_grass_map)

      - entity_index: 2
        same_as: 1
        same_as_dxpos: calc(dxPos2)
        same_as_replace:
          - state_map
        state_map:
          map:
            - state: 'low'
              value: 0
              icon: url(/local/images/kleenex/pollen_weed_low.svg)
            - state: 'moderate'
              value: 1
              icon: url(/local/images/kleenex/pollen_weed_moderate.svg)
            - state: 'high'
              value: 2
              icon: url(/local/images/kleenex/pollen_weed_high.svg)
            - state: 'very_high'
              value: 3
              icon: url(/local/images/kleenex/pollen_weed_very_high.svg)
    hlines:
      - xpos: 150
        ypos: 15
        length: 80
        styles:
          - stroke: var(--disabled-text-color);

    names:
      - entity_index: 0
        xpos: calc(xpos0)
        ypos: 90
        styles:
          - font-size: 1.5em
          - text-transform: none     
      - entity_index: 1
        same_as: 0
        same_as_dxpos: calc(dxPos1)
      - entity_index: 2
        same_as: 1
        same_as_dxpos: calc(dxPos2)

    horseshoes:
      - entity_index: 0
        debug_state_map: false
        xpos: calc(xpos0)
        ypos: 70
        radius: calc(radius0)
        tickmarks_radius: calc(radius0)
        arc_degrees: 360
        flip: both

        show:
          horseshoe: true
          scale_tickmarks: false
          horseshoe_style: colorstop
          scale_style: colorstop
          labels_at: stringstate
          ticks: false
          label_badges: false
          label_background: none
        # 
        horseshoe_scale:
          min: 0
          max: 4
          width: 27 #25
          gap: 0
          linecap: butt
          color_filter:
            grayscale:
              min: 0.2
              max: 0.6

          styles:
            opacity: 0.3
        #
        horseshoe_tickmarks:
          ticks_major:
            ticksize: 1
            color_mode: colorstop
            width: 12
            offset: -9
            thickness: 3
            styles:
              - stroke: var(--primary-text-color)
              - fill: var(--primary-text-color)
              - opacity: 0.7
        #
        horseshoe_labels:
          debug_labels: true
          distance_min: 0.3
          ticksize_min: 0.3
          orientation: arc
          offset: 0
          stringstate_level:
              before:
                styles:
                  - fill: var(--primary-background-color)
                  - opacity: 0.6
              current:
                styles:
                  - fill: var(--primary-background-color)
                  - font-weight: bold
              after:
                styles:
                  - opacity: 0.35
              state_map:
                map:
                  - state: very_high
                    label: Very High #Zeer Hoog
                    current:
                      styles:
                        - fill: var(--primary-text-color)
          styles:
            - font-size: 1.2em
            - opacity: 1
            - color: var(--primary-text-color)
            - font-weight: normal
        #
        horseshoe_state:
          mode: stringstate_level
          debug_state_map: false
          width: 27
          linecap: butt
          state_map:
            map:
              - state: 'low'
                value: 0.99
              - state: 'moderate'
                value: 1.99
              - state: 'high'
                value: 2.99
              - state: 'very_high'
                value: 3.99
          styles:
            - stroke-linecap: butt
        #
        color_stops:
          gap: 2
          colors:
            0: '#838383'
            1: '#fcc449'
            2: '#ed8003'
            3: '#e73f10'

      - entity_index: 1
        same_as: 0
        same_as_dxpos: calc(dxPos1)
      - entity_index: 2
        same_as: 1
        same_as_dxpos: calc(dxPos2)