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)