playing with sensors in open web apps
DESCRIPTION
One of the main weaknesses of web applications is that browsers can access a limited set of device services, such as geolocation, device orientation etc. In this talk I will explore how the W3C and browser vendors are working together to enable the development of Open Web Apps that can access device hardware and sensors through Javascript. I will also show the code of example applications you can try directly on Firefox for your mobile devices.TRANSCRIPT
T3LAB via Sario Bassanelli, 9/11, > Bologna
Firefox OS WORKSHOPWednesday 17th September 2014 > 10:00 - 18:00
Register now!
www.t3lab.it/eventi
W O R K S H O P
Agenda >
Speakers >
10:00 Welcome!
10:15 Conference Time
Inside Firefox OS
Developing on Firefox OS for newbie
Playing with Sensors in Open Web Apps
14:00 Coding Time
organized by sponsored by
Francesco Iovine(Mozillian)
Daniele Scasciafratte(Mozillian)
Luca Greco(Mozillian)
Playing with sensorsin Open Web Apps
Francesco Iovine@franciov
Bologna, 17 Sep 2014
Firefox OS workshop
I live in Rome
This was my first presentation ...
... and this my first mobile device
I like attending tech conferences across Europe ...
... and playing table football
Network
Touch
Geolocation
Motion
Battery
Proximity
Media Capture
Media Recording
Ambient
Contacts
Calendar
Vibration
WebAPI / Device APIs
TOUCH
touchstart
touchmove
touchend
touchcancel
Touch Events
Geolocation
navigator.geolocation.getCurrentPosition(showMap)
function showMap(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// ...
}
Geolocation API
https://developer.mozilla.org/en-US/Apps/Build/gather_and_modify_data/Plotting_yourself_on_the_map
Plotting yourself on the map
CONTACTS
window.navigator.mozContacts
window.navigator.mozContacts.getAll(options)
window.navigator.mozContacts.find(filter)
window.navigator.mozContacts.save(mozContact)
...
mozContacts
{
"name": "Geo",
"description": "Geolocation web application",
"type": "privileged",
"launch_path": "/index.html",
"permissions": {
"contacts": {
"description": "Required for plotting contacts on the map",
"access": "readwrite"
}
}
}
manifest.webapp
https://github.com/franciov/geo/tree/mdn_updating_phone_contacts_from_the_web
https://developer.mozilla.org/en-US/Apps/Build/gather_and_modify_data/Updating_phone_contacts_from_the_web
Updating phone contactsfrom the web
MOTION
window.onorientationchange
window.ondeviceorientation
window.ondevicemotion
window.oncompassneedscalibration
DeviceOrientation Events
https://github.com/franciov/rolling-ball
https://developer.mozilla.org/en-US/Apps/Build/gather_and_modify_data/
Keep_it_level_responding_to_device_orientation_changes
Keep it level responding to device orientation changes
VIBRATION
navigator.vibrate(1000);// or alternativelynavigator.vibrate([1000]);
navigator.vibrate([50, 100, 150]);
navigator.vibrate(0);// or alternativelynavigator.vibrate([]);
Vibration API
BATTERY
navigator.battery.charging // true or falsenavigator.battery.level // from 0 to 1.0navigator.battery.chargingTime // seconds navigator.battery.dischargingTime // seconds
navigator.battery.onchargingchangenavigator.battery.onlevelchangenavigator.battery.ondischargingtimechange
Battery Status API
https://github.com/franciov/low-energy-messenger
https://developer.mozilla.org/en-US/Apps/Developing/gather_and_modify_data/retrieving_battery_status_information
Retrieving battery status information
PROXIMITY
window.ondeviceproximity = function(event) { event.value // current device proximity (cm) event.max // maximum sensing distance (cm) event.min // minimum sensing distance (cm)});
window.onuserproximity = function(event) { event.near // current user proximity state});
Proximity Events
https://github.com/franciov/low-energy-messenger
https://developer.mozilla.org/en-US/Apps/Build/gather_and_modify_data/Near_or_far_responding_to_proximity
Near of far?Responding to proximity
AMBIENT
window.ondevicelight = function(event) {
event.value // lux units
});
Ambient Light Events
window.onlightlevel = function(event) {
event.value // “dim”, “normal” or “bright”
});
https://github.com/franciov/xmas-tales
https://developer.mozilla.org/en-US/Apps/Build/gather_and_modify_data/Responding_to_light_conditions
Responding to light conditions
Network
Touch
Geolocation
Motion
Battery
Proximity
Media Capture
Media Recording
Ambient
Contacts
Calendar
Vibration
WebAPI / Device APIs
References
https://developer.mozilla.org/en-US/docs/WebAPI
www.w3.org/2009/dap/www.w3.org/2009/dap/wiki/ImplementationStatus
http://docs.webplatform.org/wiki/apis/
Photoshttps://www.flickr.com/photos/phototomcat/9658315475/thanks to Markus Leutwyler (markusleutwyler.com)http://instagram.com/ar_krayon (football table)
http://www.flickr.com/photos/kevandotorg/5837174879 (network)http://www.flickr.com/photos/htakashi/9754012931 (battery)http://www.flickr.com/photos/linkey/3400532620 (touch)http://www.flickr.com/photos/26733538@N08/3029266745 (motion)http://www.flickr.com/photos/petereed/3256701422 (geolocation)http://www.flickr.com/photos/ederfortunato/7998206930 (camera)http://www.flickr.com/photos/mattimattila/3299901660 (recording)http://www.flickr.com/photos/shuttercat7/418349082 (proximity)http://www.flickr.com/photos/pagedooley/7899921242 (ambient)http://www.flickr.com/photos/andreanix/2577986521 (contacts)http://www.flickr.com/photos/oschene/8334277572 (calendar)
http://www.flickr.com/photos/vividbreeze/480057824 (thankyou, questions?)
