javascript in the real world
DESCRIPTION
Anything that can be written in JavaScript, will eventually be written in JavaScript. First client side web apps, then server side programs and now you can control hardware, embedded devices and even flying robots with JavaScript. We'll look at how you can get started writing JavaScript for Ardunio and Raspberry Pi to read sensors and control servos and build your own JavaScript powered robots. Presented at http://2013.full-frontal.org/TRANSCRIPT
Javascriptin the
real world
Andrew Nesbitt
@teabassgithub.com/andrew
Bertie
@BertramRabbitMr April 2014
Any application that can be written in JavaScript,
will eventually be written in JavaScript
patrick-wied.at/static/nudejs/
patrick-wied.at/static/nudejs/
reddit.com/r/atwoodslaw
BuildcatAlex Potsides
github.com/achingbrain/build-cat
Hardware hackingwith Javascript
Why JAvascript?
Higher Level
Async
Lower Barriers
Javascript is popular871,108 JS repos on github
Internet of things
Hardware
Arduino
Johnny-fivegithub.com/rwaldron/johnny-five
Firmata
var five = require("johnny-five"); var board = new five.Board(); board.on("ready", function() { led = new five.Led({ pin: 9 }); board.repl.inject({ led: led }); led.pulse(500); this.wait( 10000, function() { led.stop().off(); }); });
Kinect Controlled Arm
Biped Nodebot
Cat Laser Toy
Rabbit Laser Toy
var five = require("johnny-five"), board = new five.Board(); function randomFromInterval(from,to){ return Math.floor(Math.random()*(to-from+1)+from); } board.on("ready", function() { var servoX = new five.Servo(10); var servoY = new five.Servo(9); var laser = new five.Led(8); laser.on() setInterval(function(){ x = randomFromInterval(80, 120) y = randomFromInterval(95, 145) servoX.move(x) servoY.move(y) }, 400) })
DEMO
github.com/rwaldron/johnny-five
SparkfunInventors Kithobbytronics.co.uk/sparkfun-inventors-kit-v3
node-ardx.org
LEGO
EV3
var Ev3 = require ("ev3-nodejs-bt"); var Ev3_base = Ev3.base; var XboxController = require('xbox-controller'); var xbox = new XboxController; var robot = new Ev3_base("/dev/tty.EV3-SerialPort"); var maxAngle = 32768; var maxSpeed = 100; var speeds = { a: 0, b: 0, c: 0, d: 0 };
robot.connect(function(){ robot.start_program(function(ev3){ var setSpeed = function(){ var output = ev3.getOutputSequence(speeds.a,speeds.b,speeds.c,speeds.d); ev3.sp.write(output); } setInterval(setSpeed, 100) xbox.on('left:move', function(position){ var x = -(position.x / maxAngle)*-maxSpeed var y = (position.y / maxAngle)*-maxSpeed var left = y-x var right = y+x speeds.b = left speeds.a = right }) xbox.on('a:press', function(){ speeds.d = 100 }) xbox.on('a:release', function(){ speeds.d = 0 }) }); });
DEMO
github.com/andrew/node-ev3-robot
github.com/clebert/ev3
Linux running on lego
Nodecopter
Programmatic Flying Robots
HD Camera
Downfacing camera
Gyroscope
Wifi 1GHz CPU
Linux
Accelerometer Magnetometer
Ultrasound
github.com/felixge/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.animate('flipLeft', 15); }) .after(1000, function() { this.stop(); this.land(); });
QR CodeR
Dance Dance Drone
DEMO
WARNING
github.com/eschnou/ardrone-webflight
Quadcoptersas a
Service
robot laser pong
JavaSCript Microcontrollers
ArduinoYun
£70 £21 £30 £55
Lua based Tiny-jsNode.js or browser
Node.js
plug and play Hacker friendly Tiny computer Arduino++
JavaSCript Hardwarein the browser
In DevelopmentVibration apiAmbient light sensorProximity sensorTCP Socket APIwiki.mozilla.org/WebAPI
Future?UDP Datagram Socket APIWebNFCWebUSBWebBluetoothwiki.mozilla.org/WebAPI
whatwg.github.io/serial
Go forth and make robots
No animals were harmed in the making of this presentation
Thanks!
Bonus Content
Kinect Drone
NoDebots.io
MakeyMakey
Rabbit Photo Booth
<html><body> <video id="v" width="300" height="300" style="display:none;"></video> <canvas id="c" style="display:none;" width="300" height="300"></canvas> <div id='images'></div></body><script> var video = document.getElementById("v"), canvas = document.getElementById("c"), div = document.getElementById('images'); navigator.mozGetUserMedia({video: true}, function(stream) { video.src = window.URL.createObjectURL(stream); video.play() });
takePhoto = function(){ canvas.getContext("2d").drawImage(video, 0, 0, 300, 300); var img = canvas.toDataURL("image/png"); var image = new Image(); image.width = 320 image.height = 240 div.appendChild(image); image.src = img; } window.onkeypress = function(k){ if(k.charCode === 103){ takePhoto() } }</script></html>
