F7-swiper and oh-trend

Setup, Configuration and Use Widgets
1

Hey everyone,

I would like to request some help for one of my widget.

I would like it to refresh the value of a oh-trend when its value change which is a component of a f7-swiper.

Is it possible? If so how can I do it?

        - component: f7-swiper
          config:
            animate: false
            comment: ("Horisontally scrollable screen")
            disabled: =@props.itemSmartHomePanelState === 'showSettings' || vars.weather === 'showWeather'
            
            params:
              allowTouchMove: =@props.itemSmartHomePanelState !== 'showSettings' && vars.weather !== 'showWeather'
              direction: horizontal
              mousewheel: true
              observeParents: true
              observer: true
              pagination:
                clickable: false
                color: white
                dynamicBullets: true
              scrollbar:
                hide: true
              slidesPerView: 1
            scrollbar: true
            style:
              height: 100%
              left: 0
              overflow: hidden
              pointer-events: "=@props.itemSmartHomePanelState != 'home' && @props.itemSmartHomePanelState != 'null' ? 'none' : 'auto'"
              position: absolute
              top: 0
              width: 100%
            visible: =@props.itemSmartHomePanelState === 'home' || @props.itemSmartHomePanelState === 'null' && vars.weather != 'showWeather'
          slots:
            default:
              - component: f7-swiper-slide
                slots:
                  default:
                    - component: f7-block
                      config:
                        comment: ('Environment air quality and temp')
                        #key: =Math.floor(Date.now() / 5000)
                        style:
                          border-radius: 24px
                        visible: =vars.weather != 'showWeather'
                      slots:
                        default:
                          - component: f7-card
                            config:
                              style:
                                backdrop-filter: blur(20px) saturate(110%) contrast(70%)
                                background: transparent
                                border: 1px solid rgba(255, 255, 255, 0.15)
                                border-radius: 24px
                                box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 -1px 0 rgba(180, 180, 180, 0.55) inset,   /* alsó világos él */ inset -1px 0 0 rgba(150, 150, 150, 0.3), inset 1px 0 0 rgba(150,150,150,0.3), 0 8px 10px rgba(0,0,0,0.3)
                                color: white
                                display: flex
                                height: 26.85rem
                                left: 25px
                                overflow: hidden
                                position: absolute
                                top: 80px
                                transition: opacity 0.15s ease 0.3s
                                width: 26.65rem
                                z-index: 90
                              stylesheet: ":host .card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.15) 15%, rgba(255,255,255,0.05) 30%, transparent 60%); pointer-events: none; }"
                              visible: =@props.itemSmartHomePanelState != 'showSecurity' && @props.itemSmartHomePanelState != "showSettings"
                            slots:
                              default:
                                - component: f7-card-content
                                  slots:
                                    default:
                                      - component: f7-block
                                        config:
                                          style:
                                            background-image: conic-gradient(rgba(80, 200, 80,0.22))
                                            border-radius: 50%
                                            display: block
                                            height: 25rem
                                            left: 125px
                                            position: absolute
                                            top: -100px
                                            width: 25rem
                                            z-index: 1
                                      - component: f7-block
                                        config:
                                          style:
                                            background-image: conic-gradient(rgba(60, 200, 80,0.06))
                                            border-radius: 50%
                                            display: block
                                            height: 25rem
                                            left: -125px
                                            position: absolute
                                            top: 100px
                                            width: 25rem
                                            z-index: -1
                                      - component: Label
                                        config:
                                          comment: (Enviroment)
                                          style:
                                            font-size: 20px
                                            font-weight: bold
                                            left: 20px
                                            position: absolute
                                            top: 20px
                                            white-space: nowrap
                                          text: Environment
                                      - component: Label
                                        config:
                                          comment: (All rooms)
                                          style:
                                            color: gray
                                            font-size: 16px
                                            left: 20px
                                            position: absolute
                                            top: 47px
                                            white-space: nowrap
                                          text: All rooms
                                      - component: Label
                                        config:
                                          comment: (Air quality text -- dynamic)
                                          style:
                                            color: rgba(80, 200, 80,1)
                                            font-size: 40px
                                            left: 125px
                                            position: absolute
                                            top: 100px
                                            white-space: nowrap
                                          text: Excellent
                                      - component: Label
                                        config:
                                          comment: (Air quality)
                                          style:
                                            color: gray
                                            font-size: 16px
                                            left: 175px
                                            position: absolute
                                            top: 155px
                                            white-space: nowrap
                                          text: Air quality
                                      - component: Label
                                        config:
                                          comment: (Text)
                                          style:
                                            color: gray
                                            font-size: 16px
                                            left: 85px
                                            position: absolute
                                            top: 245px
                                            white-space: nowrap
                                          text: Temperature
                                      - component: Label
                                        config:
                                          comment: (Temperature item)
                                          style:
                                            color: white
                                            font-size: 20px
                                            font-weight: bold
                                            left: 95px
                                            position: absolute
                                            top: 215px
                                            white-space: nowrap
                                          text: =@props.average_temperature
                                      - component: Label
                                        config:
                                          comment: (Text)
                                          style:
                                            color: gray
                                            font-size: 16px
                                            left: 265px
                                            position: absolute
                                            top: 245px
                                            white-space: nowrap
                                          text: Humidity
                                      - component: Label
                                        config:
                                          comment: (Humidity item)
                                          style:
                                            color: white
                                            font-size: 20px
                                            font-weight: bold
                                            left: 280px
                                            position: absolute
                                            top: 215px
                                            white-space: nowrap
                                          text: 52%
                                      - component: f7-block
                                        config:
                                          style:
                                            position: absolute
                                            top: 50px
                                            left: 15px
                                            width: 100%
                                            height: 120px
                                        slots:
                                          default:
                                            - component: oh-trend
                                              config:
                                                trendItem: =props.average_temperature
                                                key: =items[props.average_temperature].state
                                                #period: h
                                                trendGradient: =['white', 'white']
                                                style:
                                                  background: transparent
                                                  
                                                  position: absolute
                                                  width: 10rem
                                                  height: 100%
                                                  top: 250px
                                                  left: 25px
                                                  z-index: 1000
                                                trendSampling: 5
                                      - component: Label
                                        config:
                                          comment: ('Separation line for trend')
                                          style:
                                            border-bottom: 1px solid rgba(100,100,100,1.3)
                                            display: block
                                            position: absolute
                                            top: 300px
                                            left: 25px
                                            width: 23.65rem
                                      - component: Label
                                        config:
                                          comment: ('Separation line for trend')
                                          style:
                                            border-bottom: 1px solid rgba(100,100,100,1.3)
                                            display: block
                                            position: absolute
                                            left: 25px
                                            top: 330px
                                            width: 23.65rem
                                      - component: Label
                                        config:
                                          comment: ('Separation line for trend')
                                          style:
                                            border-bottom: 1px solid rgba(100,100,100,1.3)
                                            display: block
                                            position: absolute
                                            left: 25px
                                            top: 360px
                                            width: 23.65rem
                                      - component: Label
                                        config:
                                          comment: ('Separation line for trend')
                                          style:
                                            border-bottom: 1px solid rgba(100,100,100,1.3)
                                            display: block
                                            position: absolute
                                            left: 25px
                                            top: 390px
                                            width: 23.65rem

I have attached the code. Thank you for your help!

2

key is the correct way to do this (although I would recommend key: =Math.random() + items[props.average_temperature].state instead of just the state). However, the oh-trend does not take up the entire config object, only certain hard-coded properties. So, your key property isn’t getting processed by the vue renderer at all.

Any of the f7 components do get the entire config object, so key will work for those components. My guess is that if you just move the key up to the f7-block parent of the oh-trend that will work.

3

Hey,

thank you very much for your answer :smiley:

with this information I was able to use the key function for oh-trend as well for the oh-chart :smiley:

one other thing, is it possible to disable the reinitialisation which cause a less then a 1s refreshing on the oh-trend and oh-chart?

4

I assume you mean the opening animation of the line series.

On the oh-trend I do not believe that it is, for the same reasons as mentioned above regarding limited configuration options. The trend line was really intended to a low code, quick visualization. It was never made to be a fully configurable chart since you have the available through the oh-chart.

To turn off the opening animation on an oh-chart, just add:

options:
  animation: false

to the config of the oh-chart (or chart page) itself.

5

Hey,

the animation false already in the oh-chart, but I have attached an video regarding the thing that I can see. So when its updating its flash for a sec.

6

I don’t think that is a configuration issue. That appears to just be the time it takes for the new chart to render after view has cleared the old chart. I couldn’t say off hand whether that’s a network delay or a slow process in the browser. Do you see the same delay across different devices?

If it really bothers you, there’s a small chance that you could eliminate this by not using the key property and using an expression in some property of the chart or data series that includes the changing item state. That way when the item state changes, that will force a refresh on the chart directly instead of through the key route.

7

Hey,

yes, I can see the same delay on every device that I use to connect / program the RPI which is used for the wall panel. The same thing happens on the wall panel as well.

what can I use instead of the key property?

8

It probably won’t make any difference. I suspect the rending delay is caused by the persistence call to retrieve the data for the chart. But, any time an expression with an item state is used in any component property, that item is added to a watch list and changes in that item trigger a refresh of the whole component. So, you can use any real property you already have in the chart, or axis, or probably best, the series component, and just put in an expression that includes the item state. You don’t care to actually use the item state, you just want to make a dummy expression that “checks” the item state but always returns the real value. For example, in an oh-chart you could have:

period: =items.testItem.state && "D"

As long as the string version of the item state is not a false value, that will always evaluate to “D” but it will trick MainUI into tracking the state of testItem and “re-evaluating” that property every time that state changes.

You can also just make up a fake property which will have no impact on the chart itself but also causes the item to be tracked:

forceRefresh: =items.testItem.state

Again, these workarounds will probably give you the same result as the key property because I suspect the pause isn’t the chart rending itself, it’s OH making a call to your persistence service. The way vue works the components are cleared and then rebuilt and if there’s a time consuming step while re-rendering the component you will see that as a blink. The possible advantage of the workarounds above is that they may not trigger the clearing step until the data is ready to be redrawn, but I don’t know if that’s the case.

9

Hey,

I tried both of the property, but only the key works for the oh-chart.

10

That’s interesting. I haven’t looked into this recently, but the charts and chart components should update dynamically with expression changes. As I said, however, it probably would not have fixed the problem.