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

Sorry, last days have been turbulent.

I still work on the navbar and make efforts - but this week i am Limited a Little bit with time…

Hey @JustinG ,

I am testing different approaches.

With this code I have the problem, that the flex-row option is ignored.
Could you have - once again - a look, what’s going wrong here:

uid: test_Arr
tags: []
props: {}
timestamp: Aug 29, 2022, 11:11:07 PM
component: f7-card
config: {}
slots:
  content:
    - component: f7-segmented
      config:
        style:
          display: flex
          flex-direction: row
      slots:
        default:
          - component: oh-repeater
            config:
              for: rooms
              sourceType: array
              in:
                - name: Room1
                - name: Room2
                - name: Room3
                - name: Room4
                - name: Room5
              map: loop.rooms.name

            slots:
              default:
                - component: oh-button
                  config:
                    action: variable
                    actionVariable: selectSection
                    actionVariableValue: SECTION1
                    large: true
                    style:
                      color: '=vars.selectSection=="SECTION1" ? "black" : "#8C8C8C"'
                      font-size: 30px
                      font-weight: 200
                      text-decoration: underline
                      text-decoration-color: '=vars.selectSection=="SECTION1" ? "#F8BB00" : "transparent"'
                      text-underline-offset: 4px
                    text: =loop.rooms


You need to add fragment: true to the repeater. In it’s normal setting, the repeater wraps all of the elements it produces in a div element container. So your f7-segmented is flex spacing correctly, it’s just spacing one div element (which just happens to contains lots of buttons that the segmented doesn’t care about at all). When you add the fragment property to the repeater it strips that extra container from around the repeated elements and makes them direct children of the repeater’s parent element.

@JustinG

… Oh my dear… I still have a lot to learn - but to be honest it’s a cool thing to learn all this stuff.

Just another question (please tell me when to stop asking questions to you…):

How could I determine where the oh-repeater should start and where it should end - or in other words could I use an index for iterating over the elements?.
let me say it in words:

I have for example 8 Rooms in an array.

The oh-repeater should only show me the first 3 Rooms (index 1 to 3)
I click on “>” and the oh-repeater now should show me show 3 Rooms with the index 2 to 4.
How could I tell the repeater where to start, where to end and how could I know where the index stands?

I hope I described it well.

here my first attempt in code - simplified to just decrease the variable of the Range:

uid: ButtonGridd2
tags: []
props: {}
timestamp: Aug 30, 2022, 9:44:07 AM
component: f7-card
config: {}
slots:
  content:
    - component: f7-segmented
      config:
        style:
          display: flex
          flex-direction: row
      slots:
        default:
          - component: oh-repeater
            config:
              fragment: true
              for: rooms
              rangeStart: 1
              rangeStop: =vars.rstp
              sourceType: array
              in:
                - name: Room1
                - name: Room2
                - name: Room3
                - name: Room4
                - name: Room5

              map: loop.rooms.name
            slots:
              default:
                - component: oh-button
                  config:
                    action: variable
                    actionVariable: selectSection
                    actionVariableValue: =loop.rooms
                    large: true
                    style:
                      color: '=vars.selectSection=="SECTION1" ? "black" : "#8C8C8C"'
                    text: =loop.rooms
    - component: Label
      config:
        style:
          flex: 1 1 auto
          overflow-y: auto
          position: relative
        text: =vars.selectSection 

    - component: Label
      config:
        style:
          flex: 1 1 auto
          overflow-y: auto
          position: relative
        text: =vars.rstp 
        
    - component: oh-button
      config:
        text: ">"
        action: variable
        actionVariable: rstp
        actionVariableValue: =vars.rstp + 1
 

Hey Pal. Is there any chance to create a “Dynamic Index”? In the original design the displayed rooms may vary from 1 to 3 (or more if they can fit!) depending on the width of the text -see attachment. I don’t want to add more complexity, but i think this is decision time for the navbar!

See Allign_v1.pdf (71.4 KB) or

No worries, just be sure, as you learn more and more, to pass on what you know to others.

The repeater not only gives you a single element of its array at a time (loop.whatever) it also creates two other variables you can use in the scope of the repeater: loop.whatever_idx and loop.whatever_source. Whereas the regular variable is just the current element of the overall array, the _idx variable is the index of that current element and the _source variable is the entire array that the repeater is working form.

The filter property filters the entire array down to a subset based on whatever expression (without the = in front) that you give it. So here you want the subset of the original array where the index is equal to some position variable or that position plus 1 or 2. Your filter statement would look something like this:

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

As far as I know, there is really only one reliable way to do this with css (I’d be interested to hear if other’s know of a different way). You have to keep the container from expanding vertically (i.e., set a fixed height), let it use block spacing for the child elements and set it to hide overflow elements. Then you have to set the child elements to float: left. Here’s a quick example. If you put this in your editor and adjust the window width you should see the right-hand buttons disappear as they run out of room.

uid: demo:hide_buttons
props:
  parameterGroups: []
  parameters: []
tags: []
component: f7-block
config:
slots:
  default:
    - component: f7-row
      config:
        style:
          overflow: hidden
          display: block
          height: 28px
      slots:
        default:
          - 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

There’s actually an advantage to this setup: the filter property for the repeater becomes easier because you just have to rule out buttons before the position variable and then let the css do the rest of figuring out how many buttons are visible.

1 Like

Definitively, this is the most beautiful reply that i have read here. The definition of the Community. :raised_hands:

2 Likes

that’s cool - but for our use case the overflow should scroll horizontal.
But if I set overflow: scroll it scrolls vertical. Could we get rid of this?

Until we manage this I will go further with the array approach…

That sound like the thing I am looking for. But if I want so show for example the length of source I get an TypeError: undefined is not an object (evaluating 'n[e.property.name]') .

Did I understand it wrong?

uid: ButtonGridd2
tags: []
props: {}
timestamp: Aug 30, 2022, 9:44:16 AM
component: f7-card
config: {}
slots:
  content:
    - component: f7-segmented
      config:
        style:
          display: flex
          flex-direction: row
      slots:
        default:
          - component: oh-repeater
            config:
              fragment: true
              for: rooms
              sourceType: array
              in:
                - name: Room1
                - name: Room2
                - name: Room3
                - name: Room4
                - name: Room5
              map: loop.rooms.name
            slots:
              default:
                - component: oh-button
                  config:
                    action: variable
                    actionVariable: selectSection
                    actionVariableValue: =loop.rooms_source.length
                    large: true
                    style:
                      color: '=vars.selectSection=="SECTION1" ? "black" : "#8C8C8C"'
                    text: =loop.rooms
    - component: Label
      config:
        style:
          flex: 1 1 auto
          overflow-y: auto
          position: relative
        text: =loop.rooms_source.length
       # text: =loop.rooms_source.length

Hey @Nic0205 I need to enlighten me on this:

While I’m trying to add

component: f7-navbar

in an OH Page, the OH draws a Navbar. Maybe it thinks that i’m just another Mac User and reacts accordingly :rofl:

My thought is, -if this works and you can configure it- maybe it’s an alternative for what we are trying to do. PLS don’t spend more than of 2-5 minutes on this, I just wanted to show to @JustinG that I’m reading (…not studying) code!!!

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…