Device orientation on the browser - Revision history

Andre at 19:22, 15 December 2016

2016-12-15T19:22:19Z

Andre: Andre moved page Browser motion to Device orientation on the browser

2016-12-15T19:14:21Z

Andre moved page Browser motion to Device orientation on the browser

← Older revision	Revision as of 19:14, 15 December 2016
(No difference)

Andre: /* debugging mobile browsers */

2016-12-14T21:55:54Z

debugging mobile browsers

← Older revision		Revision as of 21:55, 14 December 2016
Line 74:		Line 74:
	==debugging mobile browsers==		==debugging mobile browsers==
	[https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi debugging Firefox over Wifi]		[https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi debugging Firefox over Wifi]

	~~[https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android]~~

Andre at 21:55, 14 December 2016

2016-12-14T21:55:19Z

← Older revision		Revision as of 21:55, 14 December 2016
Line 74:		Line 74:
	==debugging mobile browsers==		==debugging mobile browsers==
	[https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi debugging Firefox over Wifi]		[https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi debugging Firefox over Wifi]

			[https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android]

Andre at 21:48, 14 December 2016

2016-12-14T21:48:41Z

← Older revision		Revision as of 21:48, 14 December 2016
Line 64:		Line 64:

	</source>		</source>

			==more on Device orientation/motion==
			https://mobiforge.com/design-development/html5-mobile-web-device-orientation-events

			https://www.w3.org/TR/orientation-event/

			https://www.html5rocks.com/en/tutorials/device/orientation/

			==debugging mobile browsers==
			[https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi debugging Firefox over Wifi]

Andre: Created page with "To detect the motion of devices where the web browser is running, using Javascript, we rely on the `window.addEventListener("devicemotion")` that listens to the mo..."

2016-12-12T13:24:51Z

Created page with "To detect the motion of devices where the web browser is running, using Javascript, we rely on the <code> window.addEventListener("devicemotion")</code> that listens to the mo..."

New page

To detect the motion of devices where the web browser is running, using Javascript, we rely on the
<code> window.addEventListener("devicemotion")</code> that listens to the motion of the device.

=Example=
See it running in: http://publicationstation.wdka.hro.nl/motion/

==code==
<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<title>Acess browser accelerometer</title>
</head>

<body>
<div id="status"><a href=\"http://www.w3.org/TR/orientation-event/">http://www.w3.org/TR/orientation-event/</a> is supported.</div>
<br/><br/>
<div id="accelerometer">
<p><b>X</b>: <div id="x"></div></p>
<p><b>Y</b>: <div id="y"></div></p>
<p><b>Z</b>: <div id="z"></div></p>
</div>
<br/><br/>

<p>Example based on<a href="https://github.com/altermarkive/Learning-Sensor-Access-in-JS">Learning Sensor Access in JS</a> by altermarkive.</p>

<script type="text/javascript">

function motion(event){
$("div#x").html(event.accelerationIncludingGravity.x);
$("div#y").html(event.accelerationIncludingGravity.y);
$("div#z").html(event.accelerationIncludingGravity.z);
}

function go(){
if(window.DeviceMotionEvent){
window.addEventListener("devicemotion", motion, false);
// window.addEventListener does:
// * listen to device motion
// * at every update run motion function, to update the html
}else{
var status = document.getElementById("status");
status.innerHTML = status.innerHTML.replace(
"is supported", "is not supported"
);
}
}

$(document).ready(function(){
go();
})

</script>

</body>
</html>

</source>