Sie sind nicht angemeldet.

Lieber Besucher, herzlich willkommen bei: krpano.com Forum. Falls dies Ihr erster Besuch auf dieser Seite ist, lesen Sie sich bitte die Hilfe durch. Dort wird Ihnen die Bedienung dieser Seite näher erläutert. Darüber hinaus sollten Sie sich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutzen Sie das Registrierungsformular, um sich zu registrieren oder informieren Sie sich ausführlich über den Registrierungsvorgang. Falls Sie sich bereits zu einem früheren Zeitpunkt registriert haben, können Sie sich hier anmelden.

1

Dienstag, 1. Februar 2011, 23:23

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.

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.

Aldo

Dieser Beitrag wurde bereits 5 mal editiert, zuletzt von »ahoeben« (4. April 2011, 22:05)


2

Mittwoch, 2. Februar 2011, 00:55

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

Tuur

Erleuchteter

Beiträge: 2 774

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

3

Mittwoch, 2. Februar 2011, 02:47

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*
http://www.virtualtuur.com
Skype:studiotuur

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Tuur« (2. Februar 2011, 02:58)


4

Mittwoch, 2. Februar 2011, 03:34

Awesome!!!


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

LOL ;-) *thumbsup*

Jarred

5

Mittwoch, 2. Februar 2011, 10:06

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

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.

6

Donnerstag, 3. Februar 2011, 04:46

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

Donnerstag, 3. Februar 2011, 09:18

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.

9

Donnerstag, 3. Februar 2011, 15:51

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)

Quellcode

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

Freitag, 4. Februar 2011, 17:41

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:

Quellcode

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:

Quellcode

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.

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Sjeiti« (4. Februar 2011, 23:32)


11

Samstag, 5. Februar 2011, 17:45

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

Samstag, 5. Februar 2011, 23:52

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

Anfänger

Beiträge: 12

Wohnort: Bangkok, Thailand

Beruf: Virtual Tour service

  • Nachricht senden

13

Sonntag, 6. Februar 2011, 16:47

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

Erleuchteter

Beiträge: 2 774

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

14

Montag, 7. Februar 2011, 14:16

That would be nice..

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

Tuur *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur

15

Mittwoch, 9. Februar 2011, 16:59

That works great!

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

16

Donnerstag, 10. Februar 2011, 18:45

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:

Quellcode

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:

Quellcode

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


gr

Ron

Tuur

Erleuchteter

Beiträge: 2 774

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

17

Donnerstag, 10. Februar 2011, 19:03

Great, Will check tonight
http://www.virtualtuur.com
Skype:studiotuur

18

Freitag, 18. Februar 2011, 11:55

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.

Quellcode

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

Erleuchteter

Beiträge: 2 774

Wohnort: Netherlands

Beruf: Krpano custom coding / Virtual Tours / Photography / Musician / Recording engineer

  • Nachricht senden

19

Freitag, 18. Februar 2011, 22:33

Great!!

Super Aldo..

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

Tuur *thumbsup*
http://www.virtualtuur.com
Skype:studiotuur

20

Dienstag, 22. Februar 2011, 11:05

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