Center pano on clicked image hotspot

Q&A about the latest versions
Post Reply
MSchneiter
Posts: 38
Joined: Thu May 10, 2018 5:06 pm

Hi,

I'm testing the very nice image popup with title and description (viewtopic.php?f=6&t=12816), and I'm wondering if there might be some setting/trick to center the current panorama on the clicked hotspot (ht_image), before displaying the image popup ?
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,

I'm sure there are a number of ways to create the actions you want and I bet Hopki has a cool solution. In the meantime here's one that I came up with. (Note: built in Version 6 beta 2)

You can view the working concept here: https://s3-ap-southeast-2.amazonaws.com ... index.html

And download the skin here: https://s3-ap-southeast-2.amazonaws.com ... rpano.ggsk

Basically what I've done is create the following skin elements:

1. Position a hotspot at a pan position of 30˚on the panorama and given it a Skin-ID of "30degrees"
2. Created a new skin
3. Added a Hotspot and named it 30degrees
4. Added a Text box, with the text "Center Hotspot" and styled it with some inline CSS
5. Made the Text box a child of the Hotspot
6. Added a Rectangle and named it Popup
7. Added a Text box with the text "x" and styled it with some inline CSS
8. Added a Text box with the text "Click to close the popup" and styled it with some inline CSS
9. Created a container, put the elements from #6 - #8 into it and named it Popup_cont
9. Added a Rectangle and named it Hotspot_bg, colored it black, set the opacity to 125 and moved it to the bottom of the tree


Image


Then I've added some actions etc:

a. First off I set a number variable of 0 that I could change to 1 when the hotspot was Mouse Clicked.

b. Then I made the Popup container invisible and set a Visible: Logic Block that would make the container, and it's contents, visible when the panorama Pan was 30˚ and the hotspot variable was 1.

c. Then I added some Actions to the Hotspot that moved the panoramas to a set position when the Hotspot was Mouse Clicked and set the hotspot variable to 1.

d. Inside the container the Popup rectangle and "X" text have Mouse Click actions that sets the variable value back to 0

e. And finally the Hotspot backgound is made invisible and has the same Visible: Logic Block as the Popup Container

So when you click on the Hotspot, it set the pan location to 30˚ which moves it to the center of the screen. At the same time it set the variable to 1. When the panorama gets to 30˚ the logic block in the Popup Container and Black background and the two objects are made visible.

Clicking to close them, resets the variable thereby hiding them and leaving the hotspot still in the center of the screen.

Try out the skin and let me know how it goes.

cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Guys,
Attached is a V6 project that is utilising the new place holders 8)
Please see the example: LINK
What this allows is the hotspot records the current position of the pano on click and stores it as three separate variables.
pano_pan, pano_tilt and pano_fov.

Then on popup close there is an action to move to view that uses $(*pano_pan)/$(*pano_tilt)/$(*pano_fov).
The end result is on close the pano returns to the exact position before you click the hotspot :D

How this works is a move to view action has three separate entry fields, one for pan, title and lastly for FoV.
But if you select Expert Mode you would enter this as "Pan/Tilt/FoV" in one entry field, example 0/0/70 (0 pan, 0 tilt and 70 FoV).

Also know that the place holder $(ap) will pick up the "angle pan" of the panorama and same for $(at) for tilt and $(af) for FoV.

So on click of the hotspot using the change variable action your writing the panoramas position to the variables.
Then when you click to close the popup it then can use the variables as the data for the move to view action.
Regards,
Hopki
Attachments
PTF.zip
(155.45 KiB) Downloaded 268 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/
mbb
Posts: 276
Joined: Mon Oct 19, 2009 11:42 pm

What about something akin to "look to hotspot", ie: if a user clicks a hotspot that the view is centered on that hotspot before switching nodes (and for node change to wait for that to happen)? Is this possible?
MSchneiter
Posts: 38
Joined: Thu May 10, 2018 5:06 pm

@Tony @Hopki Many thanks for your replies and example! we're getting close!

Both solutions are good, but I have several image hotspot and I want to center the panorama on the exact hotspot I click on.
What I see in both solution is that it gets centered on some fixed values when clicking on the hotspot, not necessarily the position of the hotspot clicked... (hopefully I'm not wrong?)

Are there any variable which store the pan/tilt values of the hotspot clicked ? something like $(hp)/$(ht) ?? on click on the hotspot, this would allow a hotspot.mouse clic event->view->movetoView-> $(hp)/$(ht)/70, which would seem to be centering the pano on the clicked hotspot...

@hopki, I'll definitely use your code which save the panorama initial position and get back to this position once the popup is closed. Very nice and tidy.
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,
What I see in both solution is that it gets centered on some fixed values when clicking on the hotspot, not necessarily the position of the hotspot clicked
Yes it does use fixed values but they are the values of the exact position of the hotspot. You can set these values in the Properties window and then use them in the Action.


Image

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
mbb
Posts: 276
Joined: Mon Oct 19, 2009 11:42 pm

Doesn't help if you have multiple hotspots using the same template however. Sure would be nice to use a $var. Was actually surprised to not see these values already available for such use. Or perhaps some sort of hotspot template setting/checkbox for "Look to Hotspot" (when clicked)?
User avatar
Tony
Posts: 1341
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi,
Doesn't help if you have multiple hotspots using the same template however.
You can certainly use multiple hotspots with the same template. I've uploaded an updated project that has two hotspots, the first is at 30/0/70 the second is at -60/0/70.

https://s3-ap-southeast-2.amazonaws.com ... index.html

When you click either one it centers the hotspot and shows a single template with the name of the hotspot clicked.

Here is a snapshot of the skin, as you can see there are two hotspots only one template. In the logic block different content is shown based upon the hotspot_selected value ie 1 or 2 (in this case)

Image

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Guys,
You can enter the individual Pan/Tilt/FoV values in each hotspots description text field.
So to mod my project you would copy the view data to the Hotspots description text box: -0.32/-9.04/70
Then in the skin change the move to view action found under the Hotspot Template and add a place holder to read the description text field:

Screen Shot 2018-05-15 at 22.55.20.png
Screen Shot 2018-05-15 at 22.55.20.png (51.86 KiB) Viewed 6326 times

Note: You have to select Expert Mode to be able to enter the place holder.
So every hotspot can have its own move to view data.
Just use the viewing parameters to get the required Pan/Tilt/FoV for each hotspot.
The project returns the pano to its original location before you clicked the hotspot, this is thanks to the new place holders 8)
Cheers,
Hopki
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/
mbb
Posts: 276
Joined: Mon Oct 19, 2009 11:42 pm

yes, these options can work, but it's really more of a work-around that can get troublesome to maintain under many circumstances.

Tony's solution isn't all that convenient when you have a tour with a hundred hotspots or more and you wish to have a "Look to" sort of default behavior whenever someone clicks on a hotspot (eg: a tour with 40 nodes etc). Also one would have to keep updating those values whenever adjusting, moving, or deleting a hospot.

Hopki's method is good in that at least you are already on the same panel when working with a hotpot in order copy the values to the Description field. But in the cases where one is already using the Description field for a proper Description, then what? And if one needs access to the pan/tilt/fov values separately?

I think the addition of new $placeholders for a hotspot's tilt and pan values would really help. They would need to be separate values since one may want to "Look to" only the pan coordinate, keeping the tilt the same (eg: when hotspots are placed lower, like if using "google map" type navigation arrows).
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
Yeah, thought about this last night after the post, a better way would be to use the Hotspot Target text field rather then the description text field, then change the place holder to $(ht) in the Hotspot template.
Problem solved.

If you want to see values in real time add a temporary text box to the skin with place holders: $(ap) / $(at) / $(af).
Publish out the project then the text box will show the pan, tilt and FoV values, you can then open the hotspot properties and add the data, very fast, no fuss.
Regards,
Hopki
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/
mbb
Posts: 276
Joined: Mon Oct 19, 2009 11:42 pm

Target text field? Do you mean the Hotspot "Target" sometimes popup menu, sometimes text field that already has a value in it that it needs for going to the next node?

Providing placeholders to access these two separate values would do the trick I think-
Capture.JPG
Capture.JPG (27.88 KiB) Viewed 6304 times
User avatar
Hopki
Gnome
Posts: 13005
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
The original post was to open a popup image so using the Target would be the solution allowing title and description text fields free for any information that may be displayed with the popup image.
This can be achieved now and is a good solution to the problem.

If you want to centre the hotspot before changing nodes, why not just use a transition then use, zoom in before.
MSchneiter already suggested using the hotspots pan and tilt, however Im not sure this is a good solution as it can not include zoom.

Regards,
Hopki
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/
mbb
Posts: 276
Joined: Mon Oct 19, 2009 11:42 pm

Hopki wrote: Wed May 16, 2018 2:48 pm
If you want to centre the hotspot before changing nodes, why not just use a transition then use, zoom in before.
MSchneiter already suggested using the hotspots pan and tilt, however Im not sure this is a good solution as it can not include zoom.

Regards,
Hopki
Couple problems with that,

1. Someone may not want zoom.
2. If hotspots are on the ground (ie: Google type floor arrows) for example, then a "Zoom in" will be zooming into the ground no? Which would look odd and not be consistent with what forward travel to the next node would look like.

Here's a tour that uses a "look to hotspot" so you can see what I am talking about. The "look to" can often help smooth the visual alignment between two nodes:

https://www.bohonus.com/hosted/azcm_x/

Note that in the above linked tour, the "Look to" also effects the tilt, which it shouldn't, but is a limitation of the PanotourPro software used to create it. Can work in some cases but not others. Hence why I suggested that the values be made available separately.
MSchneiter
Posts: 38
Joined: Thu May 10, 2018 5:06 pm

Thanks to all for this very productive conversation.

@Tony, your solution works, but that means creating a skin hotspot template for each pano hotspot, which is possible, but as MBB says not very convenient if you have billions of hotspots in your panos. Plus it could make the skin bigger and heavier to load on first use.

@Hopki, as always it seems, you have come up with a good working solution. I have tested placing the pan/tilt/zoom in the target field, used it into my skin, and it does the job pretty well. I've combined this with the move to the initial hotspot position when releasing the popup, and that is exactly what I need :D

However, I will second MBB by wishing to have some new placeholders created in Pano2vr, if at all possible, for hotspots pan & tilt parameters. That would really make things more straightfoward, and prevent errors when moving hotspots around...

Thanks to all!
Post Reply