Custom Grid Selection Widget


I’ve built a selection widget which displays a user defined amount of buttons in a modal grid view.

This way I select one item that should be controlled and then I define the commands I want to send to this item.

For example for a light item: ON and OFF
For a rollershutter: UP, STOP and DOWN
For my garagedoor: MOVE

The widget card shows a title and an icon, which can both be configured in size. Additionally the state of a given item (can be the same as your control item) can be displayed. Depending on the state, the background color of the card can be configured.

Commands buttons can also be translated into local language using simple key value pair list: UP=HOCH, DOWN=RUNTER etc.

Here some screenshots:


Download here:
GridSelection.widget_v1.json (6.6 KB)


1 Like

very nice!

i just upgraded to oh3 and so far i only used sitemap so this is my first contact with habpanel. so i don´t have any experience with it.
i think this is a very good solution to save space on the screen. what i am missing is the display of the actual state of the item in the main view and when the grid buttons are shown.

thanks for sharing!

best regards,

Good idea, I will implement it.

Hi Stefan,

attached is the new version. The state is shown on the main card (not in the popup grid)

A remark: It became clear to me (when using it with my rollershutters) that I had to transform/map the rollershutter state (like 0 or 30) to something like OPEN/CLOSED. Thus I use a seperate “state” item, next to my control item. That’s why you need to define two items in the configuration.

PS: Now it’s important to tick the checkbox: Don’t wrap in container

Hope this helps


yes! this looks perfect, thanks a lot!
best regards, stefan

I think there was a small bug. you just need to replace grid-gap: 0%; with grid-gap: 3%;

I’ve put some more love (and lots of time into it as I’m not an angular and bootstrap expert). Now the background color of the card depends on the state of the state-item. You can define this via a state=color mapping like: open=red,closed=blue,

Unfortunately the string requires the comma at the end (here: after the word blue). This is important!

GridSelection.widget_v1.json (6.6 KB)



It’s important to select: Don’t wrap in container!

even more nice!

i like this kind of buttons: only a small icon with thext that views the actual state, if i want to change sth i click on it. this prevents vom accidentally changing items (for example when scrolling). this kind of buttons i´d also like for widget-types.

my fear is just that habpanel will die sooner or later and the new UI from OH3 should be used.

It depends, HABPanel is still the preferred way to go for wall-mounted tablets, especially older ones since it’s lighter. As long as I’m around at least the major breaking bugs will be fixed, but don’t count on new features.

nice to meet the author :wink:

indeed I love habpanel for my wall mounted tablet. unfortunately it feels … unpolished whenever it comes to the widgets. that’s why I built my custom selection widget.

need to check if the new OH3 UI can replace habpanel, but I doubt it. especially in regards to custom templates.