You are not logged in.

Dear visitor, welcome to krpano.com Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

1

Tuesday, February 1st 2011, 11:23pm

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.

src/download:
https://github.com/fieldOfView/krpano_gyro

demo:
http://fieldofview.com/panoramas/winter-pictura
(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.

Source code

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.

Aldo

This post has been edited 5 times, last edit by "ahoeben" (Apr 4th 2011, 10:05pm)


VN2009

Professional

Posts: 1,334

Location: Duluth MN

  • Send private message

2

Wednesday, February 2nd 2011, 12:55am

dont have an iphone 4 but this is a great addition! thanks for your efforst A.

Tuur

Master

Posts: 2,413

Location: Netherlands

Occupation: Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

3

Wednesday, February 2nd 2011, 2:47am

Wowwww..

very easy and works like a charme!!!


tested on iphone 4

http://www.virtualtuur.com/tzigane/


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)


Thanx

Tuur *thumbsup*

This post has been edited 1 times, last edit by "Tuur" (Feb 2nd 2011, 2:58am)


4

Wednesday, February 2nd 2011, 3:34am

Awesome!!!


But there is one problem. I tried walking into the next room and it didn't zoom in.

LOL ;-) *thumbsup*

Jarred

5

Wednesday, February 2nd 2011, 10:06am

- is it possible to enable /disable this?
Not currently, but in a future version: sure.

Quoted

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

dcc

Beginner

Posts: 5

Location: London

  • Send private message

6

Thursday, February 3rd 2011, 4:46am

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:

http://www.z360.com/ifull/bimbo

Yours Douglas

7

Thursday, February 3rd 2011, 9:18am

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.

8

Thursday, February 3rd 2011, 10:32am

Wahou !!!

Greats *thumbsup*

Thank's

9

Thursday, February 3rd 2011, 3:51pm

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

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

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/*
    krpanoJS javascript plugin template / example
    1.0.8.14
*/

var krpanoplugin = function()
{
    var krpano = null;
    var plugin = null;

    // registerplugin - startup point for the plugin
    // - krpanointerface = krpano interface object
    // - pluginpath = string with the krpano path of the plugin (e.g. "plugin[pluginname]")
    // - pluginobject = the plugin object itself (the same as: krpano.get(pluginpath) )
    this.registerplugin = function(krpanointerface, pluginpath, pluginobject)
    {
        krpano = krpanointerface;
        plugin = pluginobject;
        
        // say hello
        krpano.trace(0,"hello from plugin[" + plugin.name + "]");
        
        // add a global function to krpano (callable from xml by "test1()")
        krpano.test1 = test1;
        
        // add a local plugin function to krpano (callable from xml by "plugin[name].test2()" or just "test2()" when called from a plugin event)
        plugin.test2  = test2;
        
        // add a local plugin variable/attribute
        plugin.var1 = "123";
        
        // add a local plugin variable/attribute with getter/setter functions
        plugin._var2 = 123;
        plugin.__defineSetter__("var2", function(v){ plugin._var2=v; krpano.trace(0,"var2 was set to "+v); });
        plugin.__defineGetter__("var2", function(){ return plugin._var2; });
    }
    
    function test1()
    {
        krpano.trace(0,"test1() called from xml");
        krpano.trace(0,"view.hlookat = " + krpano.view.hlookat);
        krpano.trace(0,"view.vlookat = " + krpano.view.vlookat);
        krpano.trace(0,"view.fov = " + krpano.view.fov);
    }
    
    function test2()
    {
        krpano.trace(0,"test2() called from xml (plugin="+plugin.name+")");
    }
};


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,
Klaus

10

Friday, February 4th 2011, 5:41pm

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

for instance:

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
if (!this.KrpanoGyro) {
	var KrpanoGyro = function() {

		var init = function init(krpanoObject) {
			if (krpanoObject) gyro_objectname = krpanoObject.ptarget;

			if( window["DeviceOrientationEvent"] ) {
				var gyro_init_interval = setInterval( function() {
					gyro_krpano = document.getElementById( gyro_objectname );	
					if(gyro_krpano) {
						clearInterval(gyro_init_interval);
						gyro_init();
					}
				}, 100 );
			}
		}

		/* the rest of your script goes here */

		return {
			 init: init
			,toString: function() {
				return "[object KrpanoGyro]";
			}
		};
	}();
}


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

Source code

1
2
3
4
5
6
7
8
var oViewer = createPanoViewer({swf:"krpano.swf", xml:"data/pano1/pano1.xml", target:'myElement'});
if (bForce||oViewer.isHTML5possible()) {
	oViewer.useHTML5("always");
	oViewer.embed();
	KrpanoGyro.init(oViewer);
} 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.

This post has been edited 2 times, last edit by "Sjeiti" (Feb 4th 2011, 11:32pm)


11

Saturday, February 5th 2011, 5:45pm

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

12

Saturday, February 5th 2011, 11:52pm

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.

lolokolo

Beginner

Posts: 12

Location: Bangkok, Thailand

Occupation: Virtual Tour service

  • Send private message

13

Sunday, February 6th 2011, 4:47pm

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*
www.charcoal.co.th/360

[/url]%20%20Uploaded%20with%20ImageShack.us[/img]

Tuur

Master

Posts: 2,413

Location: Netherlands

Occupation: Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

14

Monday, February 7th 2011, 2:16pm

That would be nice..

so, now we need some VR goggles to put in our iphone to get lost completely ;-)

Tuur *thumbsup*

15

Wednesday, February 9th 2011, 4:59pm

That works great!

An on/off switch would be useful though...

16

Thursday, February 10th 2011, 6:45pm

I got it working :-)
(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:

Source code

1
2
3
4
5
6
7
	krpano = createPanoViewer({swf:"krpano.swf", xml:"panorama.xml", target:'myHtmlElementId'});
	if (krpano.isHTML5possible()) {
		krpano.useHTML5("always");
		krpano.embed();
		gyro = KrpanoGyro(krpano);
		//gyro.disable();
	}


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:

Source code

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


gr

Ron

Tuur

Master

Posts: 2,413

Location: Netherlands

Occupation: Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

17

Thursday, February 10th 2011, 7:03pm

Great, Will check tonight

18

Friday, February 18th 2011, 11:55am

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.

Source code

1
2
3
4
5
6
7
	<krpano ... onstart="initgyro()">
		...
		<plugin name="gyrotoggle" visible="false" ... onclick="gyro.toggle();" />
		<action name="initgyro"> 
			copy(plugin[gyrotoggle].visible, gyro.deviceAvailable);
			gyro.setAdaptiveV(true);
		</action>


Enjoy.

Tuur

Master

Posts: 2,413

Location: Netherlands

Occupation: Virtual Tours / Photography / Musician / Recording engineer

  • Send private message

19

Friday, February 18th 2011, 10:33pm

Great!!

Super Aldo..

gonna check in 8 days .. first ski a bit ;-)

Tuur *thumbsup*

20

Tuesday, February 22nd 2011, 11:05am

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.

gr

Ron

Similar threads