CrossBrowdy - Examples

Device

Light and proximity sensors

This is an example managing light and proximity sensors:

index.html:

<!DOCTYPE html>
<html>
	<head>
		<!-- This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. -->
		<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" />
		<link rel="canonical" href="https://crossbrowdy.com/examples/device/sensors/try" />
		<title>Device: Light and proximity sensors - Example</title>
		<!-- Loads the needed CSS files: -->
		<link rel="stylesheet" type="text/css" href="main.css" />
		<!-- Loads CrossBrowdy.js (main file): -->
		<!-- Note: it is recommended to download CrossBrowdy instead of hotlinking the online version. This is just for the example! -->
		<script src="https://crossbrowdy.com/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>
		Light sensor support: <span id="light_sensor"></span><br />
		Light level detected: <span id="light_level">Unknown</span><br />
		<br />
		Proximity sensor support: <span id="proximity_sensor"></span><br />
		Proximity level detected: <span id="proximity_level">Unknown</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="display:none; visibility:hidden; overflow:scroll;">
			<span style="font-weight:bold;">Console:</span><br />
		</div>
		<div id="crossbrowdy_info"><a href="https://crossbrowdy.com/examples/device/sensors" target="_blank">CrossBrowdy.com example</a></div>
	</body>
</html>

main.css:

/* This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. */

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:

/* This file belongs to a CrossBrowdy.com example, made by Joan Alba Maldonado. Creative Commons Attribution 4.0 International License. */

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


//This function will be called when CrossBrowdy is ready:
function main()
{
	//Ambient light sensor management:
	if (CB_Device.AmbientLight.isSupported())
	{
		CB_console("The ambient light detection is supported (through the Ambient Light Sensor API or the Ambient Light Sensor Events ('ondevicelight') or 'onlightlevel' event or compatible ones).");
		CB_Elements.insertContentById("light_sensor", "Yes");

		//Gets the ambient light now and also every time it changes:
		CB_Device.AmbientLight.onChange(function(data) { CB_console("Light detected: " + data.value); CB_Elements.insertContentById("light_level", data.value); }); //Data will be normalized automatically.
	}
	else
	{
		CB_console("The ambient light detection is not supported.");
		CB_Elements.insertContentById("light_sensor", "No");
	}
	
	//Proximity sensor management:
	if (CB_Device.Proximity.isSupported())
	{
		CB_console("The proximity detection is supported (through the Proximity Sensor API or the Proximity Sensor Events as 'ondeviceproximity' or 'onuserproximity' or compatible ones).");
		CB_Elements.insertContentById("proximity_sensor", "Yes");

		//Gets the proximity now and also every time it changes:
		CB_Device.Proximity.onChange(function(data) { CB_console("Proximity detected: " + data.value); CB_Elements.insertContentById("proximity_level", data.value); }); //Data will be normalized automatically.
	}
	else
	{
		CB_console("The proximity detection is not supported.");
		CB_Elements.insertContentById("proximity_sensor", "No");
	}
}

Try this example

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

All the examples together can be downloaded here.

Go back to Guides & Tutorials

Try this example












Share