domcode 2015 - abusing phones to make the internet of things
TRANSCRIPT
abusing phones
DomCode 14 November 2015
to make the internet of things
@janjongboom
abusing phones
DomCode 14 November 2015
to make the internet of things
@janjongboom
@janjongboom
Telenor R&D
Developer Evangelist IoT
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!
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
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
GyroscopeReal purpose: rotate screen
GyroscopeReal purpose: rotate screen
Movement AnalyzerRead raw gyro data
Feed into machine learning
Live classify movement
http://blog.telenor.io/2015/10/26/machine-learning.html
Computer generated
music
http://gibber.mat.ucsb.edu/
1 a = Drums('x*o*x*o-')
Gibber
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 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', '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;
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
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
Bluetooth beaconsBroadcasting their existence
Bluetooth beaconsLong battery life
Cheap URLs, sensor values, etc.
JavaScript baby monitorTag your baby with a phone
Get three beacons Some math
JavaScript baby monitorTag your baby with a phone
Get three beacons Some math
Coming to a web browser near youhttps://bugzilla.mozilla.org/show_bug.cgi?id=1063444
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))
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))
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))
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))
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))
Physical WebWalk up and use anything
Physical Web beacon
Physical Web beacon
Physical Web beacon
http://goo.gl/a1b4cd
Physical Web beacon
http://goo.gl/a1b4cd
Everything got a URL
http://janjongboom.com
nRF51-DK
http://rollingspider.xyz/aa73bc21
Drone Web AppPhysical Web to discover
Web App gets reference to device Connect using WebBluetooth
Fly!
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 });
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 });
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 });
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!
-
Get hacking!
Thank you!http://janjongboom.com
github.com/janjongboom/(jsconf-asia|jsconf-us)