[Closed] Icons show up and disappear randomly

Setup, Configuration and Use Items & Sitemaps
1

After creating some sitemaps for different areas of the house I’ve put them all in a single web site using HTML and iframes. This seemed to be working quite well.
Now I’ve reworked quite a bit adding some items, changed the iframe layout and updated Firefox.
What happens now is that when the website is loaded the first time everything looks good. But then whenever a item is updated (automatic refresh) and gets a new value the corresponding icon disappears. After some more updates the icon may show up again.
The openHAB console doesn’t show any warnings or errors, everything is green.
Unfortunately I cannot go back to the previous version, I was a bit too optimistic here.
I’m using openHAB 2 (console says 4.0.8) and Firefox.

Can anyone give me a hint about what’s going on here?
Thank you very much!

2

A few more tests revealed the following:

The number of items was reduced by omitting some of the iframes.
Now, when an item is updated its value changes in the blink of an eye.
At the same time the icon of the item disappears.
After 1-2 seconds the icon reappears again.

Increasing the number of items again shows the effect described in my first post that the icon
disappears and doesn’t show up again until its next update.

So why is the icon disappearing at all?

openHAB is running on a desktop PC with a CPU usage of <20% and ~ 6GB unused memory.

3

How well do your sitemaps work standalone (outside iframes)?
How about in another browser?

4

I’ve packed all items in a single sitemap.
Viewing this sitemap with Firefox works fine. Both values and icons are visible and updated correctly.

Microsoft Edge doesn’t seem to support CSS grid and doesn’t show anything.

Both the HTML- and CSS-code have been checked with various online tools like codepen, jsfiddle, and cssdesk. No errors were flagged, and the site layout worked fine.

5

The HTML website uses iframes to show 8 openHAB sitemaps and 2 charts in the same windows.
Putting all items in a single sitemaps worked well.
Not knowing anything about the internals of openHAB I just can speculate that the problem is caused by the large number of active sitemaps that need to be updated simultaneously.

6

I could speculate that Firefox is choking on multiple iframes images in some way.

Ideally, you’d want to see how your iframes setup performed in some other browser.

7

Now my website has been checked with the following web browsers:

Browser (HTML-Renderer)

  • Firefox (Gecko)
  • Chrome (Blink)
  • Vivaldi (Blink)
  • Midori (WebKit)

All show the behaviour described above: When updating an item its icon disappears and may reappear at the next update.
So to me it looks like this effect is not an issue of the browser but rather linked to openHAB.

8

Now I’ve created an HTML file for test purposes that contains a table 2x6 with each cell containing an iframe that points to the same sitemap. So this should be easy to reproduce for anyone interested. Simply replace the sitemap “power” by your own sitemap, save it as dashboardTest.html and load it in your browser:
[file:///D:/openHAB/conf/sitemaps/dashboardTest.html](file:///D:/openHAB/conf/sitemaps/dashboardTest.html)

<!DOCTYPE html>
 <html lang="en">
    <head>
        <title>My Title</title>
    </head>
    <body>
        <header>
        </header>
    <table border="1">
        <tr>
            <td><iframe width="200" height="400" src="http://localhost:8080/classicui/app?sitemap=power"></iframe></td>
            <td><iframe width="200" height="400" src="http://localhost:8080/classicui/app?sitemap=power"></iframe></td>
            <td><iframe width="200" height="400" src="http://localhost:8080/classicui/app?sitemap=power"></iframe></td>
            <td><iframe width="200" height="400" src="http://localhost:8080/classicui/app?sitemap=power"></iframe></td>
            <td><iframe width="200" height="400" src="http://localhost:8080/classicui/app?sitemap=power"></iframe></td>
            <td><iframe width="200" height="400" src="http://localhost:8080/classicui/app?sitemap=power"></iframe></td>
        </tr>
        <tr>
            <td><iframe width="200" height="400" src="http://localhost:8080/classicui/app?sitemap=power"></iframe></td>
            <td><iframe width="200" height="400" src="http://localhost:8080/classicui/app?sitemap=power"></iframe></td>
            <td><iframe width="200" height="400" src="http://localhost:8080/classicui/app?sitemap=power"></iframe></td>
            <td><iframe width="200" height="400" src="http://localhost:8080/classicui/app?sitemap=power"></iframe></td>
            <td><iframe width="200" height="400" src="http://localhost:8080/classicui/app?sitemap=power"></iframe></td>
            <td><iframe width="200" height="400" src="http://localhost:8080/classicui/app?sitemap=power"></iframe></td>
        </tr>
    </table> 
    </body>
</html>

The sitemap is very simple. It just contains four items:

sitemap power label="Power" {
    Frame {
        Text item= nPower1
        Text item= nPower2
        Text item= nPower3
        Text item= nPower4
    }
}

The items all look the same:

Number    nPowerX    "Power [%d W]"    <energy>    (gPower)

The value of the items are assigned in a rule. Again, the console doesn’t flag any errors.

Now I’m very curious if someone will test this setup and what the outcome is.