Creating polygon hotspots

[Kyle M]

Hello! First time making 360 panos and I've been wondering if it would be possible to make a different type of hotspot that is a polygonal shape?

Thank you!

[Tiago Quelhas]

Marzipano currently does not support polygonal hotspots embedded in the pano sphere, which I'm assuming is what you want. Hotspots are always anchored to a single point in the pano.

However, note that any DOM element may be passed into createHotspot(). So, depending on your use case, you might be able to approximate what you want by constructing your shape with HTML and CSS.

On Mon, Jul 18, 2016 at 12:17 PM, Kyle M <kylemirz...@gmail.com> wrote:

Hello! First time making 360 panos and I've been wondering if it would be possible to make a different type of hotspot that is a polygonal shape?

Thank you!

--
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+...@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/3952ad33-1fc1-4260-9a2c-6b59c0c90097%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Kyle M]

Yes that is what I was looking for. Probably should have mentioned what I was trying to do in the original post, but I'm trying to have it so that if a user say clicks on a book shelf, then information about what's in the book shelf will pop up.

I've been trying to pass in elements into createHotspot(), but this is my first time using HTML, CSS, and JavaScript and I've been having trouble getting a polygon shape onto the pano :/

Have been trying to use the Embedded Hotspot demo as a reference to how to do this, but for some reason I can't quite get it right. Do you have any advice?

Thanks a bunch!

[Tiago Quelhas]

The problem with your use case (detecting clicks within a bookshelf in the pano) is that the bookshelf won't always have the same shape when you look at it from different angles. Hence, a hotspot with a fixed shape won't do what you want.

An alternative approach would be to listen for click events in the pano, convert them into (yaw, pitch) coordinates using screenToCoordinates(), and then test whether those coordinates fall inside the region occupied by the bookshelf. You'd have to work out the math required to do this.

To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/ba1b84f4-4daf-47b4-83de-8c12aa8f8820%40googlegroups.com.

[Kyle M]

I had that concern as well but looking at the embedded hotspot demo http://www.marzipano.net/demos/embedded-hotspots/index.html the billboard seems to have the proper shape no matter what the view angle is. 

Main issue I'm having is replicating that.

[Tiago Quelhas]

Actually, you're completely right - I'd forgotten we have the capability to distort hotspots via CSS transforms, as shown in that demo.

You should be able to place a distorted hotspot on top of your bookshelf by adjusting the radius parameter (which affects the apparent size) and the extraRotations parameter (which you shouldn't need if the bookshelf is exactly perpendicular to the observer's view ray). What exactly are you having trouble with?

To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/1f19d0bf-9d7c-41fa-876b-b24f414964c3%40googlegroups.com.

[Kyle M]

Right now I'm trying to replicate the demo with a single iframe, and either the code in the github repository for the demo is not the same as the one used for the live demo, or I'm being stupid and missing something because I can't seem to get even that single rectangular hotspot set up correctly let alone multiple polygons. I assume it's probably a basic beginners mistake I am making.

Currently I can get the box that says "Select something to play" but it does not stay on the pano, but stays stationary and undistorted on the screen.

[Tiago Quelhas]

The demo code on Github works for me.

Are you running the exact demo code, or did you make any changes? Do you see any errors on the developer console? Does your browser support CSS transforms? (All of them do nowadays, this should only be a problem on extremely ancient browsers like IE 8 or 9.)

To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/a72b8727-6bcc-4edd-bec3-434442205f75%40googlegroups.com.

[Kyle M]

Well I am getting the demo code and adding it to the output the marzipano tool gives. The output the tool gives seems to be laid out in a different manner than how it's presented in github, so maybe I'm not putting it in the right places.

Currently ( changing stuff around often trying to fix things so this changes a lot ) there are 2 errors and 1 warning:

warning: 127.0.0.1/:7 The key "target-densitydpi" is not supported.

error: marzipano.js:18 Uncaught TypeError: Cannot read property 'style' of null

error: http://127.0.0.1:55629/favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)

Browser is chrome and up to date.

[Tiago Quelhas]

The uncaught TypeError likely points to the problem, so you could try catching that exception on the developer tools and see where it comes from.

Are you sure you're passing a valid DOM element into createHotspot? getElementById() returns null if the element does not exist, so that could be the root cause for the error.

It's hard to give more specific advice without looking at the concrete code.

To view this discussion on the web visit https://groups.google.com/d/msgid/marzipano/784e78e2-b61e-4f5d-b0cc-57ee27042a09%40googlegroups.com.

[Kyle M]

Sorry post was not showing up in the group for me for some reason so if you are reading this and are also looking for answers, you missed a few correspondences. To get caught up there was an issue with iframeselect being null and the box we were looking to see not showing up in the first scene, but the last.

If I put the hotspot code in the loop that sets up the scenes, then it does not show up in any of them except the last one ( even though I assume it should be in every one ), but it shows up properly on the scene. If I move the code down after the loop and change 'marzipanoScene' to 'scenes[0]' then the box shows up floating always in the to left corner of the screen on every scene.. essentially the exact opposite situation as the other way.

Tried playing around with it for a while and can't make sense of it.

[Tiago Quelhas]

On Tue, Jul 19, 2016 at 4:02 PM, Kyle M <kylemirz...@gmail.com> wrote:
> If I put the hotspot code in the loop that sets up the scenes, then it does
> not show up in any of them except the last one ( even though I assume it
> should be in every one ), but it shows up properly on the scene. If I move
> the code down after the loop and change 'marzipanoScene' to 'scenes[0]' then
> the box shows up floating always in the to left corner of the screen on
> every scene.. essentially the exact opposite situation as the other way.

Are you perhaps calling `scenes[0].hotspotContainer()` instead of
`scenes[0].marzipanoObject.hotspotContainer()`?

[Kyle M]

Ah yes, that was it! Thanks a ton! 

I also managed to create a polygon svg button that's working correctly too! I just made it into a triangle shape for now for testing purposes, but now I got to make a shape that matches every bookcase...

Is it possible to open up the 360 image in an image editor and tracing out polygons to use, or will they not be distorted properly then? Do we have to make the polygons with the assumption that the bookcase we will put it to is directly in front of the view?

( sorry if that is worded oddly )

Thanks a bunch,

-Kyle

[Tiago Quelhas]

If the bookcase has a rectangular shape *in the real world*, then you
should be able to place a rectangular hotspot over it with the
appropriate perspective and rotation transforms; it doesn't matter
whether the bookcase is being viewed straight-on.

This of course assumes that the photo was taken by a perfect camera.
Actual cameras distort images, so a rectangular shape won't actually
have straight sides. But often the distortion is too small for the
effect to be noticeable.

I don't have any concrete advice on how to find the appropriate values
for the perspective and rotation. Some amount of trial and error might
be required.

> --
> 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+...@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/13f0b23b-562f-445e-bfb5-4d0ea6f7c1a2%40googlegroups.com.

[Kyle M]

Some of the items that I would want to be clickable don't really have neat rectangular shapes. I got around this by creating SVG polygons by mapping the items I want to be made into bubbles in my 360 pano image out in GIMP ( guide in case anyone else is doing a similar project ) then I lay out the SVG polygons in my HTML as this article advocates.

What I do then is I have all the items that i want to make into buttons in the same SVG as different paths, I make the whole SVG into a hotspot, and then I make each individual path link to its respective page when clicked.

Issue I got from that is it i think the SVG image is treated as a plane on the scene and does not wrap around the whole scene properly like I was expecting. Am I right in assuming this, or did I mess up elsewhere? If it is a plane is it possible to have Marzipano to wrap the SVG buttons around the scene the same way it initially wraps the pano image into the scene?

[Tiago Quelhas]

On Thu, Jul 21, 2016 at 11:41 AM, Kyle M <kylemirz...@gmail.com> wrote:
> Issue I got from that is it i think the SVG image is treated as a plane on
> the scene and does not wrap around the whole scene properly like I was
> expecting. Am I right in assuming this, or did I mess up elsewhere? If it is

That's correct. The SVG won't wrap around the panorama because CSS
transforms can't bend an element. In other words, your approach only
works if the area you want to hotspot lives in a (real-world) plane. I
would try using a separate SVG for each hotspotted area.

> a plane is it possible to have Marzipano to wrap the SVG buttons around the
> scene the same way it initially wraps the pano image into the scene?

This is not possible.