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

Community Tip - Want the oppurtunity to discuss enhancements to PTC products? Join a working group! X

How to overlay indicator over the image

tguo
4-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

8 REPLIES 8
qngo
5-Regular Member
(To:tguo)

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

tguo
4-Participant
(To:qngo)

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.

qngo
5-Regular Member
(To:qngo)

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.

vr-6
4-Participant
(To:tguo)

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

tguo
4-Participant
(To:vr-6)

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

vr-6
4-Participant
(To:tguo)

Hi,

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

tguo
4-Participant
(To:vr-6)

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.

qngo
5-Regular Member
(To:tguo)

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.

Top Tags