Skip navigation

Digital Publishing Suite

gbjof

Currently Being Moderated

Gyroscope enabled panoramic photo in Digital Publishing Suite

Jan 18, 2012 12:38 PM

Tags: #dps #ipad #indesign_cs5.5 #overlay #interactive #magazine #digital_publishing_suite

Hi... I'm trying to connect a panoramic file to the iPad's gyroscope in digital publishing suite but am having no luck finding documentation. Can this be done inside of InDesign?

Any help is greatly appreciated.

6675 Views 20 Replies Latest reply: landrvr1, Dec 10, 2012 5:09 AM

Replies

Currently Being Moderated

1. Matthew Laun,

Jan 18, 2012 12:57 PM in reply to gbjof

Report

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

|
Mark as:
Currently Being Moderated

2. gbjof,

Jan 18, 2012 1:02 PM in reply to Matthew Laun

Report

Thanks Matthew, so it's not possible to navigate a panoramic photo in a magazine using the gyroscope? I recall seeing an advertisement that animated when the ipad was lifted up, which is why I'm asking.

|
Mark as:
Currently Being Moderated

3. Matthew Laun,

Jan 18, 2012 1:10 PM in reply to gbjof

Report

@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

|
Mark as:
Currently Being Moderated

4. Michal Kovar,

Jan 19, 2012 6:05 AM in reply to Matthew Laun

Report

"...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-htm l5
I tried some examples - and it seems that it works

|
Mark as:
Currently Being Moderated

5. Johannes Eckert,

Jan 19, 2012 6:15 AM in reply to Michal Kovar

Report

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

|
Mark as:
Currently Being Moderated

6. gbjof,

Jan 19, 2012 7:43 AM in reply to Johannes Eckert

Report

@Johannes, that's a great example, thank you. Is Project Magazine built in DPS? I'm wondering if I might have to open a web view and host the panoramic there instead of inside of the folio.

|
Mark as:
Currently Being Moderated

7. Matthew Laun,

Jan 19, 2012 10:09 AM in reply to Michal Kovar

Report

@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

|
Mark as:
Currently Being Moderated

8. Johannes Eckert,

Jan 19, 2012 10:27 AM in reply to gbjof

Report

@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>

|
Mark as:
Currently Being Moderated

9. johntidis,

Feb 10, 2012 9:32 AM in reply to gbjof

Report

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...

|
Mark as:
Currently Being Moderated

10. gbjof,

Feb 10, 2012 10:09 AM in reply to johntidis

Report

This is done using js in the HTML file you connect the panoramic file to.

Create a web view, embed the html panoramic with gyroscope code.

|
Mark as:
Currently Being Moderated

11. Stephen Barrante,

Feb 22, 2012 9:07 AM in reply to gbjof

Report

(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

|
Mark as:
Currently Being Moderated

12. Johannes Eckert,

Feb 22, 2012 9:18 AM in reply to Stephen Barrante

Report

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

—Johannes

|
Mark as:
Currently Being Moderated

13. Stephen Barrante,

Feb 22, 2012 9:33 AM in reply to Johannes Eckert

Report

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

Cheers

|
Mark as:
Currently Being Moderated

14. Johannes Eckert,

Feb 22, 2012 9:41 AM in reply to Stephen Barrante

Report

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

|
Mark as:
Currently Being Moderated

15. gbjof,

Feb 22, 2012 9:49 AM in reply to Johannes Eckert

Report

Try this: http://gardengnomesoftware.com/

It has an option to automatically enable "inertia / gyroscope" in advanced settings.

|
Mark as:
Currently Being Moderated

16. Stephen Barrante,

Feb 22, 2012 9:58 AM in reply to gbjof

Report

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!

|
Mark as:
Currently Being Moderated

17. johntidis,

Feb 22, 2012 1:10 PM in reply to gbjof

Report

Hi gbjof

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

Or enyone else ?

THNX

|
Mark as:
Currently Being Moderated

18. landrvr1,

Nov 29, 2012 9:42 AM in reply to Johannes Eckert

Report

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.

|
Mark as:
Currently Being Moderated

19. Jason Bernert,

Dec 5, 2012 10:38 AM in reply to Johannes Eckert

Report

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

|
Mark as:
Currently Being Moderated

20. landrvr1,

Dec 10, 2012 5:09 AM in reply to Jason Bernert

Report

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-sc rolling-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.

|
Mark as: