With upcoming controllers like Espruino and Tessel as well as new, programmable input devices (leap motion, ocolus rift) and their respective JS-APIs, javascript is steadily evolving and shifting into the physical world. Felix will give a short introduction about the current state of "javascript in the real world" and bring some ideas and stuff to play with.

1. JAVASCRIPT
ALL THE THINGS
#HANNOVERJS 11/2013
!
!
!
!
!
!
!
!
!
@FELIXWAHNER / @NEUWAERTS_DE
!1

2. WHAT IS THIS TALK THIS ABOUT?
•
Javascript (obviously)
•
Things (literally)
!2

3. WHAT IS THIS TALK THIS ABOUT?
•
Javascript
• Frontend
• Server
•
•
Hardware
Things
•
•
Hardware
Gadgets
!3

4. WHAT IS THIS TALK THIS ABOUT?
•
Javascript
• Frontend
• Server
•
•
Hardware
Things
•
•
Hardware
Gadgets
!4

5. WHAT IS THIS TALK THIS ABOUT?
•
Javascript
• Frontend
• Server
•
•
Hardware
Things
•
•
Hardware
Gadgets
!5

6. WHAT IS THIS TALK THIS ABOUT?
•
Javascript
• Frontend
• Server
•
•
Hardware
Things
•
•
Hardware
Gadgets
!6

7. WHAT IS THIS TALK THIS ABOUT?
•
Javascript
• Frontend
• Server
•
•
Hardware
Things
•
•
Hardware
Gadgets
!7

8. LET ME INTRODUCE MYSELF
!8

9. THAT’S ME
•
Felix Wahner
•
@felixwahner
•
32 yrs old
•
Father, Designer, Frontend Developer, Fulltime Nerd
•
CTO @neuwaerts_de
•
blogs @ neuwaerts.de/emerge
!9

10. 10

11. 11

12. 12

13. ALRIGHT: LET’S GO!
!13

14. INTERNET OF THINGS
A BRIEF INTRODUCTION
•
A connection of „Things“ (real world objects) with
our beloved InternetsTM
•
Enriches all day life experience with Facebook like
counters awesome metadata and functionality
•
Will hopefully make our lives a lot easier
!14

15. RATHER OBVIOUS
EXAMPLES
Google Glass Image: http://www.aha-soft.com
!15

16. NOT SO OBVIOUS
EXAMPLES
http://commons.wikimedia.org/wiki/File:Cow_female_black_white.jpg
!16

17. NOT SO OBVIOUS
EXAMPLES
http://commons.wikimedia.org/wiki/File:Cow_female_black_white.jpg
A street sign that adjusts
its contents and
directions based
on user input:
!
!
http://breakfastny.com/points/
Dutch Company „Sparked“
is using wireless sensors on cattle
!
!
!
!
http://www.iotworks.com/#!sensors/c14wo
!17
Dominic Wilcox has created a fully
functional prototype pair of shoes that will
guide the wearer to any destination
!
!
!
http://dominicwilcox.com/portfolio/gpsshoe/

18. PROTOTYPING, PHYSICAL COMPUTING PLATFORMS AND
THE MAKER MOVEMENT
!18

19. IN THE BEGINNING THERE WAS
ARDUINO
• Created 2000 by Massimo Banzi
• Open Source Hardware and Software
• Extendable, Programmable
http://arduino.cc/
!19

20. !
RASPBERRY PI
• First version released in 2011
• credit-card-sized
single-board computer
http://www.raspberrypi.org/
!20

21. !
ESPRUINO
• 2013 (to be released)
• JavaScript interpreter for
microcontrollers
http://www.espruino.com/
!21

22. BONUS :)
MAKEY MAKEY
• An Invention Kit for Everyone
• Turn everyday objects into
touchpads and combine them with
the internet
http://www.makeymakey.com/
!22

23. BONUS :)
MAKEY MAKEY
http://www.makeymakey.com/ - Foto: http://www.flickr.com/photos/raster/8605560001/
!23

24. MORE INTERESTING DEVICES
I BROUGHT SOME WITH ME
FEEL FREE TO TRY THEM RIGHT HERE.
!24

25. !
LEAP MOTION
• Motion Sensing Device
• Browse the web, read articles,
flip through photos, and play
music just by lifting a finger
• API App ecosystem
https://www.leapmotion.com/ https://developer.leapmotion.com/ !25

26. !
SPHERO
• It's the world's first robotic ball
that you control with a tilt, touch,
or swing from your smartphone
or tablet
• API and SDK
www.gosphero.com https://developer.gosphero.com/
!26

27. !
OCULUS RIFT
• virtual reality head-mounted display
• API and SDK
http://www.oculusvr.com/ https://developer.oculusvr.com/
!27

28. …
!28

29. AND MANY MORE!
!29

30. NOTICED SOMETHING?
ALL THESE THINGS ARE EITHER
PROGRAMMABLE OR HAVE AN API
!30

31. NOTICED SOMETHING?
ALL THESE THINGS ARE EITHER
PROGRAMMABLE OR HAVE AN API
!31

32. SO LETS TALK ABOUT
ALL THE THINGS!
!32

33. SO LETS TALK ABOUT
ALL THE THINGS!
EXCEPT FOR THE COWS.
!33

34. SO LETS TALK ABOUT
JAVASCRIPT ALL THE THINGS!
!
!
!
… FINALLY! :)
!34

35. !
WHY JAVASCRIPT?
•
Easy to learn
•
Asynchronous
•
Popular, great Community
•
Awesome because it’s not C. :)
•
The last one might depend on who you’re talking to
!35

36. „Any application that can be written in JavaScript,
will eventually be written in JavaScript“
–Jeff Atwood / The Principle of Least Power
http://www.codinghorror.com/blog/2007/07/the-principle-of-least-power.html
!36

37. !
WHAT CAN BE DONE VIA JS?
Build the Frontend (if needed)
Build your Server/Services (i.e. with node.js)
End to end communication (WebRTC)
Hardware Read/Write (node-serialport)
!37

38. !
WHAT CAN BE DONE VIA JS?
Build the Frontend (if needed)
Build your Server/Services (i.e. with node.js)
End to end communication (WebRTC)
Hardware Read/Write (node-serialport)
!38

39. EXAMPLES LIBRARIES
!39

40. !
NODUINO
• A simple and flexible JavaScript
and Node.js Framework for accessing
basic Arduino controls from
Web Applications using HTML5,
Socket.IO and Node.js.
http://semu.github.io/noduino/
!40

41. !
NODUINO
var Noduino = new NoduinoObj({debug: true, host: 'http://
localhost:8090'}, Connector);
Noduino.connect(function(err, board) {
if (err) { return console.log(err); }
board.withButton({pin: 13}, function(err, Button) {
if (err) { return console.log(err); }
Button.on('push', function() }
console.log('Button pushed');
});
Button.push();
});
});
http://semu.github.io/noduino/
!41

42. !
JOHNNY FIVE
• Johnny-Five is an Open Source,
JavaScript Arduino programming
framework
• developed at Bocoup (yup: these
guys that contribute to almost all
major JS projects).
https://github.com/rwaldron/johnny-five http://bocoup.com/
!42

43. JOYSTICK CONTROLLED LASER
JOHNNY FIVE
var five = require(../lib/johnny-five.js),
board = five.Board({
debug: true
});
board.on(ready, function() {
var range, pan, tilt, joystick;
range = [ 0, 170 ];
// Servo to control panning
pan = five.Servo({
pin: 9,
range: range
});
// Servo to control tilt
tilt = five.Servo({
pin: 10,
range: range
});
// Joystick to control pan/tilt
// Read Analog 0, 1
// Limit events to every 100ms
joystick = five.Joystick({
pins: [ A0, A1 ],
freq: 100
});
// Center all servos
(five.Servos()).center();
joystick.on(axismove, function() {
tilt.move( Math.ceil(170 * this.fixed.y) );
pan.move( Math.ceil(170 * this.fixed.x) );
});
http://jsfiddle.net/rwaldron/YHb7A/show/light/
!43

44. !
NODE AR-DRONE
• An implementation of the
networking
protocols used by the Parrot
AR Drone 2.0.
https://github.com/felixge/node-ar-drone
!44

45. !
!
NODE AR-DRONE
var arDrone = require('ar-drone');
var client = arDrone.createClient();
!
client.takeoff();
!
client
.after(5000, function() {
this.clockwise(0.5);
})
.after(3000, function() {
this.stop();
this.land();
});
http://semu.github.io/noduino/
!45

46. !
NODE AR-DRONE: NODECOPTER
• „There’s a meet up for that!“
• http://nodecopter.com/
• @nodeCopter
https://github.com/felixge/node-ar-drone
!46

47. OK, THIS WAS QUITE A LOT OF
GEEKY GADGET STUFF. BUT HOW
DOES THIS FIT INTO MY
BUSINESS MODEL?
!47

48. BRITISH AIRWAYS
BILLBOARD CAMPAIGN
• Combines IoT with Classic Campaign
• Get’s a lot of „buzz“
• Would be easy to implement with JS:
• Flights API
• Kinect (node-kinect )
• Some very expensive large screen :)
http://mashable.com/2013/11/25/british-airways-billboard/ https://github.com/pgte/node-kinect
!48

49. CA
FASHION LIKE
• Shows 'Likes' on their respective
Clothing Racks
• Combines IoT with Classic Campaign
• Get’s a lot of „buzz“
• Would be easy to implement with JS:
• Facebook Graph-API
• Arduino Mini
• Some very cheap small led screens :)
http://infosthetics.com/archives/2012/05/ca_fashion_like_real-time_facebook_likes_shown_on_clothing_racks.html
!49

50. HYPOTHESIS
(TOUCH)SCREENS WILL DIE SOON
!50

51. HYPOTHESIS
THE INTERNET AND SENSORS WILL
INFILTRATE EVERYTHING
!51

52. HYPOTHESIS
THERE WILL BE NEW, MORE INTUITIVE,
MORE PRECISE INPUT AND OUTPUT DEVICES
!52

53. !
A FUTURE VISION
$(livingroom).bind( motion, function() {
$(this).find(lights).brightness(75%).dimAfter(120s);
});
http://www.voodootikigod.com/nodebots-the-rise-of-js-robotics/
!53

54. THANKS FOR LISTENING!
NOW GO BUILD SOMETHING AWESOME
BE SURE TO SHARE TWEET US ABOUT IT!
!54

55. QUESTIONS? FEEDBACK?
DROP ME A LINE:
@FELIXWAHNER
!
…AND BE SURE TO VISIT OUR BLOG. THERE WILL BE MORE
#IOT POSTS COMING SOON:
HTTP://NEUWAERTS.DE/EMERGE
!55