Fun with sensorsAmsterdamJS 21 April 2015

@janjongboom

Telenor R&D

Mozilla things

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 });

Weight scale

BeaconsReal purpose: ads

BeaconsTag everyone with a beacon

Cross-reference facebook Phone alerts you who to talk to

Beacons 1 var Bleacon = require('bleacon'); 2 3 Bleacon.startScanning(); 4 5 Bleacon.on('discover', function(b) { 6 console.log('found', b.major, b.minor, b.distance); 7 });

Work in progress in Firefox OS & Firefox for Android (https://bugzilla.mozilla.org/show_bug.cgi?id=1063444)

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

JanOSFork of Firefox OS For phones & Rpi

Runs without display

Get hacking!

Grab a phone that has latest Chrome / Firefox

Use that sensor data

Think outside the box

Thank you!http://janjongboom.com

janos.io github.com/janjongboom/jsconf-asia