Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Physical JavaScript with Johnny-5, Cylon and Te...
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
mulderp
September 24, 2014
Programming
1
1.1k
Physical JavaScript with Johnny-5, Cylon and Tessel
A small overview on the current state of JavaScript for physical computing
mulderp
September 24, 2014
Tweet
Share
More Decks by mulderp
See All by mulderp
Node.js for Embedded Systems
mulderp
1
2.8k
Nodebotsday
mulderp
1
140
I2C basics with Arduino
mulderp
0
230
Sharing hardware with JavaScript
mulderp
1
220
Arduino October meetup
mulderp
0
130
Blogging and writing about JavaScript
mulderp
2
940
Minimum Viable Interactions
mulderp
3
630
Arduino July Meetup
mulderp
0
110
Handlebones
mulderp
0
220
Other Decks in Programming
See All in Programming
Unicodeどうしてる? PHPから見たUnicode対応と他言語での対応についてのお伺い
youkidearitai
PRO
1
2.6k
カスタマーサクセス業務を変革したヘルススコアの実現と学び
_hummer0724
0
720
ノイジーネイバー問題を解決する 公平なキューイング
occhi
0
110
なるべく楽してバックエンドに型をつけたい!(楽とは言ってない)
hibiki_cube
0
140
CSC307 Lecture 04
javiergs
PRO
0
660
AIフル活用時代だからこそ学んでおきたい働き方の心得
shinoyu
0
140
MUSUBIXとは
nahisaho
0
140
Fluid Templating in TYPO3 14
s2b
0
130
AIと一緒にレガシーに向き合ってみた
nyafunta9858
0
250
「ブロックテーマでは再現できない」は本当か?
inc2734
0
1k
Rust 製のコードエディタ “Zed” を使ってみた
nearme_tech
PRO
0
200
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
shibayu36
2
4.4k
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
234
18k
SEO in 2025: How to Prepare for the Future of Search
ipullrank
3
3.3k
Game over? The fight for quality and originality in the time of robots
wayneb77
1
120
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
150
Rails Girls Zürich Keynote
gr2m
96
14k
SERP Conf. Vienna - Web Accessibility: Optimizing for Inclusivity and SEO
sarafernandez
1
1.3k
So, you think you're a good person
axbom
PRO
2
1.9k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.6k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
32
2.8k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Winning Ecommerce Organic Search in an AI Era - #searchnstuff2025
aleyda
1
1.9k
Data-driven link building: lessons from a $708K investment (BrightonSEO talk)
szymonslowik
1
920
Transcript
Physical NodeJS! with Johnny-5, Cylon and Tessel Patrick Mulder @mulpat
Munich Node JS User Group September 2014
https://www.flickr.com/photos/spelio/13884611917
ngraph http://anvaka.github.io/talks/jsfest/presentation
maker labs https://www.flickr.com/photos/leesean/3098869562
Source: Sander Arts, Atmel
“inspecting” your car https://vimeo.com/84498522
new browser controls https://www.flickr.com/photos/frenchhope/317111231 https://www.flickr.com/photos/bagogames/14073389239
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”
Arduino! 1x1
Arduino UNO MPU Digital Pins Analog Pins USB Power Pins
a “typical” project configuration blocking! code Processing IDE sketch
Embedded Code void setup() {! pinMode(led, OUTPUT);! }! ! void
loop() {! digitalWrite(led, HIGH);! delay(300);! digitalWrite(led, LOW); ! delay(2700); ! }
blink == blocking ? void loop() {! ! blink();! !
check_network();! move_something();! wait_for_input();! write_to_file();! }
–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
How would you write this with JavaScript ?
blink = function() {! led.toggle();! setTimeout(blink, 2700);! }! ! blink();
setTimeout(…)
setInterval(…) setInterval(function () {! led.toggle();! }, 2700);
https://github.com/rwaldron/johnny-five Johnny-5 API
Johnny-5 API this.repl.inject({! board: this! }); https://github.com/rwaldron/johnny-five/tree/master/docs led.fadeIn(); led.blink(100); //
or led.strobe() led.color(keymap[key.name]);
demo johnny-5 http://www.flickr.com/photos/tronixstuff/5268597956/
How can Arduino speak JavaScript ?
Firmata protocol “The aim is to allow people to completely
control the Arduino from software on the host computer.” http://www.firmata.org/wiki/Main_Page
firmata sketch
firmata test
control flow led = new five.Led({! pin: 13! });! !
led.on();! ! this.wait(2700, function() {! led.on();! }); JavaScript https://www.flickr.com/photos/nate/3081263606 Firmata /! serial port Arduino
Network? This means Arduino Yun…
None
Yun architecture
acts-as-webserver http://www.open-electronics.org/interact-and-remotely-control-arduino-yun-with-ajax/#
For developer, OpenWrt is the framework to build an application
without having to build a complete firmware around it + embedded host
Cylon.js http://cylonjs.com/
Cylon.js
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();
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 Wifi built in. Use it to easily make physical devices that connect to the web. http://www.slideshare.net/TechnicalMachine/fluent-20-min-32416115
How does it work? today tomorrow
Blink first 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);
physical JavaScript is fun :) still in early stages dedicated
platforms emerge
Thanks! http://blog.farsinotare.com https://oshpark.com/shared_projects/ZsQu0dA9 https://www.kickstarter.com/projects/311408456/rgb-123-led-matrices
None
None
https://iotroadshow.intel.com/de/home/