4 Replies Latest reply on Mar 22, 2017 6:01 AM by srathoud RSS
    srathoud Explorer

    Need a image overlay style

    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

      • Re: Need a image overlay style
        giri Communicator

        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

          • Re: Need a image overlay style
            srathoud Explorer

            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