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);

Location

PhoneGap leverages the HTML5 Geolocation capabilities with the following plugin: http://docs.phonegap.com/en/edge/cordova_geolocation_geolocation.md.html Install it:

		phonegap -d cordova plugin add org.apache.cordova.geolocation
		

if (navigator.geolocation) {

	navigator.geolocation.watchPosition(successCallback, errorCallback, {});

	function successCallback(currentPosition) {
		var lat = currentPosition.coords.latitude;
		var lon = currentPosition.coords.longitude;

		console.log(lat + " " + lon);				
	}
	
	function errorCallback(e) {
		console.log(e);
	}
}

Map

Basic Google Maps Usage (static maps)

var mapElem = document.getElementById('map');
mapElem.innerHTML = '<img src="http://maps.googleapis.com/maps/api/staticmap?markers=' + lat + ',' + long + '&zoom=20&size=300x300&sensor=false" />';					
		

Google Maps JavaScript API v3

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>

var mapOptions = {
  center: { lat: -34.397, lng: 150.644},
  zoom: 8
};

var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

<div id="map-canvas"></div>

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