Upload
jan-jongboom
View
1.031
Download
1
Embed Size (px)
DESCRIPTION
Presentation I gave during JSConf.asia 2014 in Singapore, about using sensors to do cool stuff.
Citation preview
Fun with sensorsJSConf.asia
20 November 2014
@janjongboom
Firefox OS…
@janjongboom
Evangelist
Firefox OS…
@janjongboom
Evangelist
ContributorFirefox OS…
@janjongboom
Evangelist
Contributor
Author
Firefox OS…
Before mobile revolution…Limited input methods
Vibration sensor?
Accelerometer?
Accelerometer?
Proximity Accelerometer Ambient Light Magnetometer Gyroscope Humidity Ambient Temperature Pressure Battery Cameras
Bend sensor
Internet of Things
Moves IHR SleepCycle
BORING!
WiFi ConnectionReal purpose: internet connection
Hide & Seek!Hider sets up a WiFi hotspot
Seekers use dBm to triangulate
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 };
Device LightReal purpose: adjust brightness
MusicTheremin is instrument
Use device light as tone frequency
Wave your hands and magic!
MusicTheremin is instrument
Use device light as tone frequency
Wave your hands and magic!
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
GyroscopeReal purpose: rotate screen
GyroscopeReal purpose: rotate screen
Track real life movementDraw 3D model of phones
Measure gyroscope data
Show real life state on screen
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);
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 });
AccelerometerReal purpose: Turn to mute
Juggling visualizerMeasure z-forces on device
Plot it in graph over time
Juggle with multiple devices
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 });
Linux Kernel
Linux Kernel
Gecko
Linux Kernel
Gecko HTML5UI
Linux Kernel
Gecko HTML5UI
Has all phone APIs in JS
Linux Kernel
Gecko
Has all phone APIs in JS
Linux Kernel
Gecko
Has all phone APIs in JS
Linux Kernel
Gecko JanOS
Has all phone APIs in JS
Linux Kernel
Gecko JanOS
Has all phone APIs in JS
JanOSAlternative to Firefox OS
Some batteries included
Need rooted Firefox OS phone with ADB enabled !
github.com/janjongboom/janos
Get hacking!Grab a phone that has latest Chrome / Firefox
Use that sensor data
Think outside the box
One more thing…
Small camera
Month long battery life
Timelapse & on-demand
@janjongboom
Thank you!http://janjongboom.com
github.com/janjongboom/jsconf-asia github.com/janjongboom/janos