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: 10165
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 2781 times

When added the images will appear in the Assets list.

2.png
2.png (13.09 KiB) Viewed 2781 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 2781 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 2781 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 2781 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 2781 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 77 times
Hopki
Garden Gnome Software Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
User avatar
George Palov
Posts: 59
Joined: Mon Jun 13, 2011 11:18 pm
Location: Sofia, Bulgaria
Contact:

Sun Apr 26, 2020 3:36 pm

Hi Martin,
First thanks for the skin!
I am trying to build one for virtual tou of art galleries, where each photo/painting is with polygon hotspot with tooltip of the name and author. I have some issues with the skin and cannot still figure it out. On desktop when you click the cat or the dog HS, the hotspot image title is still staying where it is until you move the mouse after the popup. Maybe it should be hidden upon mouse click and popup. On mobile on the other hand, the hs title goes to the upper left part of the screen and is even cropped, and goes away when you click somewhere after the popup has appeared.
I would appreciate some insights how to fix this, thank you in advice!
Best, G
User avatar
Hopki
Gnome
Posts: 10165
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Sun Apr 26, 2020 11:33 pm

Hi George,
Please see the attached project.
There is a floating tooltip that has modifiers so it follows the mouse.
In the container Open Image Popup, there is also a hide action for the tooltip on click.
Regards,
Attachments
Archive.zip
(1.48 MiB) Downloaded 19 times
Hopki
Garden Gnome Software Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Post Reply