CrossBrowdy - Examples

Device

Orientation, inclination and motion

This is an example managing orientation, inclination and motion:

index.html:

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title>Device: Orientation, inclination and motion - Example</title>
		<!-- Loads the needed CSS files: -->
		<link rel="stylesheet" type="text/css" href="main.css" />
		<!-- Loads CrossBrowdy.js (main file): -->
		<script src="CrossBrowdy/CrossBrowdy.js" type="text/javascript" language="javascript"></script><!-- "type" and "language" parameters for legacy clients. -->
		<!-- Loads the other needed script files: -->
		<script src="main.js" type="text/javascript" language="javascript"></script>
	</head>
	<body>
		Orientation supported: <span id="orientation_supported">Unknown</span><br />
		Orientation data:
		<br />
		<span id="orientation_data">No data</span><br />
		<br />
		'compassNeedsCalibration' supported: <span id="compassneedscalibration_supported">Unknown</span><br />
		Compass needs calibration: <span id="compassneedscalibration">Unknown</span><br />
		<br />
		Motion supported: <span id="motion_supported">Unknown</span><br />
		Motion data:
		<br />
		<span id="motion_data">No data</span>
		<br />
		<!-- The "CB_console" element will be used automatically in the case that the client does not support console: -->
		<div id="CB_console" style="visibility:hidden; overflow:scroll;">
			<span style="font-weight:bold;">Console:</span><br />
		</div>
		<div id="crossbrowdy_info"><a href="/guides#examples" target="_blank">CrossBrowdy.com</a> example</div>
	</body>
</html>

main.css:

body { background-color:#aaddee; word-wrap:break-word; }
#crossbrowdy_info { position:fixed; bottom:2px; right:2px; }
#crossbrowdy_info a { color:#00aadd; }
#crossbrowdy_info a:hover { color:#0033aa; }
span { color:#aa0000; }

main.js:

CB_init(main); //It will call the "main" function when ready.


//This function will be called when CrossBrowdy is ready:
function main()
{
	//Orientation management:
	if (CB_Device.Orientation.isSupported())
	{
		CB_console("The Device Orientation Event (used by the Device Orientation API or compatible ones) is supported.");
		CB_Elements.insertContentById("orientation_supported", "Yes");

		//Checks when the orientation changes:
		var orientationChangedTimes = 0;
		CB_Device.Orientation.onChange
		(
			//Orientation is obtained successfully:
			function(data) //Data will be normalized automatically.
			{
				var output =
					"Times fired: " + (++orientationChangedTimes) + "\n" +
					"Alpha: " + data.alpha + "\n" +
					"Beta: " + data.beta + "\n" +
					"Gamma: " + data.gamma + "\n" +
					"Absolute: " + (data.absolute ? "yes" : "no");
				CB_console(output);
				CB_Elements.insertContentById("orientation_data", CB_nl2br(output));
			}
		);
	}
	else
	{
		CB_console("The Device Orientation Event (used by the Device Orientation API or compatible ones) is not supported.");
		CB_Elements.insertContentById("orientation_supported", "No");
	}
	

	//Checks whether the compass / magnetometer needs calibration:
	if (CB_Device.Orientation.isCompassNeedsCalibrationSupported())
	{
		CB_console("The 'compassNeedsCalibration' feature is supported.");
		CB_Elements.insertContentById("compassneedscalibration_supported", "Yes");
		CB_Device.Orientation.onCompassNeedsCalibration(function() { CB_console("Compass needs calibration!"); CB_Elements.insertContentById("compassneedscalibration", "Yes"); });
	}	
	else
	{
		CB_console("The 'compassNeedsCalibration' feature is not supported.");
		CB_Elements.insertContentById("compassneedscalibration_supported", "No");
	}
	

	//Physical movements management:
	if (CB_Device.Motion.isSupported())
	{
		CB_console("The Device Motion Event (used by the Device Orientation API or compatible ones) is supported.");
		CB_Elements.insertContentById("motion_supported", "Yes");

		//Checks physical movements and their speed:
		var motionChangedTimes = 0;
		CB_Device.Motion.onChange
		(
			//Motion is obtained successfully:
			function(data) //Data will be normalized automatically.
			{
				output =
					"Times fired: " + (++motionChangedTimes) + "\n" +
					"Acceleration in x: "  + data.acceleration.x + "\n" +
					"Acceleration in y: "  + data.acceleration.y + "\n" +
					"Acceleration in z: "  + data.acceleration.z + "\n" +
					"Acceleration in x (with gravity): "  + data.accelerationIncludingGravity.x + "\n" +
					"Acceleration in y (with gravity): "  + data.accelerationIncludingGravity.y + "\n" +
					"Acceleration in z (with gravity): "  + data.accelerationIncludingGravity.z + "\n" +
					"Interval: "  + data.interval + "\n" +
					"Rotation Rate Alpha: "  + data.rotationRate.alpha + "\n" +
					"Rotation Rate Beta: "  + data.rotationRate.beta + "\n" +
					"Rotation Rate Gamma: "  + data.rotationRate.gamma;
				CB_console(output);
				CB_Elements.insertContentById("motion_data", CB_nl2br(output));
			}
		);
	}
	else
	{
		CB_console("The Device Motion Event (used by the Device Orientation API or compatible ones) is not supported.");
		CB_Elements.insertContentById("motion_supported", "No");
	}	
}

Try this example

You can check the Guides & Tutorials category as well as the API documentation in the case you need more information.

Go back to Guides & Tutorials

« PrevReturnNext »
CrossBrowdy by Joan Alba Maldonado