How to set the image content of an image item

I was trying to create a “default” image for an image item, to be used in the UI whenever there is no image set. At the moment the image then changes to “undef”, which results in an ugly “broken” image. In the UI.

My first idea was to create a dummy image icon, which could be swapped in the UI whenever the original one was “UNDEF”.

I created the image item … but now … how do I add the image data?

So I started searching and found some info, that images are stored as base64 encoded strings. Easy! There are online converters for that:

uploaded my image, got the base64 encoded String.

My first attempt: go to the api explorer and put the string into a POST request to the items.

Doesn’t work, only gives back an error. I figured the mime type text/plain must be wrong. But it’s the only one that you can choose. So I copied the CURL command and changed the mime type there. Executed it at the linux console … and it didn’t work either. I experimented more with leaveing out the data bit or mime type from the base64 string, but also no success. I found several very old posts here with people having similar problems, and the solution was always something like “i used the ftp binding” or “I could get the image from an url”.

So there must be a way to just set the “image” part of an image item?

Luckily openhab is opensource, so when searching the code base, I found the RawType Class. And this one had a base64 decoder built in!

So I created a new script:

val rawType = RawType.valueOf("<data from base64encode website goes here>")
postUpdate(yourImageItem, rawType)

And this finally worked. I am almost inclined to publish this as a tutorial, because I searched quite some time and didn’t find a solution … but first my question: is this really the easiest/best way to do this?

1 Like

This FAQ ( FAQ | openHAB ) also mentions RawType to be used. As there is also the class I would assume that the way to do it.

Example from this post ::

Chromecast_Audio1_Kitchen_Image.postUpdate("data:image/png;base64,iVBORw0KGgoAAA........AAElFTkSuQmCC")

( base64 encoded image is shortened ).
The first part ( data:image/png;base64 ) seems to be the mime type. After the comma you find the base64 encoded image.
As far as I can see this follows the HTML capabilties: How to Display Base64 Images in HTML.

Btw.it is not necessary to use external web services to base64 encode an image.
You can do this on linux command line with the base64 command.
python, javascript and other languages as well support encoding to and decoding of base64 ‘objects’.