How do I move around in the image to pre-determined areas?

Alright, so with a little more digging, I came up with the solution.

I will try to explain the concept, but perhaps the code will explain better.

Since panTo sets the x and y coordinates that you pass to it to the center of the view port, we need to calculate what the center coordinates would be to put the overlay(or part of the image) we want in the upper left.

Lets start with the ifs:

If we pass the coordinates we know to the panTo function, it will put our overlay dead-center in the viewport.

If we drew a line from the top-left corner of the viewport to the bottom-right, the distances between the now centered overlay and each edge would be equal.

So, it stands to reason, that to move the overlay to the upper-left of the viewport, we need to move the lower-right point to the center.

We do this as follows:



function moveUpperLeft(x,y){
var viewSize = viewer.viewport.getBounds().getSize();
var viewX = (viewSize.x / 2);
var viewY = (viewSize.y / 2);

var point = new Seadragon.Point(x + viewX, y + viewY);

viewer.viewport.panTo(point);

}

 
 


The getBounds function gives you access to all of the Seadragon.Rect methods. Allowing you to get the viewport size in points relative to your current zoom.

The bottom-right point, relative to your overlay will always be 1/2 of your current viewport x and y points plus the x and y your current overlay position.

Okay, I am not sure if that makes any sense typed out like this. But the code above does work for what you were trying to do. x and y being the original overlay's point position.

Call with a similar link:



Move to Upper Left



Good luck.

Thank you for the reply, I am not sure what I am doing wrong but when I try this method the x,y do not correlate with the x,y of the image itself. That is where I have struggled to get the correct point.

For example, I have a 2304x27147 pixel image. The first move I want to make is point 0,0. This one works great. Then I want to move to point 0,1900 this is where I get confused. Through trial and error I found that I need to move to Point(0,.9). This works great, but how do I calculate the .9? Is there a function?

Also, the code to move it to the top left is working great, thanks.

I see, your trying to find the correct x, y, for the point that you want to move.

The way the coordinate system works is a bit different from what you are used too. To move the viewfinder you need to feed it point data, and what you have is pixel data.

In pixels, your top-left pixel would be 0,0 and your top-right pixel would be 0,2304.

The points are complicated, (at least from what I can tell) the width of the image is always 1, and the height is based on the aspect ratio of the image, so if your image is half as tall as it is wide, it's height would be 0.5.

So all the points in the image are decimal values in between.

Example:

If my image is 400px x 200px.. The aspect ratio would be 1 to .5.

Therefor, to navigate the viewport to the center point of the image the x would need to be 0.5(half the width) and the y would be 0.25(half the height)

In the case of your image if the width is 2304 and the height is 27147 the ratio would be approximately 1 to 11.78(Your height is 11.78 times your width)

So your center point would be x=0.5(width is always ) and your y would be (approx) 5.89 (Again half of the height ratio)

So, hopefully this explains the math a little bit better, at least the way I understand it from what is explained here:

http://livelabs.com/seadragon-ajax/li...

and some tests of my own.

Now, an easier way to find the exact point you want to navigate too is to use the example on that page to user your mouse to find the exact point you want, then plug that into the above functions.

I used their example to give me the point where the mouse was, and then code that into the system, but the math above should help you calculate it dynamically if you have the pixel data.

There are some pixel to point conversion methods in the viewer, but I haven't tested them to see if they apply to the visible area or the loaded image.

Anyway, I hope this all makes sense, its a lot. :)

Dustin

Haha, there I go over-complicating it. :) (I think we were replying at the same time) Well Steve, this should give you some good info to go on.

Thanks for the reply Asseem, I am sure I am going to be picking your brain soon. Also, you might want to check the logic in my last reply, it might not be 100% sound. :D

Thank you all very much for the help. I read the page on the ajax coordinate system numerous times but didn't quite get it until this post. The different explanations here really cleared things up for me.

Thank you also for the suggestions about fitBounds, and while I will use this for the initial load, if they change the zoom level when they move around I want to keep their zoom level even if they can no longer see the whole rectangle that I would like. In this case, the top left of the image is the most important for them to see(there is a lot of text, and the top left is where the text starts).

I will be sure to share the app with you when I get it done. Mostly I am just working to see if it will do what I need it to. Also I am waiting on the license being finalized to know if I could use it anyway.

Thanks again for the help. Greatly appreciated.

Yeah, ok. But let me ask you guys this, see if you guys can help. Does anybody know what the cutting voltage on a fi440 cc is on the wire?....No. ok ..thats my point ,see the original question is ok, and also the problem i have, but ! the solucion is all Greek to me, see you guys know all this, but we are completly blind to all this, , Please dont get me wrong, but the use of Photosyth is great for us that don't know much of PC. But is their anyway, you guys can put this so us morons can understand it in plain Inglishiiiii???..lol..lol..lol if not, Its all goooooood