Tomorrow Pollen All with AQI Card
Visualization¶
This card uses the Material 3 theme D06, TealBlue
| Description | Aspect Ratio | Target Size |
|---|---|---|
| A card that shows the pollen status from Tomorrow and the AQI value. This value from Tomorrow doesn't work, so I used the default AQI integration. | 6/2 | Grid with 1 column |
| SAK Tool | Used for |
|---|---|
| Ellipse | The half ellipse, as the left part of the circle is cutoff by the card. |
| Icon | Entity Icon. |
| Name | Name of AQI Entity |
| Circle | Circle as background for the Svg. Animated, state dependent |
| UserSvg | Svg image for AQI. Animated, state dependent |
| State | State of AQI |
| State | State of Pollutant |
| Line | Vertical line separator |
| Name | Name of Trees Entity |
| UserSvg | Svg image for trees. Animated, state dependent |
| State | State of trees entity |
| Name | Name of Grass Entity |
| UserSvg | Svg image for grass. Animated, state dependent |
| State | State of grass entity |
| Name | Name of Weed Entity |
| UserSvg | Svg image for weed. Animated, state dependent |
| State | State of weed entity |
Integrations¶
You need the AirVisual integration: 
and the tomorrow.io integration:
Interaction¶
| Part | Description |
|---|---|
| Card | All tools connected to an entity do show by default the "more-info" dialog once clicked |
Usage¶
You need the tomorrow.io SVG files from Github and put those in the www/images/tomorrow folder
Images and colors used for this card are adapted versions from Isabella Alströms pollen images
You need the AirVisual SVG files from Github and put those in the www/images/airvisual folder
Replace tomorrow entities with your entities!. The AQI entities are generic
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | |
| Data | Default | Required | Description |
|---|---|---|---|
| entities | The three tomorrow pollen entities; tree, grass and weed and the two AQI entities, in that order! | ||
| sak_layout_tomorrow_pollen_image_path | tomorrow/ | Folder in /local/images/, including a trailing slash! |
YAML Template Definition¶
Full definition of layout template
sak_layout_fce_tomorrow_pollen_all_aqi:
template:
type: layout
defaults:
- sak_layout_tomorrow_pollen_image_path: 'tomorrow/'
layout:
aspectratio: 6/2
toolsets:
# ================================================================
- toolset: line1
position:
cx: 200
cy: 100
tools:
# ------------------------------------------------------------
- type: line
position:
cx: 50
cy: 50
orientation: vertical
length: 100
styles:
line:
fill: var(--primary-text-color)
opacity: 0.5
# ================================================================
- toolset: half-circle
position:
cx: 0 # Center on cards border
cy: 100
tools:
# ------------------------------------------------------------
- type: ellipse
position:
cx: 50
cy: 50
radiusx: 48
radiusy: 96
styles:
ellipse:
fill: none
stroke: var(--theme-sys-color-secondary)
stroke-width: 3em
opacity: 0.5
# ================================================================
- toolset: column-icon
position:
cx: 25
cy: 100
tools:
# ------------------------------------------------------------
- type: icon
position:
cx: 50
cy: 50
align: center
icon_size: 50
entity_index: 0
styles:
icon:
fill: var(--theme-sys-color-secondary)
# ================================================================
- toolset: aqi-column
position:
cx: 125
cy: 100
tools:
# ------------------------------------------------------------
- type: name
position:
cx: 50
cy: -25
entity_index: 3
styles:
name:
text-anchor: middle
font-size: 26em
font-weight: 700
opacity: 1
# ------------------------------------------------------------
- type: circle
position:
cx: 50
cy: 50
radius: 50
entity_index: 3
show:
style: 'colorstops'
colorstops:
template:
name: colorstops_airvisual
variables:
- thegap: 2
styles:
circle:
stroke: none
fill: var(--theme-sys-elevation-surface-neutral4)
# ------------------------------------------------------------
- type: 'usersvg'
entity_index: 3
position:
cx: 50
cy: 50
height: 95
width: 95
style: 'images'
images:
- face1: /local/images/airvisual/ic-face-1.svg
- face2: /local/images/airvisual/ic-face-2.svg
- face3: /local/images/airvisual/ic-face-3.svg
- face4: /local/images/airvisual/ic-face-4.svg
- face5: /local/images/airvisual/ic-face-5.svg
- face6: /local/images/airvisual/ic-face-6.svg
animations:
- state: '50'
operator: <=
image: face1
- state: '100'
operator: <=
image: face2
- state: '150'
operator: <=
image: face3
- state: '200'
operator: <=
image: face4
- state: '300'
operator: <=
image: face5
- state: '9999'
operator: <=
image: face6
styles:
usersvg:
stroke-width: 5em
# ------------------------------------------------------------
- type: state
position:
cx: 43
cy: 125
entity_index: 3
show:
ellipsis: 5
styles:
state:
text-anchor: end
font-size: 20em
font-weight: 500
opacity: 0.7
# ------------------------------------------------------------
- type: state
position:
cx: 48
cy: 125
entity_index: 4
text:
before: ' | '
styles:
state:
text-anchor: start
font-size: 20em
font-weight: 500
opacity: 0.7
# ================================================================
- toolset: pollen-column-trees
position:
cx: 260
cy: 100
tools:
# ------------------------------------------------------------
- type: name
position:
cx: 50
cy: -25
entity_index: 0
styles:
name:
text-anchor: middle
font-size: 26em
font-weight: 700
opacity: 1
# ------------------------------------------------------------
- type: 'usersvg'
entity_index: 0
position:
cx: 50
cy: 50
height: 100
width: 100
style: 'images'
variables:
path: '[[sak_layout_tomorrow_pollen_image_path]]'
prefix: 'pollen_tree_'
images:
- default: >
[[[
return "/local/images/"+ config.variables.path + config.variables.prefix + state + ".svg";
]]]
# ------------------------------------------------------------
- type: state
position:
cx: 50
cy: 125
entity_index: 0
show:
uom: none
styles:
state:
text-anchor: middle
font-size: 20em
font-weight: 500
opacity: 0.7
# ================================================================
- toolset: pollen-column-grass
position:
cx: 395
cy: 100
tools:
# ------------------------------------------------------------
- type: name
position:
cx: 50
cy: -25
entity_index: 1
styles:
name:
text-anchor: middle
font-size: 26em
font-weight: 700
opacity: 1
# ------------------------------------------------------------
- type: 'usersvg'
entity_index: 1
position:
cx: 50
cy: 50
height: 100
width: 100
style: 'images'
variables:
path: '[[sak_layout_tomorrow_pollen_image_path]]'
prefix: 'pollen_grass_'
images:
- default: >
[[[
return "/local/images/"+ config.variables.path + config.variables.prefix + state + ".svg";
]]]
# ------------------------------------------------------------
- type: state
position:
cx: 50
cy: 125
entity_index: 1
show:
uom: none
styles:
state:
text-anchor: middle
font-size: 20em
font-weight: 500
opacity: 0.7
# ================================================================
- toolset: pollen-column-weed
position:
cx: 530
cy: 100
tools:
# ------------------------------------------------------------
- type: name
position:
cx: 50
cy: -25
entity_index: 2
styles:
name:
text-anchor: middle
font-size: 26em
font-weight: 700
opacity: 1
# ------------------------------------------------------------
- type: 'usersvg'
entity_index: 2
position:
cx: 50
cy: 50
height: 100
width: 100
style: 'images'
variables:
path: '[[sak_layout_tomorrow_pollen_image_path]]'
prefix: 'pollen_weed_'
images:
- default: >
[[[
return "/local/images/"+ config.variables.path + config.variables.prefix + state + ".svg";
]]]
# ------------------------------------------------------------
- type: state
position:
cx: 50
cy: 125
entity_index: 2
show:
uom: none
styles:
state:
text-anchor: middle
font-size: 20em
font-weight: 500
opacity: 0.7