Always On, Always Connected Week 5

Touch

Example:

			var element = document.getElementById('someelement');

			element.addEventListener('touchstart', touchStart, false);
			element.addEventListener('touchmove', touchMove, false);
			element.addEventListener('touchend', touchEnd, false);
			
			function touchStart(evt) {
				for (var i = 0; i < evt.touches.length; i++) {
					console.log("Touch Start: " + evt.touches[i].pageX + " " + evt.touches[i].pageY);
				}
			}
			
			function touchMove(evt) {
				for (var i = 0; i  < evt.touches.length; i++) {
					console.log("Touch Move: " + evt.touches[i].pageX + " " + evt.touches[i].pageY);
				}			
			}
			
			function touchEnd(evt) {
				for (var i = 0; i < evt.touches.length; i++) {
					console.log("Touch End: " + evt.touches[i].pageX + " " + evt.touches[i].pageY);
				}			
			}				
		
		

Drawing

The HTML5 Canvas

<canvas id="mycanvas"></canvas>
		

// Get access to the canvas and fill it red
var canvas = document.getElementById('mycanvas');
var context = canvas.getContext('2d');
context.fillStyle="#FF0000";
context.fillRect(0,0,canvas.width,canvas.height);		
		

Orientation

Gives us portrait or landscape information

        
window.addEventListener('orientationchange', onOrientationChange, false);

function onOrientationChange(evt) {
	console.log("Orientation Change: " + window.orientation);
}
        

Rotation

Around X, Y, Z Axis

function onOrientationChange(evt) {
	var alpha = evt.alpha;
	var beta = evt.beta;
	var gamma = evt.gamma;

	console.log(Math.floor(alpha) + " " + Math.floor(beta) + " " + Math.floor(gamma));
}

window.addEventListener('deviceorientation', onOrientationChange, false);
		

Accelerometer

function ondevicemotion(e) {
	var x = e.acceleration.x;
	var y = e.acceleration.y;
	var z = e.acceleration.z;

	console.log(x + " " + y + " " + z);
}

window.addEventListener('devicemotion', ondevicemotion, false);

More Information: Sense and sensor-bility: access mobile device sensors with JavaScript