F7-swiper question

[Miko_Mark (Mikó Márk)]

Hey everyone,

I would like to ask some help. I have a project which is to create a widget for a smart home wall panel and to do so I started to use f7-swiper in the code. The question is that is it possible to send the f7-swiper to the init slider with a item state or widget variable?

If so how can i do that?

[JustinG]

@Miko_Mark

The question is that is it possible to send the f7-swiper to the init slider with a item state or widget variable?

Yes, the swiper has an extensive list of properties you can configure:

Parameters - Swiper - The Most Modern Mobile Touch Slider

The initialSlide property will start the swiper at the slide number (zero-indexed) that you need. And because the swiper is re-rendered when a configuration expression changes, it will even change the slide when dynamic factor (item state or variable) changes.

[Miko_Mark (Mikó Márk)]

hey,

I tried to use that with a ,home” button and a variable, but I was not able to set it to the first swiper.
the variable is vars.display which can have home, showSecurity etc value.

[JustinG]

@Miko_Mark

I tried to use that with a ,home” button and a variable, but I was not able to set it to the first swiper.

I don’t understand. Can you show the widget yaml you are using?

[Miko_Mark (Mikó Márk)]

this is the code section:

   - component: f7-swiper
      config:
        comment: ("Vertical scrollable screen")
        params:
          direction: vertical
          mousewheel: true
          scrollbar:
            hide: true
          slidesPerView: 1
        scrollbar: true
        style:
          height: 100%
          width: 100%
      slots:
        default:
          - component: f7-swiper-slide
            slots:
              default:
                - component: f7-swiper
                  config:
                    pagination: false
                    params:
                      slidesPerView: 1
                      speed: 0%
                      allowTouchMove: true
                      initialSlide: '=vars.display == "home" ? 0 : 0'
                    style:
                      height: 25%
                      width: 35%
                      background-position: center
                      background-repeat: no-repeat
                      background-size: cover
                      left: 0
                      position: absolute
                      top: 8px
                    visible: =vars.display != 'showSecurity' && vars.display != "showPowerUsage"
                  slots:
                    default:
                      - component: f7-swiper-slide
                        config:
                          visible: =!props.HideCameraView1
                        slots:
                          default:
                            - component: oh-image
                              config:
                                action: photos
                                actionPhotoBrowserConfig:
                                  theme: dark
                                  type: popup
                                comment: ('Camera 1 Video view')
                                style:
                                  border-radius: 16px
                                  height: 10rem
                                  left: 120px
                                  margin-top: 5px
                                  position: absolute
                                  width: 20rem
                                url: =[props.CameraView1]

the home button where I set the state:

                - component: oh-button
                  config:
                    action: variable
                    actionVariable: display
                    actionVariableValue: home
                    comment: ('Home button')
                    style:
                      align-items: center
                      background-color: RGB(28, 28, 29)
                      border-radius: 16px
                      display: flex
                      height: 4rem
                      justify-content: center
                      left: 18px
                      margin-top: 28px
                      position: absolute
                      width: 4rem
                      z-index: 10
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          icon: =props.ButtonHomeIcon
                          style:
                            color: "=vars.display != 'showSecurity' && vars.display != 'showCamera' ?
                              'rgb(0,180,210)' : 'white'"
                            height: 3rem
                            width: 3rem

[JustinG]

@JustinG

the swiper is re-rendered when a configuration expression changes

@Miko_Mark

initialSlide: '=vars.display == "home" ? 0 : 0'

Your values never changes so the expression doesn’t change so the component never re-renders.

I guess I misunderstood the question initially. If it is just a matter of being able to return the user to the initial slide all the time and not actually changing what the initial slide is, then you don’t need the initialSlide property (or you can just set it to the constant index that you wish to use).

You basically want to refresh the component so that it thinks it’s being displayed for the first time and therefore starts at its set initial slide. What you want instead is the ‘key’ property. Here’s some explanation and example:

Auto-refresh charts and widgets in MainUI

As people migrate over to OH3 and the MainUI from other UIs, many are surprised to find that MainUI charts are static on a loaded page and won’t refresh unless the page is reloaded. Here I’m providing a fairly simple solution that allows you to set up timed, automatic refreshes for charts on a page (or another widget that you have configured with custom content that doesn’t refresh). When Do Widgets Refresh? So many of the standard widgets and components do respond to changes in item states t…

You don’t want a rule that causes the item state to change automatically, but the first part about refreshing the component is what’s important.

In your case you can use a variable instead of a item state in the key expression, BUT you have to make sure that variable actually changes whenever you want to move back to the home slide. So, instead of just setting the variable to a static value, you have to set it to something like:

actionVariableValue: =Math.random()

or

actionVariableValue: =(vars.display || 0) + 1

or

actionVariableValue: =dayjs()

[Miko_Mark (Mikó Márk)]

with the ,key” expression how should it look like?

[JustinG]

Just like it does in the example link. You need to make it unique. So, if there’s any chance at all of there being more than one of these components active at a time then you need the Math.random() or some other way to make it unique. And then you need to combine that with whatever is changing: your variable value, item state, or whatever. That second part has to actually change, however, not just get sent the same value it already has. String concatenation is probably a little safer than numerical summation. So, if you want to make sure that it is always a string concatenation use a string template:

key: =`${unique value here}-${variable value here}`

[Miko_Mark (Mikó Márk)]

maybe im stupid, but I tried to use your method for the key
key: =Math.random() + items.UI_Refresh_Timer.state

of course with my vars.display widget variable with all kind of state check but I was not able to make it “refresh”.

the way I tried to use is this:
key: =Math.random() + vars.display == ‘home’

[JustinG]

Please show the complete code that you have tried.

[Miko_Mark (Mikó Márk)]

Sure, attached the code.

OpenHAB_Code.txt (137.4 KB)

[JustinG]

The first issue is with your key expression:

@Miko_Mark

key: =Math.random() + vars.display == ‘home’

Without (...) around the boolean test, your expression is testing whether a random number + the variable value will equal the string 'home'. This of course will always be false no matter what you change the variable to, so, your key expression is never changing and therefore never resetting the swiper.

It’s not 100% clear from the structure of the overall widget what your intention is, but the home button is always visible. This means that a user could press it more than once expecting it to work each time. As I mentioned above, however, if the value of the variable doesn’t change you won’t get a reset of based on the key property.

Here’s an example: The first widget just uses the static value home when the home button is pressed. The first time that is pressed, the swiper does reset because the variable value is going from undefined → 'home'. If you swipe the cards and then press home again. nothing happens (variable goes from 'home' → 'home'). But, now if you press the not home button, the swipper resets to home (variable goes from 'home' → 'nothome').

uid: homeDemo
props:
  parameterGroups: []
  parameters: []
tags: []
component: f7-card
config:
  title: Home demo
slots:
  content:
    - component: f7-swiper
      config:
        key: =Math.random() + (vars.setHome == 'home')
      slots:
        default:
          - component: f7-swiper-slide
            slots:
              default:
                - component: oh-label-card
                  config:
                    label: Home card
          - component: f7-swiper-slide
            slots:
              default:
                - component: oh-label-card
                  config:
                    label: Card 1
          - component: f7-swiper-slide
            slots:
              default:
                - component: oh-label-card
                  config:
                    label: Card 2
  footer:
    - component: f7-row
      config:
        style:
          width: 100%
      slots:
        default:
          - component: oh-button
            config:
              action: variable
              actionVariable: setHome
              actionVariableValue: home
              text: home
          - component: oh-button
            config:
              action: variable
              actionVariable: setHome
              actionVariableValue: nothome
              text: not home

Contrast that with this where the home button is different every time: and every press of the home button resets the swiper

uid: homeDemo
props:
  parameterGroups: []
  parameters: []
tags: []
component: f7-card
config:
  title: Home demo
slots:
  content:
    - component: f7-swiper
      config:
        key: =Math.random() + vars.setHome
      slots:
        default:
          - component: f7-swiper-slide
            slots:
              default:
                - component: oh-label-card
                  config:
                    label: Home card
          - component: f7-swiper-slide
            slots:
              default:
                - component: oh-label-card
                  config:
                    label: Card 1
          - component: f7-swiper-slide
            slots:
              default:
                - component: oh-label-card
                  config:
                    label: Card 2
  footer:
    - component: f7-row
      config:
        style:
          width: 100%
      slots:
        default:
          - component: oh-button
            config:
              action: variable
              actionVariable: setHome
              actionVariableValue: =Math.random()
              text: home

[Miko_Mark (Mikó Márk)]

Thank you, with your help I was able to make a logic which is capable for sending ,home” all the things that I wanted