Receiver.onOrientationChange( callback )

Use this method when you need the orientation of the smartphone of the controlling user. The callback is called whenever the orientation of the controlling device changes, which is continuously. To gain a better understanding of how the onOrientationChange method works, take a look at this example.
 

Callback arguments

  • object ori
    A javascript object consisting the following of key/value pairs

    • number a
      The rotation, in degrees, of the controlling device around the earth’s vertical axis, one could say this is the ‘heading’ of the controlling device, also called the ‘yaw’

    • number b
      The rotation, in degrees, of the device around it’s horizontal x-axis, also called the ‘pitch’

    • number g
      The rotation, in degrees, of the device around it’s horizontal z-axis, also called the ‘roll’

    • number x
      The x-coordinate of the point on the screen the device is pointing to, ranges from 0 to 1, relative to the starting orientation of the phone. The user has a button to reset this starting orientation.

    • number y
      The y-coordinate of the point on the screen the device is pointing to, ranges from 0 to 1, relative to the starting orientation of the phone. The user has a button to reset this starting orientation.

 

Code examples

In the following example a developer is recreating Nintendo's 'Duck Hunt', a once famous point-and-shoot game. He creates a receiver and uses the onOrientationChange method to display a target. This lets the user know where she is aiming. He also uses the onTap method, as a firing mechanism. The developer has prepared the functions 'showTarget' and 'shoot' to do this.

var gun = PLUGPIN.createReceiver( { 'name' : 'Duck Hunt' } );

var lastAimCoordinates = {};

gun
    .onOrientationChange( function( ori )
    {
        showTarget( ori.x, ori.y );
        lastAimCoordinates = { "x" : ori.x, "y" : ori.y };
    })
    .onTap()
    {
        shoot( lastAimCoordinates.x, lastAimCoordinates.y );
    };

 

In the following example a developer is using THREE.js by the awesome Mr. Doob, to have a 3D box mimic the orientation of the controlling user's device.

var     camera           = null
    ,     scene             = null
    ,     renderer         = null
    ,     cube               = null
    ,     initialAlpha    = null
    ,     controller1     = PLUGPIN.createReceiver( { 'name' : 'Orientation debugger', 'notification' : 'large' } )
;

// PlugPIN stuff:

controller1.onOrientationChange( function( ori )
{
    initialAlpha = initialAlpha || ori.a;
    
    cube.rotation.set ( 
         THREE.Math.degToRad( ori.a - initialAlpha )
        ,THREE.Math.degToRad( ori.b )
        ,THREE.Math.degToRad( ori.g )
        , 'XYZ' 
    );
});

// THREE.js stuff:

scene = new THREE.Scene();

renderer = new THREE.WebGLRenderer
({ 
     'antialias'                : true
    ,'alpha'                    : true
    ,'precision'                : "highp"
    ,'premultipliedAlpha'        : true
    ,'preserveDrawingBuffer'    : true
    ,'stencil'                    : false 
    ,'logarithmicDepthBuffer'    : false
});

renderer.setSize( window.innerWidth - 10 , window.innerHeight - 10 );

document.body.appendChild( renderer.domElement );

camera = new THREE.PerspectiveCamera( 20, 1, 0.1, 5000 );
camera.position.z = -40;
camera.up.set( 0, 1, 0 );
camera.lookAt( new THREE.Vector3( 0, 0, 0 ) );

scene.add( camera );

var light = new THREE.PointLight( 0xffffff );
light.position.set( 1, 5, 1 );
scene.add( light );

light = new THREE.DirectionalLight( 0x002288 );
light.position.set( -1, -1, -1 );
scene.add( light );

light = new THREE.AmbientLight( 0x222222 );
scene.add( light );

var material = new THREE.MeshPhongMaterial({
     color         : 'red'
    ,ambient     : 'red'
});

var obj = new THREE.Object3D();

obj.rotation.z = THREE.Math.degToRad( 90 );

cube = new THREE.Mesh( new THREE.BoxGeometry( 0.2, 2, 8 ), material );

obj.add( cube )

scene.add( obj );


var animate = function() 
{
    renderer.render( scene, camera );
    requestAnimationFrame( animate );
}

animate();

 

Live example

Connect with the app in the iFrame below to see the onOrientationChange method in action.

Open in new tab.

 

Contact us


Talk to us!
Tell us anything you want to and please add your contact information.




Our contact info
tel. +31 (0) 20 2170013
info@plugpin.com

Groenhoedenveem 28
1019 BL Amsterdam
The Netherlands

News letter


Enter your e-mail address to stay informed on everything PlugPIN!