Displaying an image item

Apps & Services HABPanel
1

I am trying to display the album art that is now available in the Onkyo binding for OH2. I configured an image item in PaperUI, and linked it to the correct channel. Under the control page in PaperUI, the image shows up and displays correctly. I can’t figure out, however, how to get it to dispaly in HABpanel.

I have output the value of the item, which shows just “raw type: 17464 bytes”. It doesn’t have the actual data or a URL in the item value. I tried using the dummy widget and linking it to the item, but that only displays the same text. I also looked at the image widget, but that wants a URL. Since I don’t have the actual data, I can’t seem to use an img tag and nothing else I have tried works. I looked at PaperUI using the developer tools, and I see the actual raw data, but I can’t seem to get that in HABpanel.

So my question is, is this possible in HABpanel? If so, how is it done?

Thanks

2

I added a second (advanced) channel that stores the image URL. Rather use it in all UIs that don’t yet support the image item.
Only Paper UI supports it now.

3

Unfortunately the PR that added support for album art for the Onkyo binding removed my code that provided the url which can be used in the other UI’s

I’ll make a PR shortly to add it again

4

OK I thought the subject was the Sonos binding

5

Great, thank you so much!

6

Not familiar with these Image items.
Browsing through Paper UI’s code, looks like it’s a Base64 encoding of the raw image.
HABPanel’s image widget doesn’t support it (yet) but I guess you could try reproducing what Paper UI does in a template:

<img ng-if="itemState(...) !== 'NULL' && itemState(...) !== 'UNDEF'"
     ng-src="{{'data:image/jpeg;base64,'+ itemState(...)}}">
7

It is merged, so once the new build is available, you can update your binding and the album artURL is available as string item.
You can use that in your sitemap to display the image in basic & classic UI (& possibly other UI’s except paper)

1 Like
8

Would this not assume that the raw image data is in JPEG format? Images retrieved via <img src="..."> can make use of the Content-Type HTTP header and if that header is not present, browsers (and Android) can still sniff out the type from the raw image data. I don’t know if explicitly setting the type for Base64-encoded image data to image/jpeg, and yet the image is actually a PNG or GIF, would still work. Maybe! :smile:

9

Probably not! According to https://en.wikipedia.org/wiki/Data_URI_scheme the media type is optional but I don’t know how a browser would react in an img tag if it isn’t specified - never tried :slight_smile:

10

Thanks for the fix. I have managed to get it to work using the suggestion from @ysc with the current snapshot. (The snapshot hasn’t updated since the 12th, so I am still waiting to test your changes)

I am able to see the image now, if the custom widget is running when the song changes. If I change to the page with the widget on it while a song is playing, instead of the data I just get “raw type: 17464 bytes” as the itemValue(). However, once the song changes, I get the full raw data, which I can use inside an img tag, and the art shows up :smile:

In case anyone else is trying to do this, this is the code I am using:

    <td ng-if="itemValue(config.albumArt)!='NULL' && itemValue(config.albumArt)!='raw type: 17464 bytes'" class="image-td"><img ng-src="data:image/jpeg;base64,{{itemValue(config.albumArt)}}" src="data:image/jpeg;base64,{{itemValue(config.albumArt)}}" aria-hidden="false"/></td></tr>
    <td ng-if="itemValue(config.albumArt)=='NULL'" class="image-td">-- IMAGE NOT AVAILABLE --</td>
    <td ng-if="itemValue(config.albumArt)=='raw type: 17464 bytes'" class="image-td">-- Loading Image --</td>

When it works, my widget now looks like this:

I will update this when a new snapshot is available and I can use the URL instead of the raw data.

Thanks again for the help

1 Like
11

Looks very cool! time for me also to start playing around with habpanel :smile:

The issue with raw type: 17464 bytes could very well be related to a bug in the firmware wrt to the headers. See also the comment here

This week a new version of the proxy code was merged, which would hopefully address the issue, Still need to test it. In case it is related to that (onkyo firmware) bug you would still see a broken image in e.g. basic UI & classic UI. (don’t know about habpanel, depends if it opens the URL direct).
If this new version of proxy does not fix it, we may include my ugly hack to fix it

12

I can confirm in habpanel the new URL code is working fine

<td ng-if="itemValue(config.albumArtUrl)!='NULL'"
      class="image-td"><a href="{{itemValue(config.albumArtUrl)}}"><img ng-src="{{itemValue(config.albumArtUrl)}}" aria-hidden="false"/> </a>
   </td>

13

Hey @ysc,

Paper UI and Basic UI by now nicely support Image items and they by now also include the media-type information.
I guess it should be very straight forward to support it in HABPanel as well, wdyt? (I was just led to this topic here through this discussion.)

14

@Kai yes it should be easy, very similar to the Paper UI implementation. I’ll use the thumbnail/fanart channels from https://github.com/openhab/openhab2-addons/pull/2304 once it’s merged to test it :wink:

15

@Signal11
I have tried also getting cover art to work in HabPanel using your code snippet.
I have not been able to get the dashboard to show the image.
When inspecting the source in the browser I can see that the actual image data was loaded into the source tag but it doesn’t show the image.
I originally used the same syntax as you: src="data:image/jpeg;base64,{{itemValue(config.albumArt)}}"
But then I got this string in the src property of the image element:

src="data:image/jpeg;base64,data:application/octet-stream;base64,XXXXXXXXXXXXXX…
Where XXXX… is the raw image data.
So it would seem that the Image item already has the media type description in its value.
So now the code for the widget looks like this:

<div style="margin:auto;padding:0px 0px 10px;">{{config.title}}</div>
<div>
  <div ng-if="itemValue(config.imageItem)!='NULL' && itemValue(config.imageItem)!='raw type: 17464 bytes'"><img style="height:50px;"heigh="50" width="50" ng-src="{{itemValue(config.imageItem)}}" src="{{itemValue(config.imageItem)}}" aria-hidden="false"/></div>
  <div ng-if="itemValue(config.imageItem)=='NULL'">-- IMAGE NOT AVAILABLE --</div>
  <div ng-if="itemValue(config.imageItem)=='raw type: 17464 bytes'">-- Loading Image --</div>
</div>

Any idea why I am not seeing an image?

Edit:
I figured out, that the angular framework seems to add an “unsafe:” before the src. When I remove this manually in the browser, it renders the image.
How can I change this behavior?

16

I own a Onkyo TX-NR616 and TX-NR636. For both Onkyo’s I get a “broken image” link in HABPanel for Album Art.

I tried the image item as well as the imageURL item with below code in HABPanel. No result. I don’t get images in PaperUI either. When I load the AlbumArtURL item in a dummy widget for getting the text-string, I get “UNDEF”.

Images are available in other apps (native on TV screen connected to the onkyo, or in iOS apps controlling the onkyo’s), but not in openHAB. Using openHAB 2.2 (on Synology or Windows 10)

I need some help. What goes wrong? Does anyone have been able to get Album Art on a TXNR616 or TXNR636 ?

<table>
  <tr>
	<td ng-if="itemValue(config.albumArtUrl)!='NULL'"
      class="rnp-image-td"><a href="{{itemValue(config.albumArtUrl)}}"><img ng-src="{{itemValue(config.albumArtUrl)}}" aria-hidden="false"/> </a>
   	</td>
  </tr>
  <tr>
    <td ng-if="config.showart == true && itemValue(config.albumArt)!='NULL' && itemValue(config.albumArt)!='raw type: 17464 bytes'" class="rnp-image-td"><img ng-src="data:image/jpeg;base64,{{itemValue(config.albumArt)}}" src="data:image/jpeg;base64,{{itemValue(config.albumArt)}}" aria-hidden="false"/></td>
    <td ng-if="config.showart == true && itemValue(config.albumArt)=='NULL'" class="rnp-image-td">-- IMAGE NOT AVAILABLE --</td>
    <td ng-if="config.showart == true && itemValue(config.albumArt)=='raw type: 17464 bytes'" class="rnp-image-td">-- Loading Image --</td>
  </tr>
</table>