Static image items

CentOS 8
OH 3.1.0M3

I’m trying to find steps or documentation on how to add some static images that can be used as background in the pages or cells. I’ve got some light switches and outlets set up with toggles in the UI that I’d like to put a background image behind the toggle. Not sure where to upload the image and how to define it so it can be included on the pages?

I can’t really help with the specific widgets, mainly because you’ve not provided which widgets you are trying to use. But refer to Component Reference | openHAB for details on which widgets support a background image (not all widgets do).

See Pages - Overview Page | openHAB for a discussion on where to put the images and how to reference them. That section is in relation to the cards on the Overview page but the overall concepts are the same. Put the image in your $OH_CONF/html folder and use a relative path to the image, e.g. /static/nameofimage.png.

Okay, that’s a start. I wasn’t sure where to drop images to be used.

Now I gotta figure out which parts of the UI support the background image. I’m trying to set up some switches with images behind them to make it a bit more obvious what the toggle does and make it more visually appealing for the wife.

pls i am a truly dummy but i didnt find any example of using a static image Item.
This is the situation i use OH3.2 in windows. I put a jpg image in c:/openHAB/conf/htlm folder
the file name is ex.jpg. Now i want to create an item that store that image.

Image myimage { channel =“http://localhost:8080/static/ex.jpg” }

but it doesnt work!!!

Well of course not. That’s not how it works. A “channel” has to actually refer to a Channel on a Thing. It has a meaning. There is no binding so there is no Thing so there is no Channel.

And why do you need it in an Item anyway? Image Items are usually used by bindings that download an image, such as album art for the Spotify or Chromecast binding or the current conditions icon for the Open Weather Map binding. An Item is used because there is no other way.

If you already have the image, you’d configure a MainUI widget or sitemap element to just show that image as I described above. You don’t need an Item.

But if for some unknown reason you really do need the image in an Item, you’ll have to write a rule that reads the image in, converts it to base-64 and updates an Item with that.

Thanks a lot. This is the problem.

This works OK when i open my page with a device inside my local network.
But if i open this page from a device outside this network the image is “broken”.
Ok i now understand that i should replace with the public ip of my webserver.
Am i right? I thought there was a possibility to store the image into the Item to avoid all the http requests.

url: /static/ganicon.jpg

just use a image hoster if you want to access it also from outside…

Thanks a lot that’s exactly what i was looking for!