[MainUI] Overview Page prevents variables from working correctly in widgets etc

[Mark-VG]

The problem

I use variable inside certain widgets to control the visibility of blocks depending on the state of a variable defined inside a widget.

The widget I developed worked perfectly in the Widget Editor as well as on my Overview-TEST page. However when I put it live on the Overview page I could not get the f7-block to display on activating the variable. The following is what should happen vs what actually happens (as you will see pressing OPEN should toggle the variable between true and false):

The widget code I used for this test is:

component: oh-cell
config:
  title: ="Test " + vars.testVariable
slots:
  background:
    - component: f7-block
      config:
        style:
          height: 100%
          margin: 0
          padding: 0
          position: absolute
          width: 100%
    - component: f7-block
      config:
        style:
          bottom: 5px
          left: 0px
          margin: 0
          padding: 0
          position: absolute
          width: 100%
      slots:
        default:
          - component: oh-button
            config:
              action: variable
              actionVariable: testVariable
              actionVariableValue: '=(vars.testVariable == "null") ? true : !(vars.testVariable)'
              style:
                height: 100%
                width: 100%
              text: OPEN

During debugging it also became evident that when initializing a variable on the actual Overview page as follows (code extract from the code tab of Overview page:

config:
  label: Overview
  defineVars:
    testVariable: zzzaaabbb
blocks:
  - component: oh-block
    config: {}
    slots:
      default:
        - component: oh-grid-cells
          config: {}
          slots:
            default:
              - component: oh-cell
                config:
                  title: Test
                slots:
                  background:

The variable defineVars is not processed on the actual Overview page, however it is processed on the Setting, Pages, Overview page used for editing etc.

VS:

It is also important to note that the widget seems to start working on the Overview page if the Overview page is left active on a browser for an extended period (>30min). After that period for some reason the widget just works. However if the page is refreshed the widget once again stops working

I have also checked and the are no errors reported on the browser console when trying the press the button etc to cause the widget to fail.

I have reproduced this issue on my Live system, on a Clean install running OH 4.0.2 as well as on that system upgraded to 4.1.0 Build #3606

I have also tested with Chrome, Edge, Firefox and the Android APP, and see the same issue all 4.

Expected behavior

I would expect that the widget would perform the same way on the Overview page as on any other page as well as on the widget editor and that variables defined using defineVars: should be honored on all pages.

I am baffled by the fact that the widget starts working after an extended period of time of the Overview page being active.

Steps to reproduce

1. Create a new Cell on the Overview page using the Setting, Pages, Overview, + option, Cell
2. Edit the newly created Cell and choose Edit YAML.
3. Paste the following code over the existing YAML:

component: oh-cell
config:
  title: ="Test " + vars.testVariable
  defineVars:
    testVariable: false
slots:
  background:
    - component: f7-block
      config:
        style:
          height: 100%
          margin: 0
          padding: 0
          position: absolute
          width: 100%
    - component: f7-block
      config:
        style:
          bottom: 5px
          left: 0px
          margin: 0
          padding: 0
          position: absolute
          width: 100%
      slots:
        default:
          - component: oh-button
            config:
              action: variable
              actionVariable: testVariable
              actionVariableValue: '=(vars.testVariable == "null") ? true : !(vars.testVariable)'
              style:
                height: 100%
                width: 100%
              text: OPEN

4. Save the Overview page
5. Navigate to the Overview page and test. The cell will display "Test undefined" and does not toggle the "undefined" to true and false as it should
6. Leave the Overview page open for an extended period (>30mins) and try again and the widget will perform as expected.

In order to test the defineVars setting the steps to reproduce would be:

1. Navigate to Settings, Pages, Overview, Code Tab
2. Add the following under the label: Overview setting

  defineVars:
    testVariable: MyVariableTest

3. Save the Overview Page
4. Click on "Run Mode (Ctrl-R)
5. The Cell will display with the correct variable defined
6. Navigate to the Overview Page, the Cell will display with the variable "undefined" (and widget will not work to toggle)

Your environment

runtimeInfo:
  version: 4.0.2
  buildString: Release Build
locale: en-ZA
systemInfo:
  configFolder: C:\openHAB\conf
  userdataFolder: C:\openHAB\userdata
  logFolder: C:\openHAB\userdata\logs
  javaVersion: 17.0.8
  javaVendor: Azul Systems, Inc.
  javaVendorVersion: Zulu17.44+15-CA
  osName: Windows 10
  osVersion: "10.0"
  osArchitecture: amd64
  availableProcessors: 8
  freeMemory: 619645656
  totalMemory: 1073741824
  startLevel: 100
bindings: null
clientInfo:
  device:
    ios: false
    android: false
    androidChrome: false
    desktop: true
    iphone: false
    ipod: false
    ipad: false
    edge: false
    ie: false
    firefox: false
    macos: false
    windows: true
    cordova: false
    phonegap: false
    electron: false
    nwjs: false
    webView: false
    webview: false
    standalone: false
    os: windows
    pixelRatio: 1
    prefersColorScheme: light
  isSecureContext: true
  locationbarVisible: true
  menubarVisible: true
  navigator:
    cookieEnabled: true
    deviceMemory: 8
    hardwareConcurrency: 8
    language: en-US
    languages:
      - en-US
      - en
    onLine: true
    platform: Win32
  screen:
    width: 1920
    height: 1080
    colorDepth: 24
  support:
    touch: false
    pointerEvents: true
    observer: true
    passiveListener: true
    gestures: false
    intersectionObserver: true
  themeOptions:
    dark: light
    filled: true
    pageTransitionAnimation: default
    bars: filled
    homeNavbar: default
    homeBackground: default
    expandableCardAnimation: default
  userAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML,
    like Gecko) Chrome/116.0.0.0 Safari/537.36
timestamp: 2023-08-31T05:36:55.056Z

Browser console

Proxy: need Partition4_Detailed_Partition_State
app.e4469a9e02bf8bc86419.js:7 updateTrackingList: Pending tracking list update, not calling the API
app.e4469a9e02bf8bc86419.js:7 Updating tracking list: ["ParadoxpanelEVO192_PanelState","ParadoxpanelEVO192_Voltage","undefined_Partition_In_Exit_Delay","undefined_Partition_Has_All_Zones_Closed","ParadoxpanelEVO192_BatteryVoltage","ShellyGarageDoorshelly1a4cf12f486ac10163199232_Input","ShellyGateshelly1a4cf12f41d5e10163199231_Input","Shelly_UNI_Garage_ElectricFence_State","ShellyGarageDoorshelly1a4cf12f486ac10163199232_Power","ShellyGateshelly1a4cf12f41d5e10163199231_Power","Shelly_UNI_Garage_ElectricFence","GPSGroup_LastSeen","GPSMark_LastSeen","GPSRiley_LastSeen","GPSEthan_LastSeen","GPSAnne_LastSeen","SunSynk_Battery_LastUpdate","SunSynk_Battery_Status","SunSynk_Battery_Voltage","SunSynk_Battery_SOC","SunSynk_Battery_Temp","ShellyGateshelly1a4cf12f41d5e10163199231_Temperature","HarmonyHubMarkHub_CurrentActivity","SunSynk_vac_L1_L2","SunSynk_inv_Total_Power_175","SunSynk_gen_To_Mi_Power_166","SunSynk_acL1_Power_167","SunSynk_Load_Grid","SunSynk_MPPT_TOTAL","UI_Refresh_Timer","GPSMarkatHome","GPSRileyatHome","GPSEthanatHome","GPSAnneatHome","GPSAnneatMerv","GPSRileyatWilden","GPSEthanatWilden","GPSAnneatHoylake","GPSRileyatHoylake","GPSEthanatHoylake","LocalSunRise_StartTime","LocalSunSet_StartTime","LocalMoon_PhaseName","LocalMoon_Sign","LocalMoonRise_StartTime","LocalMoonSet_StartTime","LocalMoon_FullMoon","Lounge_Room_Switch","Lounge_Room_Brightness","LoungeRoom_ColorTemperature","LoungeRoom_Color","Lounge_Room_Scene","Riley_Room_Switch","Riley_Room_Brightness","RileyRoom_ColorTemperature","RileyRoom_Color","Riley_Room_Scene","Ethan_Room_Switch","Ethan_Room_Brightness","EthanRoom_ColorTemperature","EthanRoom_Color","Ethan_Room_Scene","ShellyEM_MAINS_TotalEnergy_Switch","ShellyEM_MAINS_TotalEnergy_Monthly","ShellyEM_Mains_LastStored","ShellyEM_MAINS_TotalEnergy","ShellyEM_Mains_TotalEnergy_PreviousMonth","SunSynk_MPPT1_House","SunSynk_MPPT2_Garage","SunSynk_Battery_Power","SunSynk_Inverter_Load_Power","SunSynk_inv_Current_L1_164","Partition1_PartitionState","Partition2_PartitionState","Partition3_PartitionState","Partition4_PartitionState","Partition1_Partition_In_Exit_Delay","Partition2_Partition_In_Exit_Delay","Partition3_Partition_In_Exit_Delay","Partition4_Partition_In_Exit_Delay","Partition1_Partition_Label","Partition1_Detailed_Partition_State","Partition2_Partition_Label","Partition2_Detailed_Partition_State","Partition3_Partition_Label","Partition3_Detailed_Partition_State","Partition4_Partition_Label","Partition4_Detailed_Partition_State"]
10app.e4469a9e02bf8bc86419.js:35 Setting keepalive interval seconds 10

Additional information

There is a lot of detail in the community thread I created around this issue:

https://community.openhab.org/t/oh4-0-2-cell-based-widget-not-working-on-overview-page-but-works-on-other-pages/149172

A slightly more complex widget that also does not work. Uses more level for the variable:

component: oh-cell
config:
  title: ="Test " + vars.testVariable
slots:
  background:
    - component: f7-block
      config:
        style:
          height: 100%
          margin: 0
          padding: 0
          position: absolute
          width: 100%
    - component: f7-block
      config:
        style:
          bottom: 5px
          left: 0px
          margin: 0
          padding: 0
          position: absolute
          width: 100%
      slots:
        default:
          - component: oh-button
            config:
              popupOpen: .test1234-pop
              action: variable
              actionVariable: testVariable
              actionVariableValue: '=(vars.testVariable == "null") ? true : !(vars.testVariable)'
              style:
                height: 100%
                width: 100%
              text: OPEN
    - component: f7-popup
      config:
        class: test1234-pop
        style:
          --f7-popup-tablet-height: 720px
          --f7-popup-tablet-width: 360px
          background-color: rgb(220,220,220)
          border-radius: 30px
          height: 720px
          text-overflow: ellipsis
          width: 360px
      slots:
        default:
          - component: f7-block
            config:
              popupClose: .test1234-pop
              style:
                background-color: rgb(220,220,220)
                border-radius: 30px
                height: 720px
                margin: 0
                padding: 0
                text-overflow: ellipsis
                width: 360px
            slots:
              default:
                - component: oh-button
                  config:
                    clearVariable:
                      - DetailShow
                      - testVariable
                    large: true
                    popupClose: .modal-in
                    style:
                      background: rgb(220,220,220)
                      color: white
                      display: flex
                      height: 30px
                      left: 5px
                      position: absolute
                      top: 5px
                      width: 30px
                      z-index: 999
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          color: white
                          f7: clear_fill
                          style:
                            color: black
                            font-size: 20px
                            margin: auto
                - component: Label
                  config:
                    style:
                      font-size: 25px
                      font-weight: 500
                      padding-left: 50px
                      width: 100%
                    text: Test
                - component: Label
                  config:
                    style:
                      font-size: 25px
                      font-weight: 500
                      padding-left: 50px
                      width: 100%
                    text: ="Variable Value " + vars.DetailShow
                - component: f7-block
                  config:
                    style:
                      margin: 0
                      padding: 0
                      top: 0px
                  slots:
                    default:
                      - component: oh-link
                        config:
                          action: variable
                          actionVariable: DetailShow
                          actionVariableValue: '=(vars.DetailShow == "null") ? true : !(vars.DetailShow)'
                          style:
                            height: 100%
                            width: 100%
                            z-index: 0
                        slots:
                          default:
                            - component: f7-icon
                              config:
                                color: white
                                f7: ant
                                style:
                                  color: black
                                  font-size: 100px
                                  margin: auto
                            - component: Label
                              config:
                                style:
                                  font-size: 25px
                                  font-weight: 500
                                  padding-left: 50px
                                  width: 100%
                                text: Click on Ant                                 
                                  
                                  
                - component: f7-block
                  config:
                    style:
                      background: white
                      border: 1px solid black
                      border-radius: 20px
                      left: 15px
                      margin: 0
                      opacity: 1
                      overflow: hidden
                      padding: 0
                      position: absolute
                      top: 133px
                      width: 330px
                    visible: =(vars.DetailShow) == true
                  slots:
                    default:
                      - component: f7-icon
                        config:
                          color: white
                          f7: ant
                          style:
                            color: black
                            font-size: 100px
                            margin: auto

[Mark-VG]

Hi.
Just wondered if there is anything I can do to assist getting this fixed?
Thanks
Mark

[florian-h05]

Hi Mark,

sorry for the delay, there are many things to work on especially for one alone ...
I took a look into this, and I have a few points to talk about:

• In your reproduce code example, you set the defineVars config param for the oh-cell. I have checked both the docs and the codebase and I don't think that is supported for components itself and hence not expected to work.
• I have fixed the issue that defineVars does not work for the overview page, see Overview page: Fix defineVars is not working #2673.
• If the variable is not defined through defineVars, the oh-cell title won't get updated if the testVariable is added later. This is because testVariable is reactive data added by a child component, and as it is not available on render time Vue is not able to track its state. If it is added through defineVars, it is available during render time and Vue is able to setup its state tracking properly.

If you need to handle vars globally (i.e. outside of the widget defining it), consider using the new oh-context component, please read the docs: https://www.openhab.org/docs/ui/widget-expressions-variables.html#variable-scope.

With support for setting defineVars on the overview page now, you can use your provided example cell - but you need to defineVars.

[Mark-VG]

Thanks Florian. I rea;;y appreciate you taking another look.
I know you have been busy with lots of other stuff - just I am totally unqualified to look for myself.
I am hoping the fix to just the Overview page will help resolve my difficulties - will have a try again as soon as the SNAPSHOT is out. But will also take a closer look at the oh-context component.
Thanks again.

[florian-h05]

FYI I think there is a new snapshot available including the fix.

[Mark-VG]

Thank you. I have installed and it is definitely working on the Overview page now :-)
I not longer get these:

11:08:28.246 [WARN ] [se.internal.SseItemStatesEventBuilder] - Attempting to send a state update of an item which doesn't exist: undefined_Partition_In_Exit_Delay
11:08:28.247 [WARN ] [se.internal.SseItemStatesEventBuilder] - Attempting to send a state update of an item which doesn't exist: undefined_Partition_Has_All_Zones_Closed

I now just need to see if the other changes I had made to prevent certain widgets rendering unless open work or if I need to look at oh-context.
Really appreciate your work