[SOLVED] HABpanel template - images

marklavercombe · October 31, 2018, 10:19am

Hi,
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='//192.168.1.148:8081/static/images'"></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:
[myOHaddress]/static/images/N/A

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!

ysc · November 2, 2018, 10:58am

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)

marklavercombe · November 2, 2018, 11:08am

Thanks.

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?

ysc · November 2, 2018, 3:41pm

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).

github.com

openhab/org.openhab.ui.habpanel/blob/master/web/app/widgets/template/template.widget.js#L72...L74




scope.getItem = function(itemname) {
    if (!itemname) return "N/A";
    var item = OHService.getItem(itemname);
    if (!item) return "N/A";


    return item;
}


scope.itemState = function(itemname, ignoreTransform) {
    if (!itemname) return "N/A";
    var item = OHService.getItem(itemname);
    if (!item) return "N/A";


    var value = (item.transformedState && !ignoreTransform) ? item.transformedState : item.state;
    return value;
}
 
scope.itemValue = scope.itemState;


scope.itemsInGroup = function(group) {

marklavercombe · November 4, 2018, 9:06pm

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!

marklavercombe · November 8, 2018, 5:33am

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"
	when
	    Time cron "* * */1 * * ?"
	then
		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")
end

rule "Define images"
	when
	    Time cron "* * */1 * * ?"
	then
		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")
end

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

danielwalters86 · November 8, 2018, 8:38pm

@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.

marklavercombe · November 8, 2018, 9:20pm

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

danielwalters86 · November 8, 2018, 10:15pm

@marklavercombe

I made these changes to the config

Then made small tweaks to the code:

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!