Need help making a better thermostat controller card

I have a Nest thermostat and the default thermostat controller card in Lovelace does not work well for my use case. So I’ve been trying to build a custom card that works the way I want. I have a working card built, but I’m not totally happy with it, and am looking for some suggestions for how to improve it.

Here is what my new card does:

  • A gauge with an indicator showing the current temperature. The gauge range is colored based on the current min/max temp range that I have set.
  • The background color changes based on the current state (i.e. whether it is presently heating or cooling)
  • Buttons to raise or lower the min/max temperature simultaneously that always keep the range within 3 degrees.
  • A button to submit the new min/max temperature to Nest. (This is to limit the number of API calls, since it is limited by Nest)

Here are the things that I want to improve/fix and would like suggestions for:

  • The gauge needle bounces around a lot while I interact with it. See the video above.

  • I cannot get it to display correctly as a popup card. I have used browser_mod in the past to have custom cards popup when I click on an element. However, it doesn’t seem to work with the templates that I use to set the upper/lower bounds for the colors in the gauge card, so it doesn’t color the gauge correctly.

  • Any other suggestions to make it look nicer.

Here are the add-ons I am currently using. I’m open to changing any of these or going in a completely different direction if needed.

  • custom:layout-card (to set the layout of the cards)
  • custom:card-templater (to dynamically set the min/max temp range used to color the gauge)
  • browser_mod (to make the card be a popup)
1 Like