Gyroscope enabled panoramic photo in Digital Publishing Suite

This isn't currently possible. The Adobe Viewer code only utilizes the gyroscope or accelerometer  to change it's orientation (I believe it's the later as the code was developed to be compatible with iOS 3).

Matthew

@gbjof,

I've seen things where an animation is set only in one of the orientations (aka layouts) of an article's page, set to play on page load, and changing the orientation thus activates the animation. But if you can find an example that seems to trigger animation based on a device movement that doesn't trigger the orientation change, share it with me and I'll dig into it's guts to see how they do it.

Matthew

"...The Adobe Viewer code only utilizes the gyroscope or accelerometer  to change it's orientation..." this is not exactly correct.

You can use accelerometer and gyroscope in offline HTML code which you can use in your folio.

See here: http://www.mobilexweb.com/blog/safari-ios-accelerometer-websockets-html5

I tried some examples - and it seems that it works

there are plenty of examples where you can make use of the device's

gyroscope, accelerometer and geo location from within HTML. Mobile Safari

has some Apis that you can read from.

It all need to be done in HTML5 inside your folio (or on a server).

Project magazine had a nice parallax cover, see here:

http://www.youtube.com/watch?v=MMspQHt6ukU

—Johannes

@Michael,

Thanks for providing the answer. To be clear though, this statement is still true: "...The Adobe Viewer code only utilizes the gyroscope or accelerometer  to change it's orientation..." It's the webkit code built into the OS that is performing this effect, not the Adobe Viewer code. Semantics; the key is that it can be incorporated into the DPS platform. The more people recognice how we leverage webkit, the more they can see how to do things that re not natively supported by the Viewer code.

Cheers!

Matthew

@gbjof:

PROJECT is built with WoodWing and might change to DPS later.

(mobil gesendet)

Am 19.01.2012 16:43 schrieb "gbjof" <forums@adobe.com>:

**

   Re: Gyroscope enabled panoramic photo in Digital Publishing Suite created by

gbjof <http://forums.adobe.com/people/gbjof> in Digital Publishing Suite- View

the full discussion <http://forums.adobe.com/message/4151885#4151885>

Hi,

I am trying to use this but I have no luck.!

Can someone help & explain us .. step by step...
what must be done to make this happend ... because a lot of us have a few knowledge of development...

(On topic, so I thought I would ask a related question...)

Is the accel/gyro data only accessible and supported in an HTML stack? or will it also work in a Web Area overlay in a standard DPS article?

For instance, our creative team has proposed features like the panorama, or even something as simple as an object hanging down into the page - that they would like to have react with the orientation of the device. However, it's less than desirable to have to move completely to an HTML article simply to support these "bells & whistels", on the cover of the article. I'd rather drag out a rectangle, link it to an HTML page, and have that functionality perform in that space.

A bit crunched on time, otherwise I'd just start experiementing.

Thanks,
Stephen

i am pretty sure it should be available in web content as well.

—Johannes

Thanks Johannes - We'll dive in and see if we can pull together an example.

Cheers

i found this tutorial very helpful:

http://www.peterfriese.de/how-to-use-the-gyroscope-of-your-iphone-in-a-mobile-web-app/

also, he made a demo site that you can pop into your web content to see the

accelerometer data appear inside your folio:

http://demos.peterfriese.de/gyro/gyro.html

—Johannes

Thanks - We actually have Pano2VR, is it part of that softare or the Object2VR? And I assume it would be related to exporting the content as an HTML file set. Just took a quick peek into Pano and I didn't specifically see anything related to gyro or accelerometer support.

Thanks for the tip!

Hi gbjof

Can you please give an example of html panoramic with gyroscope code?

Or enyone else ?

THNX

Wow, that Project Mag parallax is pretty amazing.  I've hunted for some comprehensive tuts on how to do that but so far only coming up with pieces of info here and there.  There's tuts on parallax, and info on gyro, but nothing I can find in terms of bringing the two worlds together.  Anyone find anything since this thread began?

I'm actually rather shocked that we aren't seeing a ton of this kind of tut around the web.  It's definitely one of the most impressive features of HTML5 and a tablet.  Hmm.

Oh, I ran across this site which is really quite something as well.  Very cool:

http://skyfallipad.007.com/

Yowza.  Parallax WITH hotspots and zoom.  Nice. 

Hi Johannes,

Did you ever find a good way to use the gyroscope Javascript API to control an image?

Also, I use your Adobe DPS HTML5 Boilerplate all the time. Thanks!

-Jason

I did manage to get this working using a nice jQuery script I found here:

http://zachholman.com/posts/parallaxing-parallax-on-ios/

You can just save the webpage and it's assets locally and start playing around.  Just point to that local html file on an overlay and you can test it immediately.

Here's the thing:  While it certainly works and the effect is very cool, it's also very jittery.  I cannot figure out how to smooth out the motion.  Increasing the framerate works for browsers, but not for iOS - DPS or Safari.  I simply lack the scripting knowledge to make it smooth.

The trouble really is the lack of folks doing this and publishing the code/results.  There's cool jQuery parallaxing examples like this that work well:

http://torontographic.wordpress.com/2012/08/11/so-you-want-parallax-scrolling-in-ios-ipad- and-ipod/

But integrating the gyro is never included and few people ask about it, lol.

BTW, with the Zach Holman example you can get a parallax going by just setting the x direction motion to 0 on your .png files.

Hey ! Could you give me step by step on how to do this ? I'm looking to use the gyroscope to change the orientation on one photo as you move the tablet around.

Thanks !

Hi

follow this: http://contentviewer.adobe.com/s/DPS%20Tips/7f80a0ffed3a4ff08734bc905aac4a29/HTML/01_TOC.h tml