Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Fun with sensors - JSConf.asia 2014

1,798 views

Published on

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

Published in: Internet
  • Be the first to comment

Fun with sensors - JSConf.asia 2014

  1. 1. Fun with sensors JSConf.asia 20 November 2014
  2. 2. @janjongboom Firefox OS…
  3. 3. Evangelist @janjongboom Firefox OS…
  4. 4. Evangelist Firefox OS… Contributor @janjongboom
  5. 5. Evangelist Contributor Author @janjongboom Firefox OS…
  6. 6. Before mobile revolution… Limited input methods
  7. 7. Vibration sensor?
  8. 8. Accelerometer?
  9. 9. Accelerometer?
  10. 10. Proximity Accelerometer Ambient Light Magnetometer Gyroscope Humidity Ambient Temperature Pressure Battery Cameras
  11. 11. Bend sensor
  12. 12. Internet of Things
  13. 13. Moves IHR SleepCycle
  14. 14. BORING!
  15. 15. WiFi Connection Real purpose: internet connection
  16. 16. Hide & Seek! Hider sets up a WiFi hotspot Seekers use dBm to triangulate
  17. 17. 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 };
  18. 18. Device Light Real purpose: adjust brightness
  19. 19. Music Theremin is instrument Use device light as tone frequency Wave your hands and magic!
  20. 20. Music Theremin is instrument Use device light as tone frequency Wave your hands and magic!
  21. 21. 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 });
  22. 22. Gyroscope Real purpose: rotate screen
  23. 23. Gyroscope Real purpose: rotate screen
  24. 24. Track real life movement Draw 3D model of phones Measure gyroscope data Show real life state on screen
  25. 25. 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);
  26. 26. 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 });
  27. 27. Accelerometer Real purpose: Turn to mute
  28. 28. Juggling visualizer Measure z-forces on device Plot it in graph over time Juggle with multiple devices
  29. 29. 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 });
  30. 30. Linux Kernel
  31. 31. Linux Kernel Gecko
  32. 32. Linux Kernel Gecko HTML5 UI
  33. 33. Linux Kernel Gecko HTML5 UI Has all phone APIs in JS
  34. 34. Linux Kernel Gecko Has all phone APIs in JS
  35. 35. Linux Kernel Gecko Has all phone APIs in JS
  36. 36. Linux Kernel Gecko JanOS Has all phone APIs in JS
  37. 37. Linux Kernel Gecko JanOS Has all phone APIs in JS
  38. 38. JanOS Alternative to Firefox OS Some batteries included Need rooted Firefox OS phone with ADB enabled ! github.com/janjongboom/janos
  39. 39. Get hacking! Grab a phone that has latest Chrome / Firefox Use that sensor data Think outside the box
  40. 40. One more thing…
  41. 41. Small camera Month long battery life Timelapse & on-demand @janjongboom
  42. 42. Thank you! http://janjongboom.com github.com/janjongboom/jsconf-asia github.com/janjongboom/janos

×