UI stops updating widgets

Add-ons UIs
1

I have a tabbed page as my main view on a wall mounted device (iOS). All pages are fixed grid layout pages. I am on OH3.1M3.
After a while MainUI is not updating widgets based on their item states anymore.
Did anybody noticed that also?
I am using widgets for all my elements and I am using the new stylesheet property of pages to change properties like button background color like below.

@hubsif : may I point you to this thread. Could this behaviour be related to your extension of layout pages?

component: oh-button
config:
  action: command
  actionItem: =props.item
  actionCommand: =props.cmd.split("=")[0]
  text: =props.cmd.split("=")[1]
  class: '="cssbutton\ " + (items[props.item].state == props.cmd.split("=")[0] ? "cssbuttonactive" : "cssbuttoninactive")'
  style:
    height: 100%
    display: flex
  outline: true

my page looks like this:.

config:
  layoutType: fixed
  label: Wohnzimmer
  showFullscreenIcon: true
  margin: 0
  hideNavbar: true
  hideSidebarIcon: true
  sidebar: true
  style:
    --my-font-size: 18px
    --my-font-color: rgb(238,238,238)
    --my-font-color-active: rgb(0,204,255)
    --my-bg-color: rgb(34,51,68)
    --my-bg-color-active: rgb(51,68,85)
    --f7-button-text-transform: none
    user-select: none
    -webkit-user-select: none
  stylesheet: |
    .cssbuttoninactive {
      --f7-button-bg-color: var(--my-bg-color);
      --f7-button-hover-bg-color: var(--my-bg-color-active);
      --f7-button-pressed-bg-color: var(--my-bg-color-active);}
    .cssbuttonactive {
      color: var(--my-font-color-active);
      --f7-button-bg-color: var(--my-bg-color-active);
      --f7-button-hover-bg-color: var(--my-bg-color);
      --f7-button-pressed-bg-color: var(--my-bg-color);}
    .cssbutton {
      --f7-button-border-radius: var(--my-border-radius);
      --f7-button-outline-border-width: var(--my-margin);
      --f7-button-outline-border-color: var(--f7-page-bg-color);
      border: var(--my-margin) solid var(--f7-page-bg-color);
      user-select: none;
      -webkit-user-select: none;}
    .cssbutton:active {
      --f7-button-bg-color: var(--my-bg-color-active);}
  colNum: 28
  scale: false
blocks: []
masonry: null
grid:
  - component: oh-grid-item
...
2

Hi Oliver,

Actually, I can’t see how the layout pages could be related to this.

I would guess that the eventsource connection gets lost for some reason (I think I’ve read another forum post with someone having that issue). Not sure how to debug that on an iPad without an active Safari debugging connection, though. I would probably try checking for existing connections on the server while it works and see if those are lost when the issue comes up. Perhaps there’s even a server side logging for evensources that can be enabled.

3

ok - thanks for clarification, hubsi

4

Same issue here. After some time the UI is not updating Widgets based on their item states. Did you find a solution for that?

5

no. I switched back to responsive layout. I assume it is related to stylesheets. Are you making use of stylesheets?

6

@Oliver2 Oh! Your original post didn’t mention that this only occurs with “fixed layout” pages! Is that the case? And it works just fine for responsive layouts?

I think you can easily find out if it’s related to custom stylesheets by simply removing them and observe if the widgets still stop updating. If not, I’ll have a closer look at what could be the cause for this.

7

Hi hubsi, yes, it is related to fixed style layouts.
I am sorry, but I did mention this in my initial post.

but never mind. just for completeness

8

Ok, and

Saw that, but it actually doesn’t imply that it only occurs with fixed grid layout pages :wink:.

I’ll see if I can get to the root of this. And I’ll be happy for any additional information, like: “it always stops after x minutes”, or: “it only occurs on iOS devices”, or: “it only occurs with these widgets being present”. Even though I doubt it’s related to stylesheets, you could also check by removing them for a while.

9

as you can see in my initial post, I am using a style sheet for general button settings and an active/inactive stylesheet depending on the state (see here).
after a while (can be 3 minutes, can be one hour - I cannot reproduce this) the highlighted buttons (i.e. those with stylesheet cssbuttonactive) freeze. I can still click on the button and the action is executed, but it does not get highlighted.
My device is an iPad.

10

Ok, thanks for that info.
Are there any other item states shown on your screen? If so, do they still update after the buttons freeze?
If not, could you add one (e.g. shutter state or temperature) and check if it still updates?

11

the screen is embedded in a tabbed page. all widget stop freezing at the same time (at least at the time I notice the freeze, none of the elements work anymore).
here is the latest screenshot to see all of the items:

image
image2461×1184 189 KB

weather widget is non-interactive

12

Hi Hubsi,
I did some more testing and found out what is causing the trouble (allthough it sounds a little bit weird):

When I add an SNMP based item to the GUI, MainUI stops updating after about 10 minutes.

HOWEVER, this also happens with non-responsive layout

Simon, could you please tell if you have also items in your gui which are linked to an SNMP channel?

13

I really don’t know what you mean with “items which are linked to an SNMP”
I only recognize the freezing when the “Washing machine status widget form DrRSatzteil” is active: Washing machine status widget - Add-ons / UIs - openHAB Community

14

Hi!
Somewhat delayed:

I understand that this issue is not related to the fixed layout anymore then, is that correct?

Does the issue also occur on “normal” (Desktop) browsers or just on iPad? Can you please test with your SNMP items, @Oliver2 ? And if it also stops working on desktop browsers, please share the console output.

15

correct. This also happens on responsive layouts and does not happen an desktop browsers - only iOS.