Pinned Hotspot Project

[Hopki]

Hi,
Been requested a few times now for the project files for the pinned hotspots example.

pinned_hotspots.swf

(1.05 MiB) Downloaded 9515 times

So here they are:

flash example 01.zip

(4.19 MiB) Downloaded 4638 times

Regards,
Hopki

[360Texas]

Thanks Hopki

[Shytsko]

Thank you! Interesting solution and beautiful watch.

[jare]

Hopki, thank you for this, but couldn't you prepare more comlete tutorial, where the entire process is explained? I tried to make panorama with opened/closed door hotspot. I can't to align the images properly. Are there some rules for pathes preparing, hotspot and hs image anchoring? In your example all is simple and easy to understand, but what to do with large hotspots which are not in the center of panorama?

[jare]

Hi Gnomes,

let me ask again, can you put together a step-by-step tutorial of how to pin and align distorted hotspots, especially the large ones?
Here is a great totorial about pinned video, thanks fot it. I'm sure all we users would welcome something similar about the pinned hotspots.

[Hopki]

Hi Jare,
When this first came out it only really worked in Flash. The good news is this now works in HTML5.
The problem is there is no good way of lining up the pinned images on the hotspot in the skin. It was a bit of trail and error until it was correct.
How I did it was add the images to the hotspot template and centre them as bast I could. Then in the hotspot editor add the hotspot again in the centre of the area. I then used the Hotspot List to make fine adjustments until the pinned hotspot overlaid correctly.

This needs to be better so I have added this to the agenda for our next meeting.
Regards,
Hopki

[JimWatters]

Jare,

If you extracted the image using the patch tool you can use the those values to insert the image back.
See the tutorial of aligning a video into a pano.
http://ggnome.com/wiki/Pin_and_Align_Vi ... Pano2VR%29

A patch is always square so if you need to crop make sure you do it symmetrically with the same amount off the top and bottom. Or the same amount off the left and right. Then the patch values should work on the Hot Spot.

[jare]

Hi Jim,

thanks for your valuable advices, works perfectly when use the patch tool to extract. There's still something to learn in pano2VR
Pity there is no information about work with pinned hotspots in the software documentation, let me share my workflow:

1) We need two aligned panoramas (closed (#1) and opened (#2) state)
2) Open panorama #2 in pano2vr, extract as many patches as you need. Remember the pan/tilt settings for each patch or (what is better) check "Add position to file name" in the settings
3) If transparency is needed, mask the images in PS and save as png
4) When needed, crop the patches in PS keeping this rule (A patch is always square so if you need to crop make sure you do it symmetrically with the same amount off the top and bottom. Or the same amount off the left and right.)
5) Open panorama #1 in pano2vr, go to the hotspot editor and add your hotspots by hand, each of them with his own Skin-ID
6) Go to the hotspot list, add a pan/tilt values for each hotspot. Use settings from the patch tool
7) Go to Skin Editor, add a hotspot template and center it. This is easy to do by reducing the canvas size to 20*20 pixels or so. Anchor has to be centre. Enable 3D distortion for hotspot template.
Add a patch image to the skin template as a child element. Change the canvas to be the same size as the patch image, then set the hotspot image position to 0/0
9) In the hotspot template, set 3D distance to let's say 1000 pixels. Export panorama and check the hotspot. It can be smaller or bigger than we need so we need to adjust the 3D distance again and again until the hotspot is aligned with a pixel accuracy. Sometimes also helps to shift the x/y coordinates by 1 pixel
10) The 3D distance is now the same for all hotspots. Copy the hotspot template, change it's ID to the next and repeat step 8

Not so hard so do, it took me about 90 minutes to extract, crop, edit, add and perfectly align 6 distorted hotspots for 12000*6000px pano. Next time I could do it even faster.
The result of my work you can see here http://3dpano.pindora.com/public/panamera/panamera.html

[JimWatters]

Looks good. Glad you figured it out.

4) crop symmetrically can be easily done in Photoshop by using the Modifier keys Shift & Alt when cropping.
The image does not need to be square anymore. It can be rectangular.

I used this method to get the Hot Spot in the right location in the skin editor:

• HotSpot Template with children contain and children images
• Set the hotspot template as Anchored to center and Position to 1/2 the height and width of the container
• Set the container and images as anchored to top left position 0,0
• Once values are entered correctly the entire tree can be selected and moved in the skin editor so you can use the top left for next HS

The 3D distance for images that are 100% correct size extracted from the patch tool will be (Pano Width / 2 / Pi)
6000 pixels wide gives 6000/2/3.1459 = 956px
If the image is half the width & height then the pixel distance would be half at 478px

aligned HS jim.zip

Use the Yaw and Pitch from patch. In the skin editor center the HS under the image.

(5.25 MiB) Downloaded 278 times

[Hopki]

Hi,
Please see this post: https://ggnome.com/blog/creating-3d-dis ... pot-images
Regards,
Hopki

[jare]

Panoramas with pinned hotspots have a control limit; you can not move or zoom the panorama while hovering the pinned image, especially the large ones. Pinned image can sometimes fill the whole screen area and there is no way to get back but using control buttons.
I'm not sure there is some solution ever as the images should stay clickable.
Any ideas?

[JimWatters]

Use a smaller rectangle as the clickable area instead of the full image. This will shrink the area that can not be panned.
See the first video.
https://ggnome.com/blog/creating-3d-dis ... pot-images

[jare]

Thanks, Jim.
I'll buy that idea!

[Hopki]

Hi Jar,
A visible 3D hotspot can not be clicked and dragged as you have said.
If it is set so it is hidden then you can have a smaller active element to make it visible such as the rectangle in 3D Distorted Hotspot Tip video.
This is great for opening doors etc.

Of course with the example at the top of this thread where the 3D hotspot is always visible there is no way around the fact that you can not click and drag it.
The hotspot had to stay visible so you not only see the stone slide open but also see it slide shut.

Depending on if you really need to see the stone slide shut you can use the smaller target such as the rectangle to first make the hotspot visible then you would see the stone slide open as the sliding effect is much slower.

But when you click the door to close it, it would need to fade out so you see some of the animation.
So the actions would have to be, mouse click set element alpha to show the stone as soon as you can so you can then see the stones slide open then you would need a mouse click a change element alpha so you would see some of the stone slide close before the it faded out completely.

I did ask Thomas about if there was a way that the point hotspot can still be clicked and dragged while showing but was told this was not possible.
Regards,
Hopki

[jare]

A little feature request related to pinned hotspots: currently I make panoramas of 16000*8000 pixels size by default, sometimes even larger. If we extract patches using the Patch tool, the patches are too large, they match the source panorama with 1:1 ratio. For pinned hotspots, especially if there are many of them inside one panorama, their size have to be reduced. Now we have to do it manually.
It would be better to have a output size selector directly in the Patch tool interface, in pixels and/or in percentage of the original source image.