Rendering buttons on multiple lines with the switch sitemap element
Closed this issue · 7 comments
Is your feature request related to a problem? Please describe.
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.
Describe the solution you'd like
I propose to add a new optional parameter named "buttonsPerLine" to the switch sitemap element that should trigger in sitemap UIs the display of buttons on multiple lines, similar to what we have now with the buttongrid sitemap element. The value of this parameter will define how many buttons are present on each line. Each line will take the full length of the widget. For example, if your sitemap element defines mappings with 5 entries and the parameter buttonsPerLine is set to 3, the result will be a grid of two lines, the first line containing 3 buttons matching the first 3 mappings entries and a second line with 2 buttons matching the last 2 mappings entries.
Coordination between maintainers
Notify maintainers of other UIs:
@openhab/webui-maintainers
@openhab/android-maintainers
@openhab/ios-maintainers
Checklist for implementation:
- Core (new parameter in sitemap syntax)
- Basic UI
- Main UI (update of the sitemap generator)
- Android app
- iOS app
- Docs
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.
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
buttonsPerLineit 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).
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.
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.
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.
I close this request, I have implemented something in Basic UI: openhab/openhab-webui#2341
Closing it