Playing with sensors in Open Web Apps

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

Chris [email protected]@franciov

Credits:

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

http://goo.gl/FVhr5L

https://github.com/franciov/geo

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

http://goo.gl/NUfKQi

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

http://goo.gl/87QanF

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

http://goo.gl/87QanF

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”

});

http://goo.gl/Dzc59h

http://goo.gl/Dzc59h

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

Chris [email protected]@franciov

Credits: