I’ve not found a good way to do this yet. If you take a look at the code for my favorites bar, you’ll see that my solution was somewhat brute force: just create a copy of every widget with the item, but then hide the all the widgets where the item type doesn’t match. It works in that situation because there are usually few enough widgets. I don’t know if it becomes a performance issue in with something like this.
Thanks, but I don’t think this helps a lot, as we need to pass multiple Items to one widget config.
Unfortunately, the default-List-Widget fir the equipment ( which has all configs set) cannot be called here, or I did not find howto….
Ah, I guess I misunderstood the question.
Like the sorting question above, this would be trivial we could define custom functions in the expressions for things like the Array.find() method. If you’ve got the equipment item from the repeater the you also have access to it’s members array. The problem is extracting the member that matches your config option without using a function to check it’s type. You can probably do it by stringifying the members array and then doing some combination of splitting the new string and extracting the relevant substring, but that gets pretty ugly.
To me, it looks like the only others options are 1) expect the user to use a consistent naming strategy or 2) expect the use to setup some sort of custom metadata on the equipment that contains the relevant information. #2 would make this much less user friendly without direct support via the UI or the parallel development of a configuration widget with accompanying rule to make the metadata modifications.
Or, perhaps it is time to put in a github request to have the arrow function add-on for the expression parser installed. Then searching and array manipulation would be much easier. I’m not sure if Yannick has a reason it has been left out or not.
Thanks for your great support!
I already tried for other reason to add custom semantics to an equipment item (uiSemantics) but this is not available on that level. The same with listWidget metadata, not available for equipment item…
Will have a chat with Yannick…
Guys,
please don‘t try my last published version, it is not working completely.
@Nic0205 Any reason why you did not use my suggested menu changes and went back to the index ? This and the hardcoded „Room“ tag is breaking the automatic filling of the room menu.
Widget needed are here for who is looking for them:
To be honest: There is no reason it’s just a failure of mine. I’ll have a look at it but probably just at the weekend.
Did you have luck and reached Yannick?
Ok, fine, so we can fix the menu issue.
No, dit not try to reach out to Yannick yet, will do tomorrow….
Hey @hmerk
Just had a quick look-which approach did I not use? Your semantic repeater logic ([OH3] Main UI Examples - #390 by hmerk) is integrated and also JustinGs logic for the “rolling menu” issue ([OH3] Main UI Examples - #390 by hmerk) and the hardcoded rooms <Room1, Room2, etc> is not there anymore …
All this is for now in your new code I think:
https://community.openhab.org/t/oh3-main-ui-examples/117928/494?u=nic0205
Perhaps it is to late for today and i oversee something- could you give me a hint what you meant?
Too much traffic in this post - probably I messed up the things that I didn’t really wanted.
Could you post a “clean” version of your code with your suggested menu changes that I may lost? That would be great!
Yes, will do so.
Ok guys, this version should work now (@Nic0205, not much thad I had to fix)
uid: main_widget
tags: []
props:
parameterGroups: []
timestamp: Sep 8, 2022, 3:55:35 PM
component: f7-block
config:
style:
display: flex
flex-direction: column
height: calc(100vh - var(--f7-toolbar-height) - var(--f7-safe-area-bottom) - var(--f7-navbar-height) - var(--f7-safe-area-top))
justify-content: space-between
margin: 0
padding: 0
widht: 100vh
slots:
default:
- component: f7-block
config:
style:
flex: 0 0 auto
overflow: scroll
slots:
default:
- component: f7-segmented
config:
style:
flex: 1 1 auto
slots:
default:
- component: oh-repeater
config:
for: baseMenu
fragment: true
in:
- name: Home
- name: Floors
- name: Rooms
map: loop.baseMenu.name
sourceType: array
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: selectSection
actionVariableValue: ="SECTION" + loop.baseMenu_idx
large: true
style:
color: '=vars.selectSection=="SECTION" + loop.baseMenu_idx ? "black" : "#8C8C8C"'
font-size: 30px
font-weight: 200
text-decoration: underline
text-decoration-color: '=vars.selectSection=="SECTION" + loop.baseMenu_idx ? "#F8BB00" : "transparent"'
text-underline-offset: 4px
text: =loop.baseMenu
- component: f7-row
config:
style:
align-items: center
display: flex
flex-direction: row
flex-wrap: nowrap
height: 2em
justify-content: space-between
width: 100%
visible: =!!(vars.selectSection == "SECTION0")
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: buttonIndexHome
actionVariableValue: =(vars.buttonIndexHome || 0) - 1
iconF7: chevron_left
style:
color: "#F8BB00"
flex: 0 0 auto
- component: f7-row
config:
style:
display: flex
justify-content: center
overflow: hidden
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics,uiSemantics
for: menuButtonHome
fragment: true
itemTags: Home
map: loop.menuButtonHome_source[(((vars.buttonIndexHome || 0) % loop.menuButtonHome_source.length) + loop.menuButtonHome_source.length + loop.menuButtonHome_idx) % loop.menuButtonHome_source.length]
sourceType: itemsWithTags
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: floor
actionVariableValue: =loop.menuButtonHome.name
style:
color: '=vars.floor ==loop.menuButtonHome.name ? "black" : "#8C8C8C"'
flex: 0 0 auto
text-decoration: underline
text-decoration-color: '=vars.floor ==loop.menuButtonHome.name ? "#F8BB00" : "transparent"'
text-underline-offset: 4px
text: =loop.menuButtonHome.label
- component: oh-button
config:
action: variable
actionVariable: buttonIndexHome
actionVariableValue: =(vars.buttonIndexHome || 0) + 1
iconF7: chevron_right
style:
color: "#F8BB00"
flex: 0 0 auto
- component: f7-row
config:
style:
align-items: center
display: flex
flex-direction: row
flex-wrap: nowrap
height: 2em
justify-content: space-between
width: 100%
visible: =!!(vars.selectSection == "SECTION1")
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: buttonIndexFloor
actionVariableValue: =(vars.buttonIndexFloor || 0) - 1
iconF7: chevron_left
style:
color: "#F8BB00"
flex: 0 0 auto
- component: f7-row
config:
style:
display: flex
justify-content: center
overflow: hidden
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics,uiSemantics
for: menuButtonFloor
fragment: true
itemTags: Floor
map: loop.menuButtonFloor_source[(((vars.buttonIndexFloor || 0) % loop.menuButtonFloor_source.length) + loop.menuButtonFloor_source.length + loop.menuButtonFloor_idx) % loop.menuButtonFloor_source.length]
sourceType: itemsWithTags
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: floor
actionVariableValue: =loop.menuButtonFloor.name
style:
color: '=vars.floor ==loop.menuButtonFloor.name ? "black" : "#8C8C8C"'
flex: 0 0 auto
text-decoration: underline
text-decoration-color: '=vars.floor ==loop.menuButtonFloor.name ? "#F8BB00" : "transparent"'
text-underline-offset: 4px
text: =loop.menuButtonFloor.label
- component: oh-button
config:
action: variable
actionVariable: buttonIndexFloor
actionVariableValue: =(vars.buttonIndexFloor || 0) + 1
iconF7: chevron_right
style:
color: "#F8BB00"
flex: 0 0 auto
- component: f7-row
config:
style:
align-items: center
display: flex
flex-direction: row
flex-wrap: nowrap
height: 2em
justify-content: space-between
width: 100%
visible: =!!(vars.selectSection == "SECTION2")
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: buttonIndexRoom
actionVariableValue: =(vars.buttonIndexRoom || 0) - 1
iconF7: chevron_left
style:
color: "#F8BB00"
flex: 0 0 auto
- component: f7-row
config:
style:
display: flex
justify-content: center
overflow: hidden
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics,uiSemantics
for: menuButtonRoom
fragment: true
itemTags: =vars.floor
map: loop.menuButtonRoom_source[(((vars.buttonIndexRoom || 0) % loop.menuButtonRoom_source.length) + loop.menuButtonRoom_source.length + loop.menuButtonRoom_idx) % loop.menuButtonRoom_source.length]
sourceType: itemsWithTags
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: room
actionVariableValue: =loop.menuButtonRoom.name
style:
color: '=vars.room ==loop.menuButtonRoom.name ? "black" : "#8C8C8C"'
flex: 0 0 auto
text-decoration: underline
text-decoration-color: '=vars.room ==loop.menuButtonRoom.name ? "#F8BB00" : "transparent"'
text-underline-offset: 4px
text: =loop.menuButtonRoom.label
- component: oh-button
config:
action: variable
actionVariable: buttonIndexRoom
actionVariableValue: =(vars.buttonIndexRoom || 0) + 1
iconF7: chevron_right
style:
color: "#F8BB00"
flex: 0 0 auto
- component: f7-block
config:
style:
flex: 1 1 auto
overflow: scroll
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
filter: loop.equipmentItem.metadata.semantics.config.hasLocation == vars.room
for: equipmentItem
itemTags: Blinds
sourceType: itemsWithTags
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
for: shutterItem
groupItem: =loop.equipmentItem.name
sourceType: itemsInGroup
filter: '(loop.shutterItem.type=="Rollershutter") ? true : false'
slots:
default:
- component: widget:Cell_Shutter_Card_1
config:
visible: '=vars.selectThing=="Rollers" ? true : false'
header: =loop.shutterItem.label + " (" + loop.shutterItem.name + ")"
item: =loop.shutterItem.name
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
filter: loop.equipmentItem.metadata.semantics.config.hasLocation == vars.room
for: equipmentItem
itemTags: Lightbulb
sourceType: itemsWithTags
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics,metadata,listWidget
for: switchItem
groupItem: =loop.equipmentItem.name
sourceType: itemsInGroup
filter: '(loop.switchItem.type=="Switch") ? true : false'
slots:
default:
- component: widget:Cell_Light_Card_2
config:
visible: '=vars.selectThing=="Lights" ? true : false'
header: =loop.switchItem.label + " (" + loop.switchItem.name + ")"
item_schalter: =loop.switchItem.name
- component: widget:Temp_Control
config:
style:
flex: 1 1 auto
overflow-y: auto
position: relative
visible: =!!(vars.selectSection + vars.selectDivision + vars.selectThing == "SECTION1DIV2Climate")
widgettrend: HeizungWohnzimmer_Temperature
- component: widget:Temp_Control
config:
style:
flex: 1 1 auto
overflow-y: auto
position: relative
visible: =!!(vars.selectSection + vars.selectDivision + vars.selectThing == "SECTION2DIV2Climate")
widgettrend: HeizungWohnzimmer_Temperature
- component: widget:Temp_Control
config:
style:
flex: 1 1 auto
overflow-y: auto
position: relative
visible: =!!(vars.selectSection + vars.selectDivision + vars.selectThing == "SECTION2DIV2Climate")
widgettrend: HeizungWohnzimmer_Temperature
- component: widget:Temp_Control
config:
style:
flex: 1 1 auto
overflow-y: auto
position: relative
visible: =!!(vars.selectSection + vars.selectDivision + vars.selectThing == "SECTION2DIV2Climate")
widgettrend: HeizungWohnzimmer_Temperature
- component: widget:Temp_Control
config:
style:
flex: 1 1 auto
overflow-y: auto
position: relative
visible: =!!(vars.selectSection + vars.selectDivision + vars.selectThing == "SECTION2DIV2Climate")
widgettrend: HeizungWohnzimmer_Temperature
- component: oh-cell
config:
icon: f7:lightbulb
style:
flex: 1 1 auto
overflow-y: auto
position: relative
subtitle: only for testing
title: I am a light card in the Bedroom
visible: =!!(vars.selectSection + vars.selectDivision + vars.selectThing == "SECTION2DIV2Lights")
- component: oh-cell
config:
icon: f7:lightbulb
style:
flex: 1 1 auto
overflow-y: auto
position: relative
subtitle: only for testing
title: I am a light card in the Home
visible: =!!(vars.selectSection == "SECTION1")
- component: Label
config:
style:
flex: 1 1 auto
overflow-y: auto
position: relative
text: =vars.selectSection + vars.floor
- component: f7-block
config:
style:
flex: 0 0 auto
overflow: scroll
slots:
default:
- component: f7-segmented
config:
class:
- segmented-strong
style:
--f7-segmented-strong-between-buttons: 0px
--f7-segmented-strong-bg-color: transparent
--f7-segmented-strong-button-font-weight: 300
--f7-segmented-strong-button-hover-bg-color: rgba(255, 255, 255, 0.15)
--f7-segmented-strong-padding: 0px
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: selectThing
actionVariableValue: Lights
class:
- padding-top-half
- display-flex
- flex-direction-column
fill: '=vars.selectThing=="Lights" ? true : false'
icon-f7: lightbulb
iconColor: black
iconSize: 20
style:
--f7-button-bg-color: '=vars.selectThing=="Lights" ? "#F8BB00" : "transparent"'
--f7-button-border-radius: 15px
--f7-button-hover-bg-color: '=vars.selectThing=="Lights" ? "F8BB00" : "transparent"'
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: '=vars.selectThing=="Lights" ? "#6A6A6A" : "#8C8C8C"'
font-size: 12px
height: auto
text: Lights
- component: oh-button
config:
action: variable
actionVariable: selectThing
actionVariableValue: Climate
class:
- padding-top-half
- display-flex
- flex-direction-column
fill: '=vars.selectThing=="Climate" ? true : false'
icon-f7: snow
iconColor: black
iconSize: 20
style:
--f7-button-bg-color: '=vars.selectThing=="Climate" ? "#F8BB00" : "transparent"'
--f7-button-border-radius: 15px
--f7-button-hover-bg-color: '=vars.selectThing=="Climate" ? "F8BB00" : "transparent"'
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: '=vars.selectThing=="Climate" ? "#6A6A6A" : "#8C8C8C"'
font-size: 12px
height: auto
text: Climate
- component: oh-button
config:
action: variable
actionVariable: selectThing
actionVariableValue: Rollers
class:
- padding-top-half
- display-flex
- flex-direction-column
fill: '=vars.selectThing=="Rollers" ? true : false'
icon-f7: archivebox
iconColor: black
iconSize: 20
style:
--f7-button-bg-color: '=vars.selectThing=="Rollers" ? "#F8BB00" : "transparent"'
--f7-button-border-radius: 15px
--f7-button-hover-bg-color: '=vars.selectThing=="Rollers" ? "F8BB00" : "transparent"'
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: '=vars.selectThing=="Rollers" ? "#6A6A6A" : "#8C8C8C"'
font-size: 12px
height: auto
text: Rollers
- component: oh-button
config:
action: variable
actionVariable: selectThing
actionVariableValue: Security
class:
- padding-top-half
- display-flex
- flex-direction-column
fill: '=vars.selectThing=="Security" ? true : false'
icon-f7: camera
iconColor: black
iconSize: 20
style:
--f7-button-bg-color: '=vars.selectThing=="Security" ? "#F8BB00" : "transparent"'
--f7-button-border-radius: 15px
--f7-button-hover-bg-color: '=vars.selectThing=="Security" ? "F8BB00" : "transparent"'
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: '=vars.selectThing=="Security" ? "#6A6A6A" : "#8C8C8C"'
font-size: 12px
height: auto
text: Security
1 Like
Hey @hmerk ,
Thank you for the update.
In line 214: itemTags: =vars.floor should in my opinion be itemTags: Room - or am I wrong.
But even with this updated I could not manage to show the widget for the blinds.
My model looks like:
And Rollo Wohnzimmer hinten links has the following definition:
For sure I missed something - but what?
You missed this
https://community.openhab.org/t/oh3-main-ui-examples/117928/440
And some posts before.
You need to set the tags like shown, as not everybody tags the rooms just ad „Room“. There are different room types in the semantics…
And that‘s why my change in the repeater was needed.
For rhe blinds, don‘t tag it just as equipment, but tag it as equipment->blinds
Thank you - got the rooms working now - and now I understand what you meant 
But the blinds-thing still does not work.
This is how I tagged it:
And this is my model now:
Could you please post a screenshot of your blinds?
Don’t need to post a screenshot. This is quite simple to explain.
You have nested equipments in the livingroom, that‘s not supported. Next issue is that your blinds group is tagged as equipment blinds, but your blinds are tagged only as equipment.
The group should not be tagged as equipment, but just as a group. But this will not solve the issue. You need to properly tag the blinds and move them one level up in the model.
If you really need a blinds group, create a non semantic group for them.
i don’t get it. For sure it’s my own inexperience but I have not understand it.
I have a floor “Erdgeschoss” in this floor there is a room “livingroom”. In this room there is a blinds equipment and in there my blind is assigned. The blind is tagged as “Blinds”.
As a test I just assigned the blind to livingroom without an equipment - but does also not work…
Thank you!
Now I got it! 
1 Like
same here - I’ll have a look tomorrow