I wanted to display my barometric pressure sensor data in an easy to interpret manner using a gauge card that could show the current pressure, the associated typical weather condition as well as the minimum and maximum pressure of the preceding 24 hours.
The default lovelace gauge card was my first go-to, but that does not accept template or dynamic values.
I then tried a custome barometer gauge card (Custom card: barometer gauge - Share your Projects! / Dashboards & Frontend - Home Assistant Community), but did not like the thin width of the gauge and it did not scale down well when put into a small space.
Further searching led me to a post (Max and min dynamic value in Gauge card? - Configuration / Frontend - Home Assistant Community) referring to the “config-template-card”. One of the examples in that post thread is a gauge card with dynamic segments and this was what i was looking for!
I ended up used the config-template-card ( GitHub - iantrich/config-template-card: Templatable Lovelace Configurations), but struggled for a while trying to dynamically assign colors and labels to a Lovelace gauge card. I initially attempted to use templates in variables for color values, but the gauge card would either not display at all or ignore the dynamic colors. I could not get that to work and instead defined functions in the
variables
block to return the proper string (wrapped in quotes) based on the sensor value.
Below is the final working YAML configuration that dynamically sets the segment color (using a function) and gauge title (using another function to set weather conditions) based on the current pressure:
type: custom:config-template-card
variables:
gauge_Min: 1000
gauge_Max: 1025
var_Min: states['sensor.pressure_min_24'].state
var_Max: states['sensor.pressure_max_24'].state
var_Current: states['sensor.oslo_stoep_sensors_esp32_pressure'].state
fix_CLR: "\"#504A4B\""
min_CLR: "\"#0000FF\""
max_CLR: "\"#FF0000\""
line_width: 0.4
setWConditionTxt: |
(pressur) => {
if (pressur <= 1005) {
return 'Unstable';
}
else if (pressur <= 1010) {
return 'Unsettled';
}
else if (pressur <= 1015) {
return 'Fair';
}
else if (pressur <= 1020) {
return 'Fine';
}
else if (pressur > 1020) {
return 'Stable';
}
return 'Huh';
}
setWConditionClr: |
(pressur) => {
if (pressur <= 1005) {
return '#993366';
}
else if (pressur <= 1010) {
return '#9385B5';
}
else if (pressur <= 1015) {
return '#ACA800';
}
else if (pressur <= 1020) {
return '#19C3FF';
}
else if (pressur > 1020) {
return '#2196F3';
}
return 'white';
}
entities:
- sensor.oslo_stoep_sensors_esp32_pressure
- sensor.pressure_min_24
- sensor.pressure_max_24
card:
type: gauge
entity: sensor.oslo_stoep_sensors_esp32_pressure
needle: true
min: ${gauge_Min}
max: ${gauge_Max}
segments:
- from: ${gauge_Min}
color: ${fix_CLR}
- from: ${var_Min}
color: ${min_CLR}
- from: ${Number(var_Min) + line_width}
color: ${setWConditionClr(var_Current)}
- from: ${Number(var_Max) - line_width}
color: ${max_CLR}
- from: ${var_Max}
color: ${fix_CLR}
name: >-
${ setWConditionTxt(var_Current) + ' ' + var_Min + ' - ' + var_Max + ' hPa'
}
This is what my Lovelace barometric gauge card now looks like:
I love it and thought it might be of use to some of you as well.