google / marzipano

A 360° media viewer for the modern web.
http://www.marzipano.net
Apache License 2.0
1.95k stars 992 forks source link

Objects in panorama as Infospots #436

Open MatusGasparik opened 1 year ago

MatusGasparik commented 1 year ago

I'd like to have the objects in the panorama act as Infospots (e.g. by manually drawing contours or semi-transparent overlays directly in the panorama). The highlights should be visible upon mouse hover and clicking on them should show an info box.

A very simplified illustration:

image

Does anyone have any idea, how this could be done with Marzipano? @tjgq ?

chmelevskij commented 1 year ago

Trying to understand the question here. You want to draw on the panorama, then convert that drawing into infospot? Or you just want predefined shapes with outlines have hover state?

chmelevskij commented 1 year ago

Asking because hotspots in marzipano, the js framework are just regular dom objects. So you would do it the same way as you'd do it in plain js.

MatusGasparik commented 1 year ago

Hi @chmelevskij. For some reason I haven't at all noticed your reply...

I have objects in the panorama that I want to highlight when the user moves the mouse over them. The objects have complex shapes so my idea was to have extra copies of the panorama for each of the objects I want to hightlight, where the object itself has a color overlay / border or is otherwise hightlighted compared to the original panorama. All the remaining pixels are transparent.

I know that Marzipano uses "layers" which I think I should be using for my use case, but the documentation on the layers isn't very satisfying.

I fancy that if it is possible to read the pixel values of the panorama at the mouse location and see if any of the extra layers have non-transparent pixels I can turn on the visibility of this layer which will show up as a highlight on top of the original panorama image...

Hovering over the highlighted object I'd like to have a simple text displayed, clicking on it a info-popup should be shown - same as the DOM elements used for infospots. If I had to place the infospots over the object in the panorama the way Marzipano wants me to, I will have some parts of the panorama totally crowded with the infospot icons which will look terrible...

Does this make any sense to you?