Fun with JavaScript & sensors

Jan Jongboom Telenor Digital

Twitter: @janjongboom

Fun with sensorsJavaScript Framework Day

26 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!

Weight scale

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

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

1 var conn = navigator.mozMobileConnections[0]; 2 conn.addEventListener('voicechange', function vc() { 3 if (conn.voice.connected) { 4 conn.removeEventListener('voicechange', vc); 5 6 var req = navigator.mozMobileMessage 7 .send('+31612345678', 'Hello from JanOS!'); 8 req.onsuccess = function() { 9 console.log('Message sent successfully'); 10 }; 11 req.onerror = function() { 12 console.error('Could not send SMS', req.error); 13 }; 14 } 15 });

1 var conn = navigator.mozMobileConnections[0]; 2 conn.addEventListener('voicechange', function vc() { 3 if (conn.voice.connected) { 4 conn.removeEventListener('voicechange', vc); 5 6 var req = navigator.mozMobileMessage 7 .send('+31612345678', 'Hello from JanOS!'); 8 req.onsuccess = function() { 9 console.log('Message sent successfully'); 10 }; 11 req.onerror = function() { 12 console.error('Could not send SMS', req.error); 13 }; 14 } 15 });

1 var conn = navigator.mozMobileConnections[0]; 2 conn.addEventListener('voicechange', function vc() { 3 if (conn.voice.connected) { 4 conn.removeEventListener('voicechange', vc); 5 6 var req = navigator.mozMobileMessage 7 .send('+31612345678', 'Hello from JanOS!'); 8 req.onsuccess = function() { 9 console.log('Message sent successfully'); 10 }; 11 req.onerror = function() { 12 console.error('Could not send SMS', req.error); 13 }; 14 } 15 });

1 var conn = navigator.mozMobileConnections[0]; 2 conn.addEventListener('voicechange', function vc() { 3 if (conn.voice.connected) { 4 conn.removeEventListener('voicechange', vc); 5 6 var req = navigator.mozMobileMessage 7 .send('+31612345678', 'Hello from JanOS!'); 8 req.onsuccess = function() { 9 console.log('Message sent successfully'); 10 }; 11 req.onerror = function() { 12 console.error('Could not send SMS', req.error); 13 }; 14 } 15 });

1 var conn = navigator.mozMobileConnections[0]; 2 conn.addEventListener('voicechange', function vc() { 3 if (conn.voice.connected) { 4 conn.removeEventListener('voicechange', vc); 5 6 var req = navigator.mozMobileMessage 7 .send('+31612345678', 'Hello from JanOS!'); 8 req.onsuccess = function() { 9 console.log('Message sent successfully'); 10 }; 11 req.onerror = function() { 12 console.error('Could not send SMS', req.error); 13 }; 14 } 15 });

-

-

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