Rendering buttons on multiple lines with the switch sitemap element about openhab-core HOT 7 CLOSED

Here is a new approach, specific to UI, without the need of any new setting, using CSS flex-wrap: wrap:

Looks not so bad. I will try to better control the width of the zone for buttons.

from openhab-core.

similar to what we have now with the buttongrid sitemap element

What should be the difference between switch and buttongrid then?

When using a switch element with buttons rendering, the place is very limited to render all buttons in particular on a phone and it could result in label largely or even fully truncated at the left of the widget.

IMO this issue should be resolved in a different way. When having a parameter buttonsPerLine it can be optimized for phone or desktop, but not for both at the same time. One has two write two Sitemaps then.
I suggest that Basic UI limits the number of switches that are shown in one line depending on the screen width. Then it's "zero config" for the user and optimized on every device. The Android app does that as well.

I personally think using icons might be a better way than long labels, but that depends on the Item of course.

from openhab-core.

similar to what we have now with the buttongrid sitemap element

What should be the difference between switch and buttongrid then?

Switch is stateful, buttongrid is not ; switch defines no precise position of buttons in the grid while buttongrid does it.

When using a switch element with buttons rendering, the place is very limited to render all buttons in particular on a phone and it could result in label largely or even fully truncated at the left of the widget.

IMO this issue should be resolved in a different way. When having a parameter buttonsPerLine it can be optimized for phone or desktop, but not for both at the same time. One has two write two Sitemaps then. I suggest that Basic UI limits the number of switches that are shown in one line depending on the screen width. Then it's "zero config" for the user and optimized on every device. The Android app does that as well.

I can't compute easily the final size of all these buttons. For example, the width of each button depends on the label in the button, even if a max size if defined.
My intention is clear: I would like to display all buttons, even if we have 16 command/state options for example. It requires to introduce a display of buttons on multiple lines because it is not possible to render such a number of buttons on a unique line. If we introduce no new setting, I could then decide for example that 4 buttons is the trigger to switch to a multiple lines rendering with 4 buttons per line. I have to check how is the current rendering in the wrong conditions with 3 buttons (large texts). In case all buttons have an icon, the threshold could be increased, maybe 6 or 8 (to be checked). In my example of 16 command/state options, this will lead to 4 lines of 4 buttons.
My proposal with the new setting was to keep the current behaviour by default and also provide to the user a way to define how many buttons he would like on each line (if he knows that labels are long, he could prefer to have one or two buttons per line).

from openhab-core.

Here is what I mean (not finished / fully adjusted but this is to show the principle):

But I will check if another approach is possible; that is multiple lines but without a fixed number of buttons per line, each new button would be added with its own size and we go to a new line only when there is no place for the next button.

from openhab-core.

If you also have to show the current value at left of the buttons, you have even less place for everything !
Maybe when we have the current value to display, we could immediately put buttons on the next line, this will keep place for the current value on the first line.

from openhab-core.

I close this request, I have implemented something in Basic UI: openhab/openhab-webui#2341

from openhab-core.

Closing it

from openhab-core.