Hey @Dimitris ,
just to let you see that I am not lazy and working on it
Here is the actual code - it’s getting forward.
Actual challenge for me is to learn how to set an variable without having to do it by pressing a button. If I know how to do this, I will implement a first attempt of the navbar-controlling.
For now the code is much reduced cause of using oh-repeater now. And you can define your own Menu-structure (at least in some way) by setting it via the props…
uid: demo:responsive_navbar1
tags: []
props:
parameters:
- context: text
description: Names for TopLevel Menu
label: Names for TopLevel Menu
name: tArray
required: false
type: TEXT
multiple: true
- context: text
description: Names for Home Menu
label: Names for Home Menu
name: hArray
required: false
type: TEXT
multiple: true
- context: text
description: Names for Rooms Menu
label: Names for Rooms Menu
name: rArray
required: false
type: TEXT
multiple: true
parameterGroups: []
timestamp: Sep 1, 2022, 12:34:05 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
variables:
vars.buttonIndex == "1"
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:
=props.tArray
#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"
- component: oh-repeater
config:
fragment: true
for: HomeMenu
sourceType: array
in:
=props.hArray
#map: loop.HomeMenu.name
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"
- component: f7-segmented
config:
visible: =!!(vars.selectSection == "SECTION1")
slots:
default:
- component: oh-repeater
config:
fragment: true
for: RoomMenu
sourceType: array
in:
=props.rArray
# map: loop.RoomMenu.name
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
- component: f7-segmented
config:
visible: =!!(vars.selectSection == "SECTION2")
slots:
default:
- component: oh-repeater
config:
fragment: true
for: FloorMenu
sourceType: array
in:
- name: Floor1
- name: Floor2
- name: Floor3
- name: Floor4
- name: Floor5
map: loop.FloorMenu.name
slots:
default:
- component: oh-button
config:
action: variable
actionVariable: selectDivision
actionVariableValue: ="DIV" + loop.FloorMenu_idx
large: true
style:
color: '=vars.selectDivision=="DIV" + loop.FloorMenu_idx ? "black" : "#8C8C8C"'
text-decoration: underline
text-decoration-color: '=vars.selectDivision=="DIV" + loop.FloorMenu_idx ? "#F8BB00" : "transparent"'
text-underline-offset: 4px
text: =loop.FloorMenu
- 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
Of course there is still a long way for us but it’s getting forward.
Next step (after the nav-bar controlling) will be to integrate the option for showing the widgets…