Markers about photo-sphere-viewer HOT 26 CLOSED

I don't know how I could help you. It's simple trigonometry to know which area is visible knowing the viewport width and height, the current zoom level and the current camera position.

Simple but I don't know the formula, Wikipedia and math websites will help.

That being said it gave me the idea of a markers feature, actually displayed on the sphere it-self, with add, remove, show, hide, goto methods.

from photo-sphere-viewer.

Yes, would be a very useful feature and not hard to implement. I'm almost done with it, just need a more accurate way to adapt to current camera view.
I used HTML overlay (instead of textures in render) because it allows easy interaction with Angular.

Can't get that damn formula right. It offsets faster than the view
Markers have left and top in absolute and -/+ depending on direction

var offsetX = PSV.prop.theta - (pos.left - PSV.prop.mouse_x) * PSV.config.long_offset;

from photo-sphere-viewer.

I think you are mixing spherical and orthogonal coordinates, hence the offset.

from photo-sphere-viewer.

Did you managed to solve your offset ? I am facing the same problem naively thinking there is a linear relationship between angles and plane positions.
https://github.com/mistic100/Photo-Sphere-Viewer/blob/feature/5-markers/src/js/PSVHUD.js#L128

But it's not linear, it's... strange. I'll have to study how PerspectiveCamera works.

from photo-sphere-viewer.

It's working ! the method used is explained here http://stackoverflow.com/a/27448966
Now I'll make everything pretty and configurable :-)

from photo-sphere-viewer.

You can see the WIP here http://www.strangeplanet.fr/work/photosphere/example/

from photo-sphere-viewer.

• display markers
• add marker tooltips on mouseover
• add marker details displayed in side panel on click
• add button in navbar which display a list of markers
• add gotoMarker, hideMarker, showMarker, addMarker, removeMarker methods

from photo-sphere-viewer.

No, no I didn't.
Please send your address so I send unlimited amounts of beer!

Is is set in version ?

from photo-sphere-viewer.

Also for the markers

• add curentMarker -- return the object associated with the currently selected marker
  That way if you select a marker and execute a function, you get directly the current one, no need for $event callback in function.

Makes easier to provide an array of objects to set as markers and then interact with each one

from photo-sphere-viewer.

When your done with the marker feature I'm going to make a angular class so you can commit it as well

from photo-sphere-viewer.

After your done with markers I'll make an angular module for the plugin. That'll be cool

from photo-sphere-viewer.

I'll prefer you publish the directive in a separate (your own) repository.
I'll make a reference to it in the doc.

from photo-sphere-viewer.

OK. Will do

from photo-sphere-viewer.

So I think it's done. But there will be a problem if you want to integrate with angular.
When a marker is added a clone is done https://github.com/mistic100/Photo-Sphere-Viewer/blob/feature/5-markers/src/js/PSVHUD.js#L75
This will make any possible angular model detached. I could remove the clone but I also need to store some custom data on the marker (position2D, position3D, parsed anchor) and I don't really want to modify the object of the user.
How should this be done correctly ?

from photo-sphere-viewer.

Cool.
Let me test it because I will be integrating it with angular and I'll provide info how to make it the best

At first sight fast methods::
angular.merge on marker object will do.
Will provide more info soon. Working

from photo-sphere-viewer.

Nice!
Tested and started to integrate, also adding markers dynamically works fine with angular, got a good solution for that.
The only problem is placing them. Fetching the click event from the canvas but no matter how I use offsetX, offsetY, clientX, clientY it doesn't come on the place clicked. Note: screenX, screenY is always 0 for canvas

Also using events from PSV.prop for mouseX is same thing. Any advice on how to calculate the X,Y needed from mouse click $event on the canvas ?

from photo-sphere-viewer.

You forgot that you are working with a perspective projection of a 3D environment. What you need is to use the Raycaster to detect the click position in the sphere (x, y, z) then translate to geodesic coordinates (latitude, longitude) and if needed translate to texture coordinates.

If you can wait I'll add a "mouse-click" event on the viewer with the following properties :

• viewer_x
• viewer_y
• latitude
• longitude
• texture_x
• texture_y

from photo-sphere-viewer.

Tested. Using longitude, latitude from the 'click' data I made it add markers dynamically.
Is the 'click' data stored in the PSV object like many other coordinates ? I can't find it.

Would be helpful to recover it from the root object

from photo-sphere-viewer.

Using longitude and latitude in Angular to add new marker works, but there is a slight error. For some reason there is a distance between place of click and the placement.
Meaning, it's exactly under the click location.
The error distance is constant.

from photo-sphere-viewer.

constant by how many ? are you sure it's not related to the positioning of the marker itself ? by default the marker image is centered on the position, you can change it with the anchor marker attribute (for example "bottom center")

from photo-sphere-viewer.

For me it doesn't make sense to store the last clicked position in the viewer, it's an ephemeral thing.

from photo-sphere-viewer.

It's a constant of about 30px by screen size, exactly under the clicked spot.
It makes sense, because the click you use to save latitude and longitude and store info about the objects in the 360.

This is a inserted marker on click event

<div class="marker visible" style="width: 32px; height: 32px; transform: translate3d(183.264px, 232.993px, 0px); background-image: url(pin.png);"></div>

Something from here maybe?
THREE.WebGLRenderer: image is not power of two (4095x2047). Resized to 4096x2048 <canvas width=​"4095" height=​"2047">​
This is automatic on each load of 360

from photo-sphere-viewer.

I just tested with a simple code in the demo file

PSV.on('click', function(e) {
    PSV.addMarker({
      id: Math.random(),
      longitude: e.longitude,
      latitude: e.latitude,
      image: 'pin2.png',
      width: 32,
      height: 32,
      anchor: 'bottom center'
    });
  });

and it works perfectly, no offset

the THREE JS warning about the texture size has not impact

from photo-sphere-viewer.

Yes, working fine.
I found the margin-top issue.
When you have something on top of the container, the marker will drop by $height px

Ex:

<div style="height:40px"></div>
<div id="360ishereinthiscontainer">...</div>

the markers will drop vertically by the height of the top $element.
A screen.Y problem maybe? Instead of canvas size

from photo-sphere-viewer.

Yes, just tested now. Alone in a page, it doesn't need a margin-top: -$some px
If it's part of anything, like a table, div.col etc it requires further alignment

from photo-sphere-viewer.

Forgot that "clientX" and "clientY" are always relative to the window. Now it's fixed.

from photo-sphere-viewer.