HTML5 Device APIs

Tomomi Imura, @girlie_mac

HTML5 Device APIs

Tomomi Imura (@girlie_mac)

cat in dryer

https://flic.kr/p/54oAAr by James Cridlandb

Hello

my name is

Tomomi

@girlie_mac

Device APIs

Device APIs - Sensors

Geolocation

		
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success, fail);
}
function success(position) {
  alert('Latitude: '+ position.coords.latitude + 
  ', Longitude: '+ position.coords.longitude);
}
		

Device Orientation Events

Dev Opera (Diagram)


if (window.DeviceOrientationEvent) {
  window.addEventListener('deviceorientation', function(e) {
    compass   = e.alpha; // degree
	frontBack = e.beta;
	leftRight = e.gamma;
	...
  }, false);
} 
		

Partial support

4.2
3.0
18
10
14
12

User Cases

Can we re-create this iOS app in HTML5?

http://pizza-compass.com/

Demo: http://girliemac.github.com/sushi-compass

Battery Status API


var battery = navigator.battery || navigator.mozBattery;

battery.addEventListener('chargingchange', updateStatus);  
battery.addEventListener('levelchange', updateStatus);

function updateStatus() {  
  alert('Battery status: ' + battery.level * 100 + ' %');  
  if (battery.charging) {
    alert('Battery is charging...');   
  }
}  
		
14*
16

Battery Status API

Photo: demo on Firefox on Galaxy Nexus

http://goo.gl/V1n6h (Pictured: Firefox)

Vibration API


var vibrate = navigator.vibrate || navigator.mozVibrate;

// vibrate for 1sec
vibrate(1000); 

// vibrates for 1sec, still for 0.5 seconds, 
// and vibrates again for 2sec
vibrate([1000, 500, 2000]);
		
14*
16
30

Demo: http://goo.gl/SFzKaH

Ambient Light Events


window.addEventListener('devicelight', function(e) {
   alert(e.value);
});		
		
Returned value (in lux)My Observations
< 400Indoor
400-1000Office lighting. Outdoor (in foggy San Francisco)
> 1000Outdoor daylight (anywhere else in California)
15

Demo: http://codepen.io/girliemac/pen/pvmBs

Keep up to date

html5 mug

https://flic.kr/p/8tuc1u by randomliteraturecouncilb

Chromium Dashboard

IE Platform Status

Köszönöm!

Tomomi Imura

Fork me on Github