Physical JavaScript with Johnny-5, Cylon and Tessel

Slide 1

Slide 1 text

Physical NodeJS! with Johnny-5, Cylon and Tessel Patrick Mulder @mulpat Munich Node JS User Group September 2014

Slide 2

Slide 2 text

https://www.ﬂickr.com/photos/spelio/13884611917

Slide 3

Slide 3 text

ngraph http://anvaka.github.io/talks/jsfest/presentation

Slide 4

Slide 4 text

maker labs https://www.ﬂickr.com/photos/leesean/3098869562

Slide 5

Slide 5 text

Source: Sander Arts, Atmel

Slide 6

Slide 6 text

“inspecting” your car https://vimeo.com/84498522

Slide 7

Slide 7 text

new browser controls https://www.ﬂickr.com/photos/frenchhope/317111231 https://www.ﬂickr.com/photos/bagogames/14073389239

Slide 8

Slide 8 text

example: blinking http://makezine.com/2014/05/29/10-ways-to-make-your-robot-more-humanlike/ “The average human blink rate is about 17 blinks per minute.” (ca. 3 blinks/s) “The normal length of a blink is 100-400 milliseconds”

Slide 9

Slide 9 text

Arduino! 1x1

Slide 10

Slide 10 text

Arduino UNO MPU Digital Pins Analog Pins USB Power Pins

Slide 11

Slide 11 text

a “typical” project conﬁguration blocking! code Processing IDE sketch

Slide 12

Slide 12 text

Embedded Code void setup() {! pinMode(led, OUTPUT);! }! ! void loop() {! digitalWrite(led, HIGH);! delay(300);! digitalWrite(led, LOW); ! delay(2700); ! }

Slide 13

Slide 13 text

blink == blocking ? void loop() {! ! blink();! ! check_network();! move_something();! wait_for_input();! write_to_file();! }

Slide 14

Slide 14 text

–Eric Lippert “The by-design purpose of JavaScript was to make the monkey dance when you moused over it. ” http://programmers.stackexchange.com/a/221658/4723 JavaScript

Slide 15

Slide 15 text

How would you write this with JavaScript ?

Slide 16

Slide 16 text

blink = function() {! led.toggle();! setTimeout(blink, 2700);! }! ! blink(); setTimeout(…)

Slide 17

Slide 17 text

setInterval(…) setInterval(function () {! led.toggle();! }, 2700);

Slide 18

Slide 18 text

https://github.com/rwaldron/johnny-ﬁve Johnny-5 API

Slide 19

Slide 19 text

Johnny-5 API this.repl.inject({! board: this! }); https://github.com/rwaldron/johnny-ﬁve/tree/master/docs led.fadeIn(); led.blink(100); // or led.strobe() led.color(keymap[key.name]);

Slide 20

Slide 20 text

demo johnny-5 http://www.flickr.com/photos/tronixstuff/5268597956/

Slide 21

Slide 21 text

How can Arduino speak JavaScript ?

Slide 22

Slide 22 text

Firmata protocol “The aim is to allow people to completely control the Arduino from software on the host computer.” http://www.ﬁrmata.org/wiki/Main_Page

Slide 23

Slide 23 text

ﬁrmata sketch

Slide 24

Slide 24 text

ﬁrmata test

Slide 25

Slide 25 text

control ﬂow led = new five.Led({! pin: 13! });! ! led.on();! ! this.wait(2700, function() {! led.on();! }); JavaScript https://www.ﬂickr.com/photos/nate/3081263606 Firmata /! serial port Arduino

Slide 26

Slide 26 text

Network? This means Arduino Yun…

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Yun architecture

Slide 29

Slide 29 text

acts-as-webserver http://www.open-electronics.org/interact-and-remotely-control-arduino-yun-with-ajax/#

Slide 30

Slide 30 text

For developer, OpenWrt is the framework to build an application without having to build a complete ﬁrmware around it + embedded host

Slide 31

Slide 31 text

Cylon.js http://cylonjs.com/

Slide 32

Slide 32 text

Cylon.js

Slide 33

Slide 33 text

led blinking var Cylon = require('cylon');! ! Cylon.robot({! connection: {! name: 'arduino',! adaptor: 'firmata',! port: '/dev/ttyACM0'! },! ! devices: [! { name: 'led', driver: 'led', pin: 13 },! { name: 'button', driver: 'button', pin: 2 }! ],! ! work: function(my) {! my.button.on('push', function() {! my.led.toggle()! });! }! }).start();

Slide 34

Slide 34 text

http://www.slideshare.net/TechnicalMachine/tessel-the-end-of-web-development-as-we-know-it Tessel is a microcontroller that runs JavaScript. It's npm-compatible and ships with Wiﬁ built in. Use it to easily make physical devices that connect to the web. http://www.slideshare.net/TechnicalMachine/ﬂuent-20-min-32416115

Slide 35

Slide 35 text

How does it work? today tomorrow

Slide 36

Slide 36 text

Blink ﬁrst var tessel = require('tessel');! ! var gpioA = tessel.port['A'];! ! var led1 = gpioA.digital[0];! ! var value = true;! setInterval(function () {! led.write(value);! value = !value;! }, 2000);

Slide 37

Slide 37 text

physical JavaScript is fun :) still in early stages dedicated platforms emerge

Slide 38

Slide 38 text

Thanks! http://blog.farsinotare.com https://oshpark.com/shared_projects/ZsQu0dA9 https://www.kickstarter.com/projects/311408456/rgb-123-led-matrices