[SOLVED] HABpanel template - images

I Am creating a template which hosts a static image as well as some OH items.
The items are displaying correctly, but I cannot get the image url to load…

<div ng-init="ServerPath='//'"></div>
<td ng-if="itemValue(config.image)!='NULL'"><img src="{{ServerPath}}/{{itemValue(config.image)}}" width="100%" height="100%"></img></td>

from settings in json

            "type": "item",
            "id": "image",
            "label": "Image",
            "description": " "

the browser tries to render:

It appears that the {{itemValue(config.image)}} is not pulling the string I set within the config for the template and is returning N/A instead.

I’ve tried various combinations including putting the mediatype in as seen in other examples. I always just get N/A as the uri.

Any hints? Thanks in advance!

Have you tried ng-src (https://code.angularjs.org/1.5.11/docs/api/ng/directive/ngSrc) instead?

Also if the static files are on the same server you don’t need the full URL with the IP address, just use /static/images/... (note the leading slash)

1 Like


I tried

<img ng-src="/static/images/{{itemState(config.image)"}} />

I also tried itemValue. Both return ‘N/A’.


Edit -
I have a feeling the problem might be in the config definition.

            "type": "item",
            "id": "image",
            "label": "Image Name",
            "default": "rose.jpg"

Does that seem right @ysc? Do I have to cast the value of config.item in some way?

itemState(itemname) (formerly itemValue) returns “N/A” either when the item name is null or invalid, or when no item was found with that name, so you should check for those - maybe the name of the item you configure is to blame, like you didn’t specify any in your config or it has invalid characters, but if it’s not, then I’m out of ideas.

Edit: the default value you specified (rose.jpg) is invalid, item configs hold the name of the item (as a string).

Thanks Yannick! @ysc

It was the config definition that was the problem. Once I defined an OH item with the url of the image it resolves perfectly.

Thanks for your help!


Here are the relevant files in case anyone wants them:

miflora.widget.json (3.8 KB)

I found that I needed to use rules to insert the strings for the widget title and image:

rule "Define names"
	    Time cron "* * */1 * * ?"
		postUpdate(PlantApricotName, "Apricot")
		postUpdate(PlantAvocadoName, "Avocado")
		postUpdate(PlantGardeniaName, "Gardenia")
		postUpdate(PlantLemonName, "Lemon")
		postUpdate(PlantMiniatureAppleName, "Apple")
		postUpdate(PlantMiniaturePeachName, "Peach")
		postUpdate(PlantMiniaturePearName, "Pear")
		postUpdate(PlantOrangeName, "Orange")
		postUpdate(PlantParsleyName, "Parsley")
		postUpdate(PlantRoseName, "Rose")
		postUpdate(FG_Name, "Front Garden")
		postUpdate(BG_Name, "Back Garden")

rule "Define images"
	    Time cron "* * */1 * * ?"
		postUpdate(PlantApricotImage, "apricot.png")
		postUpdate(PlantAvocadoImage, "avocado.png")
		postUpdate(PlantGardeniaImage, "flower.png")
		postUpdate(PlantLemonImage, "lemon.png")
		postUpdate(PlantMiniatureAppleImage, "apple.png")
		postUpdate(PlantMiniaturePeachImage, "peach.png")
		postUpdate(PlantMiniaturePearImage, "pear.png")
		postUpdate(PlantOrangeImage, "orange.png")
		postUpdate(PlantParsleyImage, "herb.png")
		postUpdate(PlantRoseImage, "rose.png")
		postUpdate(FG_Image, "FG.png")
		postUpdate(BG_Image, "BG.png")

Once I had the right strings in the rules, I could use them to show the image by setting that item in config.

Hope this is useful to others. Mark

@marklavercombe - you probably don’t want/need to use items and a rule in order to configure your widgets titles and icon filenames of your widgets. I imagine you can replace the config items in your widget with two text configs (one for title, one for filename of the image) which would allow you to get rid of the rules as reduce the amount of items in your system.

Thanks @danielwalters86.
I tried that but kept getting N/A instead of the string for the image file and it wouldn’t show.
Can you show me how that might work because I’d love to simplify things!
Cheers :slight_smile:


  1. I made these changes to the config

  1. Then made small tweaks to the code:

  1. It will then pull the value you set in the string config items through to your code so that it displays the title and image icon

Hope that helps!