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

 
Replies
  • Currently Being Moderated
    Jan 18, 2012 12:57 PM   in reply to gbjof

    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
    Jan 18, 2012 1:10 PM   in reply to gbjof

    @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
    Jan 19, 2012 6:05 AM   in reply to Matthew Laun

    "...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
    Jan 19, 2012 6:15 AM   in reply to Michal Kovar

    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
    Jan 19, 2012 10:09 AM   in reply to Michal Kovar

    @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
    Jan 19, 2012 10:27 AM   in reply to gbjof

    @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
    Feb 10, 2012 9:32 AM   in reply to gbjof

    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
    Feb 22, 2012 9:07 AM   in reply to gbjof

    (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
    Feb 22, 2012 9:18 AM   in reply to Stephen Barrante

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

     

    —Johannes

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 22, 2012 9:33 AM   in reply to Johannes Eckert

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

     

    Cheers

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 22, 2012 9:41 AM   in reply to Stephen Barrante

    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
    Feb 22, 2012 9:58 AM   in reply to gbjof

    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
    Feb 22, 2012 1:10 PM   in reply to gbjof

    Hi gbjof

     

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

     

    Or enyone else ?

     

    THNX

     
    |
    Mark as:
  • Currently Being Moderated
    Nov 29, 2012 9:42 AM   in reply to Johannes Eckert

    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
    Dec 5, 2012 10:38 AM   in reply to Johannes Eckert

    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
    Dec 10, 2012 5:09 AM   in reply to Jason Bernert

    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:
  • Currently Being Moderated
    Mar 2, 2014 9:02 AM   in reply to landrvr1

    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 !

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 3, 2014 12:57 AM   in reply to gbjof
     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points