A simple 180 degree image pano/timeline controlled On Drag

Using JavaScript with Hype
1

jquery-panotest.zip (245.6 KB)

You can see from my javascript-panotest-zip attachment that I’m trying to create a looping, simple 180 degree panorama via Hype’s On Drag, Control timeline action, and have used some kind person on this forum’s JQueryUI slider example as the starting point.

The timeline plays forward and loops, but only loops if I tick ‘continue after drag’, and playback then stops if the slider reaches the end of its container. Is it possible to have some draggable (or swipable) interface that continues to play the timeline loop even when the slider control has reached the end, AND if I also want the timeline to continue to play in reverse when I drag the slider back to the start of its container?

Thanks in advance -

2

I think these steps may achieve the desired effect.

First, you’ll want to explicitly tell the timeline to continue in the case that you are already at the end in a drag. To do this, add another On Drag action after the Control Timeline one that is to Run Javascript:

	if(event['hypeGesturePhase'] == hypeDocument.kHypeGesturePhaseEnd) {
		hypeDocument.continueTimelineNamed('pano', hypeDocument.currentDirectionForTimelineNamed('pano'), true);
	}

Then, on your pano timeline, add a timeline action at the 0s time and the end time (removing your existing one) that will tell the timeline to continue looping in whatever direction it is in. Instead of using a continue/start timeline action, use run javascript with this code:

hypeDocument.startTimelineNamed('pano', hypeDocument.currentDirectionForTimelineNamed('pano'), true);

This is the version I made:
jquery-panotest.hype.zip (294.9 KB)

3

Thanks Jonathan, can’t wait to check this out first thing Monday morning -
All our students want some kind of panoramic interface, and I imagine everyone else does too - catch you soon -

4

Hey Jonathan
Thanks so much for this.

That’s very nearly what I’m after - (sorry I’m so hopeless with javascript!, but if I can get it sorted, the kids will love it

the main thing that I did want, is to only have the timeline play ‘on drag’, but not necessarily continue to keep playing indefinitely in a loop if I’ve stopped dragging

And in my example, the timeline would just stop if it reached the beginning or end of the timeline -

The ‘continue after drag’ setting that Hype offers is a nice touch, so when the drag action ‘finishes’, with that option ticked the timeline continues to play out just for a few seconds after you’ve finished the drag, and then slows down to a stop (unless you drag again, either left or right) -

Any ideas? You can see what I’m getting at, I can even ignore the green, slider control altogether (make it invisible with CSS), and just use a more natural ‘swipe’ like action to continue to play a seamless loop in either direction -

Thanks Jonathan - (I’m sure you’ve got proper work to do, but it’d be so great to simulate a swipeable/draggable seamless pano interface - )

1 Like
5

I’m not exactly sure about the effect that you want since it sounds like you wanted it to continue looping, but if you remove the timeline actions at the beginning and end then it won’t keep looping once it gets to the start/end.

6

Maybe embedding “Pannellum” is the solution…