The yaml files: HomeAssistantConfigVanRoel/sensors at main · ramakersr/HomeAssistantConfigVanRoel · GitHub
3 Likes
Mine, as usual is a work in progress. I’m still working on aligning the backgrounds; once I have the background how I want it I will add words for description. I have other pages with more data but this is a nice easy look at status:
1 Like
I have under another pollen/allergy dashboard but not all the backgrounds. I am still tweaking but I can post the yaml and png’s in a few hours after I get home.
1 Like
AQI: (look up PurpleAir thread if you need the integration)
type: picture-elements
image: /local/gauge/AQI_Index.png
elements:
- type: custom:canvas-gauge-card
entity: sensor.purpleair_aqi_a
style:
top: 50%
left: 50%
width: null
heigth: null
box-shadow: none
background-color: transparent
gauge:
type: radial-gauge
title: AQI
width: 230
height: 230
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: 0
valueInt: null
Air Quality Background:
Allergy yaml:
type: vertical-stack
cards:
- type: picture-elements
image: /local/gauge/Allergy_Blank.png
elements:
- type: state-label
style:
top: 84%
left: 50%
box-shadow: none
background-color: transparent
entity: sensor.allergy_index_today
attribute: allergen_name_1
title: null
- type: state-label
style:
top: 89%
left: 50%
box-shadow: none
background-color: transparent
entity: sensor.allergy_index_today
attribute: allergen_name_2
title: null
- type: state-label
style:
top: 94%
left: 50%
box-shadow: none
background-color: transparent
entity: sensor.allergy_index_today
attribute: allergen_name_3
title: null
- type: custom:canvas-gauge-card
entity: sensor.allergy_index_today
style:
top: 50%
left: 50%
box-shadow: none
background-color: transparent
gauge:
type: radial-gauge
title: ''
width: 230
height: 230
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: image
image: /local/gauge/Allergy_Logo.png
style:
top: 50%
left: 50%
width: 25%
box-shadow: none
background-color: transparent
- type: custom:mini-graph-card
entities:
- sensor.allergy_index_today
unit: null
name: Allergy (2 Weeks)
icon: none
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: null
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: '#ca3324'
Allergy/Asthma/Cold&Flu Background:
Allergy Logo:
Asthma Logo:
Cold&Flu Logo:
Tweaking Dewpoint & Temperature (if I remember after I am done, I will post)
For UV background search UV index tread (that guy is where I got it from).
UV Logo:
Asthma yaml:
type: vertical-stack
cards:
- type: picture-elements
image: /local/gauge/Allergy_Blank.png
elements:
- type: state-label
style:
top: 84%
left: 50%
box-shadow: none
background-color: transparent
entity: sensor.asthma_index_today
attribute: allergen_name_1
title: null
- type: state-label
style:
top: 89%
left: 50%
box-shadow: none
background-color: transparent
entity: sensor.asthma_index_today
attribute: allergen_name_2
title: null
- type: state-label
style:
top: 94%
left: 50%
box-shadow: none
background-color: transparent
entity: sensor.asthma_index_today
attribute: allergen_name_3
title: null
- type: custom:canvas-gauge-card
entity: sensor.asthma_index_today
style:
top: 50%
left: 50%
box-shadow: none
background-color: transparent
gauge:
type: radial-gauge
title: ''
width: 230
height: 230
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: image
image: /local/gauge/Asthma_Logo.png
style:
top: 50%
left: 50%
width: 25%
box-shadow: none
background-color: transparent
- type: custom:mini-graph-card
entities:
- sensor.asthma_index_today
unit: null
name: Asthma (2 Weeks)
icon: none
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: null
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: '#ca3324'
Cold&Flu yaml:
type: vertical-stack
cards:
- type: picture-elements
image: /local/gauge/Allergy_Blank.png
elements:
- type: state-label
style:
top: 89%
left: 37%
box-shadow: none
background-color: transparent
entity: sensor.cold_flu_index_today
attribute: flu_index
title: null
prefix: 'Flu: '
- type: state-label
style:
top: 94%
left: 37%
box-shadow: none
background-color: transparent
entity: sensor.cold_flu_index_today
attribute: fever_index
title: null
prefix: 'Fever: '
- type: state-label
style:
top: 89%
left: 63%
box-shadow: none
background-color: transparent
entity: sensor.cold_flu_index_today
attribute: strep_index
title: null
prefix: 'Strep: '
- type: state-label
style:
top: 94%
left: 63%
box-shadow: none
background-color: transparent
entity: sensor.cold_flu_index_today
attribute: cough_index
title: null
prefix: 'Cough: '
- type: custom:canvas-gauge-card
entity: sensor.cold_flu_index_today
style:
top: 50%
left: 50%
box-shadow: none
background-color: transparent
gauge:
type: radial-gauge
title: ''
width: 230
height: 230
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: image
image: /local/gauge/Cold_Logo.png
style:
top: 50%
left: 50%
width: 25%
box-shadow: none
background-color: transparent
- type: custom:mini-graph-card
entities:
- sensor.cold_flu_index_today
unit: null
name: Cold & Flu (2 Weeks)
icon: none
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: null
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: '#ca3324'
IQVIA integration provide Allergy, Asthma, & Cold/Flu info.
OpenUV for UV (I’m moving to my own UV sensor, my WeatherFlow Tempest weather station provide the UV index).
You can get Temperature/Humidity/Dewpoint from a variety of places.
The backgrounds are all derivatives of the UV background with I got from the UV tread.
I posted the weather Alerts on some thread, I get it from NWS Alerts (National Weather Service) integration.
Did I forget anything?
Change the image location to where ever you decide to put it.
I’m still looking for good logs for Air Quaility / Temperature / Humidity / Dewpoint … if you come across any I’m interested (I just have not gotten around to it).
https://github.com/GlennGoddard/CanvasGaugeBackgrounds
I guess I forgot to incude the link. I have the graphics and code on github on the link above.
2 Likes