fun with sensors - jsconf.asia 2014

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