JavaScript in the Real World

Preview:

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/

Citation preview

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

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>

Recommended