iphone4 gyroscope plugin

  • The gyro script has been updated to be an actual js plugin, and is now included as a standard krpano plugin. Read about it here:
    iphone4 gyroscope plugin

    I have developed a "plugin" for the javascript viewer that uses the iphone4/ipod 4th generation gyroscope with krpano. Currently it is a simple javascript file that you include in the HTML page. It is available for free/open source.


    (or any other panorama on http://fieldofview.com/panoramas)

    The plugin uses devicemotion events to control the panorama, but this can be overridden with normal touch control. When you release, viewing reverts back to devicemotion control.

    How to use:

    Download the script from github, and include it in your page(s) after including swfkrpano.js.

    <script type="text/javascript" src="krpanogyro.js"></script>

    NB: See the note below about using "krpanoDiv"

    Known issues:

    • Only works on iphone4 and ipod touch 4th generation (and the ipad 2 ofcourse); devices without gyro, but with accelerometer/compass don't generate the required events
    • Roll/banking of device is ignored, in part because krpanoJS does not support it and in part because it would conflict with mobile safari changing orientation in 90 degree steps
    • As of yet there is no switch to turn the gyro on or off; if you have a gyro-enabled device, you get gyro-control. No opt-out (yet).
    • The panorama jumps to a new position if you hold down the panorama, rotate the device, and then let go of the panorama.
    • There's a small "stutter" if you drag the panorama and release it with a bit of inertia
    • Autorotate is overruled.
    • If you don't use "krpanoDiv" as the id of your embed div, you will have to edit the name in krpanogyro.js

    I only just noticed the 0.8.14 prerelease; I have not tested with that version, but I don't see why it shouldn't work.

    Note to Klaus: In the future (for this and other html viewer plugins) it would be nice if the javascript viewer could include js files as plugins through the xml, like the flash viewer can load (code-only) swf files as plugin.


    Edited 5 times, last by ahoeben (April 4, 2011 at 10:05 PM).

  • Wowwww..

    very easy and works like a charme!!!

    tested on iphone 4


    2 questions..
    - is it possible to enable /disable this?
    - does it use the heading as we use in maps with the radar?

    Super Aldo!!!
    (didn't forget you but i'm waiting for that other date close to your place)


    Tuur *thumbsup*

  • - is it possible to enable /disable this?

    Not currently, but in a future version: sure.


    - does it use the heading as we use in maps with the radar?

    No, for a couple of reasons. Most importantly, the device just does not give me a "compass heading"; the "pan" component just starts at 0 every time. But having a hard alignment with a compass would also break initial views (ie: the starting viewpoint of your panorama) and it would conflict with manual navigation of the panorama.

  • Thanks for testing with a tour (I had tested only single panoramas).

    I have updated the opening post with installation instructions. As long as you use "krpanoDiv" as the id for the div that you embed krpano in, it is indeed as simple as adding in the script.

  • Hi,

    great work!
    I have also started working on it but you were quicker

    Note to Klaus: In the future (for this and other html viewer plugins) it would be nice if the javascript viewer could include js files as plugins through the xml, like the flash viewer can load (code-only) swf files as plugin.

    of course! I'm already working on that, in the krpanoJS pre-release there is already a first javascript plugin interface, it's not finish yet and there are still some interfaces missing (unloading, visible elements, resizing, ...), but I want to finish it for the final, then I will also provide example codes for it,

    e.g. here an javascript plugin example code: (works already with the current pre-release)

    some notes about it:
    - only one global javascript variable named "krpanoplugin" is allowed
    - all other things must be defined inside that "krpanoplugin" variable
    - the krpanoplugin must have a public "registerplugin" function (that will be called by krpano to start the plugin)

    and some notes about the current state of the plugin interface:
    - the "krpanointerface" has currently only the "call" function, the set/get functions are currently not there,
    - but therefore direct access to the krpano objects (e.g. to the <view> tag) is possible,

    minimizing of JS code is also possible, but I would recommend the Google Closure Compiler or UglifyJS for it,
    a "eval" minimizing may not work eventually...

    best regards,

  • This is very cool!!!!
    If only I could get it to work... my Safari console on iPad says 'gyro_krpano' does not have the function 'get'.
    I'm running version and indeed, if I log the krpano object it only disclose the functions: addParam, addVariable, embed, isDevice, isHTML5possible, passQueryParameters, setSWFPath, setSize, setViewerID and useHTML5.... no 'get'

    If I'd gotten it to work I'd have updated your js and put in a on/off switch. I do have some suggestions though (if you want). Maybe you could encapsulate your entire script so as only to expose the variables and function you really want exposed (right now all is global).

    for instance:

    This way you can init it yourself using the object 'createPanoViewer' and use it on on multiple panorama's simultaneously:

    var oViewer = createPanoViewer({swf:"krpano.swf", xml:"data/pano1/pano1.xml", target:'myElement'});
    if (bForce||oViewer.isHTML5possible()) {
    } else {
    	mPanoDiv.innerHTML = 'Lorem ipsum dolor sit amet';

    It also means you can probably do away with the setInterval since the parsed object is the one you're searching for (I think, not sure since I get error).

    -- oh wait -- I see where the error comes from.... I mean:: if (krpanoObject) gyro_objectname = krpanoObject.pid;
    and damned... I read iPad... instead of iPod... (it's been a long week)

    Hmmm... I'm confused now: should or should it not work with iPad 4.2.1?
    Got something setup here: Can anybody with an iPhone 4 tell me if it works?
    Ps: if you look at the source you can already see I've got the gyro-toggle in place, just no button to toggle it.

    Edited 2 times, last by Sjeiti (February 4, 2011 at 11:32 PM).

  • It won't work on the ipad, because the ipad has no gyroscope. Unfortunately the compass is not accessible in mobile safari, so there is no input for the "pan" axis with just accelerometer output.

    I have not had time to check out your version of the code, but your demo does not work. It show the panorama just fine, but no gyro input. Hey, those panoramas look familiar...

  • Ah yes!.... that was your mail that Iwan forwarded to me.

    I don't suppose they lease or rent those iPhone4's at the Apple store. Time to call some friends to drop by with their phone I guess :-p. .. ...or see how Phonegap accesses compass.

  • Brovo!! Great work, only have to fix the stutter things, take a look at the app called BEP360 on iPhone, the app has 360MV and use gyroscope to control the view and also can be overided by touching and it's so smooth when i override the gyro control. i think you could use it as a good sample for further development, thank again for your great work *g*

  • I got it working *smile*
    (ran into somebody yesterday who has an iPhone4)

    I made a couple of changes to the script concerning the aformentioned closures and I added a toggle to disable the gyroscope.
    Didn't test the toggle but it should work.

    Code is here: http://test.ronvalstar.nl/krpano/scripts/krpanogyro.js

    You initialize as follows:

    krpano = createPanoViewer({swf:"krpano.swf", xml:"panorama.xml", target:'myHtmlElementId'});
    	if (krpano.isHTML5possible()) {
    		gyro = KrpanoGyro(krpano);

    Since you have to parse the krpano object itself you don't have to worry anymore about the correct naming of the embed div's id.

    The gyro object contains the following functions:

    gyro.enabled(); // returns a boolean to check if KrpanoGyro is enabled
    gyro.enable(); // enables KrpanoGyro (also returns boolean)
    gyro.disable(); // disables KrpanoGyro (also returns boolean)
    gyro.deviceEnabled(); // checks if the device is fit for KrpanoGyro

    The deviceEnabled is not really correct since it only checks if the DeviceOrientationEvent is present. Which is true for a lot of browsers but does not mean is has actually been implemented.

    So if you want to toggle the gyro you could do something like so:

    <a href="javascript:!gyro.enabled()?gyro.enable():gyro.disable()">toggle</a>



  • I have updated the script on github with the following changes:

    Merged Sjeiti's changes (thanks!):
    - general cleanup
    - enable/disable gyroscope
    Added a way to talk to the script from the krpano xml without javascript
    Made the "return to device tilt after release" effect optional (adaptiveV)
    Fixed "stutter" when panning manually with inertia
    Fixed gimbal lock at zenith and nadir
    Improved vertical offset behavior

    By default, the script still works "automagically" if you include it on your page and use "krpanoDIV" to embed. If you want to use Sheiti's more powerfull method or another embed id, remove or edit the last line of the script.

    It is now possible to enable/disable the gyroscope directly from krpano xml (without further javascript). The following snippet creates a button that is only visible when the gyro device is available, which toggles the gyro on/off. It also shows how to turn on the "return to device tilt after release" effect from the previous version.

    <krpano ... onstart="initgyro()">
    		<plugin name="gyrotoggle" visible="false" ... onclick="gyro.toggle();" />
    		<action name="initgyro"> 
    			copy(plugin[gyrotoggle].visible, gyro.deviceAvailable);


  • Cool!

    Almost makes me wish I had an iPhone4...

    Nice how you inject the gyro object into the krpano object. Have to use that one day to replace the boring onIdle autorotate with a more natural Perlin Noise way of looking around.



Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!