Just to be sure,i’m not able to show lights…
Rollershutters are okay,but lights are shown as equipment.
I haven’t tried to add tags,but for rollershutters are not needed so i suppose there’s no need to add it.
maybe are not implemented?
*Bagno" = Bathroom
“Tapparella” = Rollershutter
“Luce” = Light
Could you try to change "Luce Bagno"´s OpenState to Switch?
still doesn’t work. i’ve tried changing almost everything…maybe non-semantic tags could help?
Your room “Bagno” needs to have the non semantic tag of the floor groupItem
Your lightswitch needs to be a Switch Item.
Can I see the item configs for the lightbulb equipment and the light switch please.
sure, here you are:
sure i’m missing something…but better to understand now, so when the widget will be finished, we can write a full guide to help everyone 
Can you be more specific about what doesn’t work for you? For me it works on Chrome on Android and the Android OH app (and there are no pieces that should cause a safari specific issue as far as I know, but not a iOS expert).
You may have to change the height of the buttons’ container. I did not bother to make the code responsive to screen size because it was just a demo. But, the button container must be a fixed height or the buttons will wrap instead of hiding and I set the height to 2em because that was convenient but not for any other reason. Play with that height value to see if you get better results on the mobile screen.
Your Light does not have a semantic property “Light”, which would be shown as “relatesTo Property_Light”
In Safari on Desktop I could choose the responsive mode and then emulate a iOS Device…
With a height of 1em the wrapping / overlapping is just 2 lines but it’s still there. With 2em height it is 3 lines:
1em:
2em:
Setting to 0.1em does not effect:
I am out of clues now, as you modell looks the same like mine and the rollershutter works for both of us.
i see there is a Rollershutter widget that manage rollershutters, and this works, but i don’t see any Light special widget called.
could be this in any way the problem?
Ah, it is definitely in the code :
- component: widget:Cell_Light_Card_2
config:
visible: '=vars.objVar.selectThing=="Lights" ? true : false'
header: =loop.switchItem.label + " (" + loop.switchItem.name + ")"
item_schalter: =loop.switchItem.name
Oh, spoiler, I am working on the next level 
got it! easier then thought…you use widget:Cell_Light_Card_2 but on the forum there is the widget:Cell_Light_Card_1
so better to use 1 or 2? some post before i’ve linked widget:Cell_Light_Card_1…
pleasse, in next demo, can you replace all black colors to red? on dark theme texts are completely hide…also icons color…
Sorry, changed this between two versions…
I will post a new version in y couple of minutes with new feature…
As already spoilered, here is the next level.
Changes :
Added a newer lower block with special options for the home menu like security. It is only visible on home menu.
While changing rooms or floors, the thing selection gets cleared
Added a config parameter for the textcolor, default should be black if not set (next version should then set this automatically be themeOptions.
uid: main_widget
tags: []
props:
parameterGroups: []
parameters:
- name: textColor
label: Text color
type: TEXT
description: Set default color for Text
default: black
required: false
timestamp: Sep 9, 2022, 4:08:33 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: objVar
actionVariableValue:
selectSection: ="SECTION" + loop.baseMenu_idx
large: true
style:
color: '=vars.objVar.selectSection=="SECTION" + loop.baseMenu_idx ? textColor : "#8C8C8C"'
font-size: 30px
font-weight: 200
text-decoration: underline
text-decoration-color: '=vars.objVar.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.objVar.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 ? textColor : "#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.objVar.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 ? textColor : "#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.objVar.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 ? textColor : "#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.objVar.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.objVar.selectThing=="Lights" ? true : false'
header: =loop.switchItem.label + " (" + loop.switchItem.name + ")"
item_schalter: =loop.switchItem.name
- component: oh-label-card
config:
title: I am Just a test for the upcoming security Menu
label: =vars.objVar.selectSection
footer: = vars.objVar.selectThing
visible: =!!(vars.objVar.selectSection + vars.objVar.selectThing == "SECTION0Security")
- component: widget:Temp_Control
config:
style:
flex: 1 1 auto
overflow-y: auto
position: relative
visible: =!!(vars.objVar.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.objVar.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.objVar.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.objVar.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.objVar.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.objVar.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.objVar.selectSection == "SECTION1")
- component: Label
config:
style:
flex: 1 1 auto
overflow-y: auto
position: relative
text: =vars.objVar.selectSection + vars.floor
- component: f7-block
config:
visible: =(vars.objVar.selectSection == "SECTION0")
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: objVar
actionVariableValue:
selectSection: =vars.objVar.selectSection
selectThing: Security
class:
- padding-top-half
- display-flex
- flex-direction-column
fill: '=vars.objVar.selectThing=="Security" ? true : false'
icon-f7: shield_fill
iconColor: green
iconSize: 20
style:
--f7-button-bg-color: '=vars.objVar.selectThing=="Security" ? "#F8BB00" : "transparent"'
--f7-button-border-radius: 15px
--f7-button-hover-bg-color: '=vars.objVar.selectThing=="Security" ? "F8BB00" : "transparent"'
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: '=vars.objVar.selectThing=="Security" ? "#6A6A6A" : "#8C8C8C"'
font-size: 12px
height: auto
text: Security
- component: oh-button
config:
action: variable
actionVariable: objVar
actionVariableValue:
selectSection: =vars.objVar.selectSection
selectThing: Scenes
class:
- padding-top-half
- display-flex
- flex-direction-column
fill: '=vars.objVar.selectThing=="Scenes" ? true : false'
icon-f7: lightbulb
iconColor: textColor
iconSize: 20
style:
--f7-button-bg-color: '=vars.objVar.selectThing=="Scenes" ? "#F8BB00" : "transparent"'
--f7-button-border-radius: 15px
--f7-button-hover-bg-color: '=vars.objVar.selectThing=="Scenes" ? "F8BB00" : "transparent"'
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: '=vars.objVar.selectThing=="Scenes" ? "#6A6A6A" : "#8C8C8C"'
font-size: 12px
height: auto
text: Scenes
- component: oh-button
config:
action: variable
actionVariable: objVar
actionVariableValue:
selectSection: =vars.objVar.selectSection
selectThing: Weather
class:
- padding-top-half
- display-flex
- flex-direction-column
fill: '=vars.objVar.selectThing=="Weather" ? true : false'
icon-f7: cloud
iconColor: textColor
iconSize: 20
style:
--f7-button-bg-color: '=vars.objVar.selectThing=="Weather" ? "#F8BB00" : "transparent"'
--f7-button-border-radius: 15px
--f7-button-hover-bg-color: '=vars.objVar.selectThing=="Weather" ? "F8BB00" : "transparent"'
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: '=vars.objVar.selectThing=="Weather" ? "#6A6A6A" : "#8C8C8C"'
font-size: 12px
height: auto
text: Weather
- component: oh-button
config:
action: variable
actionVariable: objVar
actionVariableValue:
selectSection: =vars.objVar.selectSection
selectThing: HVAC
class:
- padding-top-half
- display-flex
- flex-direction-column
fill: '=vars.objVar.selectThing=="HVAC" ? true : false'
icon-f7: flame
iconColor: textColor
iconSize: 20
style:
--f7-button-bg-color: '=vars.objVar.selectThing=="HVAC" ? "#F8BB00" : "transparent"'
--f7-button-border-radius: 15px
--f7-button-hover-bg-color: '=vars.objVar.selectThing=="HVAC" ? "F8BB00" : "transparent"'
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: '=vars.objVar.selectThing=="HVAC" ? "#6A6A6A" : "#8C8C8C"'
font-size: 12px
height: auto
text: HVAC
- component: f7-block
config:
visible: =(vars.objVar.selectSection == "SECTION1" || vars.objVar.selectSection == "SECTION2")
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: objVar
actionVariableValue:
selectSection: =vars.objVar.selectSection
selectThing: Lights
class:
- padding-top-half
- display-flex
- flex-direction-column
fill: '=vars.objVar.selectThing=="Lights" ? true : false'
icon-f7: lightbulb
iconColor: textColor
iconSize: 20
style:
--f7-button-bg-color: '=vars.objVar.selectThing=="Lights" ? "#F8BB00" : "transparent"'
--f7-button-border-radius: 15px
--f7-button-hover-bg-color: '=vars.objVar.selectThing=="Lights" ? "F8BB00" : "transparent"'
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: '=vars.objVar.selectThing=="Lights" ? "#6A6A6A" : "#8C8C8C"'
font-size: 12px
height: auto
text: Lights
- component: oh-button
config:
action: variable
actionVariable: objVar
actionVariableValue:
selectSection: =vars.objVar.selectSection
selectThing: Climate
class:
- padding-top-half
- display-flex
- flex-direction-column
fill: '=vars.objVar.selectThing=="Climate" ? true : false'
icon-f7: snow
iconColor: textColor
iconSize: 20
style:
--f7-button-bg-color: '=vars.objVar.selectThing=="Climate" ? "#F8BB00" : "transparent"'
--f7-button-border-radius: 15px
--f7-button-hover-bg-color: '=vars.objVar.selectThing=="Climate" ? "F8BB00" : "transparent"'
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: '=vars.objVar.selectThing=="Climate" ? "#6A6A6A" : "#8C8C8C"'
font-size: 12px
height: auto
text: Climate
- component: oh-button
config:
action: variable
actionVariable: objVar
actionVariableValue:
selectSection: =vars.objVar.selectSection
selectThing: Rollers
class:
- padding-top-half
- display-flex
- flex-direction-column
fill: '=vars.objVar.selectThing=="Rollers" ? true : false'
icon-f7: archivebox
iconColor: textColor
iconSize: 20
style:
--f7-button-bg-color: '=vars.objVar.selectThing=="Rollers" ? "#F8BB00" : "transparent"'
--f7-button-border-radius: 15px
--f7-button-hover-bg-color: '=vars.objVar.selectThing=="Rollers" ? "F8BB00" : "transparent"'
--f7-button-padding-horizontal: 0px
--f7-button-padding-vertical: 0px
--f7-button-text-color: '=vars.objVar.selectThing=="Rollers" ? "#6A6A6A" : "#8C8C8C"'
font-size: 12px
height: auto
text: Rollers
If you want this to be fully responsive, then you have to make sure that you are controlling the height of all of the elements involved. Here’s an outline of the structure:
- component: f7-row
- component: oh-button
- component: f7-row
- component: oh-repeater
- component: oh-button
- component: oh-button
Right now, only the outside f7-row container height is set… Try also setting the iconSize on the two chevron buttons to 2em, also set the height on the inner f7-row to 2em. Probably couldn’t hurt to also set the repeater’s buttons’ height to 2em. The check to see if it is responsive.
In the end it may turn out that em is the wrong unit to use to maintain the full responsiveness you want in the final product. Play with other options; maybe you want vh or just plain old %.
Just make sure you understand what the size of each piece of the structure is, because for the buttons that don’t fit to disappear they have to wrap above and below the edge of the f7-row that has the overflow: hidden property.
maybe you will hate me…when the room name is selected, all other rooms disappear…
personally suggest to move HVAC to rooms next to climate, instead in Home tab…
Why should I hate you?
Your early feedback is highly appreciated to eliminate bugs. I will check this ….