Playing with sensors in Open Web Apps
-
Upload
francesco-iovine -
Category
Software
-
view
257 -
download
6
description
Transcript of Playing with sensors in Open Web Apps
![Page 1: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/1.jpg)
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)
![Page 2: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/2.jpg)
Playing with sensorsin Open Web Apps
Francesco Iovine@franciov
Bologna, 17 Sep 2014
Firefox OS workshop
![Page 4: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/4.jpg)
I live in Rome
![Page 5: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/5.jpg)
This was my first presentation ...
![Page 6: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/6.jpg)
... and this my first mobile device
![Page 7: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/7.jpg)
I like attending tech conferences across Europe ...
![Page 8: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/8.jpg)
... and playing table football
![Page 9: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/9.jpg)
Network
Touch
Geolocation
Motion
Battery
Proximity
Media Capture
Media Recording
Ambient
Contacts
Calendar
Vibration
WebAPI / Device APIs
![Page 10: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/10.jpg)
TOUCH
![Page 11: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/11.jpg)
touchstart
touchmove
touchend
touchcancel
Touch Events
![Page 12: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/12.jpg)
Geolocation
![Page 13: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/13.jpg)
navigator.geolocation.getCurrentPosition(showMap)
function showMap(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// ...
}
Geolocation API
![Page 16: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/16.jpg)
https://developer.mozilla.org/en-US/Apps/Build/gather_and_modify_data/Plotting_yourself_on_the_map
Plotting yourself on the map
![Page 17: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/17.jpg)
CONTACTS
![Page 18: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/18.jpg)
window.navigator.mozContacts
window.navigator.mozContacts.getAll(options)
window.navigator.mozContacts.find(filter)
window.navigator.mozContacts.save(mozContact)
...
mozContacts
![Page 19: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/19.jpg)
{
"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
![Page 20: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/20.jpg)
![Page 21: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/21.jpg)
https://github.com/franciov/geo/tree/mdn_updating_phone_contacts_from_the_web
![Page 22: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/22.jpg)
https://developer.mozilla.org/en-US/Apps/Build/gather_and_modify_data/Updating_phone_contacts_from_the_web
Updating phone contactsfrom the web
![Page 23: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/23.jpg)
MOTION
![Page 24: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/24.jpg)
window.onorientationchange
window.ondeviceorientation
window.ondevicemotion
window.oncompassneedscalibration
DeviceOrientation Events
![Page 26: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/26.jpg)
https://github.com/franciov/rolling-ball
![Page 27: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/27.jpg)
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
![Page 28: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/28.jpg)
VIBRATION
![Page 29: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/29.jpg)
navigator.vibrate(1000);// or alternativelynavigator.vibrate([1000]);
navigator.vibrate([50, 100, 150]);
navigator.vibrate(0);// or alternativelynavigator.vibrate([]);
Vibration API
![Page 30: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/30.jpg)
BATTERY
![Page 31: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/31.jpg)
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
![Page 33: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/33.jpg)
https://github.com/franciov/low-energy-messenger
![Page 34: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/34.jpg)
https://developer.mozilla.org/en-US/Apps/Developing/gather_and_modify_data/retrieving_battery_status_information
Retrieving battery status information
![Page 35: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/35.jpg)
PROXIMITY
![Page 36: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/36.jpg)
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
![Page 38: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/38.jpg)
https://github.com/franciov/low-energy-messenger
![Page 39: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/39.jpg)
https://developer.mozilla.org/en-US/Apps/Build/gather_and_modify_data/Near_or_far_responding_to_proximity
Near of far?Responding to proximity
![Page 40: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/40.jpg)
AMBIENT
![Page 41: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/41.jpg)
window.ondevicelight = function(event) {
event.value // lux units
});
Ambient Light Events
window.onlightlevel = function(event) {
event.value // “dim”, “normal” or “bright”
});
![Page 44: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/44.jpg)
https://github.com/franciov/xmas-tales
![Page 45: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/45.jpg)
https://developer.mozilla.org/en-US/Apps/Build/gather_and_modify_data/Responding_to_light_conditions
Responding to light conditions
![Page 46: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/46.jpg)
Network
Touch
Geolocation
Motion
Battery
Proximity
Media Capture
Media Recording
Ambient
Contacts
Calendar
Vibration
WebAPI / Device APIs
![Page 47: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/47.jpg)
References
![Page 48: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/48.jpg)
https://developer.mozilla.org/en-US/docs/WebAPI
![Page 49: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/49.jpg)
www.w3.org/2009/dap/www.w3.org/2009/dap/wiki/ImplementationStatus
![Page 50: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/50.jpg)
http://docs.webplatform.org/wiki/apis/
![Page 51: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/51.jpg)
![Page 52: Playing with sensors in Open Web Apps](https://reader033.fdocuments.in/reader033/viewer/2022052905/55843559d8b42a84368b45b2/html5/thumbnails/52.jpg)
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?)