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.

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.

Quellcode

1

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

Zitat

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

iphone4 gyroscope "plugin"

Thanks Aldo, it's great!
Very easy to use, in fact just putting <script src="krpanogyro.js"></script> into the html seems to work despite different code from your example.
You can see a crazy example tour here, still zooming:

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 1.0.8.14 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 1.0.8.14, then I will also provide example codes for it,

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

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

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.

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

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.