Presentation during JavaScript Framework Days in Kyiv, April 26 2015

1. Fun with JavaScript &
sensors
Jan Jongboom
Telenor Digital
Twitter: @janjongboom

2. Fun with sensors
JavaScript Framework Day
26 April 2015

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!

24. Weight scale

25. Device Light
Real purpose: adjust brightness

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

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

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

29. Gyroscope
Real purpose: rotate screen

30. Gyroscope
Real purpose: rotate screen

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

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

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

35. Beacons
Real purpose: ads

36. Beacons
Tag everyone with a beacon
Cross-reference facebook
Phone alerts you who to talk to

37. Beacons
1 var Bleacon = require('bleacon');
2
3 Bleacon.startScanning();
4
5 Bleacon.on('discover', function(b) {
6 console.log('found', b.major, b.minor, b.distance);
7 });
Work in progress in Firefox OS & Firefox for Android (https://bugzilla.mozilla.org/show_bug.cgi?id=1063444)

38. Accelerometer
Real purpose: Turn to mute

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

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

43. Linux
Kernel

44. Linux
Kernel
Gecko

45. Linux
Kernel
Gecko HTML5
UI

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

47. Linux
Kernel
Gecko
Has
all
phone
APIs
in
JS

52. Linux
Kernel
Gecko
Has all phone APIs in JS

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

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

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

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

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

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

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

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

62. -

63. -

64. Get hacking!
Grab a phone that has latest Chrome / Firefox
Use that sensor data
Think outside the box

65. Thank you!
http://janjongboom.com
janos.io
github.com/janjongboom/jsconf-asia