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

Overflow is the general property. There are also specific versions to separately control the different directions: overflow-x, and overflow-y.

loop.rooms_source.length does, indeed, give you the length of the array that the repeater is using. However, that variable is only scoped for the repeater and it’s children; it can’t be accessed by any elements at the same level as or higher than the repeater.

Sure - but neither overflow-x nor overflow-y does a horizontal scrolling … :wink:

Hi,

I several times tried to use f7-navbar - but the only thing I figured out is how to define the title:

component: f7-navbar
config:
  title: Test

Using link: ABC or icon: f7-zzz did not show up…

Then I am not sure exactly what you mean. overflow-x: scroll will establish that a horizontal scrollbar appears when the containers contents are wider than the container.

my fault.

If I use overflow-x or overflow-y this scrollbars appears and it scrolls every time vertically:

Not only the Developers publish Nights Builds!

To be honest, i want desperately Nic to find a working solution for navbar. After that we have to focus on (what we have started for) Widgets and give to OH -a small mayby- added value: This is an open invitation to everyone who attends and contributes here: Please help us overcome the issues that we face!

I’m trying to learn something more day by day…
Can anyone tell me how to use iconify icons on expanded card?
I’m only able to use SOME f7 icons when the card is expanded…
I’m trying to use them on f7-icon component with no luck. Any suggestion for a poor noob?


1 Like

can you share your code please so we can have a look.

Here you are.
Maybe this code for you will be a nightmare and need to be corrected almost everywhere…


uid: test:Rollershutter Preset_V3_Expandable
tags:
  - New UI
props:
  parameters:
    - description: Title of the card
      label: Title
      name: Title
      required: false
      type: TEXT
    - context: item
      description: Rollershutter item
      label: Rollershutter Item
      name: RollerItem
      required: true
      type: TEXT
    - description: 1st chart
      label: Chart label 1
      name: chart1
      required: false
      type: TEXT
    - description: Y-axis name
      label: Y-axis label
      name: axlabel
      required: false
      type: TEXT
    - context: item
      description: Item in chart
      label: Chart item 1
      name: item3
      required: false
      type: TEXT
timestamp: Aug 31, 2022, 9:11:33 PM
component: f7-card
config:
  expandable: true
  swipeToClose: true
  backdrop: true
  class:
    - card-expandable-animate-width
  style:
    box-shadow: 5px 5px 15px 1px rgba(0,0,0,0.05)
    --f7-card-header-border-color: transparent
    border-radius: 10px
    background: linear-gradient(to top, rgba(95, 0, 200) 10%, rgba(0, 0, 0) 100%)
    min-width: 95%
    margin-left: 5px
    margin-right: 5px
    height: 250px
slots:
  default:
    - component: oh-button
      config:
        iconF7: ellipsis
        iconSize: 20px
        style:
          position: absolute
          top: 0
          right: 10px
          padding-top: 10px
          z-index: 999
        class:
          - cell-open-button
          - card-opened-fade-out
    - component: f7-card-content
      config: {}
      slots:
        default:
          - component: Label
            config:
              text: =props.Title
              style:
                padding-top: 5px
                padding-left: 60px
                font-weight: 500
                font-size: 15px
              class:
                - card-opened-fade-out
          - component: f7-icon
            config:
              material: dehaze
              size: 45px
              style:
                top: -15px
              class:
                - card-opened-fade-out
          - component: Label
            config:
              text: '=items[props.RollerItem].state == "100" ? "Chiusa" : items[props.RollerItem].state == "0" ? "Aperta" : items[props.RollerItem].state + "% chiusa"'
              style:
                font-size: 15px
                position: absolute
                top: 55px
                left: 75px
                background: purple
                border-radius: 8px
              class:
                - card-opened-fade-out
          - component: f7-block
            config:
              class:
                - no-padding
              style:
                position: absolute
                top: 110px
                left: 25%
                right: 25%
                margin: 0px
                height: 10px
            slots:
              default:
                - component: f7-row
                  slots:
                    default:
                      - component: oh-button
                        config:
                          iconColor: purple
                          iconF7: arrow_up_circle
                          iconSize: 30
                          action: command
                          actionItem: =props.RollerItem
                          actionCommand: UP
                          style:
                            height: 30px
                          z-index: 98
                          class:
                            - card-prevent-open
                            - card-opened-fade-out
                      - component: oh-button
                        config:
                          iconColor: red
                          iconF7: stop_circle
                          iconSize: 30
                          action: command
                          actionItem: =props.RollerItem
                          actionCommand: STOP
                          style:
                            height: 30px
                            z-index: 999
                          class:
                            - card-prevent-open
                            - card-opened-fade-out
                      - component: oh-button
                        config:
                          iconColor: purple
                          iconF7: arrow_down_circle
                          iconSize: 30
                          action: command
                          actionItem: =props.RollerItem
                          actionCommand: DOWN
                          style:
                            height: 30px
                            z-index: 98
                          class:
                            - card-prevent-open
                            - card-opened-fade-out
    - component: f7-card-content
      config: {}
      slots:
        default:
          - component: f7-row
            config:
              style:
                margin-top: 10%
              class:
                - justify-content-center
            slots:
              default:
                - component: f7-icon
                  config:
                    material: dehaze
                    size: 65px
                    class:
                      - card-opened-fade-in
                - component: Label
                  config:
                    text: =props.Title
                    style:
                      position: absolute
                      top: 15%
                      font-weight: 500
                      font-size: 25px
                    class:
                      - card-opened-fade-in
                - component: Label
                  config:
                    text: '=items[props.RollerItem].state == "100" ? "Chiusa" : items[props.RollerItem].state == "0" ? "Aperta" : items[props.RollerItem].state + "% chiusa"'
                    style:
                      font-size: 25px
                      position: absolute
                      top: 21%
                      background: purple
                      border-radius: 8px
                    class:
                      - card-opened-fade-in
          - component: oh-button
            config:
              iconF7: xmark_circle_fill
              iconSize: 25px
              color: red
              style:
                position: absolute
                top: 50px
                right: 10px
                z-index: 999
              class:
                - card-opened-fade-in
                - cell-close-button
                - card-close
          - component: f7-block
            config:
              class:
                - no-padding
              style:
                position: absolute
                top: 30%
                left: 30%
                right: 30%
                height: 10px
            slots:
              default:
                - component: f7-row
                  slots:
                    default:
                      - component: oh-button
                        config:
                          iconColor: purple
                          iconF7: arrow_up_circle
                          iconSize: 30
                          action: command
                          actionItem: =props.RollerItem
                          actionCommand: UP
                          style:
                            height: 30px
                          z-index: 98
                          class:
                            - card-prevent-open
                            - card-opened-fade-in
                      - component: oh-button
                        config:
                          iconColor: red
                          iconF7: stop_circle
                          iconSize: 30
                          action: command
                          actionItem: =props.RollerItem
                          actionCommand: STOP
                          style:
                            height: 30px
                            z-index: 999
                          class:
                            - card-prevent-open
                            - card-opened-fade-in
                      - component: oh-button
                        config:
                          iconColor: purple
                          iconF7: arrow_down_circle
                          iconSize: 30
                          action: command
                          actionItem: =props.RollerItem
                          actionCommand: DOWN
                          style:
                            height: 30px
                            z-index: 98
                          class:
                            - card-prevent-open
                            - card-opened-fade-in
          - component: f7-block
            config:
              class:
                - card-prevent-open
                - card-content-padding
              style:
                top: 20%
                height: 10px
            slots:
              default:
                - component: f7-col
                  config:
                    width: auto
                    style:
                      top: 7%
                      margin-left: 5%
                      margin-right: 5%
                  slots:
                    default:
                      - component: oh-chart
                        config:
                          chartType: day
                          periodVisible: false
                          options:
                            backgroundColor: transparent
                        slots:
                          grid:
                            - component: oh-chart-grid
                              config:
                                containLabel: false
                          xAxis:
                            - component: oh-time-axis
                              config:
                                gridIndex: 0
                                axisPointer:
                                  show: false
                          yAxis:
                            - component: oh-value-axis
                              config:
                                name: "% chiusura"
                                gridIndex: 0
                                min: 0
                          series:
                            - component: oh-time-series
                              config:
                                gridIndex: 0
                                xAxisIndex: 0
                                yAxisIndex: 0
                                type: bar
                                barWidth: 1
                                color: purple
                                item: =props.item3
          - component: Label
            config:
              text: "Chiusure preimpostate:"
              style:
                font-size: 13px
                position: absolute
                left: 0px
                bottom: 10%
                color: white
              class:
                - margin
                - display-flex
                - flex-direction-column
                - card-opened-fade-in
          - component: oh-button
            config:
              round: true
              text: "0"
              action: command
              actionItem: =(props.RollerItem)
              actionCommand: UP
              class:
                - margin
                - display-flex
                - flex-direction-column
                - card-opened-fade-in
              style:
                position: absolute
                height: 24px
                width: 10px
                left: 0px
                bottom: 5%
                z-index: 98
                background: '=items[props.RollerItem].state == "0" ? "purple" : ""'
                color: white
          - component: oh-button
            config:
              round: true
              text: "25"
              action: command
              actionItem: =(props.RollerItem)
              actionCommand: 25
              class:
                - margin
                - display-flex
                - flex-direction-column
                - card-opened-fade-in
              style:
                position: absolute
                height: 24px
                width: 10px
                left: 50px
                bottom: 5%
                z-index: 98
                background: '=items[props.RollerItem].state >= "20" && items[props.RollerItem].state <= "30" ? "purple" : ""'
                color: white
          - component: oh-button
            config:
              round: true
              text: "50"
              action: command
              actionItem: =(props.RollerItem)
              actionCommand: 50
              class:
                - margin
                - display-flex
                - flex-direction-column
                - card-opened-fade-in
              style:
                position: absolute
                height: 24px
                width: 10px
                left: 100px
                bottom: 5%
                z-index: 98
                background: '=items[props.RollerItem].state >= "45" && items[props.RollerItem].state <= "55" ? "purple" : ""'
                color: white
          - component: oh-button
            config:
              round: true
              text: "75"
              action: command
              actionItem: =(props.RollerItem)
              actionCommand: 75
              class:
                - margin
                - display-flex
                - flex-direction-column
                - card-opened-fade-in
              style:
                position: absolute
                height: 24px
                width: 10px
                bottom: 5%
                left: 150px
                z-index: 98
                background: '=items[props.RollerItem].state >= "70" && items[props.RollerItem].state <= "80" ? "purple" : ""'
                color: white
          - component: oh-button
            config:
              round: true
              text: "100"
              action: command
              actionItem: =(props.RollerItem)
              actionCommand: DOWN
              class:
                - margin
                - display-flex
                - flex-direction-column
                - card-opened-fade-in
              style:
                position: absolute
                height: 24px
                width: 10px
                bottom: 5%
                left: 200px
                z-index: 98
                background: '=items[props.RollerItem].state == "100" ? "purple" : ""'
                color: white
          - component: Label
            config:
              text: "Chiusure preimpostate:"
              style:
                font-size: 13px
                position: absolute
                top: 170px
                left: 0px
                color: white
              class:
                - margin
                - display-flex
                - flex-direction-column
                - card-opened-fade-out
          - component: oh-button
            config:
              round: true
              text: "0"
              action: command
              actionItem: =(props.RollerItem)
              actionCommand: UP
              class:
                - margin
                - display-flex
                - flex-direction-column
                - card-opened-fade-out
                - card-prevent-open
              style:
                position: absolute
                height: 24px
                width: 10px
                top: 200px
                left: 0px
                z-index: 999
                background: '=items[props.RollerItem].state == "0" ? "purple" : ""'
                color: white
          - component: oh-button
            config:
              round: true
              text: "25"
              action: command
              actionItem: =(props.RollerItem)
              actionCommand: 25
              class:
                - margin
                - display-flex
                - flex-direction-column
                - card-opened-fade-out
                - card-prevent-open
              style:
                position: absolute
                height: 24px
                width: 10px
                top: 200px
                left: 50px
                z-index: 98
                background: '=items[props.RollerItem].state >= "20" && items[props.RollerItem].state <= "30" ? "purple" : ""'
                color: white
          - component: oh-button
            config:
              round: true
              text: "50"
              action: command
              actionItem: =(props.RollerItem)
              actionCommand: 50
              class:
                - margin
                - display-flex
                - flex-direction-column
                - card-opened-fade-out
                - card-prevent-open
              style:
                position: absolute
                height: 24px
                width: 10px
                top: 200px
                left: 100px
                z-index: 98
                background: '=items[props.RollerItem].state >= "45" && items[props.RollerItem].state <= "55" ? "purple" : ""'
                color: white
          - component: oh-button
            config:
              round: true
              text: "75"
              action: command
              actionItem: =(props.RollerItem)
              actionCommand: 75
              class:
                - margin
                - display-flex
                - flex-direction-column
                - card-opened-fade-out
                - card-prevent-open
              style:
                position: absolute
                height: 24px
                width: 10px
                top: 200px
                left: 150px
                z-index: 98
                background: '=items[props.RollerItem].state >= "70" && items[props.RollerItem].state <= "80" ? "purple" : ""'
                color: white
          - component: oh-button
            config:
              round: true
              text: "100"
              action: command
              actionItem: =(props.RollerItem)
              actionCommand: DOWN
              class:
                - margin
                - display-flex
                - flex-direction-column
                - card-opened-fade-out
                - card-prevent-open
              style:
                position: absolute
                height: 24px
                width: 10px
                top: 200px
                left: 200px
                z-index: 98
                background: '=items[props.RollerItem].state == "100" ? "purple" : ""'
                color: white

why not use oh-icon instead of f7-icon?
Using oh-icon, you can use all sources like f7, material and iconify.

I’ve tried but the icon is not shown. Seems to be the placeholder but empty…

I don’t think you can combine the trick for the for the hiding the cut-off buttons with scrolling. That trick will really only work if you are moving through the button options with back and forward buttons. The way this trick works is that the child elements, which are set to float: left try to squeeze themselves next to their neighbor. If they cannot do that, then they are moved down to the next row which (because we have fixed the vertical size of the container) is overflow space. But, we’ve set the container overflow to hide so those buttons are now hidden. (Actually, as I’ve written this description out, it occurs to me that this same effect can be achieved with flex-box settings, but I don’t think there’s a huge different between the two except the flex-box version won’t require the float: left on the child elements so it’s perhaps a bit cleaner).

If you change the container overflow setting to anything else, then, when the buttons that don’t fit automatically move down to a second row, the container adds a vertical scroll because that’s the only way it is going to be able to show that content that it’s not allowed to hide.

I would suggest, anyway, that scrolling and showing only buttons that fit across the space are two mutually exclusive mechanisms anyway. You need to pick either one or the other. If there are three buttons, but only two of them are rendered there really isn’t any visual clue for the user that there is a reason or scrolling. Typically the user is going to react to the visual cue of something running off the edge of the screen. Also, rending only the button that fit is a discreet interaction which is why it needs the addition of the backwards and forwards buttons, but scrolling is a continuous interaction. You’ll have to decide which of these two mechanisms better fits the UI style you are going for and then follow that one path.

You can’t use the iconify icons with the f7-icon, that functionality is something that is added on top of the base component by OH. If you want iconify then you must use the oh-icon component.

Then you’ll have to show us the code you used to try so that we can help with that.

Be aware, referencing the iconify icons takes an extra specifier (the icon set). So instead of just f7:<icon name> it has to be if:<icon set>:<icon name>.

That sounds true. The “trick” method looks better / more intuitiv. But to use it - I would have to define the “>” and “<”" buttons to be left and right. How could I achieve that the right “>” and the left “<” are shown even if the floating trick takes away the right side / the right buttons?

This does not work:

uid: demo:hide_buttons
props:
  parameterGroups: []
  parameters: []
tags: []
component: f7-block
config:
slots:
  default:
    - component: f7-row
      config:
        style:
          overflow-x: scroll
          display: block
          height: 28px
      slots:
        default:
          - component: oh-button
            config:
              text: <
              outline: true
              style:
                float: left
                #width: auto

        
          - component: oh-button
            config:
              text: Very very very long button here
              outline: true
              style:
                float: left
                width: auto
          - component: oh-button
            config:
              text: Short button
              outline: true
              style:
                float: left
                width: auto
          - component: oh-button
            config:
              text: Regular button here
              outline: true
              style:
                float: left
                width: auto
          - component: oh-button
            config:
              text: >
              outline: true
              style:
                float: right
                #width: auto                

And another question: Is it possible to define / set a variable outside an action? And if yes how? Did just find this in the doc:

the variable action allows to set a fixed or computed (using an expression) value to a variable.

thanks! this did the trick! but, oh-icon seems not to support “class:” options, that i need to “fade in” the icon when the card is exapnded.

                - component: oh-icon
                  config:
                    icon: if:mdi:window-shutter-cog
                    height: 65
                    class:
                      - card-opened-fade-in

so, how can i manage iconify/material icons, to be shown when the card is exapended but hide them when the card is collpsed?

EDIT: got it! i’ve used oh-button with oh-icon in slot and there i can use iconify icon. class is applied to oh-button.

@Nic0205 @JustinG I’m not quite sure if this guide helps… but please take a look.

Allign_v1_details.pdf (68.4 KB)

Hey @Dimitris ,

just to let you see that I am not lazy and working on it :wink:

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…

2 Likes

:grinning: I can clearly see how much you insist and work on this project. Besides that, its your Project! If you remember, in the beginning, I came here and asked ONLY for a widget… Keep walking!

OMG It works!

It’s all about how you nest the different elements. This structure sounds like you want a container (f7-row) that spaces (using flex spacing probably) the left and right buttons at the ends and another container in the middle. Then that container in the middle is set up to hold/hide the dynamic buttons.

Not at the moment, alas. There is a request on the UI GitHub page for this but right now you just have to make your expressions a little more complicated to account for the initial null value of a variable.

The easiest way to do this is usually just (vars.variable_name || default_value). This is just a simple OR statement but if the variable does not exist yet then the first part is false and so it falls back on the second part.

I see. But does this statement really set the variable initially? or does it just take “default_value” until variable_name is set by an action?

I would for example try to set an variable with the actual index of my oh-repeater variable. Is this possible? I mean something like this:

 vars.buttonIndex=HomeMenu_idx

Why? I want to use your approach here:

filter: (loop.whatever_idx >= vars.buttonIndex) && (loop.whatever_idx <= (vars.buttonIndex +2))

and I am mussing the buttonIndex :wink: