Yes please, as I am struggling with some other nice new ideas 
Copy&Patse error, updated on github
Hi @hmerk ,
I updated the code and put also the flex-classes from the style tags into the stylesheet.
On my iPhone 12 it now works could you please have a look at your iPhone 8?
@all: Could you please try if the bottom nav bar is a) right sized in the height and b) completely shown ?
@Dimitris : Could you please have a look if the right proportions are in the widget now?
btw - how do you face your design with the actual screenshots? Do you use an extra app for it?
uid: main_widget
tags: []
props:
parameters:
- description: Set default color for Text
label: Text color
name: textColor
required: false
type: TEXT
- default: RGB(96, 96, 96)
description: Set default color for Text
label: Bottom-Navbar-Color
name: bnavColor
required: false
type: TEXT
- default: Somewhere
description: Name for your weather location
label: Weather Location
name: locationTitle
required: false
type: TEXT
- context: item
description: Name of scenes group item
label: Scenes Group
name: scenesGroup
required: false
type: TEXT
- context: item
description: Name of security group item
label: Security Group
name: securityGroup
required: false
type: TEXT
- context: item
description: Security Mode Item
label: Security Mode
name: securityMode
required: false
type: TEXT
- context: item
description: Security PIN Item
label: Security PIN
name: referencePIN
required: false
type: TEXT
parameterGroups: []
timestamp: Sep 29, 2022, 5:41:17 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-safe-area-top))
justify-content: space-between
margin: 0
padding: 0
width: 100%
background: =(themeOptions.dark=="light") ? ("white"):("black")
--menu-text-color: '= (!props.textColor) ? (themeOptions.dark=="light")? black : white : props.textColor'
--f7-button-text-color: "#8c8c8c"
--opmw-menu-text-color: =(themeOptions.dark=="light")?("#8C8C8C"):("#848484")
stylesheet: >
.selected_menu_item {
color: var(--menu-text-color);
text-decoration-color: #F8BB00 !important;
text-decoration: underline;
text-underline-offset: 2px;
font-weight: bold;
}
.unselected_menu_item {
color: #8C8C8C;
font-weight: 300;
}
.selected_bottom_navbar_item {
color: white;
font-size: 12px;
height: auto;
--f7-button-bg-color: transparent;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 1%;
padding-bottom: 1%;
}
.unselected_bottom_navbar_item {
color: #8c8c8c;
font-size: 12px;
height: auto;
--f7-button-bg-color: transparent
display: flex;
flex-direction: column;
padding-top: 2%;
padding-bottom: 2%;
}
slots:
default:
- component: f7-block
config:
style:
flex: 0 0 auto
overflow: scroll
slots:
default:
- component: f7-segmented
config:
style:
flex: 1 1 auto
justify-content: center
margin-left: 2%
margin-right: 2%
gap: 10px
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: objVar
actionVariableValue:
selectSection: ="SECTION" + loop.baseMenu_idx
floor: =vars.objVar.floor
room: =vars.objVar.room
large: true
class: '=vars.objVar.selectSection=="SECTION" + loop.baseMenu_idx ? "selected_menu_item" : "unselected_menu_item"'
style:
font-size: 24px
font-weight: 200
flex: 0 1 auto
width: auto
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: false
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
height: 2em
- component: oh-repeater
config:
fetchMetadata: metadata,semantics,widgetOrder
fragment: true
for: menuArray
sourceType: itemsWithTags
itemTags: ","
filter: (loop.menuArray.metadata) && (loop.menuArray.metadata.semantics.value).includes("Floor")
map: loop.menuArray_source
slots:
default:
- component: f7-row
config:
style:
display: flex
height: 2em
justify-content: center
overflow: hidden
slots:
default:
- component: oh-repeater
config:
for: menuButtonHome
fragment: true
in: =loop.menuArray
filter: loop.menuArray_idx == 0
map: ((loop.menuButtonHome.metadata && loop.menuButtonHome.metadata.widgetOrder && loop.menuButtonHome.metadata.widgetOrder.value) || 0).toString().padStart(3,'0') + '&' + loop.menuButtonHome_idx
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: objVar
actionVariableValue:
selectSection: = vars.objVar.selectSection
floor: =loop.menuArray[loop.menuButtonHome_source.sort()[loop.menuButtonHome_idx].split('&')[1]].name
style:
flex: 0 0 auto
height: 2em
order: =(((vars.buttonIndexHome || 0) % loop.menuButtonHome_source.length) + loop.menuButtonHome_source.length + loop.menuButtonHome_idx) % loop.menuButtonHome_source.length
text: =loop.menuArray[loop.menuButtonHome_source.sort()[loop.menuButtonHome_idx].split('&')[1]].label
- component: oh-button
config:
action: variable
actionVariable: buttonIndexHome
actionVariableValue: =(vars.buttonIndexHome || 0) + 1
iconF7: chevron_right
style:
color: "#F8BB00"
flex: 0 0 auto
height: 2em
- component: f7-row
config:
style:
align-items: center
display: flex
flex-direction: row
flex-wrap: nowrap
height: 2em
justify-content: center
width: 100%
visible: '=vars.objVar ? (vars.objVar.selectSection=="SECTION1") ? true : false : false'
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
height: 2em
- component: oh-repeater
config:
fetchMetadata: metadata,semantics,widgetOrder
fragment: true
for: menuArray
sourceType: itemsWithTags
itemTags: ","
filter: (loop.menuArray.metadata) && (loop.menuArray.metadata.semantics.value).includes("Floor")
map: loop.menuArray_source
slots:
default:
- component: f7-row
config:
style:
display: flex
height: 2em
justify-content: center
overflow: hidden
slots:
default:
- component: oh-repeater
config:
for: menuButtonFloor
fragment: true
in: =loop.menuArray
filter: loop.menuArray_idx == 0
map: ((loop.menuButtonFloor.metadata && loop.menuButtonFloor.metadata.widgetOrder && loop.menuButtonFloor.metadata.widgetOrder.value) || 0).toString().padStart(3,'0') + '&' + loop.menuButtonFloor_idx
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: objVar
actionVariableValue:
selectSection: = vars.objVar.selectSection
floor: =loop.menuArray[loop.menuButtonFloor_source.sort()[loop.menuButtonFloor_idx].split('&')[1]].name
class: '=(vars.objVar.floor ==(loop.menuArray[loop.menuButtonFloor_source.sort()[loop.menuButtonFloor_idx].split("&")[1]].name)) ? "selected_menu_item" : "unselected_menu_item"'
style:
flex: 0 0 auto
height: 2em
order: =(((vars.buttonIndexFloor || 0) % loop.menuButtonFloor_source.length) + loop.menuButtonFloor_source.length + loop.menuButtonFloor_idx) % loop.menuButtonFloor_source.length
text-underline-offset: 4px
text: =loop.menuArray[loop.menuButtonFloor_source.sort()[loop.menuButtonFloor_idx].split('&')[1]].label
- component: oh-button
config:
action: variable
actionVariable: buttonIndexFloor
actionVariableValue: =(vars.buttonIndexFloor || 0) + 1
iconF7: chevron_right
style:
color: "#F8BB00"
flex: 0 0 auto
height: 2em
- component: f7-row
config:
style:
align-items: center
display: flex
flex-direction: row
flex-wrap: nowrap
height: 2em
justify-content: center
width: 100%
visible: '=vars.objVar ? (vars.objVar.selectSection=="SECTION2") ? true : false : false'
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
height: 2em
- component: oh-repeater
config:
fetchMetadata: metadata,semantics,widgetOrder
fragment: true
for: menuArrayRoom
sourceType: itemsInGroup
groupItem: =vars.objVar.floor
map: loop.menuArrayRoom_source
filter: (loop.menuArrayRoom.metadata) && (loop.menuArrayRoom.metadata.semantics.value).includes("Room")
slots:
default:
- component: f7-row
config:
style:
display: flex
height: 2em
justify-content: center
overflow: hidden
slots:
default:
- component: oh-repeater
config:
for: menuButtonRoom
fragment: true
in: =loop.menuArrayRoom
filter: loop.menuArrayRoom_idx == 0
map: ((loop.menuButtonRoom.metadata && loop.menuButtonRoom.metadata.widgetOrder && loop.menuButtonRoom.metadata.widgetOrder.value) || 0).toString().padStart(3,'0') + '&' + loop.menuButtonRoom_idx
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: objVar
actionVariableValue:
selectSection: =vars.objVar.selectSection
floor: =vars.objVar.floor
room: =loop.menuArrayRoom[loop.menuButtonRoom_source.sort()[loop.menuButtonRoom_idx].split('&')[1]].name
class: '=(vars.objVar.room ==(loop.menuArrayRoom[loop.menuButtonRoom_source.sort()[loop.menuButtonRoom_idx].split("&")[1]].name)) ? "selected_menu_item" : "unselected_menu_item"'
style:
flex: 0 0 auto
height: 2em
order: =(((vars.buttonIndexRoom || 0) % loop.menuButtonRoom_source.length) + loop.menuButtonRoom_source.length + loop.menuButtonRoom_idx) % loop.menuButtonRoom_source.length
text-underline-offset: 4px
text: =loop.menuArrayRoom[loop.menuButtonRoom_source.sort()[loop.menuButtonRoom_idx].split('&')[1]].label
- component: oh-button
config:
action: variable
actionVariable: buttonIndexRoom
actionVariableValue: =(vars.buttonIndexRoom || 0) + 1
iconF7: chevron_right
style:
color: "#F8BB00"
flex: 0 0 auto
height: 2em
- component: widget:main_widget_Home_Card
config:
locationTitle: =props.locationTitle
scenesGroup: =props.scenesGroup
securityGroup: =props.securityGroup
securityMode: =props.securityMode
referencePIN: =props.referencePIN
- component: widget:main_widget_Floor_Card
- component: widget:main_widget_Room_Card
- component: f7-block
config:
style:
flex: 0 0 auto
overflow: scroll
margin-bottom: -4em
background: =props.bnavColor
border-radius: 0px 0px 10px 10px
visible: '=vars.objVar ? (vars.objVar.selectSection=="SECTION0") ? true : false : false'
slots:
default:
- component: f7-segmented
config:
style:
display: flex
flex-direction: row
justify-content: space-around
slots:
default:
- component: oh-link
config:
action: variable
actionVariable: objVar
actionVariableValue:
selectSection: =vars.objVar.selectSection
floor: =vars.objVar.floor
room: =vars.objVar.room
selectThing: Security
class: '=(vars.objVar && (vars.objVar.selectThing=="Security")) ? "selected_bottom_navbar_item" : "unselected_bottom_navbar_item"'
icon-f7: shield_fill
iconBadge: 1
badgeColor: '=(vars.objVar && (vars.objVar.selectThing=="Security")) ? "orange" : "red"'
text: Security
- component: oh-link
config:
action: variable
actionVariable: objVar
actionVariableValue:
selectSection: =vars.objVar.selectSection
floor: =vars.objVar.floor
room: =vars.objVar.room
selectThing: Scenes
class: '=(vars.objVar && (vars.objVar.selectThing=="Scenes")) ? "selected_bottom_navbar_item" : "unselected_bottom_navbar_item"'
icon-f7: rectangle_on_rectangle_angled
text: Scenes
- component: oh-link
config:
action: variable
actionVariable: objVar
actionVariableValue:
selectSection: =vars.objVar.selectSection
floor: =vars.objVar.floor
room: =vars.objVar.room
selectThing: Weather
class: '=(vars.objVar && (vars.objVar.selectThing=="Weather")) ? "selected_bottom_navbar_item" : "unselected_bottom_navbar_item"'
icon-f7: cloud
text: Weather
- component: oh-link
config:
action: variable
actionVariable: objVar
actionVariableValue:
selectSection: =vars.objVar.selectSection
floor: =vars.objVar.floor
room: =vars.objVar.room
selectThing: Energy
class: '=(vars.objVar && (vars.objVar.selectThing=="Energy")) ? "selected_bottom_navbar_item" : "unselected_bottom_navbar_item"'
icon-f7: bolt_fill
text: Energy
- component: f7-block
config:
style:
flex: 0 0 auto
overflow: scroll
margin-bottom: -4em
background: =props.bnavColor
border-radius: 0px 0px 10px 10px
visible: '=vars.objVar ? (vars.objVar.selectSection=="SECTION0") ? false : true : false'
slots:
default:
- component: f7-segmented
config:
style:
display: flex
flex-direction: row
justify-content: space-around
slots:
default:
- component: oh-link
config:
action: variable
actionVariable: objVar
actionVariableValue:
selectSection: =vars.objVar.selectSection
floor: =vars.objVar.floor
room: =vars.objVar.room
selectThing: Lights
class: '=(vars.objVar && (vars.objVar.selectThing=="Lights")) ? "selected_bottom_navbar_item" : "unselected_bottom_navbar_item"'
icon-f7: lightbulb_fill
text: Lights
- component: oh-link
config:
action: variable
actionVariable: objVar
actionVariableValue:
selectSection: =vars.objVar.selectSection
floor: =vars.objVar.floor
room: =vars.objVar.room
selectThing: Rollers
class: '=(vars.objVar && (vars.objVar.selectThing=="Rollers")) ? "selected_bottom_navbar_item" : "unselected_bottom_navbar_item"'
icon-f7: archivebox
text: Shades
- component: oh-link
config:
action: variable
actionVariable: objVar
actionVariableValue:
selectSection: =vars.objVar.selectSection
floor: =vars.objVar.floor
room: =vars.objVar.room
selectThing: Climate
class: '=(vars.objVar && (vars.objVar.selectThing=="Climate")) ? "selected_bottom_navbar_item" : "unselected_bottom_navbar_item"'
icon-f7: snow
text: Climate
- component: oh-link
config:
action: variable
actionVariable: objVar
actionVariableValue:
selectSection: =vars.objVar.selectSection
floor: =vars.objVar.floor
room: =vars.objVar.room
selectThing: Appliances
iconMaterial: power
class: '=(vars.objVar && (vars.objVar.selectThing=="Appliances")) ? "selected_bottom_navbar_item" : "unselected_bottom_navbar_item"'
text: Appliances
Bottom navbar looks good on my iPhone 8.
Will check tomorrow on iPhone 12 mini…
Hey @Dimitris
your screenshots look curious. Did you use the latest code of the other parts from hmerks GitHub account? Concrete the main_wdidget I posted here and the other parts that hmerk put on GitHub ?
He is definitely using older versions, otherwithe no dummy for floor level would be shown.
I am still struggling with the visibility tag for the floor card and the included widgets. Ned to do some further testing.
Apart from that issue, it already looks promising….
ok last try for me…then i leave 
@hmerk can you please add to main widget, floor amd rooms cards, the support for HVAC and Conditioner? i’ve update these 3 yaml, so i could just give you the part of the code to allow support for widgets.
it’s all ready, you just need to copy paste to github related widgets.
please let me know.
hey @rubenfuser
one suggestion: Why not simple fork the GitHub Repo of hmerk and add the widgets there?
If hmerk is ready with the main_widget stuff we can merge things together.
Or did I understand something wrong?
ok let’s wait what @hmerk thinks about this…
@Nic0205 i see there is a little cut on the bottom navbar on the right side. i suggest to reduce the width of a couple of px… eagle eye! 
Sorry @rubenfuser was really busy with other things and on sick note.
Do I have the latest code snippets ? If no, just send me a PM.
I promise to add them today and update everything to have it useable.
Not really. I posted things on github just for the poc. As my supposed changees are working, I will update the marketplace posts and check why there are issues installing widgets from there.
I will let you all know later today.
Looks good on my iPhone12 mini as well.
@hmerk don’t worry, but i’ve updated all widget by myself, and already fit perfectly to main widget. all widgets are already oh-repeater and they just need to be…used.
i’ve learnt a little on repeaters to understand how they work, so at the moment work
just a disclaimer, i keep thinking that first filter must be done at Model level, and second filter should be done on icons (category). because this avoid users to put many groups on model and avoid to touch too much the model. icons (at item menu) can be managed easier and will not be shown anywhere.
what do you think about this?
Really ? How did you solve the issue for target and ambient temperature ?
If it works, fine. Do I have your latest code, then I can put everything together on Marketplace. That should be possible quickly…
as said before, i thought to filter based on icons.
icon “settings” points to setpoint item
icon “temperature” points to ambient temprature
all of this is filtered on top level (model level) to radiator control.
I do not really understand.
From my understanding, all Items belonging to e.g. have to be grouped by a equipment in a room.
Thats how I use the repeaters, filter room, filter specific equipment → pass group Item to widget.
In the widget, use group item to determine all belonging Itmes and match them to the functionality in the widget.
This is how zero config should work.
Btw, my latest improvements on main_widget made the additional tags for floor or room item obsolete, as I found a way to retreive those information straight from the model.
I see, will try the latest version I have and implement them.