Framsia Meetup 23 september 2015 For more drone info: https://hacks.mozilla.org/2015/08/flying-a-drone-in-your-browser-with-webbluetooth/

1. altering the real world
with JavaScript
Jan Jongboom
Framsia 23-09-2015

2. @janjongboom
Telenor R&D
Mozilla things

3. I hate
JavaScript!

4. VBScript
<3 <3 <3

7. BORING!

9. Accelerometer
Real purpose: Turn to mute

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

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

12. Weight scale

13. Computer generated
music

15. http://gibber.mat.ucsb.edu/

16. 1 a = Drums('x*o*x*o-')
Gibber

17. Gibber
1 a = Drums('x*o*x*o-')
2 a.pitch = 0.5

18. Gibber
1 a = Drums('x*o*x*o-')
2
3 speak = Speak({ pitch: 70, wordgap:5 })
4 .say.seq(
5 ['Mu', 'nich', 'Mu', 'Mu', 'nich'],
6 [1/2, 1/2, 1/4, 1/4, 1/2]
7 )
8
9 speak.pitch.seq( [1,.8,1.2].rnd() )
10 Clock.bpm = 120;

19. Gibber
1 a = Drums('x*o*x*o-')
2
3 speak = Speak({ pitch: 70, wordgap:5 })
4 .say.seq(
5 ['Mu', 'nich'],
6 [1/4, 1/4, 1/4, 1/2].rnd()
7 )
8
9 speak.pitch.seq( [1,.8,1.2].rnd() )
10 Clock.bpm = 120;

20. Gibber
1 a = Drums('x*o*x*o-')
2
3 speak = Speak({ pitch: 70, wordgap:5 })
4 .say.seq(
5 ['Mu', 'nich'],
6 [1/4, 1/4, 1/4, 1/2].rnd()
7 )
8
9 speak.pitch.seq( [1,.8,1.2].rnd() )
10 Clock.bpm = 120;

21. So much phones!

23. Gibber

24. Gibber
1 a = Drums('x*o*x*o-')
2 a.pitch = Phone.X
https://github.com/janjongboom/jsconf-us/blob/master/gibber/gibber-phone.js

25. Getting data out of the
real world

26. iBeacons
Broadcasting their existence

27. iBeacons
Long battery life
Cheap
Unique identifier

28. Coming to a web browser near you
https://bugzilla.mozilla.org/show_bug.cgi?id=1063444

29. Scanning beacons
1 var adapter = navigator.mozBluetooth.defaultAdapter
2 adapter.startLeScan([]).then(handle => {
3 handle.ondevicefound = e => {
4 // handle e.scanRecord
5 }
6
7 setTimeout(() => {
8 adapter.stopLeScan(handle)
9 }, 5000)
10 }, err => console.error(err))

30. JavaScript baby monitor
Tag your baby with a phone
Get three beacons
Some math

32. Physical Web
Walk up and use anything

33. Physical Web beacon
http://goo.gl/a1b4cd

35. http://rollingspider.xyz/aa73bc21

36. Drone Web App
Physical Web to discover
Web App gets reference to device
Connect using WebBluetooth
Fly!

37. 10 // Set up the connection
11 e.device.gatt.connect().then(() => {
12 return e.device.gatt.discoverServices();
13 }).then(() => {
14 // devices have services, and services have characteristics
15 var services = e.device.gatt.services;
16 console.log('services', services);
17
18 // find the characteristic that handles flying the drone
19 var c = services.reduce((curr, f) => curr.concat(f.characteristics), [])
20 .filter(c => c.uuid === '9a66fa0b-0800-9191-11e4-012d1540cb8e')[0];
21
22 // take off instruction!
23 var buffer = new Uint8Array(0x04, counter++, 0x02, 0x00, 0x01, 0x00]);
24 c.writeValue(buffer).then(() => {
25 console.log('take off successful!');
26 });
27 });

38. -

40. Get hacking!
Grab a phone and use sensor data
Take beacon or Nordic dev kit
WebBluetooth is coming! Be prepared!

41. Thank you!
@janjongboom
https://github.com/janjongboom/(jsconf-asia|jsconf-us)
https://hacks.mozilla.org/?p=29166