frontend icon indicating copy to clipboard operation
frontend copied to clipboard

Published 20 hours ago • verified publisher icon home-assistant

humidifier card: add on-off button

Open Shulyaka opened this issue 2 years ago • 13 comments

Proposed change

Add on/off toggle to the humidifier card UPDATE: Toggle replaced with the button, see comments. Images are outdated.

humidifier_with_mode humidifier_without_mode humidifier_unavailable

Type of change

  • [ ] Dependency upgrade
  • [ ] Bugfix (non-breaking change which fixes an issue)
  • [x] New feature (thank you!)
  • [ ] Breaking change (fix/feature causing existing functionality to break)
  • [ ] Code quality improvements to existing code or addition of tests

Example configuration

demo:

Additional information

  • This PR fixes or closes issue: fixes #
  • This PR is related to issue or discussion:
  • Link to documentation pull request:

Checklist

  • [x] The code change is tested and works locally.
  • [x] There is no commented out code in this PR.
  • [ ] Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

Shulyaka avatar Aug 22 '22 22:08 Shulyaka

We should just make clicking the card toggle the entity instead of adding a toggle element

zsarnett avatar Aug 23 '22 01:08 zsarnett

Let me disagree:

  1. How a user is supposed to know that? Make it a giant button?
  2. A toggle is also a nice and clearly visible indication of whether it is currently on or off
  3. If the user can click anywhere in the card to turn the humidifier on or off, he might be afraid to misclick and change the humidity. Or vice-versa, being afraid to turn it off while changing the humidity. Or scrolling on a touch screen. This is not the case when we have a designated area to click.
  4. This doesn't seem to be common for other entities, except the button (for which it is natural), especially for the thermostat card that people would compare it to, and we would like to keep the design consistent.

Shulyaka avatar Aug 23 '22 08:08 Shulyaka

We should align the functionality to the light card. Pressing in the middle will toggle

zsarnett avatar Aug 23 '22 13:08 zsarnett

Ok, will try to do that

Shulyaka avatar Aug 23 '22 13:08 Shulyaka

Take a look at the thermostat card: image There was a plan to redesign it, but I think that for now, you can mimic the design by adding functional buttons on the bottom.

Misiu avatar Aug 26 '22 06:08 Misiu

Hi @Misiu

This was my original idea. But then I realized that since we only have two options (on-off) it would be visually better to replace them with a switch.

Now I am trying to do something like what @zsarnett suggested:

humidifier_wip

It's not the final design though and since I am not a web developer, I am not fast at these things.

Shulyaka avatar Aug 27 '22 14:08 Shulyaka

@zsarnett Please check now

No mouse-over: humidifier-no-hover

Mouse-over: humidifier-hover

Mouse-press: humidifier-click

Shulyaka avatar Aug 27 '22 21:08 Shulyaka

Fixes #11327

Shulyaka avatar Aug 30 '22 23:08 Shulyaka

@zsarnett Any chance it could make it to 2022.10? :)

Shulyaka avatar Sep 05 '22 14:09 Shulyaka

@matthiasdebaat could you take a look at this?

bramkragten avatar Sep 16 '22 12:09 bramkragten

Can you center align the circle to the value? (Left current, right is suggestion) CleanShot 2022-09-19 at 11 40 54@2x

Mouse-over: humidifier-hover

The hover state on dark mode is hardly visible, it is consistent with the light card though. Can you make it a bit more visible on both?

matthiasdebaat avatar Sep 19 '22 09:09 matthiasdebaat

Sure I can do that, but let me first explain my design decisions.

I wanted the circle to be centered inside the round slider, even moved the number slightly down to fit it inside, and the hover state I chose to be consistent with the light card: light_card

Shulyaka avatar Sep 19 '22 16:09 Shulyaka

Yeah, both ways doesn't really fit: circle isn't in the center of the slider or the percentage isn't centred.

In this case I would suggest to focus on the percentage, because the circle surrounds it and got the most attention value compared to the slider.

matthiasdebaat avatar Sep 19 '22 21:09 matthiasdebaat

@matthiasdebaat Done all your suggestions, and also made the round slider grey when the humidifier is off. Please check.

Shulyaka avatar Oct 11 '22 16:10 Shulyaka

A few screenshots for the bait:

Hover: image Pressed: image Off: image Light theme: image

Shulyaka avatar Nov 01 '22 13:11 Shulyaka

Once this is merged, I have a couple of other cool features for the humidifier card coming up...

Shulyaka avatar Nov 04 '22 21:11 Shulyaka

@matthiasdebaat Done all your suggestions, and also made the round slider grey when the humidifier is off. Please check.

Looks good, thanks! (sorry was away the last couple of days)

matthiasdebaat avatar Nov 13 '22 12:11 matthiasdebaat