Talk I gave during DomCode 2015 in Utrecht, about sensor usage, drones, web 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

4. @janjongboom
Telenor R&D
Developer Evangelist IoT

6. Before mobile revolution…
Limited input methods

7. Vibration sensor?

8. Accelerometer?

9. Accelerometer?

10. Proximity
Accelerometer
Ambient Light
Magnetometer
Gyroscope
Humidity
Ambient Temperature
Pressure
Battery
Cameras

11. Bend sensor

12. Internet of Things

13. Moves IHR SleepCycle

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

29. http://blog.telenor.io/2015/10/26/machine-learning.html

30. Computer generated
music

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

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

71. Physical Web beacon

72. Physical Web beacon

73. Physical Web beacon
http://goo.gl/a1b4cd

74. Physical Web beacon
http://goo.gl/a1b4cd

76. Everything got a URL

77. http://janjongboom.com

78. nRF51-DK

80. http://rollingspider.xyz/aa73bc21

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!

93. Thank you!
http://janjongboom.com
github.com/janjongboom/(jsconf-asia|jsconf-us)