OH3 is a dynamic page background possible?

[joepadmiraal]

openHAB version: 3.1.0.M3

My goal is to replace my openHAB2 installation. While doing this I want to see if I can replace HABPanel with the new openHAB pages.
This is what my current HABPanel page looks like:

This is an old screenshot so please don’t look at the alignment etc
It contains a background that changes based on the song that is playing on a Sonos device.
This was done with some custom JavaScript.
I am able to set the page background to a static image, however linking it to an item does not seem to work.
So this works:

config:
  layoutType: fixed
  label: tablet klok
  style:
    background: blue
blocks: []
masonry: null
...

But this does not:

config:
  layoutType: fixed
  label: tablet klok
  style:
    background: =items.bgItem.state
blocks: []
masonry: null
...

I verified the item state by also using it as a background for a widget.
And that does seem to work:

component: oh-label-card
config:
  item: SonosMoveKeuken_CurrentAlbumCoverArtURL
  background: =items.bgItem.state
  vertical: false

So my question is, are dynamic backgrounds supported for pages?
And if so, how can I achieve that.

Thanks,
Joep

[raptormachine (Hugo Lourenço)]

Hi @joepadmiraal did you manage to get it working? also interested to perform same action, in my case I have a item type IMAGE already and would like to load that to the background directly…

[JustinG]

I don’t think this is currently feasible. There are a couple of things going on.

style:
  background: blue

works because when you use the style property, you are using css and blue is a valid css value for the background property to have. On the other hand,

style:
  background: =items.bgItem.state

doesn’t work for a few reasons.

1. It doesn’t look like the style property of pages is processed through the expression parser, so you can’t use the same =expression that you can use in the widgets; this means there’s simply no access to OH item states for the style properties of a page.
2. Even if you could access OH item states, the state of the OH image item is not a valid css value for background; when using an image for a background the typical format is url(/path/to/image.file) not the image itself. If I recall, url(raw image data) will also work, but there’s another catch…
3. The state of an OH image is not the image data, but just a short MIME description such as raw type (image/jpeg): 36930 bytes the actual image data is stored in the rawState which I don’t think the widget items object has any access to. So there’s just no way to pass the raw image data to the css styles of the page.

You might be able to find a workaround with a lot of effort. One possibility is an external file. There are threads here in the forum about saving the image of an image item to a file. If you saved that image with a consistent name in the $OH_CONF/html folder, you could then statically link that file to the background property as:

style:
  background: url(/static/name_of_image_file)

That would not update whenever the file changed, however, so you would have to also use something like:

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 …

and force the page to update whenever the image item changes.

[joepadmiraal]

Unfortunately I was not able to solve this.

The suggestion from @JustinG could work in my case.

[raptormachine (Hugo Lourenço)]

Thanks @JustinG for the multiple solutions. The static file may work for my objective.