Fun with JavaScript and sensors - AmsterdamJS April 2015
-
Upload
jan-jongboom -
Category
Internet
-
view
197 -
download
0
Transcript of Fun with JavaScript and sensors - AmsterdamJS April 2015
![Page 1: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/1.jpg)
Fun with sensorsAmsterdamJS 21 April 2015
![Page 2: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/2.jpg)
@janjongboom
Telenor R&D
Mozilla things
![Page 3: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/3.jpg)
![Page 4: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/4.jpg)
Before mobile revolution…Limited input methods
![Page 5: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/5.jpg)
Vibration sensor?
![Page 6: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/6.jpg)
Accelerometer?
![Page 7: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/7.jpg)
Accelerometer?
![Page 8: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/8.jpg)
Proximity Accelerometer Ambient Light Magnetometer Gyroscope Humidity Ambient Temperature Pressure Battery Cameras
![Page 9: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/9.jpg)
Bend sensor
![Page 10: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/10.jpg)
Internet of Things
![Page 11: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/11.jpg)
Moves IHR SleepCycle
![Page 12: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/12.jpg)
BORING!
![Page 13: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/13.jpg)
![Page 14: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/14.jpg)
![Page 15: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/15.jpg)
![Page 16: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/16.jpg)
![Page 17: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/17.jpg)
WiFi ConnectionReal purpose: internet connection
![Page 18: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/18.jpg)
Hide & Seek!Hider sets up a WiFi hotspot
Seekers use dBm to triangulate
![Page 19: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/19.jpg)
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 };
![Page 20: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/20.jpg)
Device LightReal purpose: adjust brightness
![Page 21: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/21.jpg)
MusicTheremin is instrument
Use device light as tone frequency
Wave your hands and magic!
![Page 22: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/22.jpg)
MusicTheremin is instrument
Use device light as tone frequency
Wave your hands and magic!
![Page 23: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/23.jpg)
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
![Page 24: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/24.jpg)
GyroscopeReal purpose: rotate screen
![Page 25: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/25.jpg)
GyroscopeReal purpose: rotate screen
![Page 26: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/26.jpg)
Track real life movementDraw 3D model of phones
Measure gyroscope data
Show real life state on screen
![Page 27: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/27.jpg)
![Page 28: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/28.jpg)
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);
![Page 29: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/29.jpg)
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 });
![Page 30: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/30.jpg)
AccelerometerReal purpose: Turn to mute
![Page 31: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/31.jpg)
Juggling visualizerMeasure z-forces on device
Plot it in graph over time
Juggle with multiple devices
![Page 32: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/32.jpg)
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 });
![Page 33: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/33.jpg)
Weight scale
![Page 34: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/34.jpg)
BeaconsReal purpose: ads
![Page 35: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/35.jpg)
BeaconsTag everyone with a beacon
Cross-reference facebook Phone alerts you who to talk to
![Page 36: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/36.jpg)
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)
![Page 37: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/37.jpg)
![Page 38: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/38.jpg)
![Page 39: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/39.jpg)
Linux Kernel
![Page 40: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/40.jpg)
Linux Kernel
Gecko
![Page 41: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/41.jpg)
Linux Kernel
Gecko HTML5UI
![Page 42: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/42.jpg)
Linux Kernel
Gecko HTML5UI
Has all phone APIs in JS
![Page 43: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/43.jpg)
Linux Kernel
Gecko
Has all phone APIs in JS
![Page 44: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/44.jpg)
![Page 45: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/45.jpg)
![Page 46: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/46.jpg)
![Page 47: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/47.jpg)
![Page 48: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/48.jpg)
Linux Kernel
Gecko
Has all phone APIs in JS
![Page 49: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/49.jpg)
Linux Kernel
Gecko JanOS
Has all phone APIs in JS
![Page 50: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/50.jpg)
Linux Kernel
Gecko JanOS
Has all phone APIs in JS
![Page 51: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/51.jpg)
![Page 52: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/52.jpg)
JanOSFork of Firefox OS For phones & Rpi
Runs without display
![Page 53: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/53.jpg)
![Page 54: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/54.jpg)
![Page 55: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/55.jpg)
Get hacking!
Grab a phone that has latest Chrome / Firefox
Use that sensor data
Think outside the box
![Page 56: Fun with JavaScript and sensors - AmsterdamJS April 2015](https://reader038.fdocuments.in/reader038/viewer/2022110310/55a63e851a28ab70778b47f6/html5/thumbnails/56.jpg)
Thank you!http://janjongboom.com
janos.io github.com/janjongboom/jsconf-asia