How to use the Image Popup component with Polygon Hotspots

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
Hopki
Gnome
Posts: 9924
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Wed Mar 04, 2020 10:41 pm

Please see this Example.

The first step is to add the image to the project.
This is done by using the "Assets" as found under the Advanced tab of the HTML5 output. Click the + button and select Add Files or Folders. In this example Add Files.

1.png
1.png (22.74 KiB) Viewed 1768 times

When added the images will appear in the Assets list.

2.png
2.png (13.09 KiB) Viewed 1768 times

The file path to these images will be assets/ then the file name.
So in this example

Code: Select all

assets/dog.jpg
and

Code: Select all

assets/cat.jpg
You can add a folder full of images then the path will be, for example,

Code: Select all

assets/folder/image.jpg
Add the polygons hotspot to your panoramas.

Change the Polygon Hotspots ID, I am using "IP" (Image Popup) but can be anything.
The ID will be used later in the skin.
Leave type set to URL.
Then set a Title if you want to see a tooltip, example "The Dog".

In the description text field enter the path to the image: assets/dog.jpg

3.png
3.png (18.54 KiB) Viewed 1768 times


Open the skin editor and add a container, I am using the ID "Open Image Popup" but it can be any ID you wish.

Now add the Image Popup component from the components toolbox.

Select the Point Hotspot Template "ht_image" and copy its actions:

4.png
4.png (44.19 KiB) Viewed 1768 times

Now paste them into the container, "Open Image Popup".
Open the Mose Click Set Value action (1) and change the placeholder to $(hd), (2).

5.png
5.png (96.08 KiB) Viewed 1768 times

This placeholder looks at the path in the Polygon Hotspots Description text field.
Finally set up the Hotspot Proxy ID in the container, so under the Advanced tab enter the Polygon Hotspot ID which is "IP".

6.png
6.png (20.93 KiB) Viewed 1768 times

Any Polygone that will be used to open an Image Popup will need this ID.
This makes the connection between the Polygon Hotspots and the container.
When you click the Polygon Hotspot the actions in the container "Open Image Popup" will be actioned.
Regards,
Hopki
Attachments
PolygonImagePopup.zip
(1.48 MiB) Downloaded 39 times
Post Reply