I’m on the UI2 bandwagon too. Fingers crossed this change is eventually permitted. Hopefully the decision makers will take the desires of the community into account.
1 Like
UI2 as well.
When I started reading your post, I had to check authorship as it was extremely close to something I wrote some time ago.
Thanks for taking this on, I would prefer UI2 as well.
Amazing!!! Ui2 for sure!!!
Just wondered… When will this go in as a real release?
@mark.carline
I completed the implementation, you can see it here: https://github.com/home-assistant/home-assistant-polymer/compare/master...andrey-git:dimmer
If baloob decides that it’s too much, I hope he will approve a cut-down version that implements the screenshot above but without all the customization.
In any case I hope something will be in for 0.37
3 Likes
Thank you for your great work. I hope it gets implemented in 0.37!
2 Likes
Our UI is mobile first and cards can be very narrow. Given that we know if a light supports brightness or not, you could replace the toggle with a slider. Slider on 0 means light off.
My concern with the slider underneath is that it takes a lot of vertical space, which especially on mobile which has only one column is a no no.
I think this would be the most elegant solution and one that I was sorely missing when I first started using HASS. I have since created an automation in AppDaemon to control brightness of all lights on a global level. While certainly not ideal for every situation, this gets me by on most occasions. The only other thing I could see being really useful is having lighting presets tied to buttons, which is already possible within the HASS UI when tying in automation.
I say all this just express that while, personally, the feature being discussed in this thread would be a neat addition to a lot of users’ setups, I think it is far from top priority as there are many, many workarounds. Including just clicking the light and setting the brightness individually.
In the screenshot UI2 is dynamic, so it stays on one line as long as there is enough space (it depends on the name length).
I could remove the toggle altogether, but then it won’t be possible to turn the dimmer back on to previous value.
The toggle could be replaced by “on” button or icon for that. It will take a little less space than the toggle. However small buttons are hard to hit on mobile.
Another option is to turn on the light by clicking on the lightbulb icon. But this would not discoverable and different from other cards.
Note that most of the people in the thread prefer UI2 to UI1 despite line break.
On larger phones Iphone6+ / Nexus 6p [name + slider + toggle] seems to fit nicely on one line.
@balloob
Choose a variant you like and I’ll implement it.
I could also have a customization attribute to choose between multi-line / one-line-slider-and-toggle / one-line-slider / one-line-toggle 
(I understand you don’t like UI customization, just mentioning this solution for completeness and since people have different-sized phones)
Another cons against slider-only dimmer UI is that to turn the light off it will require either to tap exactly at the end of the slider, or do {tap-and-hold, slide-left, release} sequence.
For smaller displays, wouldn’t it be possible to put only the slider on the second line (and right align it)? Maybe also make the second line foldable and have it folded by default, to save space on smaller displays and have an arrow or something to indicated that there are more to do and to unfold/show the slider?
I don’t think CSS supports moving items from the middle.
If the second line is folded and need the click to unfold - that click could just open the “more-info”
1 Like
I personally think that line break taking more space is not representing a big problem for most users. If anything, with brightness slider visible at all times, interface is more straightforward - no “hidden” menus. In my case HASS is running in a family apartment and I have been asked many times by other family members, if there is a possibility to change brightness and how to do it. It wasn’t evident to them, that they have to click on the icon, even though it makes complete sense to us. I know, it’s nitpicking but I think the whole point of Home Assistant is to make control of systems easier and effortless for everyone; including people that are not so good with technology in the first place. I see that as a good step in that direction.
If @andrey UI2 is dynamic as he has written in one of his posts, line break happens less frequently. I think a good way to implement it, is to let people set it in their configuration. Whoever wants to keep the old interface would be free to do so, but having more options is always welcome.
I am aware that bringing new features to frontend interface can complicate things and require more maintainance, but I also think it is worth it because of all the added benefits.
Since there is concern about it effecting the aesthetics and usability, I think it should be implemented as a configurable option. Those that don’t want it, don’t enable it and those that do, can or vice versa.
1 Like
To update this thread:
Since there is no wide agreement how the UI should look like, no changes to the default dimmer UI are going to be made.
However I’m working on support for custom UI components. Hope to finish for 0.38
2 Likes
Thank you for the update. Hope you get it working for 0.38
The feature is submitted to dev version.
See documentation is here: https://github.com/andrey-git/home-assistant-custom-ui
Feedback is welcome.
3 Likes
Great work! So, I can download your files and put them in www/custom_ui/ like you have written and then edit my config accordingly (I’m running 0.37.1)?