DomCode 2015 - Abusing phones to make the internet of things
1 like1,438 views
The document discusses abusing phone sensors to create internet of things applications. It provides examples of using light, motion, and sound sensors to control music, visualize juggling, and generate computer music. It also covers using Bluetooth beacons and the physical web to discover and interact with devices, and a sample code for connecting to a drone over Bluetooth to control its flight. The overall message is about exploring creative ways to turn phones into interfaces for interactive experiences.
![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 });](https://image.slidesharecdn.com/domcode-151114145104-lva1-app6891/85/DomCode-2015-Abusing-phones-to-make-the-internet-of-things-24-320.jpg)
![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;](https://image.slidesharecdn.com/domcode-151114145104-lva1-app6891/85/DomCode-2015-Abusing-phones-to-make-the-internet-of-things-37-320.jpg)
![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;](https://image.slidesharecdn.com/domcode-151114145104-lva1-app6891/85/DomCode-2015-Abusing-phones-to-make-the-internet-of-things-38-320.jpg)
![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;](https://image.slidesharecdn.com/domcode-151114145104-lva1-app6891/85/DomCode-2015-Abusing-phones-to-make-the-internet-of-things-39-320.jpg)
![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;](https://image.slidesharecdn.com/domcode-151114145104-lva1-app6891/85/DomCode-2015-Abusing-phones-to-make-the-internet-of-things-40-320.jpg)
![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;](https://image.slidesharecdn.com/domcode-151114145104-lva1-app6891/85/DomCode-2015-Abusing-phones-to-make-the-internet-of-things-41-320.jpg)
![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))](https://image.slidesharecdn.com/domcode-151114145104-lva1-app6891/85/DomCode-2015-Abusing-phones-to-make-the-internet-of-things-65-320.jpg)
![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))](https://image.slidesharecdn.com/domcode-151114145104-lva1-app6891/85/DomCode-2015-Abusing-phones-to-make-the-internet-of-things-66-320.jpg)
![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))](https://image.slidesharecdn.com/domcode-151114145104-lva1-app6891/85/DomCode-2015-Abusing-phones-to-make-the-internet-of-things-67-320.jpg)
![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))](https://image.slidesharecdn.com/domcode-151114145104-lva1-app6891/85/DomCode-2015-Abusing-phones-to-make-the-internet-of-things-68-320.jpg)
![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))](https://image.slidesharecdn.com/domcode-151114145104-lva1-app6891/85/DomCode-2015-Abusing-phones-to-make-the-internet-of-things-69-320.jpg)
![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 });](https://image.slidesharecdn.com/domcode-151114145104-lva1-app6891/85/DomCode-2015-Abusing-phones-to-make-the-internet-of-things-83-320.jpg)
![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 });](https://image.slidesharecdn.com/domcode-151114145104-lva1-app6891/85/DomCode-2015-Abusing-phones-to-make-the-internet-of-things-84-320.jpg)
![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 });](https://image.slidesharecdn.com/domcode-151114145104-lva1-app6891/85/DomCode-2015-Abusing-phones-to-make-the-internet-of-things-85-320.jpg)
![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 });](https://image.slidesharecdn.com/domcode-151114145104-lva1-app6891/85/DomCode-2015-Abusing-phones-to-make-the-internet-of-things-86-320.jpg)
DomCode 2015 - Abusing phones to make the internet of things
- 1. abusing phones DomCode 14 November 2015 to make the internet of things @janjongboom
- 2. abusing phones DomCode 14 November 2015 to make the internet of things @janjongboom
- 6. Before mobile revolution… Limited input methods
- 11. Bend sensor
- 14. BORING!
- 18. Device Light Real purpose: adjust brightness
- 19. Music Theremin is instrument Use device light as tone frequency Wave your hands and magic!
- 20. Music Theremin is instrument Use device light as tone frequency Wave your hands and magic!
- 21. 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
- 22. Accelerometer Real purpose: Turn to mute
- 23. Juggling visualizer Measure z-forces on device Plot it in graph over time Juggle with multiple devices
- 24. 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 });
- 25. Weight scale
- 26. Gyroscope Real purpose: rotate screen
- 27. Gyroscope Real purpose: rotate screen
- 28. Movement Analyzer Read raw gyro data Feed into machine learning Live classify movement
- 33. 1 a = Drums('x*o*x*o-') Gibber
- 34. 1 a = Drums('x*o*x*o-') Gibber
- 35. Gibber 1 a = Drums('x*o*x*o-') 2 a.pitch = 0.5
- 36. Gibber 1 a = Drums('x*o*x*o-') 2 a.pitch = 0.5
- 37. 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;
- 38. 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;
- 39. 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;
- 40. 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;
- 41. 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;
- 42. So much phones!
- 44. Gibber
- 45. 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
- 46. 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
- 47. Getting data out of the real world
- 48. Bluetooth beacons Broadcasting their existence
- 49. Bluetooth beacons Long battery life Cheap URLs, sensor values, etc.
- 50. JavaScript baby monitor Tag your baby with a phone Get three beacons Some math
- 51. JavaScript baby monitor Tag your baby with a phone Get three beacons Some math
- 63. Coming to a web browser near you https://bugzilla.mozilla.org/show_bug.cgi?id=1063444
- 64. Coming to a web browser near you https://bugzilla.mozilla.org/show_bug.cgi?id=1063444
- 65. 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))
- 66. 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))
- 67. 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))
- 68. 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))
- 69. 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))
- 70. Physical Web Walk up and use anything
- 76. Everything got a URL
- 78. nRF51-DK
- 81. Drone Web App Physical Web to discover Web App gets reference to device Connect using WebBluetooth Fly!
- 82. Drone Web App Physical Web to discover Web App gets reference to device Connect using WebBluetooth Fly!
- 83. 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 });
- 84. 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 });
- 85. 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 });
- 86. 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 });
- 87. -
- 88. -
- 91. - Get hacking!
- 92. - Get hacking!