Thoughts on this one?
I think this is my final.
Icons change based on air quality.
Font color inverts from black to white as levels get higher.
Colors between the three sections are more closely matched now.
type: vertical-stack
cards:
- type: 'custom:button-text-card'
title: |
[[[ return states["sensor.purpleair_description"].state ]]]
subtitle: Air Quaility
icon_size: 55
icon_color: |
[[[
if(states["sensor.purpleair_aqi"].state >= 300){
return 'white';
} else if(states["sensor.purpleair_aqi"].state >= 200){
return 'white';
} else if(states["sensor.purpleair_aqi"].state >= 150){
return 'white';
} else if(states["sensor.purpleair_aqi"].state >= 100){
return 'white';
} else if(states["sensor.purpleair_aqi"].state >= 50){
return 'black';
} else{
return 'black';
}
]]]
icon: |
[[[
if(states["sensor.purpleair_aqi"].state >= 300){
return 'mdi:emoticon-dead';
} else if(states["sensor.purpleair_aqi"].state >= 200){
return 'mdi:emoticon-cry';
} else if(states["sensor.purpleair_aqi"].state >= 150){
return 'mdi:emoticon-sad';
} else if(states["sensor.purpleair_aqi"].state >= 100){
return 'mdi:emoticon-confused';
} else if(states["sensor.purpleair_aqi"].state >= 50){
return 'mdi:emoticon-neutral';
} else{
return 'mdi:emoticon-excited';
}
]]]
font_color: |
[[[
if(states["sensor.purpleair_aqi"].state >= 300){
return 'white';
} else if(states["sensor.purpleair_aqi"].state >= 200){
return 'white';
} else if(states["sensor.purpleair_aqi"].state >= 150){
return 'white';
} else if(states["sensor.purpleair_aqi"].state >= 100){
return 'white';
} else if(states["sensor.purpleair_aqi"].state >= 50){
return 'black';
} else{
return 'black';
}
]]]
large: true
background_color: |
[[[
if(states["sensor.purpleair_aqi"].state >= 300){
return '#731425';
} else if(states["sensor.purpleair_aqi"].state >= 200){
return '#8C1A4B';
} else if(states["sensor.purpleair_aqi"].state >= 150){
return '#EA3324';
} else if(states["sensor.purpleair_aqi"].state >= 100){
return '#EF8533';
} else if(states["sensor.purpleair_aqi"].state >= 50){
return '#FFFF55';
} else{
return '#68FF43';
}
]]]
- type: 'custom:canvas-gauge-card'
card_height: 300
entity: sensor.purpleair_aqi
name: ''
gauge:
type: radial-gauge
title: AQI
width: 300
height: 300
minValue: 0
maxValue: 500
startAngle: 40
ticksAngle: 280
valueBox: true
majorTicks:
- '0'
- '50'
- '100'
- '150'
- '200'
- '250'
- '300'
- '350'
- '400'
- '450'
- '500'
minorTicks: 10
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: 0
- type: 'custom:mini-graph-card'
entities:
- sensor.purpleair_aqi
unit: AQI
name: ' '
icon: blank
show:
fill: true
legend: false
labels: false
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: 24
color_thresholds:
- value: 0
color: '#68FF43'
- value: 50
color: '#68FF43'
- value: 50.5
color: '#FFFF55'
- value: 100
color: '#FFFF55'
- value: 100.5
color: '#EF8533'
- value: 150
color: '#EF8533'
- value: 150.5
color: '#EA3324'
- value: 200
color: '#EA3324'
- value: 200.5
color: '#8C1A4B'
- value: 300
color: '#8C1A4B'
- value: 300.5
color: '#731425'
