done, but romms section still remain empty.
i’ve changed scheme, now the floor is named gInterrato, and gBagnoTaverna need to be the room of it.
still not work…
also i cannot remove the wrong tag…
Will post some more screenshots in a couple of Minutes …
1 Like
Your tag is wrong, it is floor, not Floor. I will add a change for this to allow both version (.toLowerCase)
Ok, here are the screenshots, hopefully this makes ist clearer and easier to understand. Don’t care of the German labels, they are not needed for setup.
-
Model in General:
-
Floors (Attic and GroundFloor)
-
Rooms (Office and Livingroom)
The Magic is within the Non-Semantic Tags …
ok now it’s clear.
better to use this trick both for Floors and Rooms
i know there is something more to be set on code side, but just to points:
- color of texts, on dark theme are invisible;
- select floor, and move to rooms to chose room it’s a little bit confusing for me point of view.
don’t know if possible, should be better to move vertically, so in 3 lines:
chose floors
on line below chose floor name
then on line below, the room name
otherwise, moving horizontally but i don’t know how could be easy to make this…
last, better to have already selected the Light grop when the room name is selected…
I will try to add this for both.
I did not design this, just changed the logic to simplify config.
@Nic0205 this would be better addressed to you, I think.
I will have a look this weekend.
BTW great job! really!
oh i forgot, floor name are not selectable…
Should be, otherwise you don’t see the rooms.
yes sorry, i meant are not underlined and grey when clicked.
they become underlined and black only if i select the floor, then floor name, i move to rooms, select the room name and then when ii go back to floors, the right floor is underlined and black.
1 Like
cc @rubenfuser
Hmm, In the code, it is Floor, but it works with floor either, so nothing to change in the code…
I have changed this in my code posted earlier today.
So please grab it again and give it a try.
@Nic0205 @JustinG @hmerk @rubenfuser @ysc
It works!! I have the same feeling that i had 35 years ago when my Amiga500 booted from a floppy drive.
Cheers Guys. 
2 Likes
A day with great progress 
I think I managed the filter in general - but now something strange occurs.
I set the filter to filter: (loop.FloorMenu_idx >= vars.buttonIndexFloor) && (loop.FloorMenu_idx <= (vars.buttonIndexFloor+2 || 0) ) && (loop.FloorMenu_idx <= (loop.FloorMenu_idx_source.length) )
In my test scenario there are 5 floors - clicking on “>” does the right 2 times (display three floors) - then clicked once more only 2 rooms where shown. another clicks then shows just one floor. With the last part of the filter I thought to manage that but it seems like with every click the source.length gets a different value - that’s strange.
Could you please have another look at it?
uid: demo:responsive_navbar2
tags: []
props:
parameterGroups: []
timestamp: Sep 2, 2022, 7:34:51 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:
fragment: true
for: baseMenu
sourceType: array
in:
- name: Home
- name: Floors
- name: Rooms
map: loop.baseMenu.name
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-segmented
config:
visible: =!!(vars.selectSection == "SECTION0")
slots:
default:
- component: oh-button
config:
text: <
style:
width: 1vh
color: "#F8BB00"
action: variable
actionVariable: buttonIndexBase
actionVariableValue: =(vars.buttonIndexBase || 0) -1
- component: oh-repeater
config:
fragment: true
for: HomeMenu
sourceType: array
in: =props.hArray
filter: (loop.HomeMenu_idx >= 0) && (loop.HomeMenu_idx <= (0 +5))
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: selectDivision
actionVariableValue: ="DIV" + loop.HomeMenu_idx
large: true
style:
color: '=vars.selectDivision=="DIV" + loop.HomeMenu_idx ? "black" : "#8C8C8C"'
text-decoration: underline
text-decoration-color: '=vars.selectDivision=="DIV" + loop.HomeMenu_idx ? "#F8BB00" : "transparent"'
text-underline-offset: 4px
text: =loop.HomeMenu
- component: oh-button
config:
text: ">"
style:
width: 1vh
color: "#F8BB00"
action: variable
actionVariable: buttonIndexBase
actionVariableValue: =(vars.buttonIndexBase || 0) +1
- component: f7-segmented
config:
visible: =!!(vars.selectSection == "SECTION1")
slots:
default:
- component: oh-button
config:
text: <
style:
width: 1vh
color: "#F8BB00"
action: variable
actionVariable: buttonIndexFloor
actionVariableValue: =(vars.buttonIndexFloor || 0) -1
- component: oh-repeater
config:
fetchMetadata: semantics,uiSemantics
fragment: true
for: FloorMenu
itemTags: Floor
sourceType: itemsWithTags
filter: (loop.FloorMenu_idx >= vars.buttonIndexFloor) && (loop.FloorMenu_idx <= (vars.buttonIndexFloor+2 || 0) ) && (loop.FloorMenu_idx <= (loop.FloorMenu_idx_source.length) )
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: floor
actionVariableValue: =loop.FloorMenu.name
large: true
style:
color: '=vars.floor ==loop.FloorMenu.name ? "black" : "#8C8C8C"'
text-decoration: underline
text-decoration-color: '=vars.floor ==loop.FloorMenu.name ? "#F8BB00" : "transparent"'
text-underline-offset: 4px
text: =loop.FloorMenu.label
- component: oh-button
config:
text: ">"
style:
width: 1vh
color: "#F8BB00"
action: variable
actionVariable: buttonIndexFloor
actionVariableValue: =(vars.buttonIndexFloor || 0) +1
- component: f7-segmented
config:
visible: =!!(vars.selectSection == "SECTION2")
slots:
default:
- component: oh-repeater
config:
fetchMetadata: semantics, uiSemantics
fragment: true
for: RoomMenu
itemTags: =vars.floor
sourceType: itemsWithTags
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: selectDivision
actionVariableValue: ="DIV" + loop.RoomMenu_idx
large: true
style:
color: '=vars.selectDivision=="DIV" + loop.RoomMenu_idx ? "black" : "#8C8C8C"'
text-decoration: underline
text-decoration-color: '=vars.selectDivision=="DIV" + loop.RoomMenu_idx ? "#F8BB00" : "transparent"'
text-underline-offset: 4px
text: =loop.RoomMenu.label
- component: f7-block
config:
style:
flex: 1 1 auto
overflow: scroll
slots:
default:
- component: f7-card
config:
content: With some stuff
title: The middle content
- 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: 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.selectDivision
- component: Label
config:
style:
flex: 1 1 auto
overflow-y: auto
position: relative
text: =vars.SecDiv
- 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
I think that I need a limiter for the min and max value of my buttonIndexFloor variable for the filter - is there a possibility to achieve this?
The last part of this line && (loop.FloorMenu_idx <= (loop.FloorMenu_idx_source.length) is unnecessary. By definition the loop index value will always be less than the length of the array, so this is always true. You only need the first two portions. You probably also need the default fallback for the first reference to vars.buttonIndexFloor. Lastly, having the +2 inside the OR statement doesn’t do any good. That will fail when vars.buttonIndexFloor doesn’t exist and return 0 so in that case you’ll get >= 0 and <=0 which is not what you want because only 0 satisfies that. You want >=0 and <=0 +2 so the +2 has to go outside the OR statement.
So, you should make this look like what you had up above with the other index:
filter: (loop.HomeMenu_idx >= (vars.buttonIndex || 0)) && (loop.HomeMenu_idx <= (vars.buttonIndex || 0)+2 ) )
This is exactly what I would also use for loop.FloorMenu_idx and vars.buttonIndexFloor. I know you reported that didn’t work a while back, but I suspect that had to do with the setting the buttonIndex variable, because this filter statement looks correct to me. But: see below…it’s about to have to get more complicated.
You are absolutely right. The problem is that your buttonIndexFloor can both get into negative numbers (-1 index + 2 only shows you buttons number 0 and 1) and go up above the length of the array.
Putting a limit on the < button is very easy. We never want the number to be less than 0 so we just put the limit in the buttons variable value declaration itself:
actionVariableValue: =Math.max((vars.buttonIndexBase || 0) -1,0)
Now, if buttonIndex -1 is ever less than 0 it will return 0 instead.
If we know the length of the array then setting an upper limit is just as easy, you would simply set the variable value to the minimum of the array length -2 or the index variable +1. Given, however, that the array you’re looking at is dynamically generated by the repeater, this is a much trickier problem. The buttons outside of the repeater loop have no access to the repeater’s variables so we can’t use the same method we just used above. Simply put: the > has no loop.FloorMenu_source.length to allow us to check.
We could apply a limit in the filter property where we do have access to the length of the source array, but that has a drawback: the user could still press > 50 times and while the widget would properly show only the last 3 items, the user would then have to press < 50 time to get back to buttonIndexFloor values that would work.
I would suggest a work around where the buttons just wrap around the array ends so that buttonIndexFloor values less than 0 or greater than the array length aren’t an issue. For example, if the array has four items:
< item1 item2 item3 >
pressing > once shifts everything as expected:
< item2 item3 item4 >
but pressing > again, instead of running out of elements causes the beginning of the array to wrap around:
< item3 item4 item1 >
I can see a way to do this that is absurdly complex. Let me take a little while to work out if there is a more elegant solution.
1 Like
That would be really great - it’s just a cool journey you take me with you. I am learning every day so much!
Take the time you need - once again: Thank you for helping!
1 Like
I’ve got an issue but i don’t know if it’s my personal widget or in your code.
When expanded my roller card makes data unreadable:
When not expanded it’s okay.
Also,rooms names are too much collapsed and are unreadable from iphone view:
This part is not really ready yet….