Thought to share my allergen and asthma dashboard for you sufferers like myself.
This card uses the following :picture-elements entity-attributes-card circle-sensor-card
This is the config
type: picture-elements
image: /local/pics/field-of-sunflowers.jpg
elements:
- type: 'custom:entity-attributes-card'
filter:
include:
- key: sensor.allergy_index_today.allergen_name_1
name: ' '
- key: sensor.allergy_index_today.allergen_name_2
name: ' '
- key: sensor.allergy_index_today.allergen_name_3
name: ' '
heading_name: ' '
heading_state: Allergens
style:
top: 30%
left: 34%
font-size: 16px
color: white
text-align: center
text-shadow: 1px 1px black
'--paper-card-background-color': none
'--secondary-background-color': none
'--ha-card-box-shadow': none
transform: 'translate(0%,-50%)'
- type: 'custom:entity-attributes-card'
filter:
include:
- key: sensor.allergy_index_forecasted_average_2.outlook
name: ' '
heading_name: ' '
heading_state: Outlook
style:
top: 80%
left: 0%
font-size: 16px
color: white
text-shadow: 1px 1px black
'--paper-card-background-color': none
'--secondary-background-color': none
transform: 'translate(0%,-50%)'
- type: 'custom:entity-attributes-card'
filter:
include:
- key: sensor.allergy_index_forecasted_average_2.rating
name: ' '
heading_name: ' '
heading_state: ' '
style:
top: 5%
left: 2.5%
font-size: 16px
color: white
text-shadow: 1px 1px black
'--paper-card-background-color': none
'--secondary-background-color': none
'--ha-card-box-shadow': none
transform: 'translate(0%,-50%)'
- type: 'custom:entity-attributes-card'
filter:
include:
- key: sensor.asthma_index_forecasted_average.rating
name: ' '
heading_name: ' '
heading_state: ' '
style:
top: 5%
left: 65%
font-size: 16px
color: white
text-shadow: 1px 1px black
'--paper-card-background-color': none
'--secondary-background-color': none
'--ha-card-box-shadow': none
transform: 'translate(0%,-50%)'
- type: 'custom:circle-sensor-card'
entity: sensor.asthma_index_today
max: 12
min: 0
stroke_width: 8
gradient: true
fill: '#125054'
name: Asthma
units: ' '
font_style:
font-size: 16px
font-color: white
text-shadow: 2px 2px black
color_stops:
'0': '#55FF55'
'6': '#ffff21'
'8': '#ff0000'
style:
top: 15%
left: 70%
width: 100px
height: 100px
transform: none
- type: 'custom:circle-sensor-card'
entity: sensor.allergy_index_today
max: 12
min: 0
stroke_width: 8
gradient: true
fill: '#125054'
name: Pollen
units: ' '
font_style:
font-size: 16px
font-color: white
text-shadow: 2px 2px black
color_stops:
'0': '#55FF55'
'6': '#ffff21'
'8': '#ff0000'
style:
top: 15%
left: 5%
width: 100px
height: 100px
transform: none
5 Likes
This card looks amazing!
Would you mind sharing what data source you used and how you setup the sensors?
Thx
Thank you!IQVIA , now its an integration within HA and the sensors are automatically created for you, everything else is in the configuration I posted.
Thank you for your prompt response.
I was able to install IQVIA via the HA Configuration/Integrations interface and it supplied the necessary sensors. I downloaded an image, created a new card and it was up and running. I only had to change the allergy_index_forecasted_average_2 sensors to sensor.allergy_index_forecasted_average from your uploaded code and it was working.
I only have one last thing to address which is the custom:entity-attributes-card elements are showing up inside a black or white box depending on whether I’m using a dark or daylight theme; not a transparent box (see snippet). I have tried changing the ‘–paper-card-background-color’: none entries to various rgba entries but nothing seems to work.
Is this a more global system setting somewhere?
Do you have any suggestions?
Thanks for reminding me, that was an issue that was introduced in one of the HA upgrades. What you want to do is replace
'--paper-card-background-color': none
With '--ha-card-background': none
Would love to see what yours looks like when your done.
Thank you for sharing your work and insight.
Here is my final product. I’m not a css expert and was not able to get the text contrast right on the image, but I exceeded my time budget on this :-).
type: picture-elements
image: /local/pics/field_of_sunflowers.jpg
elements:
- type: 'custom:circle-sensor-card'
entity: sensor.asthma_index_today
max: 12
min: 0
stroke_width: 8
gradient: true
fill: '#125054'
name: Asthma
units: ' '
font_style:
font-size: 14px
font-color: white
text-shadow: 2px 2px black
color_stops:
'0': '#55FF55'
'6': '#ffff21'
'8': '#ff0000'
style:
top: 12%
left: 38%
width: 100px
height: 100px
transform: none
- type: 'custom:circle-sensor-card'
entity: sensor.allergy_index_today
max: 12
min: 0
stroke_width: 8
gradient: true
fill: '#125054'
name: Pollen
units: ' '
font_style:
font-size: 14px
font-color: white
text-shadow: 2px 2px black
color_stops:
'0': '#55FF55'
'6': '#ffff21'
'8': '#ff0000'
style:
top: 12%
left: 6%
width: 100px
height: 100px
transform: none
- type: 'custom:circle-sensor-card'
entity: sensor.cold_flu_index_today
max: 12
min: 0
stroke_width: 8
gradient: true
fill: '#125054'
name: Cold/Flu
units: ' '
font_style:
font-size: 14px
font-color: white
text-shadow: 2px 2px black
color_stops:
'0': '#55FF55'
'6': '#ffff21'
'8': '#ff0000'
style:
top: 12%
left: 70%
width: 100px
height: 100px
transform: none
- type: 'custom:entity-attributes-card'
filter:
include:
- key: sensor.allergy_index_forecasted_average.rating
name: ' '
heading_name: ' '
heading_state: ' '
style:
top: 5%
left: 3%
font-size: 14px
width: 100px
text-align: center
color: white
text-shadow: 2px 2px black
'--ha-card-background': none
'--secondary-background-color': none
'--ha-card-box-shadow': none
transform: 'translate(0%,-50%)'
- type: 'custom:entity-attributes-card'
filter:
include:
- key: sensor.asthma_index_forecasted_average.rating
name: ' '
heading_name: ' '
heading_state: ' '
style:
top: 5%
left: 35%
font-size: 14px
color: white
text-shadow: 2px 2px black
width: 100px
text-align: center
'--ha-card-background': none
'--secondary-background-color': none
'--ha-card-box-shadow': none
transform: 'translate(0%,-50%)'
- type: 'custom:entity-attributes-card'
filter:
include:
- key: sensor.cold_flu_forecasted_average.rating
name: ' '
heading_name: ' '
heading_state: ' '
style:
top: 5%
left: 67%
font-size: 14px
color: white
text-shadow: 2px 2px black
width: 100px
text-align: center
'--ha-card-background': none
'--secondary-background-color': none
'--ha-card-box-shadow': none
transform: 'translate(0%,-50%)'
- type: 'custom:entity-attributes-card'
filter:
include:
- key: sensor.allergy_index_today.allergen_name_1
name: ' '
- key: sensor.allergy_index_today.allergen_name_2
name: ' '
- key: sensor.allergy_index_today.allergen_name_3
name: ' '
heading_name: Allergens
heading_state: ' '
style:
top: 58%
left: 3%
font-size: 14px
color: white
text-align: left
text-shadow: 2px 2px black
line-height: 10px
width: 100px
height: 100px
'--ha-card-background': none
'--secondary-background-color': none
'--ha-card-box-shadow': none
transform: 'translate(0%,-50%)'
- type: 'custom:entity-attributes-card'
filter:
include:
- key: sensor.asthma_index_today.allergen_name_1
name: ' '
- key: sensor.asthma_index_today.allergen_name_2
name: ' '
- key: sensor.asthma_index_today.allergen_name_3
name: ' '
heading_name: ' '
heading_state: Pollutants
style:
top: 58%
left: 36%
font-size: 14px
color: white
text-align: left
text-shadow: 2px 2px black
line-height: 10px
width: 100px
height: 100px
'--ha-card-background': none
'--secondary-background-color': none
'--ha-card-box-shadow': none
transform: 'translate(0%,-50%)'
- type: 'custom:entity-attributes-card'
filter:
include:
- key: sensor.cold_flu_index_today.flu_index
name: 'Flu:'
- key: sensor.cold_flu_index_today.fever_index
name: 'Fever:'
- key: sensor.cold_flu_index_today.strep_index
name: 'Strep:'
- key: sensor.cold_flu_index_today.cough_index
name: 'Cough:'
heading_name: Constituents
heading_state: ' '
style:
top: 58%
left: 67%
font-size: 14px
color: white
text-align: left
text-shadow: 2px 2px black
line-height: 10px
width: 100px
height: 100px
'--ha-card-background': none
'--secondary-background-color': none
'--ha-card-box-shadow': none
transform: 'translate(0%,-50%)'
- type: 'custom:entity-attributes-card'
filter:
include:
- key: sensor.allergy_index_forecasted_average.outlook
name: ' '
heading_name: ' '
heading_state: Pollen Outlook
style:
top: 80%
left: 3%
font-size: 14px
color: white
text-shadow: 2px 2px black
line-height: 10px
'--ha-card-background': none
'--secondary-background-color': none
transform: 'translate(0%,-50%)'
The image came from https://hdwallsource.com/free-sunflower-field-pictures-32398.html .
Thank you again.
1 Like
I looks good. If I remember correctly, for the contrast I just darken the lower part of the picture. On another note, I wish the pollen season of over where I’m at.
GlennHA
May 11, 2021, 1:57pm
8
I have been unable to get the IQVIA integration to work, is there something else that has replaced it?
It looks like after 2021.5 update, the integration no longer works. I just updated to 20201.5.3 with the hope the issue was addressed… No joy. Time to search for an alternative
Hi, as @Zoriontsu pointed out, it’s a problem with 2021.5. I’m still on 21.4.6. and its working no better than usual, it tends to flake out every once in a while.
GlennHA
May 20, 2021, 11:47pm
12
Based on the pictures above and the code it looks like Asthma will give at least 3 allergens when available, I currently only have allergen_name_1; 2 and 3 are not listed.
I currently have three allergens for allergy; is that the max or is there more?
GlennHA:
3 allergens
I’m still show 3 and don’t believe I’ve seen more than 3 up to this point.
GlennHA
May 28, 2021, 7:35pm
14
I have been unable to get the circle-gauge card to work with the latest HA versions. Is there an alternative that works to scale. I also was unable to get the attributes card to work.
Below is scalable and works well on a phone.
GlennHA
June 2, 2021, 4:00pm
15
This is what I have for now. It needs some tweaking but the wife likes it.
2 Likes
@GlennHA , that is sweet look. Great job!
GlennHA
June 3, 2021, 3:47am
17
Background Images:
AQI Gauge:
type: vertical-stack
cards:
- type: picture-elements
image: /local/gauge/AQI_Index.png
elements:
- type: custom:canvas-gauge-card
entity: sensor.purpleair_aqi_a
style:
top: 55%
left: 50%
box-shadow: none
background-color: transparent
gauge:
type: radial-gauge
title: AQI
width: 200
height: 200
minValue: 0
maxValue: 500
startAngle: 40
ticksAngle: 280
valueBox: true
majorTicks:
- '0'
- '50'
- '100'
- '150'
- '200'
- '250'
- '300'
- '350'
- '400'
- '450'
- '500'
minorTicks: 5
strokeTicks: true
highlights:
- from: 0
to: 50
color: rgba(104, 225, 67, .75)
- from: 50
to: 100
color: rgba(255, 255, 85, .75)
- from: 100
to: 150
color: rgba(239, 133, 51, .75)
- from: 150
to: 200
color: rgba(234, 51, 36, .75)
- from: 200
to: 300
color: rgba(140, 26, 75, .75)
- from: 300
to: 500
color: rgba(115, 20, 37, .75)
borders: 'no'
needleType: arrow
needleWidth: 4
needleCircleSize: 7
needleCircleOuter: true
needleCircleInner: false
animationDuration: 1500
animationRule: linear
valueBoxBorderRadius: 10
colorValueBoxRect: '#222'
colorValueBoxRectEnd: '#333'
valueDec: 1
valueInt: null
- type: custom:mini-graph-card
entities:
- sensor.purpleair_aqi_a
unit: AQI (24hr)
name: Air Quality
icon: null
hour24: true
show:
fill: true
legend: false
labels: false
name: true
extrema: true
average: true
points: false
name_adaptive_color: true
icon_adaptive_color: true
show_legend: false
font_size: 75
line_width: 3
points_per_hour: 4
hours_to_show: 24
color_thresholds_transition: hard
color_thresholds:
- value: 0
color: '#68FF43'
- value: 50.5
color: '#FFFF55'
- value: 100.5
color: '#EF8533'
- value: 150.5
color: '#EA3324'
- value: 200.5
color: '#8C1A4B'
- value: 300.5
color: '#731425'
The other three are effectively the same:
type: vertical-stack
cards:
- type: picture-elements
image: /local/gauge/Allergy_Index.png
elements:
- type: custom:canvas-gauge-card
entity: sensor.allergy_index_today
style:
top: 55%
left: 50%
box-shadow: none
background-color: transparent
gauge:
type: radial-gauge
title: Allergy Index
width: 200
height: 200
minValue: 0
maxValue: 12
startAngle: 40
ticksAngle: 280
valueBox: true
majorTicks:
- '0'
- '1'
- '2'
- '3'
- '4'
- '5'
- '6'
- '7'
- '8'
- '9'
- '10'
- '11'
- '12'
minorTicks: 5
strokeTicks: true
highlights:
- from: 0
to: 2.4
color: rgba(104, 200, 67, .75)
- from: 2.4
to: 4.8
color: rgba(104, 250, 67, .75)
- from: 4.8
to: 7.2
color: rgba(255, 255, 85, .75)
- from: 7.2
to: 9.6
color: rgba(239, 133, 51, .75)
- from: 9.6
to: 12
color: rgba(234, 51, 36, .75)
borders: 'no'
needleType: arrow
needleWidth: 4
needleCircleSize: 7
needleCircleOuter: true
needleCircleInner: false
animationDuration: 1500
animationRule: linear
valueBoxBorderRadius: 10
colorValueBoxRect: '#222'
colorValueBoxRectEnd: '#333'
valueDec: 1
valueInt: null
- type: custom:mini-graph-card
entities:
- sensor.allergy_index_today
unit: ''
name: Allergy Index (2 week)
icon: ''
hour24: true
show:
fill: true
legend: false
labels: false
state: true
icon: true
extrema: true
average: true
name: true
points: false
name_adaptive_color: true
icon_adaptive_color: true
show_legend: false
font_size: 75
line_width: 3
points_per_hour: 4
hours_to_show: 336
color_thresholds_transition: hard
color_thresholds:
- value: 0
color: '#68c843'
- value: 2.5
color: '#68fa43'
- value: 4.9
color: '#ffff55'
- value: 7.3
color: '#ef8533'
- value: 9.7
color: '#ea3324'
- type: markdown
content: >-
<center>
Allergens:
{{states.sensor.allergy_index_today.attributes.allergen_name_1}}
{{states.sensor.allergy_index_today.attributes.allergen_name_2}}
{{states.sensor.allergy_index_today.attributes.allergen_name_3}}
</br>
{{states.sensor.allergy_index_forecasted_average.attributes.outlook}}
GlennHA
June 5, 2021, 4:13am
18
New and improved:
I think I like this layout. I didn’t think about adding the logos seperatly until later, that makes it way more versatile and improves the look.
I have not figured out (yet) a good way to display large amounts of text like pollen outlook. All the text button cards I’ve tried don’t work well on the picture-element.
The gauges look a little small compared to the backgrounds on a monitor but on my phone they are about as big as they can be and still read and see the colors.
If anyone is interested I can post all the pictures.
3 Likes
