Need a image overlay style

[srathoud]

Hi,

In my experience I want add an image in the background and want to overlay buttons at various locations.

please suggest, any code solution is highly appreciated

Thanks and Regards,

Sameer Singh Rathoud

[katte]

Based on your usecase, you can add image as "3D image" and 2D background image.

You can use 3DImage widget and upload the corresponding image as a resource. For 2D overlay, as the 2d canvas is placed overlaying on 3D canvas so any resource added to 2d canvas will sit on top of 3D resources. So, technically you need to make sure you are not holding back the 3D elements.

I tried adding background image using css styling - Defined a class property to '2D Body' (under Home view -> 2D overlay) as 'bckImage' and added the below css styles under project Styles:

.bckImage{

  background-image: url("image.jpg");

  opacity: 0.3;

}

Not sure if this helps, but I'll look forward for further thoughts!

-Giri

[srathoud]

Hi Giri,

Thanks a lot for your response.

The business problem is I am having a floor map (as a image) and when user click somewhere on the image it should zoom up to some particular zone of floor map. and with that user can have different sets of options to perform. user can see some models in AR or fetch information etc.

as the solution of above mentioned problem I wanted to first display entire floor map and will create some buttons (transparent buttons without any text on it) on the top of the image, when user clicks on the image actually some button will get clicked and then I will hide the entire floor map and load a new image of the zone of floor map, where I will be recreating different options or loading different models.

If I am using the 3D Image option I wont be able to link the 2D buttons with specific zone of the floor map (displayed in 3D image), because the 3D image can keep on moving as user move.

Please help

Regards,

Sameer Singh Rathoud

[lliangjb]

Sameer Singh Rathoud

     Is your problem solved? I also have a similar needs, can you share your results?

[srathoud]

Hi,

Sorry for late response.

I dont have any luck yet.

I am not sure about your use case, but you can try the solution suggested by Giri.

[eirias]

Hi Sameer Rathoud​and all! As @giri said, you can use a CSS style.

I recommend you to use the background on a Grid Layout instead of use it in the View class. In my case it didn't work in that way for unknown reasons, so I tried using Grid Layout and it worked perfectly.

I used in my Styles (Application):

.bckImage{

  background-image: url(#{$resources}/Uploaded/home2.jpg);

  background-position: center;

  opacity: 0.8;

}

Later, I put bckImage as my Grid Layout class.

PD: home2.jpg is a resource uploaded to my project, but you can use a url instead.

Regards,

Erick