[OH3] Main UI - New „main_widget“ - development and testing [deprecated]

[Nic0205]

Hey @JustinG ,

looks pretty cool. I tried it for the first oh-repeater (Home, Floor, Room) but the text is not colored
Do you see what’s I missed?

uid: main_widget
tags: []
props:
  parameters:
    - default: black
      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: true
      type: TEXT
  parameterGroups: []
timestamp: Sep 23, 2022, 9:37:44 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
    widht: 100vh
    --opmw-menu-text-color: '=(themeOptions.dark=="light")?("#8C8C8C"):("#848484")'

  stylesheet: >
    .selected_menu_item {
      color: black;
      text-decoration-color: #F8BB00 !important;
      text-decoration: underline;
      text-underline-offset: 4px;
    }


    .unselected_menu_item {
      color: var(--opmw-menu-text-color);
    }
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
                          class: '=vars.objVar.selectSection=="SECTION" + loop.baseMenu_idx ? "selected_menu_item" : "unselected_menu_item"'
                          style:
                            font-size: 28px
                            font-weight: 200
                            
                          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:
                    for: menuArray
                    fragment: true
                    sourceType: itemsWithTags
                    itemTags: Floor
                    fetchMetadata: widgetOrder
                    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: floor
                                      actionVariableValue: =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:
                    for: menuArray
                    fragment: true
                    sourceType: itemsWithTags
                    itemTags: Floor
                    fetchMetadata: widgetOrder
                    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: floor
                                      actionVariableValue: =loop.menuArray[loop.menuButtonFloor_source.sort()[loop.menuButtonFloor_idx].split('&')[1]].name
                                      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
                                        color: '=vars.floor ==(loop.menuArray[loop.menuButtonFloor_source.sort()[loop.menuButtonFloor_idx].split("&")[1]].name) ? textColor : "#8C8C8C"'
                                        text-decoration: underline
                                        text-decoration-color: '=vars.floor ==(loop.menuArray[loop.menuButtonFloor_source.sort()[loop.menuButtonFloor_idx].split("&")[1]].name) ? "#F8BB00" : "transparent"'
                                        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:
                    for: menuArrayRoom
                    fragment: true
                    sourceType: itemsWithTags
                    itemTags: =vars.floor
                    fetchMetadata: widgetOrder
                    map: loop.menuArrayRoom_source
                  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: room
                                      actionVariableValue: =loop.menuArrayRoom[loop.menuButtonRoom_source.sort()[loop.menuButtonRoom_idx].split('&')[1]].name
                                      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
                                        color: '=vars.room ==(loop.menuArrayRoom[loop.menuButtonRoom_source.sort()[loop.menuButtonRoom_idx].split("&")[1]].name) ? textColor : "#8C8C8C"'
                                        text-decoration: underline
                                        text-decoration-color: '=vars.room ==(loop.menuArrayRoom[loop.menuButtonRoom_source.sort()[loop.menuButtonRoom_idx].split("&")[1]].name) ? "#F8BB00" : "transparent"'
                                        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: f7-block
      config:
        style:
          flex: 1 1 auto
          overflow: scroll
          margin-top: -1em
          margin-bottom: -1em
      slots:
        default:
          - component: widget:main_widget_Weather_Card
            config:
              bigCard: true
              dateFormat: true
              itemPrefix: OneCallAPIweatherandforecast_
              locationTitle: =props.locationTitle
              sunIndicator: true
              visible: '=(!vars.objVar || ((vars.objVar.selectSection=="SECTION0") && !vars.objVar.selectThing)) ? true : false'
          - component: oh-repeater
            config:
              fetchMetadata: semantics,metadata,listWidget
              for: sceneItem
              groupItem: =props.scenesGroup
              sourceType: itemsInGroup
            slots:
              default:
                - component: widget:main_widget_Scene_Card
                  config:
                    scene: =loop.sceneItem.name
                    sceneName: =loop.sceneItem.label
                    visible: '=vars.objVar ? ((vars.objVar.selectSection + vars.objVar.selectThing)=="SECTION0Scenes") ? true : false : false'
          - 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
                    filter: '(loop.shutterItem.type=="Rollershutter") ? true : false'
                    for: shutterItem
                    groupItem: =loop.equipmentItem.name
                    sourceType: itemsInGroup
                  slots:
                    default:
                      - component: widget:main_widget_Rollershutter_Card
                        config:
                          RollerItem: =loop.shutterItem.name
                          visible: '=vars.objVar.selectThing=="Rollers" ? true : false'
          - 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: widget:main_widget_Light_Card
                  config:
                    equipmentItem: =loop.equipmentItem.name
                    visible: '=vars.objVar.selectThing=="Lights" ? true : false'
          - component: oh-repeater
            config:
              fetchMetadata: semantics,metadata,listWidget
              filter: loop.equipmentItem.metadata.semantics.config.hasLocation == vars.room
              for: equipmentItem
              itemTags: RadiatorControl
              sourceType: itemsWithTags
            slots:
              default:
                - component: oh-repeater
                  config:
                    fetchMetadata: semantics,metadata,listWidget
                    for: tempItem
                    groupItem: =loop.equipmentItem.name
                    sourceType: itemsInGroup
                  slots:
                    default:
                      - component: widget:Temp_Control
                        config:
                          style:
                            flex: 1 1 auto
                            overflow-y: auto
                            position: relative
                          visible: '=vars.objVar.selectThing=="Climate" ? true : false'
                          widgettrend: =loop.tempItem.name
          - component: widget:main_widget_Security_Card
            config:
              securityGroup: =props.securityGroup
              securityMode: =props.securityMode
              visible: '=vars.objVar ? ((vars.objVar.selectSection + vars.objVar.selectThing)=="SECTION0Security") ? true : false : false'
          - component: Label
            config:
              style:
                flex: 1 1 auto
                overflow-y: auto
                position: relative
              text: =vars.objVar.selectSection + vars.floor
              visible: "=vars.objVar ? true : false"
    - component: f7-block
      config:
        style:
          flex: 0 0 auto
          overflow: scroll
          margin-bottom: -2em
        visible: '=vars.objVar ? (vars.objVar.selectSection=="SECTION0") ? true : false : false'
      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: rectangle_on_rectangle_angled
                    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:
        style:
          flex: 0 0 auto
          overflow: scroll
          margin-bottom: -2em
          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:
              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: '=vars.objVar.selectThing=="Lights" ? "black" : "white"'
                    iconSize: 20
                    style:
                      --f7-button-bg-color: 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" ? "black" : "white"'
                      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: '=vars.objVar.selectThing=="Climate" ? "black" : "white"'
                    iconSize: 20
                    style:
                      --f7-button-bg-color: 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" ? "black" : "white"'
                      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: '=vars.objVar.selectThing=="Rollers" ? "black" : "white"'
                    iconSize: 20
                    style:
                      --f7-button-bg-color: 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" ? "black" : "white"'
                      font-size: 12px
                      height: auto
                    text: Rollers
                - component: oh-button
                  config:
                    action: variable
                    actionVariable: objVar
                    actionVariableValue:
                      selectSection: =vars.objVar.selectSection
                      selectThing: Energy
                    class:
                      - padding-top-half
                      - display-flex
                      - flex-direction-column
                    fill: '=vars.objVar.selectThing=="Energy" ? true : false'
                    icon-f7: bolt
                    iconColor: '=vars.objVar.selectThing=="Energy" ? "black" : "white"'
                    iconSize: 20
                    style:
                      --f7-button-bg-color: transparent
                      --f7-button-border-radius: 15px
                      --f7-button-hover-bg-color: '=vars.objVar.selectThing=="Energy" ? "F8BB00" : "transparent"'
                      --f7-button-padding-horizontal: 0px
                      --f7-button-padding-vertical: 0px
                      --f7-button-text-color: '=vars.objVar.selectThing=="Energy" ? "black" : "white"'
                      font-size: 12px
                      height: auto
                    text: Energy

[JustinG]

@Nic0205

class: '=vars.objVar.selectSection=="SECTION" + loop.baseMenu_idx ? "selected_menu_item" : "unselected_menu_item"'

Looks like I missed a pair of parentheses when typing up the example. This is not properly setting the class because the parser first evaluates vars.objVar.selectSection and then adds to it the result of loop.baseMenu_idx ? "selected_menu_item" : "unselected_menu_item" which is always "unselected_menu_item" for a class setting of something like SECTION1unselected_menu_item which, of course is not the class that we want.

Just add (...) around the test condition:

class: '=(vars.objVar.selectSection=="SECTION" + loop.baseMenu_idx) ? "selected_menu_item" : "unselected_menu_item"'

[Dimitris (Dimitris Baltas)]

@Nic0205

Dimitri could you please describe (perhaps with images ) how the structure cascade should be in your mind and then we could discuss if all could agree to it? For me this thread with the image was a great help to see what we have to do…

Menu Structure.pdf (85.2 KB)

[hmerk (Hans-Jörg Merk)]

Dooh, adding an „all“ option to floors and rooms menu will make things more difficult ….
What should be shown when all in rooms menu is selected, but no equipment like lights.
Please don’t answer „everything“

One more thing to ask, what do you have in mind for the rules menu ???

[rubenfuser (Ruben)]

Rules could be a good idea! Adding manual rules for backup of OH maybe,or some rules behind scenes instead to use scene…

[hmerk (Hans-Jörg Merk)]

I think you misunderstood the scenes part.
openHAB by now does not know anything about scenes.
What we introduce is simple switch items that can be used to trigger rules for creating your scene. That‘s it.
I am still not shure what other rules should be shown on a mobile UI, but backup rules are a bad example, this should be done without user interaction and not while aeay from home.

[Dimitris (Dimitris Baltas)]

@hmerk Then, for now, you can skip “all” under floors menu. The issue is if the user want to select all rooms in all floors, that would be impossible.
Also, disregard the oh rules . We always come back on that later on.
@All. Now you must decide which option you like re Home menu: Top with text or bottom with tags, @hmerk needs that info to proceed…
Have a great day

[hmerk (Hans-Jörg Merk)]

@Dimitris

@All. Now you must decide which option you like re Home menu: Top with text or bottom with tags,

I would vote for bottom with tags

[Nic0205]

@Dimitris : could you describe the options a little bit further? Perhaps once again with an image? I think this makes it easier to decide

[rubenfuser (Ruben)]

I have a doubt. If device category will be on top menu, let’s suppose i am in bedroom room section, i have to tap on home button and chose for example lights?
I don’t understand where categories will be…

[hmerk (Hans-Jörg Merk)]

No, the categories lights, shutters etc are already available on room level and will be on floor level once I get a chance to implement the floor logic.

[Nic0205]

Thank you!

One question: I want to use the props.textColor color in the stylesheet - but this seems to have no effect - am I doing something wrong?

  stylesheet: >
    .selected_menu_item {
      color: =props.textColor;
      font-weight: bold;
      text-decoration-color: #F8BB00 !important;
      text-decoration: underline;
      text-underline-offset: 2.px;
     
    }

Do you have an Idea?

[hmerk (Hans-Jörg Merk)]

You need to check if vars.objVar exist.

[Nic0205]

hmmm. vars.objVar is set during the click (within the action) at the button. But the stylesheet definition, where color: =props.textColor; does not work is at the beginning of the first block.

Do not get it right - but how does objVar affect the props-variables? Or am I missing something fundamental?

[Dimitris (Dimitris Baltas)]

@Nic0205 You already have the image!
Option a: classic text menu under Home OR
Option b. Tab bar

[Dimitris (Dimitris Baltas)]

Well noted. Thank you.
@JustinG @Nic0205 @rubenfuser Gentlemen, may I have your feedback?

[hmerk (Hans-Jörg Merk)]

Let me check tonight, might have a longer coding session after kid is gone to bed…

[Nic0205]

Ah dismissed the picture. I vote for tabbar!

[rubenfuser (Ruben)]

For me it’s the same. ‘Cause the actual mode for me it’s not so user friendly,i vote for no bottom menu, because i’m curious of how will be new mode of navigating

[JustinG]

@Nic0205

One question: I want to use the props.textColor color in the stylesheet - but this seems to have no effect - am I doing something wrong?

The stylesheet property is not processed by the expression parser, so things like props.textColor won’t be replaced with values, they’re just sent to the css as is, and css has no idea what props.textColor means. If you want to have values in the stylesheet that are dynamic you have to do what I demonstrated with the text color for the unselected options. You have to define a css variable in the style object, which is processed by the expression parser:

  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: 0px
    padding: 0px
    --opmw-menu-text-color: '=(themeOptions.dark=="light")?("#8C8C8C"):("#848484")'

And then in the stylesheet you can refer to the value of that variable:

    .unselected_menu_item {
      color: var(--opmw-menu-text-color);
    }

@Dimitris

Also, disregard the oh rules . We always come back on that later on.

You’re never really going to manage a rules creation/editing page just through custom widgets. It is technically feasible, but the complexity required would many orders of magnitude higher than what you’re doing right now and would only replicate what is already available through the rules page. Really there are only two sensible options for incorporating some sort of “rules” section:

1. just have that button take the user to the MainUI rules page
2. Allow a configuration where the user adds switch items to the conditions of certain rules and tags those items a certain way. Then your “rules” page could be a list of those toggle switches allowing the user easy access to enabling or disabling the activity of those particular rules.