New Thermostat card based on Lovelace Style

First time developing for HA + Lovelace so talk about a HUGE learning curve.
I wanted to post a design for a card I’m working on and see what yall think.

My need was I didn’t want to have the controls visible unless I wanted to change them. I usually set it and forget it with thermostats. All I want to do is keep an eye on it, plus I have 3 of them in my house so I don’t want them taking up a ton of space.

Future plans may be to add the ability to edit the types “modes”, like if I was to go on vacation.

Development wise I’m trying to make this whole thing in TS using a boilerplate git repo I found that has been very helpful in getting up and running. I’m trying to keep the yaml coding to a minimum as its slower for me compared to using Javascript/Typescript.

I’ve also created a separate repo to just develop the CSS and HTML layout design so I don’t have to keep refreshing HA when I make CSS style changes. This has been the most efficient way of coding the interface design so far I’ve found since there is no live reload yet for HA.

10 Likes

Looks nice, my approach is also “set and forget”, I also like the + and - buttons, as I find those controls easier to use.

Questions:

  • I would like to see both the set and actual temp on the collapsed card. Is that possible?
  • I use Honeywell evohome on plain old central heating plates. So no cooling. Can I hide that option?
  • Do you already share your code? Where do you share it?
1 Like

Very nice!! Love the collapse feature - I too have 3 and its a bit of a space hog with 3 cards right now. The design is very clean - very impressed this is your first go at this.

One thought as well - build the ability to handle temp range. Meaning you can set a target for the A/C to cut in AND a target for the heat to cut on.

This is very poorly supported with the current options on HA.

If you put on HACS, I’d love to test it out and help in any way. If not, enjoy!

2 Likes

always like new thermostat… keep up
just for info, i liked the mushrooms too:
Screenshot 2022-11-01 at 16.17.08
Screenshot 2022-11-01 at 16.17.12

2 Likes

Awesome guys thank you so much for the feedback. I went back and did an updated layout based on it. Would love help with testing as well as how to host it on git for everyone. All I’ve ever done are personal projects on github .


(may need text labels under each mode since Auto and power off are not immediately clear)

@checking12 Once I get a working version up that I’m not ashamed of showing lol, I will make sure to let you know.

@kksligh I’ll have to look into how I would do that just using the wall mounted thermostat so I understand how it works and then can translate it to HA (hopefully). This new design I think is closer to what you would want I think. The dropdown in settings contains

  • NoHold
  • HoldUntil
  • PermanentHold
  • TemporaryHold
  • VacationHold

My guess is that it you would select whatever one you want and then set the temp. Would need to test it out for sure though.

Here’s an example of the range setting…

Interesting ok let me try and wrap my head around this.
So for the range - are you saying that you can adjust the 2 different “target temp” settings?

Does an “operation” have to be set as heat/cool for that to take place or does that work with any mode?

Can you send me a screen-shot of your state attributes for this thermostat in developer settings? Mine looks like this:

Thanks!

I echo these points,

Ok here is where I’m at right now:

Top (blue) default layout for people who don’t use Ranges.

2nd Red has ranges clearly set with current temp. Current Temp would turn blue if above 72 I was thinking.

To change ranges you tap the edit ranges button in the bottom right which would bring a second screen up to edit both heat and cool range settings. User would need to “update” them in order to save them. Panel would close on save or you hit the X in the top right.

I guess I still need to add in humidity range selector, but I’m getting there I think.

Hows this all looking?

1 Like

Set your “State” to Heat/Cool…that’s where these options will show up…

See attached

1 Like

Ok here is what I got so far for all the settings.
Second set on the right has an extra button on the main interface that you can tap and toggle between setting heating / cooling targets.

Open settings:

Looking at it in view:

7 Likes

It’s looks nice!
How do I get it? :slight_smile:

3 Likes

Still fiddling with the design and implementation but its happening lol.

I’m looking at one other more minimalistic layout design idea.

Below is two different layouts. The main idea is to just show the temperature and the status quickly to the user. If you need to access settings then you tap on it and a pop-up will open with your settings.

Last one in each row / col shows if your unit is in “active” mode for heating.

Popup: Basic settings on the left, more settings on right if you have heat/cool selected

3 Likes

let me know when you post on HACS and I’ll gladly test out - looks incredible!

1 Like

Will do thanks! I’ll need help with humidity - I don’t have that feature with mine. I have to change it manually through a separate panel at my place for some reason, its not built into the thermostat I have.

1 Like

Can’t wait to try this. Also, what “view” are you using in that last photo? (Where you have room and
Looks to be shortcuts for a camera, etc)

1 Like

Ran across an issue coding last night. I cannot change the havc-mode state to heat_cool (aka auto) via a service call. I can change to heat and cool only. Is this a bug?

If I change it to heat_cool in Homekit or the Honeywell app it changes to the mode correctly. They also have it listed as Auto though.

I’ve tried changing the service call to send the mode “auto” instead of “heat_cool” and I get an error.

That was just part of the mock up, don’t think its part of the lovelace interface ui

Another coding issue maybe you can help with. Can you confirm that both high and low temps need to be set in order to adjust the heat/cool temps using a service call in the developer settings like below?

I’ve noticed that on my thermostat if only one is set, I get an error trying to make the call.

Thanks for any help!

Yes - for the heat/cool range setting on any thermostat I’ve used, you have to have both a heat target and a cool target for it to work