Displaying Raw Image in Habpanel

Apps & Services HABPanel
, ,
1

Hi there,
I am trying to get HABPanel to display a raw image item (cover channel from squeezebox binding)
I created a custom widget but the image is not being displayed.
After investigating, I found out, that an “unsafe:” string is added before the URL.
Googling for this leads me to answers that suggest manupulations to the DomSanitizer.
But I have no idea how to do that in one of those custom widgets.
My attempts to just open a item and adding the functionality there have not been successful.
Any help?

2

If you have an Image item, the built-in Image widget has support for it.

image

The trick to include one in a custom widget is documented here:

In your case that would be something like:

<div ng-init="imagemodel = { 'image_source': 'item-image', 'item': 'TestImage' }">
   <widget-image ng-model="imagemodel"></widget-image>
</div>

You might need some additional CSS to display it the way you want it.

2 Likes
3

Hi Yannick!
Thank you very much for your answer.
It turns out that this feature was not present in openhab 2.1 so I had to do a very painful migration but now the feature is present in HabPanel.
I can now select an image item.
BUT: Sadly it does not work.
The same image item works in the sitemap but not in habpanel.
I have simply selected the image item in the configuration but the resulting html still has the “unsafe:” tag in front of the actual data.
This is very depressing.
What am I doing wrong?

4

I also have that problem (Squeezebox Cover item with image widget). Maybe there’s something wrong with the Squeezebox binding?

5

There was a recent PR to fix the cover art. Unless you are on a recent snapshot, it may not work for you.

6

@mhilbush I installed 2.2 snapshot last night, and it doesn’t work.

7

@baeron52
It would surprise me, if this were a bug in the sqzeezebox plugin.
From what I have recently learned, I think the problem is that the Angularjs safety mechanism that prevents XSS attacks is blocking the image content. And the reason it is doing this (and this is a wild, speculative guess on my side) is, that the content type of the image is not whitelisted in the imgSrcSanitizationWhitelist for the compileProvider.
And the reason it is not whitelistet might be, that the content type for the image from the squeezebox binding is “application:octet-stream” and not some image type.
So perhaps this type was not whitelisted in the HabPanel configuration.

But again: wild guesses.
@ysc what do you think?

8

That’s probably your problem right there.

I tried updating an Image item manually with the openHAB console like this:

openhab> smarthome:update TestImage "data:image/jpeg;base64,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"

(note that has an image/jpeg media type)

openhab> smarthome:status TestImage
raw type (image/jpeg): 8641 bytes

The HABPanel widget displays the image without problems.

If I try again with an application/octet-stream media type, it adds the unsafe: prefix indeed. I also have a ‘Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME’ error in the Console. Which is to be expected I think – data URIs should always have their actual media types properly set (even if the browser might be able to figure it out by looking at the content). This looks like a problem with the binding.

1 Like
9

@ysc thanks for confirming. I will open an issue for the binding.

10

I think this might be a problem with the Squeezebox Server (i.e. Logitech Media Server). The coverart image is served directly by the LMS web server, not by the binding.

11

Right, but the data is downloaded by the binding and exposed in a channel as a RawType.

This might be the culprit:

There is a constructor for RawType allowing to specify a mime type, if not it’ll fallback to application/octet-stream:

12

Digging further on this, the HttpUtil class has downloadImage methods to retrieve an image directly wrapped in a RawType with the proper mime type by using some heuristics to guess it (if I understood correctly).
The binding should use that instead of downloadData and constructing a RawType itself.

2 Likes
13

Does it mean that this is an issue with the binding only? Is there any plan to fix it? Cheers.