Flat Rotating Hotspot

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

Hi,
This was a solution for a customer request for a flat rotating hotspot.
A working project is attached below.

example.gif
example.gif (2.75 MiB) Viewed 6491 times

It uses CSS and a graphic made in Photoshop but can be any graphic you want to use.

How it was built.
Starting with a new skin add a Hotspot Template

1.png
1.png (57 KiB) Viewed 6491 times

Then give it the ID ht_node so it will be used by the Hotspot Type Node.
Then make your image a child of the Hotspot, I am using the ID ht_image

2.png
2.png (24.5 KiB) Viewed 6491 times

Give the Hotspot Template the action to open the next panorama

2_1.png
2_1.png (37.95 KiB) Viewed 6491 times

Then you need to set the Modifier so it scales with FoV (zoom)

2_2.png
2_2.png (40.48 KiB) Viewed 6491 times

Set the images Anchor to centre and set position to X/Y to 0/0px so it is now on top of the Hotspot Template in the Skin Canvas.

3.png
3.png (48.55 KiB) Viewed 6491 times

A Text Box has also been added for a tooltip but this is optional.
The text box is using the placeholder $(hs) so it displays the Hotspot Title and has a visible logic block so it shows when the Mouse is Over Parent.


To make the image rotate you need to copy and paste this code into the Skins Embedded Stylesheet.

Code: Select all

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

So it looks like this:

4.png
4.png (38.55 KiB) Viewed 6491 times

Now select the image ht_image in the skin and select CSS Styles Inner Element and add:

Code: Select all

animation: rotation 2s infinite linear;
5.png
5.png (22.18 KiB) Viewed 6491 times

You can adjust the speed, it is how long it takes to rotate once so the larger the number the slower it will rotate.


To make it look flat on the floor the X-axis of the image needs to be changed.
To do this select CSS Styles in the image's properties and add the code:

Code: Select all

transform: rotateX(255deg);
6.png
6.png (21.38 KiB) Viewed 6490 times

Again you can change the setting to make it look flat depending on the height you set your Hotspots.


There is now a new version for Pano2VR 7.

Regards,
Attachments
FlatRotatingHotspot_V7.zip
(3.63 MiB) Downloaded 124 times
FlatRotatingHotspot.zip
(3.63 MiB) Downloaded 412 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/
miskokral
Posts: 1
Joined: Mon Oct 11, 2021 8:14 pm

I tried this sample however the shape does not follow the movement of the camera in terms of its shape. It is rather elliptical than a circle when the hotspot is under or very close to the camera.
Could we have a hotspot glued to the ground and the shape will act like the floating cursor you have created before?
To be clear I would like to have the Matterport Hotspot effect on my tours.
Attachments
Screenshot_1.jpg
Screenshot_1.jpg (299.83 KiB) Viewed 3927 times
User avatar
Hopki
Gnome
Posts: 12999
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi miskokral,
Have you seen this webinar?
https://ggnome.com/gg_webinars/3d-floating-cursor/
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/
MPW
Posts: 121
Joined: Wed Mar 06, 2013 4:22 pm
Location: Germany

Hi,
I like this hotspot and maybe it can solve my problem, too.

Is it possible to get a north-oriented rotation instead of the continously 360 rotation?

The reason for this:

I´ve a dotted line on the floor, being a hotspot and leading to the next pano.
I could use the tilt css for my svg, to get the optical impression of being painted on the ground. When moving the pano, the line has to keep the orientation to the pano, to show the right direction.
However any modifier (rotation to the svg or the hs) did not work. Probably it must be a css code for the inner style, too.
Which painfully reminds me of my lack of knowledge about css :(

Thanks for any help.
Post Reply