cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

How to overlay indicator over the image

Participant

How to overlay indicator over the image

Hi all,

     I want to overlay the condition indicator over the floor plan image. I searched in the forum that if I want to overlay something on the image, I should put the panel first then put the image over the panel, then other widget can overlay on the image. I tried this. The problem is, 1) the image over the panel will show differently in different resolution screen. So I think the image over the panel may not be a good solution. 2) There is no indicator widget in the library. How can I manage to do this?

    Thanks!

     IWeChat Image_20170511102218.png

Tags (1)
8 REPLIES 8

Re: How to overlay indicator over the image

Hello,

you can place an Image widget in the panel. The image size can be fixed in this way. Then you can place other Image widgets as indicators on the image of the floor plan

Re: How to overlay indicator over the image

Hi,

It is not possible to overlay widget without panel in mashup.

For indicator use can use shape widget and set shape type as Circle. For different colour use can use state formatting based on Data.

You can increase Z-index for shape to overlay over plan floor image.

Regards,

Vel

Re: How to overlay indicator over the image

But I want to let image to suitable to different screen size:

If I choose to let image in the panel suit the 1024*768,

will like this:

1024×768.png

1280*1024 will like this:

1280×1024.png

1366*768 will like this:

1366×768.png

My concern is: if I place other image over this image in the panel, the image effect will be affected by the screen size.

Re: How to overlay indicator over the image

Thanks for your response. But how to let the panel be responsive in different screen size?

Re: How to overlay indicator over the image

Hi,

Try to use static mashup. In static mashup, set "master" background as Plan floor image and place indicator(Shape) over that.

Re: How to overlay indicator over the image

I'm not sure it's possible to make it all responsive.. The plan image can be responsive, but a second layout for indicators can't be.

Re: How to overlay indicator over the image

Yes. Thanks. I think this is the only way to do this. But currently we need responsive web design.

I should think about another way to demonstrate this.

Re: How to overlay indicator over the image

If only a few indicators change colors for your demonstration, you can prepare all combinations of image of plan + indicators (as one image), and change the image accordingly.