Presentation I gave June 2015 at DAHO.AM in Munich

1. abusing phones
DAHO.AM
12 June 2015
to make the internet of things
@janjongboom

2. abusing phones
DAHO.AM
12 June 2015
to make the internet of things
@janjongboom

3. @janjongboom
Telenor R&D
Mozilla things

6. I hate
JavaScript!

8. VBScript
<3 <3 <3

11. Before mobile revolution…
Limited input methods

12. Vibration sensor?

13. Accelerometer?

14. Accelerometer?

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

16. Bend sensor

17. Internet of Things

18. Moves IHR SleepCycle

19. BORING!

23. Device Light
Real purpose: adjust brightness

24. Music
Theremin is instrument
Use device light as tone frequency
Wave your hands and magic!

25. Music
Theremin is instrument
Use device light as tone frequency
Wave your hands and magic!

26. 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

27. Gyroscope
Real purpose: rotate screen

28. Gyroscope
Real purpose: rotate screen

29. Track real life movement
Draw 3D model of phones
Measure gyroscope data
Show real life state on screen

31. 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);

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

33. Accelerometer
Real purpose: Turn to mute

34. Juggling visualizer
Measure z-forces on device
Plot it in graph over time
Juggle with multiple devices

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

36. Weight scale

37. Computer generated
music

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

40. 1 a = Drums('x*o*x*o-')
Gibber

41. 1 a = Drums('x*o*x*o-')
Gibber

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

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

44. 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;

45. 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;

46. 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;

47. 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;

48. 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;

49. So much phones!

51. Gibber

52. 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

53. 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

54. Getting data out of the
real world

55. Bluetooth beacons
Broadcasting their existence

56. Bluetooth beacons
Long battery life
Cheap
URLs, sensor values, etc.

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

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

59. 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))

60. 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))

61. 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))

62. 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))

63. 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))

64. JavaScript baby monitor
Tag your baby with a phone
Get three beacons
Some math

65. JavaScript baby monitor
Tag your baby with a phone
Get three beacons
Some math

78. Linux
Kernel

79. Linux
Kernel
Gecko

80. Linux
Kernel
Gecko HTML5
UI

81. Linux
Kernel
Gecko HTML5
UI
Has all phone APIs in JS

82. Linux
Kernel
Gecko
Has all phone APIs in JS

84. First screwdriver ever!

106. Booting / flashing

109. Linux
Kernel
Gecko
Has all phone APIs in JS

110. Linux
Kernel
Gecko JanOS
Has all phone APIs in JS

111. Linux
Kernel
Gecko JanOS
Has all phone APIs in JS

113. JanOS
Fork of Firefox OS
For phones & Rpi
Runs without display

114. 1 var conn = navigator.mozMobileConnections[0];
2 conn.addEventListener('voicechange', function vc() {
3 if (conn.voice.connected) {
4 conn.removeEventListener('voicechange', vc);
5
6 var req = navigator.mozMobileMessage
7 .send('+31612345678', 'Hello from JanOS!');
8 req.onsuccess = function() {
9 console.log('Message sent successfully');
10 };
11 req.onerror = function() {
12 console.error('Could not send SMS', req.error);
13 };
14 }
15 });

115. 1 var conn = navigator.mozMobileConnections[0];
2 conn.addEventListener('voicechange', function vc() {
3 if (conn.voice.connected) {
4 conn.removeEventListener('voicechange', vc);
5
6 var req = navigator.mozMobileMessage
7 .send('+31612345678', 'Hello from JanOS!');
8 req.onsuccess = function() {
9 console.log('Message sent successfully');
10 };
11 req.onerror = function() {
12 console.error('Could not send SMS', req.error);
13 };
14 }
15 });

116. 1 var conn = navigator.mozMobileConnections[0];
2 conn.addEventListener('voicechange', function vc() {
3 if (conn.voice.connected) {
4 conn.removeEventListener('voicechange', vc);
5
6 var req = navigator.mozMobileMessage
7 .send('+31612345678', 'Hello from JanOS!');
8 req.onsuccess = function() {
9 console.log('Message sent successfully');
10 };
11 req.onerror = function() {
12 console.error('Could not send SMS', req.error);
13 };
14 }
15 });

117. 1 var conn = navigator.mozMobileConnections[0];
2 conn.addEventListener('voicechange', function vc() {
3 if (conn.voice.connected) {
4 conn.removeEventListener('voicechange', vc);
5
6 var req = navigator.mozMobileMessage
7 .send('+31612345678', 'Hello from JanOS!');
8 req.onsuccess = function() {
9 console.log('Message sent successfully');
10 };
11 req.onerror = function() {
12 console.error('Could not send SMS', req.error);
13 };
14 }
15 });

118. 1 var conn = navigator.mozMobileConnections[0];
2 conn.addEventListener('voicechange', function vc() {
3 if (conn.voice.connected) {
4 conn.removeEventListener('voicechange', vc);
5
6 var req = navigator.mozMobileMessage
7 .send('+31612345678', 'Hello from JanOS!');
8 req.onsuccess = function() {
9 console.log('Message sent successfully');
10 };
11 req.onerror = function() {
12 console.error('Could not send SMS', req.error);
13 };
14 }
15 });

119. -

120. -

121. Get hacking!
Grab a phone that has latest Chrome / Firefox
Use that sensor data
Think outside the box
Or buy a ZTE Open C for 60 euro's and break it!

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