Fun with sensors - JSConf.asia 2014
-
Upload
jan-jongboom -
Category
Internet
-
view
1.032 -
download
1
description
Transcript of Fun with sensors - JSConf.asia 2014
![Page 1: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/1.jpg)
Fun with sensorsJSConf.asia
20 November 2014
![Page 2: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/2.jpg)
@janjongboom
Firefox OS…
![Page 3: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/3.jpg)
@janjongboom
Evangelist
Firefox OS…
![Page 4: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/4.jpg)
@janjongboom
Evangelist
ContributorFirefox OS…
![Page 5: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/5.jpg)
@janjongboom
Evangelist
Contributor
Author
Firefox OS…
![Page 6: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/6.jpg)
![Page 7: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/7.jpg)
Before mobile revolution…Limited input methods
![Page 8: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/8.jpg)
Vibration sensor?
![Page 9: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/9.jpg)
Accelerometer?
![Page 10: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/10.jpg)
Accelerometer?
![Page 11: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/11.jpg)
Proximity Accelerometer Ambient Light Magnetometer Gyroscope Humidity Ambient Temperature Pressure Battery Cameras
![Page 12: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/12.jpg)
Bend sensor
![Page 13: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/13.jpg)
Internet of Things
![Page 14: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/14.jpg)
Moves IHR SleepCycle
![Page 15: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/15.jpg)
BORING!
![Page 16: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/16.jpg)
![Page 17: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/17.jpg)
![Page 18: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/18.jpg)
![Page 19: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/19.jpg)
![Page 20: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/20.jpg)
WiFi ConnectionReal purpose: internet connection
![Page 21: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/21.jpg)
Hide & Seek!Hider sets up a WiFi hotspot
Seekers use dBm to triangulate
![Page 22: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/22.jpg)
Hide & Seek! 1 var req = navigator.mozWifiManager.getNetworks(); 2 req.onsuccess = function() { 3 var seeker = this.result.find(n => n.ssid === 'seeker'); 4 if (!seeker) { 5 console.log('Too far out!'); 6 } 7 else { 8 console.log(network.relSignalStrength); 9 } 10 };
![Page 23: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/23.jpg)
Device LightReal purpose: adjust brightness
![Page 24: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/24.jpg)
MusicTheremin is instrument
Use device light as tone frequency
Wave your hands and magic!
![Page 25: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/25.jpg)
MusicTheremin is instrument
Use device light as tone frequency
Wave your hands and magic!
![Page 26: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/26.jpg)
1 var context = new AudioContext(); 2 var oscillator = context.createOscillator(); 3 oscillator.connect(context.destination); 4 oscillator.start(0); 5 6 window.addEventListener('devicelight', function(e) { 7 oscillator.frequency.value = e.value * 10; 8 });
Music
![Page 27: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/27.jpg)
GyroscopeReal purpose: rotate screen
![Page 28: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/28.jpg)
GyroscopeReal purpose: rotate screen
![Page 29: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/29.jpg)
Track real life movementDraw 3D model of phones
Measure gyroscope data
Show real life state on screen
![Page 30: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/30.jpg)
![Page 31: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/31.jpg)
Track real life movement 1 var front = new THREE.MeshBasicMaterial({ map: loadTexture('front.jpg') }); 2 var back = new THREE.MeshBasicMaterial({ map: loadTexture('back.jpg') }); 3 var border = new THREE.MeshBasicMaterial({ color: 0xffe04526 }); 4 5 var materials = [ border, border, border, 6 border, front, back ]; 7 8 var geometry = new THREE.BoxGeometry(2, 4, 0.3); 9 var cube = new THREE.Mesh(geometry, 10 new THREE.MeshFaceMaterial(materials)); 11 scene.add(cube);
![Page 32: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/32.jpg)
Track real life movement
1 window.addEventListener('deviceorientation', function(e) { 2 cube.rotation.x = e.beta / 60; 3 cube.rotation.y = e.gamma / 60; 4 cube.rotation.z = e.alpha / 60; 5 });
![Page 33: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/33.jpg)
AccelerometerReal purpose: Turn to mute
![Page 34: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/34.jpg)
Juggling visualizerMeasure z-forces on device
Plot it in graph over time
Juggle with multiple devices
![Page 35: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/35.jpg)
Juggling visualizer
1 window.addEventListener('devicemotion', function(e) { 2 var serie = getGraphSerieForDevice(e.data.deviceId); 3 serie.addPoint([ e.data.timestamp, Math.abs(e.data.z) ]); 4 });
![Page 36: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/36.jpg)
![Page 37: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/37.jpg)
![Page 38: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/38.jpg)
Linux Kernel
![Page 39: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/39.jpg)
Linux Kernel
Gecko
![Page 40: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/40.jpg)
Linux Kernel
Gecko HTML5UI
![Page 41: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/41.jpg)
Linux Kernel
Gecko HTML5UI
Has all phone APIs in JS
![Page 42: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/42.jpg)
Linux Kernel
Gecko
Has all phone APIs in JS
![Page 43: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/43.jpg)
![Page 44: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/44.jpg)
![Page 45: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/45.jpg)
![Page 46: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/46.jpg)
![Page 47: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/47.jpg)
Linux Kernel
Gecko
Has all phone APIs in JS
![Page 48: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/48.jpg)
Linux Kernel
Gecko JanOS
Has all phone APIs in JS
![Page 49: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/49.jpg)
Linux Kernel
Gecko JanOS
Has all phone APIs in JS
![Page 50: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/50.jpg)
JanOSAlternative to Firefox OS
Some batteries included
Need rooted Firefox OS phone with ADB enabled !
github.com/janjongboom/janos
![Page 51: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/51.jpg)
![Page 52: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/52.jpg)
![Page 53: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/53.jpg)
Get hacking!Grab a phone that has latest Chrome / Firefox
Use that sensor data
Think outside the box
![Page 54: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/54.jpg)
One more thing…
![Page 55: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/55.jpg)
![Page 56: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/56.jpg)
Small camera
Month long battery life
Timelapse & on-demand
@janjongboom
![Page 57: Fun with sensors - JSConf.asia 2014](https://reader030.fdocuments.net/reader030/viewer/2022013011/559441811a28ab04258b45d2/html5/thumbnails/57.jpg)
Thank you!http://janjongboom.com
github.com/janjongboom/jsconf-asia github.com/janjongboom/janos