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.
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!
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.
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.
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.
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.
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.
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.
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.
