[SOLVED] Add Image in a group

Setup, Configuration and Use Installation
1

Hey Guys,

i can not seem to be able to add a image into a group for my BasicUI.
In my example below i created a simple switch and this works fine, so this shows up in my “Testgroup”.
Makes me think i am doing something right.
Tho when i add the image line… then my Testgroup becomes empty in the BasicUI.
Now if i just add the image via the sitemap file… it shows the image, but i would like to have the image in this “Testgroup”.

Below my code:
Sitemap file:

     Frame label="Test"  
    {   
        Group item=Testgroup label="Testgroup"
    }

Items file:

Group Home "home" <huis>    
    Group Testgroup "Testgroup" (Home)  

    Switch Text "Text" <light> (Testgroup) 
    Image Imagetest "Imagetest" (Testgroup) url="https://i.imgur.com/ZR6TbmJ.jpg"

Hope it makes a little bit of sense :slight_smile:
Thx.

2

Look at your Switch Text item. See how you have < light > there? That is the light icon of course. So you need to do similar with a group item.

And take a look at the docs if you want to add your own custom images. You just need to create a svg or png file and place it in your icons folder.

3

Hey Paul,

thx for your reply.
I dont think i get you.
I do have a icon defined for my switch and not for my Testgroup in the items file.
I did just try to add some icons, but i dont think that is what you actually ment:

Sitemap:

     Frame label="Testgroup"  
    {   
        Group item=Testgroup label="Testgroup" icon=light
    }

Items:

    Switch Text "Text" <light> (Testgroup) 
    Image Imagetest "Imagetest" <light> (Testgroup) url="https://i.imgur.com/ZR6TbmJ.jpg"

If i then check the documentation i mainly see i am missing a binding in my code, but i dont have one either for my switch and that one works.

Still quite a noob here :slight_smile:

Further testing will be for tomorrow i am afraid, :frowning:

5

What happens if only the image is in testgroup?q

6

This is incorrect:

  Image Imagetest "Imagetest" <light> (Testgroup) url="https://i.imgur.com/ZR6TbmJ.jpg"

You are right you need a binding but the http binding only returns strings
You need a rule to call the executeCommandLine action
Your command will look like something like:
wget https://i.imgur.com/ZR6TbmJ.jpg /etc.openhab2/html/image.jpg

That will download the image into your openHAB html folder
You can then refer to the image locally

The Image items store the binary data of an image…
I have never used them nor have I seem example of them being used in the forum
Any reason wht you can use the sitemap definition?

7

Hey vzorglub,

Thx for your reply!

I believe you ment: “any reason i can not just use the sitemap file”? (unless i got u wrong)
Because thats what i initially tried.

And sorry i just noticed indeed my url from the website IMGUR was a wrong example, i edited this url before posting here without thinking to actually test this, my url works fine so i assumed the other URL would work aswell, but here is my correct code.

this shows a livestream working perfectly, this is what i want without any code in my items file, but the stream is just not in a group, which is my issue:

    Frame label="Testgroup"  
    {   
        Group item=Testgroup label="Testgroup" icon=light
        Image url="http://192.168.1.252/axis-cgi/mjpg/video.cgi"
    }

https://imgur.com/a/bTpIaDL

So it was my understanding to just add the group name behind my image (but then my sitemap does not load anymore:

    Frame label="Testgroup"  
    {   
        Group item=Testgroup label="Testgroup" icon=light
        Image url="http://192.168.1.252/axis-cgi/mjpg/video.cgi" (Testgroup)
    }

This is the reason i started testing via the items file

8

I’ll offer a workaround. Using Groups to control display in sitemaps is a bit of a bodge anyway, you’ll soon find you get frustrated with not being able to control display order, tweak or omit individual members, etc.
So don’t use Group, spell out what you want.

   Frame label="Testgroup"  
    {   
        Text label="Pretend group" icon=light {
             Image label="my Snapshot" url="http://192.168.1.252/axis-cgi/mjpg/video.cgi"
             Switch item=mySwitch 
             Switch item=herSwitch
        } 
    }
1 Like
9

Hey rossko57,

Thanks for your reply.
This works like a charm.

Still i try to understand what happend here.
For my other lights and shutters i have in my code a group item.
Your example uses a text label.
While writing this i just noticed u created a extra “container” (is this even called like this) compaired to my other code for lights for example, by using “{” behind the label and “}” behind the switch item, is this what does the trick maybe?

One thing with using it like this is that the stream in BasicUI via the website works great, but in the app it will not show a livestream.
Less important for me tho.

10

Yep, that is to give you a “clickable line” that pops out into more detail of several Items.
You have to do the extra work of describing those Items in the sitemap as well.
But that allows you to put them in the order you want, and allows effects like visibility and colour.
You don’t have that control when displaying a Group directly.

1 Like