A climate card

[hcoohb]

Is there any plan for a climate card? Love the mushroom cards and a climate/thermostat card would be a great addition to the current cards. As the official HA is really huge and very different looking on the dashboard.

Thanks!

[brandensilva]

The README docs indicate there is a climate card planned in the future.

I think we should move towards this look which is where the mushroom design is inspired from with Yuhang's design work on Behance:

The + and - are a nice addition over the typical climate change cards because I find it to be rare to extend the temperature more than a couple degrees for my use cases. This is way easier to tap a couple times than trying to move the circular inputs.

[hcoohb]

Oh, sorry, I missed the line on the readme. My bad.

Now if we are discussing design, like you said, use case to modify temperatures by ore than a few degrees are probably extremely rare. So personally I do not think the design from Yuhang that keeps the sliding circle around the value makes much sense and it visually breaks from other controls. To keep in line with current design of light card, I think, we could have the controls on a second line. Selecting a prefered mode on the card ui editor, let you turn on/off by clicking on the icon. And then if you want to switch to other mode, icons on second line let you do so.

Here is what I coded using button-card for now, that matches my other mushroom-card themes:

[zsarnett]

I would recommend not working with the Round Slider. (as the one who built it for HA its not worth it and the UX isn't great)

[antonio1475]

Here is what I coded using button-card for now, that matches my other mushroom-card themes:

@hcoohb care to share the code for that? You might also want to install mushroom-theme (if you haven't already, I can't really tell) to make it even more mushroom looking.

[brandensilva]

@zsarnett Yeah it's a nice visual but I can definitely see how the UX isn't strong. What I do like about it perhaps though is it gives a wee bit of perspective from a top view of the low and highs and where the current temperature target falls. It doesn't help you any really in knowing what to set the temp.

@hcoohb This seems like a good start. I think part of the goal should be to get something unique looking still if we can so it stands out from all the other cards while maintaining usability.

Perhaps an improvement is making sure we are still calling out those temperatures more clearly with larger font sizes. This could be on a tablet and seen from a distance (think like a Nest or Ecobee how they call out the temps with large font sizes clearly)

I wonder if we can come up with a decent concept around layout modes that works in each of those situations while still giving it uniqueness. I do think we should keep the + and - for those quick temp adjustments if everyone thinks that's more useful for their use cases.

I'll see if I can throw some concepts together soon on this too. I still need to get this in Figma or Framer sometime for faster iterations.

[hcoohb]

Here is what I coded using button-card for now, that matches my other mushroom-card themes:

@hcoohb care to share the code for that? You might also want to install mushroom-theme (if you haven't already, I can't really tell) to make it even more mushroom looking.

@antonio1475 Here is the repo where I documented what I am using: hcoohb/lovelace-mushroom-button-card. Very adapted to my use-case for now but happy to open up.

[brandensilva]

I decided to spend some time last weekend to work on getting mushroom cards added to design land. I have more cards to add but took an initial stab at a basic climate card that incorporates many of mushrooms existing design elements with a push for some slightly different elements.

There are a lot of assumed user needs and usage patterns to consider which I'll outline here:

• Users will be either warm or cold in a given moment and want to make incremental adjustments to temperatures more often than large temperature changes to increase their comfort.

• Users have a schedule or routine for large temperature adjustments and settings which is managed outside of the thermostat card.

• Before a user can know what to set the temperature to, you need to know what the temperature is and what state the thermostat is in to make a decision on how to fix their comfort issues.

• Changing modes is most common during seasonal changes and is rare. (e.g In winter heat mode is expected to be used. In spring dual mode is used. In summer the cold mode and fan mode is used. One exception might be fan mode is needed for humidifying in the winter due to dry air (my house situation right now)).

• Auxillary functions are used less often than common functions (Auxillary examples e.g Humidifier, fan)

• Users of this group would prefer to keep things true to the Mushroom look and feel

• Users of this group probably want layout flexibility between vertical, horizontal, or default to accommodate their dashboard layouts.

• Users may use this on mobile, tablet, or desktop given HA's flexibility so it is important that controls are built for fingers and pointer devices equally.

I'm sure there are more needs and wants, and feel free to share your experiences, but these are just some that came to top of mind.

There are two modes of thinking when working with temperatures from the most popular thermostats:

The Nest approach: Users only have control over the target temperature so that number is large and emphasized. The current temperature is small and adjusted by rotating (3rd gen) or sliding a finger along on the edge (4th gen). Physically this works well but a circular slider (3rd gen) does not work well in digital space as Zach mentioned. So while it looks cool, it isn't practical to use circular sliders. Fingers slide better horizontally or vertically than they do in circle motions.

The Ecobee approach: Current temperature is large and emphasized, the target temps are shown as a range to the side. Adjust the range up or down via the finger vertically on the thermostat. Slides work well for mobile and tablets but can sometimes be janky for desktops. Physical doesn't always translate perfectly to digital.

I've chosen to opt for the Nest approach in how we display information given that users only have control over what they set the temperature to and not the current temperature. But the Ecobee 'slider' works better for digital interfaces. We are used to this as demonstrated with the light and air purifier components. I think it's possible to incorporate a hybrid approach between these concepts but we will want to start simple at first to get something out there for us to use so we should focus on what current mushroom capabilities exist and then adapt from there.

Given this I'm designing around these points while maintaining the design language, mushroom/Yuhang look/feel, and HA thermostat capabilities.

I'll post some screenshots and a prototype in my next comment when I get a moment this week. Tweaking a few things first.

[brandensilva]

Posting late as I've been a bit bogged down with some deadlines and been involved in the 🇺🇦 events. Long live Ukrainians!

So to start with a climate card we have an entity already that does a good job at telling us what room/thermostat a user is interacting with and what the temperature is:

What it doesn't tell us is what the thermostat is doing (status), what mode it is in (heat, cool, etc), the target temperature we want, and way to adjust the target temp quickly.

All of that won't fit in tighter space constraints so we need to plan accordingly. And ideally, we should try to adapt to the default, horizontal, and vertical layout modes to maximize usage.

Thinking along the lines of @hcoohb's concept which works well for quick incremental changes that are assumed to be more common but changing it more towards Mushroom's design and capability, and making it more mobile/tablet friendly to tap, I think we could introduce actions, action bar and an action status bar. Also a badge for status handling.

---

Actions

Actions would be similar to action chips but just larger versions that are actionable (single, double, hold taps, etc) for cards. e.g) These could be honed to +/- actions for temperature control. (You could get more customizable where holding could increment temperature +2 for example for faster increments)

Action Bar

Just a collection of actions with a distinct rounded background to group them. An Action can act in an active state/status too. e.g) Control of temperature modes with one showing as selected and active. Disabled when not applicable.

Action Status Bar

Two actions combined with a given status that the actions can act on. e.g) adjusting the target temperature with +/- actions.

Badge

Purely used for displaying state/status indicating what the thermostat is doing. e.g) Heat, Cool, Idle, etc

---

Bringing all these together we start to move into this general concept I've come up with that caters to the different layout modes:

Default Mode:

Horizontal Mode:

Vertical Mode:

Other snapshots of different modes:

Cool

Idle

Off

Each mode of course is optimized for different use cases.

Of course it's fun to see this stuff but even more fun to play with it so I've put together a prototype for you all to toy around with to get a feel for this concept:

https://framer.com/share/Mushroom-Design--lo8vLheBdY8ar4JTrSDi/pNmemfAW2?highlights=0#pNmemfAW2

I'm going to add some more thoughts in my next comment given some more to do with this, along with constraints.

[brandensilva]

In vertical mode I moved the status badge down under the target temperature, but it could also live up with the default entity approach to simplify development. It would give us more space around the target temperature for other needs. I did it to provide some visual uniqueness and to stand out between layouts.

Also, we can drop the padding on the badge when "off" to better align it with the current temperature. Idle could work the same way since "idle" and "off" are the same concept.

The actions are intentionally white to try and get them to somewhat blend into the background when not in use.

Some other things to add and points to consider:

• Dual, Fan, and Humidifier modes
• Off mode
• Space constraints

I'm working through the other modes now on how those might work but probably better to release something we can start using and gathering feedback without going overly deep in solving everything now. I have some ideas though.

Dual Mode

Dual mode involves two temperatures (low and high). We could match the Nest approach on this and that works for vertical but it would be an issue perhaps on the other layout modes. I'll toy around with it to see if we can lower the font size and make it work.

Fan Mode

I believe this just supports on and off (at least for my thermostat). Let me know if any of you have speed controls on yours.

Humidifier Mode

Would display the humidity. Nest has an on/off switch for me in their app, and allows you to set a minimum target to be above. Not sure if HA supports that though as I haven't gotten it to work yet fully. Less familiar with other thermostats so curious to how others humidifiers work.

I'd also like to expose when the humidifier or fan is on throughout. Thinking through that now.

Off Mode

I have it setting the target temp to sync with the current temperature in off mode. This should allow users walking by a tablet on a wall to see the current temperature more boldy if in off mode. I rarely use off mode in my own house but could see myself using it more if it allowed this ability.

Space Constraints

Given that when we add more modes we will have a more challenging time with the horizontal layout and cannot squeeze this all into smaller form factors, we will want to come up with a solution to adapting to this situation. I have an idea that I will share soon on it but the short answer is dropping into a "collapsed" mode that treats the action bar as a select dropdown instead of a radio would help fit it in tighter constraints.

It would also be beneficial if we can allow at least 2 or 3 temperature controls to be stacked together like so. In this case we lose out on changing modes but can see still the mode with the icon badge. And given mode usage is going to be rarer, it's not a huge deal to drop it. If we want to accommodate it, it's possible we can make it changeable via tapping the icon or something:

Anyhow, would love to hear your thoughts. Does this address a lot of the assumptions we want out of this. Does this feel in line with Mushroom without going over the top with fanciness that isn't useful or usable?

[zsarnett]

The biggest issue is Auto Mode. Auto Mode throws out just about every design haha.

The need to be able to control two set temperatures. This is the main driving point for a good design as its used quite often

[zsarnett]

But these look great. I like the simple design and Mobile friendliness! Great job on this. The last image you have there with the +and - and the grey background is a nice touch

[brandensilva]

Yeah I'm thinking through auto mode (which I assume is what I'm calling dual mode) now.

It will work in vertical. It's possible we can get it to work in other layout modes too but we'd have to get creative but space constraints might win out.

[zsarnett]

Yea. The vertical could work. I think the only way is the make it taller or make a switch of some kind. So the buttons icons turn red or blue based on what mode you are changing

[brandensilva]

But these look great. I like the simple design and Mobile friendliness! Great job on this. The last image you have there with the +and - and the grey background is a nice touch

Thanks! I've also added some desktop friendliness too because I find that lacking in cards today. I use Home Assistant app for my iMac in a mobile form factor but don't get the benefits of hover and pressed states. So you'll notice the action buttons have a box shadow darken on hover and when tapping they flash.

I will add a hover state for the icons for the action bar soon too.

I'm also trying to decide if it's better to drop the +/- actions or disable them visually in off mode. I think either way works from a UX perspective but it is just a personal preference.

[brandensilva]

I'm going to possibly link the mushroom design system I'm working on to the REST API of home assistant as well so we can link it to our instances for more realism when interacting with these cards. Low priority right now versus simply getting all the cards in there first.

[piitaya]

Nice inspirations 🙂 Thank for the proposal. It's very clean ! Great work 🙂

I think the most difficult part is the layout part and the responsive part For example, in the current Mushroom design, in horizontal mode, the card info and controls are 50% - 50%. On vertical mode, the icon is above the name, not on the left. We tried to make mushroom the more composable and reusable possible in term of coding so there is big constraints.

Currently, Mushroom design is very "minimalist" with small cards, few information and only one control at a time. Your vertical mode look like a detail or something we can have in a popup for example. Maybe we should consider in the future to have a big card layout with all the controls visible.

For the modes, there is hvac mode and preset mode. It can be a big challenge to integrate presets too.

For the shadow around buttons, I think that looks strange to have a button with shadow inside a card with card. On the behance design, the round button with shadow are used when there is no card. Don't you think we can flatten the components inside the card ?

Finally, I like the label idea to display thermostat state. I can be good to use it to format additional information on others cards like the brightness for light or the speed for fan.

For the first version, I don't think it's a good idea to have multiple controls visible at a time because it will not be possible to have this card integrated in a layout card like this :

[brandensilva]

Nice inspirations 🙂 Thank for the proposal. It's very clean ! Great work 🙂

Hey thanks, wanted to contribute! And thanks for your work on Mushroom.

I think the most difficult part is the layout part and the responsive part For example, in the current Mushroom design, in horizontal mode, the card info and controls are 50% - 50%.

That's where I'm talking about adapting the action bar to be in a collapsed dropdown mode for tighter space constraints. I'll show this soon but it does give it flexibility to work in different space constrained situations. It is a unique element though so will be good to tease it out in design.

On vertical mode, the icon is above the name, not on the left. We tried to make mushroom the more composable and reusable possible in term of coding so there is big constraints.

Yeah I was aware of that when designing this out but wanted to show a more compact form. We can easily have that card take more vertical space to keep it similar but we should be mindful of taking the least amount of space possible on a users dashboard to achieving a given task if we can. If that means breaking some constraints for a better user experience, I think that is sometimes acceptable but totally understand where you are coming from. This is a thermostat card so it has unique needs that differ from a standard entity card.

Also if you think about it being a horizontal entity card nested in a thermostat card, it doesn't really break the rules. It's just nested components.

Currently, Mushroom design is very "minimalist" with small cards, few information and only one control at a time. Your vertical mode look like a detail or something we can have in a popup for example. Maybe we should consider in the future to have a big card layout with all the controls visible.

This is a minimalist look that appeals to different use cases in the environments at which a temperature control can be consumed.

For example, in tablet view the vertical mode in this case is the most usable form of this component due to its easy to glance at target temperature size. I do have a thermostat though that can serve this purpose but if we get to that point where I can stick dashboards in locations that thermostats are not by replacing it with this, that would be cool.

Right now UI Minimalist and Mushroom are very mobile heavy, and that's fine, but it isn't the only way this library will be consumed. I know when I start getting my dashboard tablet ready I'm going to want more options to adapt Mushroom to that form factor which means changing how cards could flow or be used for those needs.

I think the popup can be even more advanced personally and what is shown here covers the basics of the most used functionality (once auto, fan, and humidifier modes are added). But you are right, some of this could be offloaded into a popup card. I just know that isn't supported in Mushroom right now so went with a solution that covers most use cases given what is currently supported without going to far fetched.

For the modes, there is hvac mode and preset mode. It can be a big challenge to integrate presets too.

I'm unfamiliar with these modes as of yet. What does hvac and preset do?

For the shadow around buttons, I think that looks strange to have a button with shadow inside a card with card. On the behance design, the round button with shadow are used when there is no card. Don't you think we can flatten the components inside the card ?

I don't think this an issue really but totally hear your opinion on it. The shadows purpose is to indicate an interactive element by protruding outside of a non-interactive element. Not all cards are meant to be tappable and can house interactive elements within them. In fact I think more cards should do this for more variety of interactions as long as they adhere to better tap sizes. The shadow is one way to have them stand out. Flattening them out unfortunately makes them disappear into the card and loses its interactiveness visual but I can certainly show you what that looks like. Part of this also appeals to desktops where we can support a nice hover and pressed state which seem to always go missing on many cards I've seen. Not everyone will be using mobile or tablets with their HA usage.

As far as what Yuhang's showing, I think we should add that version of the action too. He also supports text underneath as sometimes icons aren't good enough. It's also used with titles for defining a section.

He does show a shadow on his action within an action bar here too so not completely off base of what he intended, we just don't have support for hiding white backgrounds on cards right now to make this a reality:

Finally, I like the label idea to display thermostat state. I can be good to use it to format additional information on others cards like the brightness for light or the speed for fan.

Yeah badges are a great use of status and state. It should be a familiar mental model for many so should help. Syncing the colors to the modes really drives the point home of what is going on.

For the first version, I don't think it's a good idea to have multiple controls visible at a time because it will not be possible to have this card integrated in a layout card like this :

I'm totally fine with modes not be available in the first version but I do think it's beneficial for seasonable changes. But given its rarity, I can see that not being a thing at first. However, it does bring more usefulness to this card for the most likely used actions to interact with the thermostat.

I do think it will be possible though to accommodate the layout you showed with a more capable action bar we just have to think outside the box a bit.

What I love about digital interfaces is it opens us to connect with our world in unique ways. I'm going to have to make a seasonal change soon when we transition into April by switching to auto mode and it would be great to have this feature at some point so I don't have to use Nest's app and can rely on this card for that. The current default HA thermostat supports changing modes in a similar fashion so people should be used to this approach.

[antonio1475]

What does hvac and preset do?

This is my climate.home status, which is a Tado thermostat.

Hvac modes are pretty obvious. Preset mode is home/away

hvac_modes:
  - 'off'
  - auto
  - heat
min_temp: 5
max_temp: 25
target_temp_step: 0.1
preset_modes:
  - away
  - home
current_temperature: 18.6
temperature: 18
current_humidity: 53.4
hvac_action: idle
preset_mode: away
offset_celsius: 0.02
offset_fahrenheit: 0.04
icon: mdi:radiator
friendly_name: Casa
supported_features: 17

I love your designs btw!

[andyeskridge]

I've been following this issue as I am very excited about the potential for a new nice looking climate card.

To potentially help I've pasted my state below too.

hvac_modes:
  - 'off'
  - auto
  - heat_cool
  - heat
  - cool
min_temp: 55
max_temp: 99
target_temp_step: 1
min_humidity: 35
max_humidity: 65
fan_modes:
  - Auto
  - 'On'
  - Circulate
preset_modes:
  - None
  - Home
  - Away
  - Sleep
current_temperature: 73
temperature: 71
target_temp_high: null
target_temp_low: null
current_humidity: 39
humidity: 50
fan_mode: Auto
hvac_action: idle
preset_mode: None
attribution: Data provided by mynexia.com
zone_status: Idle
dehumidify_supported: true
humidify_supported: false
dehumidify_setpoint: 50
friendly_name: Thermostat NativeZone
supported_features: 31

[brandensilva]

@antonio1475 @andyeskridge Thanks for sharing your configs. This helps me see more of the capabilities that are possible.

@andyeskridge Does hvac_mode: Auto just do its thing without any user intervention and heat_cool mode allow controlling both low and high temperatures in the range?

How often are you both changing presets per day, week, or month? (I work from home so rarely change from home mode so not something I use at all really since home presence will set it to away if my wife and I are gone)

[antonio1475]

How often are you both changing presets per day

Every time I leave or come home. However, it's done via automation along with everything else, not in the climate card. I am, however, interested in seeing (checking) that it changed to Away when I'm out.

I currently have a template card at the top of my dashboard with all the thermostat info. If I tap it it shows the controls (which I never use. All automated in my case, so I'm probably not the best example)

[andyeskridge]

@andyeskridge Does hvac_mode: Auto just do its thing without any user intervention and heat_cool mode allow controlling both low and high temperatures in the range?

To tell you the truth, I can't really tell the difference between Auto and heat_cool. They both seem to provide me with the high/low set points.

How often are you both changing presets per day, week, or month? (I work from home so rarely change from home mode so not something I use at all really since home presence will set it to away if my wife and I are gone)

And there is pretty much always someone in my house, so I haven't dealt with the presets right now.

[brandensilva]

@andyeskridge Gotcha. Auto in my mind would act very similar to off mode except that the temperature adjusts on its own. So it's capable of heating or cooling automatically depending on what the thermostat deems is necessary. Not sure if HA supports that though as I haven't ever tried it yet.

If auto mode is possible we'd need auto, dual, heat, cool, and off. That doesn't leave a lot of space for a humidifier and fan icon to fit.

We might be able to at most fit 6 icons at the minimum allowed column size of HA of 300px. Here is that size in vertical mode for visual reference:

I'm thinking that 6th option could be an auxillary pop up to access other less used controls. But given popups are not on the mushroom roadmap any time soon we wouldn't see that for awhile.

[zsarnett]

Recommendation: (based on building the first one)

Focus on temperature changing and not mode switching.

Make space for ease of changing the temperature quickly by simple taps. 1 temp or 2 temps (high and low for auto and dual)

Mode can be a click into a dropdown list for example

[brandensilva]

@antonio1475 For preset modes I think we could use the icon form to describe those on the main icon for the room/thermostat. Mushroom supports this already with icon badges.

[andyeskridge]

I've been playing with the auto mode since I've never used it. I can't tell the difference between Heat/Cool. The physical thermostat actually only has 3 modes (Auto, Heat, and Cool), so when I set it to Heat/Cool it sets the physical thermostat to Auto. 🤷‍♂️

I've attached the current default thermostat UI that HA has.

Personally, I rarely change modes, so I think the modes should be deemphasized in the design and maybe just a current mode icon.

[brandensilva]

Recommendation: (based on building the first one)

Focus on temperature changing and not mode switching.

What do you mean here?

Make space for ease of changing the temperature quickly by simple taps. 1 temp or 2 temps (high and low for auto and dual)

Yeah I'm going to work on that part sometime over the next week when I get a moment.

Mode can be a click into a dropdown list for example

Right, I mentioned that was my plan for this given some tight space constraints. I'll show this off sometime soon.

@zsarnett What's the difference between auto and heat_cool modes?

[zsarnett]

What do you mean here?

I explained what I meant. Focus on the UX of changing the temperature and less on Modes

What's the difference between auto and heat_cool modes?

Uh probably nothing but you would need to support switching to either. They both take two temps. PRobably a difference in how they heat and cool

[brandensilva]

Gotcha. Yeah I'm going to focus on adjusting temps further as a priority. We gotta know what modes to support first to know what controls or interactive elements are needed in those modes. Even if modes are likely rarely used, they dictate what users can do in a given mode. I cannot show additional temperature controls until have an auto and dual-mode so unfortunately that comes first hence why I'm asking about it to better understand HA's capabilities of handling modes.

I still got some deadlines to finish up so might take me a week to get to it.

If we collapse down the action bar due to them being rarely used but in seasonal cases, we should have adequate space in all layout modes to have temperature controls to adjust to handle auto/dual. In vertical we might as well leave it expanded but I'll see.

[ulic75]

So I wanted a slider control for my thermostat in UI-Minimalist since I started using it. However I operate in heat_cool mode, so I needed a slider that supported two controls. I couldn't find anything that exists that would fit the look and feel, so I built my own only to discover that it doesn't integrate well with button-card.

I was about to start designing my own full on cards that mimic UI-Minimalist when I found Mushroom. I love it, looks clean, doesn't have multiple layers deep of nested button-cards, but still no climate control.

Regardless, all this to say, if you want look at my basic design you can find demos and the code. I'm not suggesting you use my slider, but if you wanted to or just wanted to take all the code that's cool with me. The documentation is not complete, but you seem like a pretty bright group.

[kevinbegley]

Hello,

Is there any update on when the climate card might be available?

Thank you, Kevin

[ulic75]

@piitaya I know in repositories how tiresome it can get seeing so many open issues. Can probably close this one now.

[bobloadmire]

is there any update to this? Did anyone get preset modes, or fan modes to work?

[Swiftnesses]

Interested in presets too.

[bobloadmire]

So I saw they added presents to fans, can you hack the card to work for lights too?

[toughvj]

@andyeskridge Gotcha. Auto in my mind would act very similar to off mode except that the temperature adjusts on its own. So it's capable of heating or cooling automatically depending on what the thermostat deems is necessary. Not sure if HA supports that though as I haven't ever tried it yet.

If auto mode is possible we'd need auto, dual, heat, cool, and off. That doesn't leave a lot of space for a humidifier and fan icon to fit.

We might be able to at most fit 6 icons at the minimum allowed column size of HA of 300px. Here is that size in vertical mode for visual reference:

I'm thinking that 6th option could be an auxillary pop up to access other less used controls. But given popups are not on the mushroom roadmap any time soon we wouldn't see that for awhile.

Is there any code available for that design for climate card?

[coarsy]

I currently have the problem, that the AC is always starting in heat-mode. Don't known, why this happens. Is there a way to start the AC in a default mode?