Lolly Point Hotspot

User avatar
Hopki
Gnome
Posts: 12999
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Lolly Point Hotspot

lolly_hotspot_v2.ggskc
(90.98 KiB) Downloaded 713 times

Download and double click to add to Pano2VR.

This hotspot's feature is the way the circle and node image scale showing more of the node image on hover or touch.
The tooltip is under the circle but on touch screens moves above it.

lolly.gif
lolly.gif (655.72 KiB) Viewed 11705 times

The container/mask uses CSS to add a border and radius.
If you would like to change the colour you need to look in the CSS of the container/mask

1.png
1.png (68.64 KiB) Viewed 13194 times

After this change the colour of the rectangle element, ht_stem to match.
The Tooltip colours can be changed in the text box properties.
Regards,
Attachments
lolly_point_hotspot.ggskc
(90.69 KiB) Downloaded 627 times
Garden Gnome 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
Hopki
Gnome
Posts: 12999
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

To add an inner shadow to the image.
Once the component is added to the skin select and copy the container ht_mask and paste it, it will now show at the top of the skins tree.
Delete the copy of the NodeImage so you just have the container ht_mask.
Rename the container to ht_mask_shadow and move it so in the skins tree it is a child of the ht_mask container but above the NodeImage.

1.png
1.png (36.96 KiB) Viewed 12409 times

Now go to the ht_node_shodow properties and remove the scaling Logic block as this is no longer needed then go to and the CSS Styles and change it to look like this:
.

Code: Select all

border-radius: 999px;
box-shadow: 0px 0px 8px #000000 inset;

Adjust the amount of shadow by changing the number 8 in the CSS you just added.
The lower the number the less shadow.


The Lolly Point Hotspot will now have an inner shadow.

2.png
2.png (331.8 KiB) Viewed 12409 times

You can also remove the ht_stem element and reposition the ht_mask so it's over the Hotspot Template, ht_node to make it look more like a normal Point Hotspot.
Regards,
Garden Gnome 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/
Danny
Posts: 19
Joined: Fri Nov 13, 2020 8:44 pm

Im trying to change the image within the hotspot to show a JPG different to the panorama that the viewer is taken to. I have tried uploading the JPG as a flat image within the tour and linking to that. WHen I have put the Ramsgate External as the Node Image nothing changes. Is it possible to change the thumbnail ?
Attachments
Screenshot 2021-01-28 at 10.25.20.png
Screenshot 2021-01-28 at 10.25.20.png (26.83 KiB) Viewed 11923 times
Danny
Posts: 19
Joined: Fri Nov 13, 2020 8:44 pm

The "Ramsgate External" is the flat jpg I want as the thumbnail image
User avatar
Hopki
Gnome
Posts: 12999
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
Only once you are happy with the tour and you will not regenerate it again you can go into the images folder, find the node image and replace the image of course keeping the same file name and type.
You may need to clear your browser cache or open it in a different browser to see the change.
This is the fastest way.

If you do need to regenerate the output make sure you have a copy of the new image you can drop into the images folder after.
Regards,
Garden Gnome 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/
Danny
Posts: 19
Joined: Fri Nov 13, 2020 8:44 pm

Nice and simple however I only want the thumbnail to change if coming from one direction but there are two places that link to this location and I don't want both to change..
User avatar
Hopki
Gnome
Posts: 12999
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

To check my understanding you want the thumb image to change depending on the direction?
Sorry, I am confused please can you explain further.
But regardless only one image can be shown.
Regards,
Garden Gnome 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/
Danny
Posts: 19
Joined: Fri Nov 13, 2020 8:44 pm

sorry for the confusion.

The node is of the entrance hallway of a building.
The entrance hallway panorama is linked from three places: 1/ Aerial 360 2/ Ground floor Flat 3/ Upstairs hallway

The client wants the thumbnail from the aerial lollypop's node to show the flat image of the outside of the building even though it takes you into the hall way.
The other 2 places (Ground floor flat and Upstairs hallway) would look strange if their thumbnails showed the outside of the building instead of the hallway as a thumbnail which is why we only want the lollypop thumbnail to be changed from the aerial 360 and not either of the other two locations

hope that makes sense
User avatar
Hopki
Gnome
Posts: 12999
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
Make a new point hotspot and replace the node image with your picture.
In the skin call it say ht_node_1
In the aerial pano, select the point hotspot then in the properties panel select ht_node_1.
This will only be used for this point hotspot.
Regards,
Garden Gnome 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/
stoffa.c
Posts: 10
Joined: Thu Feb 18, 2021 3:11 pm

Hi Martin,

I love this lolly for tour nodes, and have used it extensively.

I'm trying to do a similar thing with images, but not having much luck. Instead of the lolly having the tour node, I would like to have a lolly called say, "ht_image_lolly", where a preview of the image is in the lolly, when the user clicks on the lolly image, the image is displayed like a normal point hotspot.

Does that make sense?

Thanks!
Chuck
User avatar
Hopki
Gnome
Posts: 12999
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Chuck,
Please see the attached project.
To make this work you need to make your own 100 x 100px preview images.
Exampale.

preview_goat.jpg
preview_goat.jpg (3.98 KiB) Viewed 8996 times

Add them to the project file using assets as found under the HTML5 output's Advanced tab.

2.png
2.png (17.4 KiB) Viewed 8996 times

Then in the Point Hotspot's description text field add the file of the preview file name.

3.png
3.png (40.87 KiB) Viewed 8996 times
Regards,
Attachments
lolly_image_popup.zip
(1.6 MiB) Downloaded 284 times
Garden Gnome 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/
Idocio
Posts: 52
Joined: Wed Apr 15, 2020 9:26 pm

Very cool, Hopki.

Testing the example, I have noticed something strange.

While the image scaling effect occurs, an intermittent square border appears around the image. This disappears after the effect is finished.

It's funny, because it only happens in Chrome (version 95.0.4638.69) and Edge (version 95.0.1020.40), but not in Firefox, in Windows 10 (fully updated).
User avatar
Hopki
Gnome
Posts: 12999
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Thanks for the heads up, I’ll check it out.
Regards,
Garden Gnome 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/
stoffa.c
Posts: 10
Joined: Thu Feb 18, 2021 3:11 pm

Works great! I changed it up a little to differentiate between my lolly node hotspots and my image lolly hotspots. I removed the css code to create the circles, and expanded the rectangle to 150x100 pix to make it look a bit more like a photo. This also allowed me to use the actual image in the lolly vs creating a 100x100 thumb. I attached the skin.

Thanks again, Martin!

Chuck
precision-imagery.com
Attachments
lolly image.ggsk
(4.02 KiB) Downloaded 278 times
User avatar
Hopki
Gnome
Posts: 12999
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Chuck,
Cool, I like it when people have a play, it helps understand the skin editor.

If you use the full resolution popup image for the preview then you will force preloading the full resolution images on open.
This may not be a good idea if you have a few.

This was why I opted for making small 100 x 100px images for the preview.
Then only when the image point hotspot is clicked do you download the full resolution image.
So downloading only happens when the point hotspot is clicked vs downloading all images on open which could slow down the loading.
Regards,
Garden Gnome 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