Loading Profile...
Is it possible to follow a path smoothly like in Google Earth?
This article describes my issue perfectly, actually quite a coincidence one of you guys wrote this at the time I tried implementing this functionality:
http://blogs.msdn.com/lutzg/archive/2...
Can this be achieved with Seadragon Ajax easily?
http://blogs.msdn.com/lutzg/archive/2...
Can this be achieved with Seadragon Ajax easily?
1
person has this question
I have this question, too!
Tell me when someone answers.
The more people who ask this question, the more it gets noticed.
The more people who ask this question, the more it gets noticed.
The company marked this question as answered.
-
Inappropriate?Definitely! We've been talking about adding this feature into the Seajax API. I'm not sure that will happen in the near future, but it should be easy to do on top of the API currently. Just set an interval to move the viewport every x milliseconds, based on the shape you want.
The tough part is getting the shape right. James, the guy who wrote that implementation, followed the paper that Lutz links in the blog entry. The goal of that paper was constant visual flow (rate of pixels moving), but he found that didn't look good because Seadragon's movements (and the laws of physics) have acceleration/deceleration. So he tweaked it to ease in and out.
It looked great on some images, but I've found I dislike it on that Virtual Earth sample; it feels too "boxy" (i.e. zoom out, then pan, then zoom in). I'd like it to have a more arc-like shape. And I think it should be somewhat faster.
If you'd like to play around with this, I'd love to help you out. Implementing it on top of Seadragon Ajax should be fairly trivial. Otherwise, I myself would like to play around with this; when I get some time, I'll try to publish some sample code for the same thing in Seadragon Ajax.
I’m excited
-
Inappropriate?Thanks Aseem! The virtual earth sample is perfect for my needs, even though the path does feel like sharp right angles and is slow. Actually the slowness is great as it gives the browser time to load the images. Making the path an arc is pretty easy, but the problem is the spring mechanism in seadragon ajax. At each joint of the path the animation slows down, hits the point and then accelerates. I'd even be happy with a V path that has the opposite of the spring mechanism to begin and then the normal spring mechanism on the other leg of the journey.
So I guess you're suggesting to use panTo and zoomTo in immediate mode and then have a loop that does the animation? What's the best way to set a timer to do the animation? -
Inappropriate?Yep, exactly, you'd panTo and zoomTo with the immediate flag, and call those methods repeatedly through window.setInterval or chained window.setTimeouts. Here's some sample code to get you started.
var startTime;
var startBounds;
var targetBounds;
var endTime;
var timerId;
/**
* Transitions smoothly to the given bounds.
*/
function transitionTo(bounds) {
startTime = new Date().getTime();
startBounds = viewer.viewport.getBounds();
targetBounds = bounds;
// TODO the built-in Seadragon animations are constant-time, e.g. they
// always take 1.5 seconds, but I don't think that's ideal in this case.
// you'll probably want to vary the animation time based on the distance
// you'll be moving, both in zoom and in pan.
endTime = ...;
timerId = window.setInterval(updateTransition, 10);
}
/**
* Updates the viewport based on the current state of the transition.
*/
function updateTransition() {
var progress = (new Date().getTime() - startTime) / (endTime - startTime);
viewer.viewport.fitBounds(transform(progress), true);
if (progress >= 1) {
window.clearInterval(timerId);
}
}
/**
* This is your main transform function. Given a value between 0 and 1, returns
* the bounds the viewport should be at.
*/
function transform(progress) {
if (progress <= 0) {
return startBounds;
} else if (progress >= 1) {
return targetBounds;
}
// TODO implement the in-between part... =)
}
Aseem
-
Inappropriate?Hi Aseem, everything works perfect now, thanks! One remaining issue is with the scroll-wheel. I stop navigating around the tree when someone clicks basically handing over the controls to them. But I don't know how to stop navigating (or call a method) when someone moves their scroll wheel. So right now, if someone only moves their scroll wheel without clicking, the navigation appears to jump all over the place. Is there a function I can call similar to this?
Seadragon.Utils.addEvent(viewer.elmt, "scrollwheel", stopDemoAnimation); -
Inappropriate?Hey Scott,
I'm not sure I understood your problem, but I'll offer two answers.
1. You can get your above statement to work by just changing the event name. The proper name of the event is "mousewheel", not "scrollwheel". This is similar to "mouseup", etc. So that should call your stopDemoAnimation() function fine.
2. If you want to toggle the entire default mouse handling behavior (panning by dragging and zooming by clicking or scrolling), you can do so through viewer.setMouseNavEnabled(true or false).
Hope that helps!
Aseem -
Inappropriate?Your first answer was the correct one! That's exactly what I was looking for and works perfect. Thanks again Aseem, you've been a huge help.
I’m thankful
-
Inappropriate?Just came across this old request in trying to find that link I gave. I've implemented this technique for smoothly flying from 1 point to another in seadragon ajax at www.appletree.com. If anyone wants to implement this, feel free to copy my code for it.1 Comment
Add a comment
This answers the question
-
This is awesome btw, Scott. Great stuff.
EMPLOYEE
