Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[BasicUI] Implement Buttongrid widget #2195

Merged
merged 1 commit into from
Dec 12, 2023
Merged

[BasicUI] Implement Buttongrid widget #2195

merged 1 commit into from
Dec 12, 2023

Conversation

lolodomo
Copy link
Contributor

@lolodomo lolodomo commented Dec 2, 2023 •
edited
Loading

Support grids containing from 1 to 12 columns.
Only the first 8 columns are rendered on tablet.
Only the first 4 columns are rendered on phone.

Related to openhab/openhab-core#3441

Signed-off-by: Laurent Garnier lg.hc@free.fr

@lolodomo lolodomo added enhancement New feature or request basic ui Basic UI labels Dec 2, 2023
@lolodomo lolodomo requested a review from a team as a code owner December 2, 2023 12:37
@lolodomo lolodomo marked this pull request as draft December 2, 2023 12:37
@lolodomo
Copy link
Contributor Author

lolodomo commented Dec 2, 2023 •
edited
Loading

Still work in progress but here is the current result with the following sitemap:

sitemap test18 label="Buttongrid"
{
	Switch item=TestSwitch
	Switch label="Cmd []" item=TestString mappings=[VOL_MINUS="Volume -",VOL_PLUS="Volume +",LONG="A very very long text"]
	Text item=TestString
	Buttongrid label="Remote Control" icon=material:favorite item=TestString buttons=[3:2:8="8",1:2:2="2",1:3:3="3",2:3:6="6",2:2:5="5",2:1:4="4",3:1:7="7",1:1:1="1",3:3:9="9",4:2:0="0",3:4:VOL_MINUS="Volume -",2:4:VOL_PLUS="Volume +",1:7:UP="Up"=f7:arrowtriangle_up,3:7:DOWN="Down"=f7:arrowtriangle_down,2:6:LEFT="Left"=f7:arrowtriangle_left,2:8:RIGHT="Right"=f7:arrowtriangle_right,2:7:OK="Ok",1:10:SETTINGS="Settings"=material:settings,2:10:CHART="Chart"=chart,3:10:ALARM_PLUS="Alarm +"=if:lucide:alarm-plus,4:10:ALARM_MINUS="Alarm -"=if:lucide:alarm-minus]
	Buttongrid item=TestString buttons=[1:2:UP="Up"=f7:arrowtriangle_up,3:2:DOWN="Down"=f7:arrowtriangle_down,2:1:LEFT="Left"=f7:arrowtriangle_left,2:3:RIGHT="Right"=f7:arrowtriangle_right,2:2:OK="Ok",5:3:LONG="A very very long text"]
	Buttongrid item=TestString buttons=[1:1:OK="Ok"]
	Buttongrid item=TestString buttons=[1:1:LEFT="Left"=f7:arrowtriangle_left,1:2:RIGHT="Right"=f7:arrowtriangle_right]
	Buttongrid item=TestString buttons=[3:2:8="8",1:2:2="2",1:3:3="3",2:3:6="6",2:2:5="5",2:1:4="4",3:1:7="7",1:1:1="1",3:3:9="9",4:2:0="0",3:4:VOL_MINUS="Volume -",2:4:VOL_PLUS="Volume +"]
	Buttongrid item=TestString buttons=[3:2:8="8",1:2:2="2",1:3:3="3",2:3:6="6",2:2:5="5",2:1:4="4",3:1:7="7",1:1:1="1",3:3:9="9",4:2:0="0",3:4:VOL_MINUS="Volume -",2:4:VOL_PLUS="Volume +",1:5:SETTINGS="Settings"=material:settings,2:5:CHART="Chart"=chart,3:5:ALARM_PLUS="Alarm +"=if:lucide:alarm-plus,4:5:ALARM_MINUS="Alarm -"=if:lucide:alarm-minus]
	Buttongrid item=TestString buttons=[3:2:8="8",1:2:2="2",1:3:3="3",2:3:6="6",2:2:5="5",2:1:4="4",3:1:7="7",1:1:1="1",3:3:9="9",4:2:0="0",1:5:UP="Up"=f7:arrowtriangle_up,3:5:DOWN="Down"=f7:arrowtriangle_down,2:4:LEFT="Left"=f7:arrowtriangle_left,2:6:RIGHT="Right"=f7:arrowtriangle_right,2:5:OK="Ok"]
	Buttongrid item=TestString buttons=[3:2:8="8",1:2:2="2",1:3:3="3",2:3:6="6",2:2:5="5",2:1:4="4",3:1:7="7",1:1:1="1",3:3:9="9",4:2:0="0",3:4:VOL_MINUS="Volume -",2:4:VOL_PLUS="Volume +",1:6:UP="Up"=f7:arrowtriangle_up,3:6:DOWN="Down"=f7:arrowtriangle_down,2:5:LEFT="Left"=f7:arrowtriangle_left,2:7:RIGHT="Right"=f7:arrowtriangle_right,2:6:OK="Ok"]
	Buttongrid item=TestString buttons=[3:2:8="8",1:2:2="2",1:3:3="3",2:3:6="6",2:2:5="5",2:1:4="4",3:1:7="7",1:1:1="1",3:3:9="9",4:2:0="0",3:4:VOL_MINUS="Volume -",2:4:VOL_PLUS="Volume +",1:6:UP="Up"=f7:arrowtriangle_up,3:6:DOWN="Down"=f7:arrowtriangle_down,2:5:LEFT="Left"=f7:arrowtriangle_left,2:7:RIGHT="Right"=f7:arrowtriangle_right,2:6:OK="Ok",1:8:SETTINGS="Settings"=material:settings,2:8:CHART="Chart"=chart,3:8:ALARM_PLUS="Alarm +"=if:lucide:alarm-plus,4:8:ALARM_MINUS="Alarm -"=if:lucide:alarm-minus]
	Buttongrid item=TestString buttons=[3:2:8="8",1:2:2="2",1:3:3="3",2:3:6="6",2:2:5="5",2:1:4="4",3:1:7="7",1:1:1="1",3:3:9="9",4:2:0="0",3:4:VOL_MINUS="Volume -",2:4:VOL_PLUS="Volume +",1:7:UP="Up"=f7:arrowtriangle_up,3:7:DOWN="Down"=f7:arrowtriangle_down,2:6:LEFT="Left"=f7:arrowtriangle_left,2:8:RIGHT="Right"=f7:arrowtriangle_right,2:7:OK="Ok",1:9:SETTINGS="Settings"=material:settings,2:9:CHART="Chart"=chart,3:9:ALARM_PLUS="Alarm +"=if:lucide:alarm-plus,4:9:ALARM_MINUS="Alarm -"=if:lucide:alarm-minus]
	Buttongrid item=TestString buttons=[3:2:8="8",1:2:2="2",1:3:3="3",2:3:6="6",2:2:5="5",2:1:4="4",3:1:7="7",1:1:1="1",3:3:9="9",4:2:0="0",3:5:VOL_MINUS="Volume -",2:5:VOL_PLUS="Volume +",1:8:UP="Up"=f7:arrowtriangle_up,3:8:DOWN="Down"=f7:arrowtriangle_down,2:7:LEFT="Left"=f7:arrowtriangle_left,2:9:RIGHT="Right"=f7:arrowtriangle_right,2:8:OK="Ok",1:11:SETTINGS="Settings"=material:settings,2:11:CHART="Chart"=chart,3:11:ALARM_PLUS="Alarm +"=if:lucide:alarm-plus,4:11:ALARM_MINUS="Alarm -"=if:lucide:alarm-minus]
	Buttongrid item=TestString buttons=[3:2:8="8",1:2:2="2",1:3:3="3",2:3:6="6",2:2:5="5",2:1:4="4",3:1:7="7",1:1:1="1",3:3:9="9",4:2:0="0",3:5:VOL_MINUS="Volume -",2:5:VOL_PLUS="Volume +",1:8:UP="Up"=f7:arrowtriangle_up,3:8:DOWN="Down"=f7:arrowtriangle_down,2:7:LEFT="Left"=f7:arrowtriangle_left,2:9:RIGHT="Right"=f7:arrowtriangle_right,2:8:OK="Ok",1:11:SETTINGS="Settings"=material:settings,2:11:CHART="Chart"=chart,3:12:ALARM_PLUS="Alarm +"=if:lucide:alarm-plus,4:12:ALARM_MINUS="Alarm -"=if:lucide:alarm-minus]
}

On desktop:

image

On tablet (max 8 columns) and with dark theme:

image

On phone (max 4 columns) and with icons disabled:

image

@lolodomo lolodomo mentioned this pull request Dec 2, 2023
Merged
@lolodomo lolodomo force-pushed the basicui_buttongrid branch 10 times, most recently from da651b9 to 64b1ad2 Compare December 6, 2023 22:46
@lolodomo
[BasicUI] Implement Buttongrid widget
b67a1be 
Support grids containing from 1 to 12 columns.
Only the first 8 columns are rendered on tablet.
Only the first 4 columns are rendered on phone.

Related to openhab/openhab-core#3441

Signed-off-by: Laurent Garnier <lg.hc@free.fr>
@lolodomo lolodomo marked this pull request as ready for review December 6, 2023 23:48
@lolodomo lolodomo changed the title [WIP][BasicUI] Implement Buttongrid widget [BasicUI] Implement Buttongrid widget Dec 6, 2023
@lolodomo
Copy link
Contributor Author

lolodomo commented Dec 6, 2023

@kaikreuzer : I am now satisfied with the result. I tested with grids containing from 1 to 12 columns and I tested on Firefox mainly but also quickly with Edge and Chrome. I believe it is ready for review and an interesting new feature for OH 4.1 ;)

@lolodomo
Copy link
Contributor Author

@kaikreuzer : please do not forget me. Maybe you can have a look to the capture screenshots first?

kaikreuzer
kaikreuzer approved these changes Dec 12, 2023
View reviewed changes
Copy link
Member

@kaikreuzer kaikreuzer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@kaikreuzer kaikreuzer merged commit 4e73cbf into openhab:main Dec 12, 2023
3 checks passed
@kaikreuzer kaikreuzer added this to the 4.1 milestone Dec 12, 2023
@lolodomo
Copy link
Contributor Author

lolodomo commented Dec 12, 2023 •
edited
Loading

Excellent, thank you. A new feature to be mentioned in the final release notes ;)
Edit: and I have to document it.

@lolodomo lolodomo deleted the basicui_buttongrid branch December 12, 2023 22:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kaikreuzer kaikreuzer kaikreuzer approved these changes

Assignees
No one assigned
Labels
basic ui Basic UI enhancement New feature or request
Projects
None yet
Milestone
4.1
Development

Successfully merging this pull request may close these issues.
2 participants
@lolodomo @kaikreuzer