Tomorrow Pollen All 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. You need to have setup that integration of course. | 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. |
| Text | Text "Pollen" |
| Text | Text "Index" |
| 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 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 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
Replace example entities with your entities!
1 2 3 4 5 6 7 8 9 10 11 12 13 | |
| Data | Default | Required | Description |
|---|---|---|---|
| entities | The three tomorrow pollen entities; tree, grass and weed, 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:
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: column-text
position:
cx: 125
cy: 100
tools:
# ------------------------------------------------------------
- type: text
position:
cx: 50
cy: 37
text: 'Pollen'
styles:
text:
text-anchor: middle
font-size: 30em
font-weight: 600
opacity: 0.9
# ------------------------------------------------------------
- type: text
position:
cx: 50
cy: 70
text: 'Index'
styles:
text:
text-anchor: middle
font-size: 26em
font-weight: 600
opacity: 0.9
# ================================================================
- 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: 22em
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: 22em
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: 22em
font-weight: 500
opacity: 0.7