Presentation I gave during JSConf.asia 2014 in Singapore, about using sensors to do cool stuff.

1. Fun with sensors
JSConf.asia
20 November 2014

2. @janjongboom
Firefox OS…

3. Evangelist
@janjongboom
Firefox OS…

4. Evangelist
Firefox OS… Contributor
@janjongboom

5. Evangelist
Contributor
Author
@janjongboom
Firefox OS…

7. Before mobile revolution…
Limited input methods

8. Vibration sensor?

9. Accelerometer?

10. Accelerometer?

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

12. Bend sensor

13. Internet of Things

14. Moves IHR SleepCycle

15. BORING!

20. WiFi Connection
Real purpose: internet connection

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

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

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

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

38. Linux
Kernel

39. Linux
Kernel
Gecko

40. Linux
Kernel
Gecko HTML5
UI

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

42. Linux
Kernel
Gecko
Has all phone APIs in JS

47. Linux
Kernel
Gecko
Has all phone APIs in JS

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

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

50. JanOS
Alternative to Firefox OS
Some batteries included
Need rooted Firefox OS phone
with ADB enabled
!
github.com/janjongboom/janos

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

54. One more thing…

56. Small camera
Month long battery life
Timelapse & on-demand
@janjongboom

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