This document discusses using sensors and device capabilities with JavaScript. It begins by describing the various sensors available on mobile devices like accelerometers and gyroscopes. It then provides examples of projects that utilize these sensors, such as using the light sensor to control an on-screen music player or tracking device movement to render a 3D model. The document also introduces JanOS, a fork of Firefox OS intended for phones and Raspberry Pi devices that provides access to phone APIs in JavaScript. It encourages attendees to experiment with sensors and think creatively about new uses.

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

5. Before mobile revolution…
Limited input methods

6. Vibration sensor?

7. Accelerometer?

8. Accelerometer?

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

10. Bend sensor

11. Internet of Things

12. Moves IHR SleepCycle

13. BORING!

18. Weight scale

19. Device Light
Real purpose: adjust brightness

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

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

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

23. Gyroscope
Real purpose: rotate screen

24. Gyroscope
Real purpose: rotate screen

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

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

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

29. Accelerometer
Real purpose: Turn to mute

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

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

32. Beacons
Real purpose: ads

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

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

37. Linux
Kernel

38. Linux
Kernel
Gecko

39. Linux
Kernel
Gecko HTML5
UI

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

41. Linux
Kernel
Gecko
Has
all
phone
APIs
in
JS

46. Linux
Kernel
Gecko
Has all phone APIs in JS

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

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

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

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

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

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

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

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

56. -

57. -

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

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