View
553
Download
0
Category
Tags:
Preview:
DESCRIPTION
The Device API is what enables web browsers to appear more "native", giving the browser access to new hardware components that are being created primarily in phones and tablets but on some desktops too. Motion and Orientation are well known features of the API, however there are a plethora of others to play with too. Let's take a tour through the jungle that is the Device API spec and go looking for some new, interesting features of the API. We'll focus on the ones that will be landing in mainstream browsers soon and that you can play with now in order to explore new interaction methods. Delivered at Web Directions Code 2014 - this presentation has all the notes from the session as well as links to videos of the demos. More information like code can be found at github.com/ajfisher/wdc
Citation preview
A Device API Safari
Andrew Fisher @ajfisher
Web Directions Code 1 May, 2014
Where the wild APIs live
Sensor API
Ambient Temperature
Ambient Humidity
Atmospheric Pressure
Sensor based content
Upgrade your NodeBot
Web NFC
Web NFC
Network APIs
Proximity API
DeviceProximityEvent
UserProximityEvent
DeviceProximityEvent
Event Object:
value; // distance detected
max; // maximum distance capable
min; // minimum distance capable
UserProximityEvent
Event Object:
near; // true if inside detection zone
Battery Status API
Battery Status API
chargingchange
chargingtimechange
dischargingtimechange
levelchange
Battery Status API
BatteryManager Object:
charging; // true if charging
chargingTime; // time to fully charged in seconds
dischargingTime; // time to flat in seconds
level ; // percent charged
[0..1]
ajf.io/wdc_battery
Leaving the wilderness
Vibration API
navigator.vibrate(msec);
navigator.vibrate([msec on, msec off, msec on, msec off..]);
navigator.vibrate(0);
ajf.io/wdc_racer
(video) https://www.youtube.com/watch?v=0AC_InC0QMA
ajf.io/wdc_vibroform
Ambient Light API
DeviceLight Event
Event Object:
value; // amount of light from sensor in lux
ajf.io/wdc_contrast
ajf.io/wdc_contrast
Recommended