Talk I gave at April 21 at AmsterdamJS

1. Fun with sensors
AmsterdamJS
21 April 2015

2. @janjongboom
Telenor R&D
Mozilla things

4. Before mobile revolution…
Limited input methods

5. Vibration sensor?

6. Accelerometer?

7. Accelerometer?

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

9. Bend sensor

10. Internet of Things

11. Moves IHR SleepCycle

12. BORING!

17. WiFi Connection
Real purpose: internet connection

18. Hide & Seek!
Hider sets up a WiFi hotspot
Seekers use dBm to triangulate

19. Hide & Seek!
1 var req = navigator.mozWifiManager.getNetworks();
2 req.onsuccess = function() {
3 var seeker = this.result.find(n => n.ssid === 'seeker');
4 if (!seeker) {
5 console.log('Too far out!');
6 }
7 else {
8 console.log(network.relSignalStrength);
9 }
10 };

20. Device Light
Real purpose: adjust brightness

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

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

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

24. Gyroscope
Real purpose: rotate screen

25. Gyroscope
Real purpose: rotate screen

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

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

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

30. Accelerometer
Real purpose: Turn to mute

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

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

33. Weight scale

34. Beacons
Real purpose: ads

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

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

39. Linux
Kernel

40. Linux
Kernel
Gecko

41. Linux
Kernel
Gecko HTML5
UI

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

43. Linux
Kernel
Gecko
Has all phone APIs in JS

48. Linux
Kernel
Gecko
Has all phone APIs in JS

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

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

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

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

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