Firefox OSNDC

3 December 2014

…and the Internet of Things

@janjongboom

Firefox OS…

@janjongboom

Evangelist

Firefox OS…

@janjongboom

Evangelist

ContributorFirefox OS…

@janjongboom

Evangelist

ContributorFirefox OS…User

4,300,000,000

Network2013: 3G rollout in Bangladesh

BIGGERPROBLEM

Handsets12-14% smartphone penetration

Handsets12-14% smartphone penetration

but not enough...prices are dropping

...and OS makers focus on the upper end

Firefox OSSmartphone OS by Mozilla

“Awesome internet experience at low-cost hardware”

Launched in 201326 countries

Putting the web firstUnlike Android, iOS

Take the full content of the Android App Store

Take the full content of the Android App Store

Times 41,666

Take the full content of the Android App Store

Times 41,666That’s the amount of pages on the Google’able web (10-20% of full web)

Web is superior for informationAnd information develops a country

Building a smartphone for the open web

Goal of the project

Architecture

Architecture

A web page

Web page

Traditional model

A web page

Web page Browser

Traditional model

A web page

Web page Browser OS

Traditional model

A web page

Web page Browser OS Kernel

Traditional model

A web page

Web page Browser OS Kernel Phone

Traditional model

A web page

Web page Browser OS Kernel Phone

Firefox OS

A web page

Web page Browser Kernel Phone

Firefox OS

A web page

Web page Browser Kernel Phone

Firefox OS

Android 4.4 Firefox OS 1.3

Android 4.4 Firefox OS 1.3

512 MB

Android 4.4 Firefox OS 1.3

512 MB128 MB

Just a web browserApps? Offline? Payment?

No shortcutsEverything in the phone written in HTML5

1 var call = navigator.mozTelephony.dial('555123') 2 3 call.onconnected = function() { 4 call.hangUp() 5 }

Lifes are changing!

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

Maker movement is EVERYWHERE(Kickstarter, spaces, fairs, Wired)

€ 34,99

£ 20.46

Bluetooth, WiFi, 3G, 2 Cameras, GPS,

qHD touch screen

Bluetooth, WiFi, 3G, 2 Cameras, GPS,

qHD touch screen

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

First screwdriver ever!

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

Booting / flashing

$ make reset-phone && adb logcat

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta name="viewport" content="width=device-width, user-scalable=no, 5 initial-scale=1"> 6 <meta charset="utf-8"> 7 8 <script src="js/bootstrap.js"></script> 9 <script defer src="js/camera.js"></script> 10 <script defer src="js/security_cam.js"></script> 11 <script defer src="js/doorbell.js"></script> 12 <script defer src="js/bluetooth.js"></script> 13 <script defer src="js/tracker.js"></script> 14 </head> 16 <body> 17 <h1>OMG WELCOME TO JANOS 1.0!</h1> 18 </body> 19 </html>

about:app-manager

Security cameraEvery 5 seconds take photo

Save to storage (4GB!) or SD

Sync with cloud

Taking picture to storage

1 window.camera.takePicture('front').then(function(blob) { 2 var storage = navigator.getDeviceStorage('pictures'); 3 var req = storage.addNamed(blob, 'myawesomepicture.jpg'); 4 req.onsuccess = function() { 5 console.log('Saved on internal storage!'); 6 }; 7 });

Taking picture to storage

1 window.camera.takePicture('front').then(function(blob) { 2 var storage = navigator.getDeviceStorage('pictures'); 3 var req = storage.addNamed(blob, 'myawesomepicture.jpg'); 4 req.onsuccess = function() { 5 console.log('Saved on internal storage!'); 6 }; 7 });

Taking picture to storage

1 window.camera.takePicture('front').then(function(blob) { 2 var storage = navigator.getDeviceStorage('pictures'); 3 var req = storage.addNamed(blob, 'myawesomepicture.jpg'); 4 req.onsuccess = function() { 5 console.log('Saved on internal storage!'); 6 }; 7 });

Taking picture to storage

1 window.camera.takePicture('front').then(function(blob) { 2 var storage = navigator.getDeviceStorage('pictures'); 3 var req = storage.addNamed(blob, 'myawesomepicture.jpg'); 4 req.onsuccess = function() { 5 console.log('Saved on internal storage!'); 6 }; 7 });

DoorbellProximity sensor

Ring over bluetooth

Live video stream

Bluetooth doorbell

1 enableBluetoothAudio('00:0C:8A:75:EF:30').then(function() { 2 window.onuserproximity = function(e) { 3 if (e.near) { 4 var audio = new Audio('/sounds/doorbell.ogg'); 5 audio.play(); 6 } 7 }; 8 });

Bluetooth doorbell

1 enableBluetoothAudio('00:0C:8A:75:EF:30').then(function() { 2 window.onuserproximity = function(e) { 3 if (e.near) { 4 var audio = new Audio('/sounds/doorbell.ogg'); 5 audio.play(); 6 } 7 }; 8 });

Bluetooth doorbell

1 enableBluetoothAudio('00:0C:8A:75:EF:30').then(function() { 2 window.onuserproximity = function(e) { 3 if (e.near) { 4 var audio = new Audio('/sounds/doorbell.ogg'); 5 audio.play(); 6 } 7 }; 8 });

Bluetooth doorbell

1 enableBluetoothAudio('00:0C:8A:75:EF:30').then(function() { 2 window.onuserproximity = function(e) { 3 if (e.near) { 4 var audio = new Audio('/sounds/doorbell.ogg'); 5 audio.play(); 6 } 7 }; 8 });

Brian

BrianTracker™2G connection

Connected to push server

Geolocation on request

Get hacking

Get hackingGrab a rootable FxOS phone

Crack it open

Write your own scripts

PROFIT!

One more thing…

Small camera

JanOS powered

Timelapse & on-demand

@janjongboom

Thank you!http://janjongboom.com

github.com/janjongboom