Lolly Point Hotspot

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

Wed Nov 04, 2020 12:34 pm

Lolly Point Hotspot

lolly_point_hotspot.ggskc
(90.69 KiB) Downloaded 315 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 4253 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 5742 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,
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: 11939
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Sun Nov 29, 2020 10:22 pm

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 4957 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 4957 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

Thu Jan 28, 2021 11:28 am

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 4471 times
Danny
Posts: 19
Joined: Fri Nov 13, 2020 8:44 pm

Thu Jan 28, 2021 11:28 am

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

Thu Jan 28, 2021 12:12 pm

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

Thu Jan 28, 2021 2:47 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: 11939
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Thu Jan 28, 2021 3:07 pm

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

Thu Jan 28, 2021 3:57 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: 11939
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Thu Jan 28, 2021 4:33 pm

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: 9
Joined: Thu Feb 18, 2021 3:11 pm

Sat Oct 30, 2021 4:31 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: 11939
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Sat Oct 30, 2021 10:29 pm

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 1541 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 1541 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 1541 times
Regards,
Attachments
lolly_image_popup.zip
(1.6 MiB) Downloaded 68 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: 36
Joined: Wed Apr 15, 2020 9:26 pm

Sun Oct 31, 2021 1:32 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: 11939
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Sun Oct 31, 2021 2:42 pm

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: 9
Joined: Thu Feb 18, 2021 3:11 pm

Sun Oct 31, 2021 3:20 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 46 times
User avatar
Hopki
Gnome
Posts: 11939
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Sun Oct 31, 2021 3:31 pm

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