Set hotspot coordinates in a more advanced way...

Rui Barbosa

unread,

Nov 1, 2017, 10:07:45 PM11/1/17

to marzipano

Hi Marzipanos :-),

I've a requirement for placing an hotspot in a specific location like the "perspective" demo of the outdoor in your demos....

but as it is right now (extra parameters rotations etc...), its rather complex to make it wright and place it correctly... very tedious process by hand...

So my requirements would be that the hotspot could receive a 4 points location and place it accordingly in a perspective way, insted of just one yaw/pitch.

- It could receive 4 yaw/pitch pairs or

- 4 points (x,y) in image/pano

Of course i know it must envolve some previous computation for the orthogonal/perspective transform.

But i've tried to devise a process on how to do it without luck and i'm a bit stuck here...

I've seen that in RectilinearView you have lots of goodies (projection, screenToCoordinates, coordinatesToScree, etc,,)

So i tried to create an aditional matrix3d inside the main div of the hotspot that would be responsible to do it. like..

...

</div>

I tried the computing of that matrix3d, by invert the parent one and then reconstruct the matrix from a projective transform such as in here: https://codepen.io/fta/pen/ifnqH

The problem is that the hotspot has parent div has a css transform that you set in coordinatesToPerspectiveTransform and i just cant set the math right. ..or i'm just not seeing it..

Question: Can you provide me with some help, sample or direction on how to do it?

best regards,

Tiago Quelhas

unread,

Nov 3, 2017, 9:40:16 PM11/3/17

to Rui Barbosa, marzipano

Instead of figuring out how to compose transforms, a simpler idea would be not to use a hotspot at all.

Just position your overlay element on top of the viewer div. Then, whenever the view changes, convert the four (yaw, pitch) pano coordinates for the four corners into (x, y) screen coordinates using RectilinearView#coordinatesToScreen. Use the code you linked to find the matrix3d transform to apply.

--
You received this message because you are subscribed to the Google Groups "marzipano" group.
To unsubscribe from this group and stop receiving emails from it, send an email to marzipano+unsubscribe@googlegroups.com.
To post to this group, send email to marz...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/2a2b6c81-e93f-423c-8dac-3313083f650d%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

Rui Barbosa

unread,

Nov 4, 2017, 2:09:56 PM11/4/17

to marzipano

Well i did that before... it was my first approach and while it worked it had some issues...

The 2 main reasons why i wanted to use the transform were:

css3 transforms use the browser GPU so they are faster than position the items themselves
i wanted to seamlessly integrate with marzipano core functionality so that it would take care of the positioning of the hotspot itself without any intervention on my code

At the end i have found a way to do it and it works quite well.

Thank you for the answer.

Best regards,

To unsubscribe from this group and stop receiving emails from it, send an email to marzipano+...@googlegroups.com.

Gulshan kumar

unread,

Apr 11, 2024, 11:15:15 AMApr 11

to marzipano

Hi There,

can you share the solution if possible?

Stephen Sandison

unread,

Apr 11, 2024, 11:33:10 AMApr 11

to marz...@googlegroups.com

I’m sure there is example code out there somewhere for making a hotspot draggable. I know I’ve used in the past for projects. I think it was on GitHub but google making markers or hotspots draggable and it should come up. You could then get the position values as you move it around using events and output to console so you could then use those values on non draggable markers perhaps.

Cheers,

Steve