altering the real worldwith JavaScript

Jan Jongboom Framsia 23-09-2015

@janjongboom

Telenor R&D

Mozilla things

I hate JavaScript!

VBScript <3 <3 <3

BORING!

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

Computer generated

music

http://gibber.mat.ucsb.edu/

1 a = Drums('x*o*x*o-')

Gibber

Gibber 1 a = Drums('x*o*x*o-') 2 a.pitch = 0.5

Gibber 1 a = Drums('x*o*x*o-') 2 3 speak = Speak({ pitch: 70, wordgap:5 }) 4 .say.seq( 5 ['Mu', 'nich', 'Mu', 'Mu', 'nich'], 6 [1/2, 1/2, 1/4, 1/4, 1/2] 7 ) 8 9 speak.pitch.seq( [1,.8,1.2].rnd() ) 10 Clock.bpm = 120;

Gibber 1 a = Drums('x*o*x*o-') 2 3 speak = Speak({ pitch: 70, wordgap:5 }) 4 .say.seq( 5 ['Mu', 'nich'], 6 [1/4, 1/4, 1/4, 1/2].rnd() 7 ) 8 9 speak.pitch.seq( [1,.8,1.2].rnd() ) 10 Clock.bpm = 120;

Gibber 1 a = Drums('x*o*x*o-') 2 3 speak = Speak({ pitch: 70, wordgap:5 }) 4 .say.seq( 5 ['Mu', 'nich'], 6 [1/4, 1/4, 1/4, 1/2].rnd() 7 ) 8 9 speak.pitch.seq( [1,.8,1.2].rnd() ) 10 Clock.bpm = 120;

So much phones!

Gibber

Gibber 1 a = Drums('x*o*x*o-') 2 a.pitch = Phone.X

https://github.com/janjongboom/jsconf-us/blob/master/gibber/gibber-phone.js

Getting data out of thereal world

iBeaconsBroadcasting their existence

iBeaconsLong battery life

Cheap Unique identifier

Coming to a web browser near youhttps://bugzilla.mozilla.org/show_bug.cgi?id=1063444

Scanning beacons 1 var adapter = navigator.mozBluetooth.defaultAdapter 2 adapter.startLeScan([]).then(handle => { 3 handle.ondevicefound = e => { 4 // handle e.scanRecord 5 } 6 7 setTimeout(() => { 8 adapter.stopLeScan(handle) 9 }, 5000) 10 }, err => console.error(err))

JavaScript baby monitorTag your baby with a phone

Get three beacons Some math

Physical WebWalk up and use anything

Physical Web beacon

http://goo.gl/a1b4cd

http://rollingspider.xyz/aa73bc21

Drone Web AppPhysical Web to discover

Web App gets reference to device Connect using WebBluetooth

Fly!

10 // Set up the connection 11 e.device.gatt.connect().then(() => { 12 return e.device.gatt.discoverServices(); 13 }).then(() => { 14 // devices have services, and services have characteristics 15 var services = e.device.gatt.services; 16 console.log('services', services); 17 18 // find the characteristic that handles flying the drone 19 var c = services.reduce((curr, f) => curr.concat(f.characteristics), []) 20 .filter(c => c.uuid === '9a66fa0b-0800-9191-11e4-012d1540cb8e')[0]; 21 22 // take off instruction! 23 var buffer = new Uint8Array(0x04, counter++, 0x02, 0x00, 0x01, 0x00]); 24 c.writeValue(buffer).then(() => { 25 console.log('take off successful!'); 26 }); 27 });

-

Get hacking!Grab a phone and use sensor data

Take beacon or Nordic dev kit

WebBluetooth is coming! Be prepared!

Thank you!@janjongboom

https://github.com/janjongboom/(jsconf-asia|jsconf-us) https://hacks.mozilla.org/?p=29166