Dynamic Gauge Card Colors & Text Using config-template-card (updated)

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: :memo: 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.

3 Likes