javascript makers: how js is helping drive the maker movement

45
JavaScript Makers: How JS is Helping Drive the Maker Movement 28 SEPT 2013 - 200ok Saturday, September 28, 13

Upload: jesse-cravens

Post on 28-Jan-2015

115 views

Category:

Technology


1 download

DESCRIPTION

JavaScript is now running everywhere, but one of the most fascinating areas is in the crossroads of full stack JavaScript and prototyping boards. Join frog hacker, Jesse Cravens, and his 6 year old son Carter Clearwater, in a talk about how the open hardware and software revolutions are accelerating the everyday hacker's ability to innovate. JavaScript's accessibility, friendly syntax, and asynchronous runtime, makes it the ideal programming language for makers of all levels, enabling a spectrum of entry points: those with experience in other languages can explore the more advance topics without being riddled with 'time-consuming' boilerplate, compilation, and multi-threading, while newbies and young learners can get started with a successful build in a matter of hours. Discover newer JavaScript APIs. Explore a suite of prototyping boards, such as Arduino, Raspberry Pi, Beaglebone, and the Freescale Freedom, that are inspiring JavaScript developers to step out of the web browser and into the world of physical computing, robotics, and hardware. Leave with not only some new ideas for yourself but also your children.

TRANSCRIPT

Page 1: JavaScript Makers: How JS is Helping Drive the Maker Movement

JavaScript Makers: How JS is Helping Drive the Maker Movement28 SEPT 2013 - 200ok

Saturday, September 28, 13

Page 2: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

If it can be imagined it can be made.

2

Saturday, September 28, 13

Page 3: JavaScript Makers: How JS is Helping Drive the Maker Movement

@jdcravensgithub.com/jessecravenshtml5hacks.comfrog

Saturday, September 28, 13

Page 4: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013 4

Saturday, September 28, 13

Page 5: JavaScript Makers: How JS is Helping Drive the Maker Movement

JavaScript MakersHow JS is helping drive the Maker Movement

Saturday, September 28, 13

Page 6: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

Capabilities Overview

Prototyping BoardsSensors and WebSocketActuators

PeripheralsLeap

DronesAR DroneWiFli

Virtual WorldsscriptCraftvoxel.js

JS Makers

6

Saturday, September 28, 13

Page 7: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

Educational/Fun

Beginner ProgrammingBeginner RoboticsBeginner Open Hardware/Electronics

JS Makers

7

Saturday, September 28, 13

Page 8: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

Making things always combines form with function, the art of making should be

appreciated and celebrated

8

Saturday, September 28, 13

Page 9: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

JS Makers

9

Saturday, September 28, 13

Page 10: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

12 - open hardware/software demos3- prototyping boards1 - drone1 - dissected chopper1 - virtual world1 - 6 year old son as my co-presenter100’s - packets over the network

What could possibly go wrong?

JS Makers

10

Saturday, September 28, 13

Page 11: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

@nonken@bassistance@voodootikigod@rwaldron@[email protected] many more

Path Pavers

11

Saturday, September 28, 13

Page 12: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

JavaScript Makers

Arduino Uno

12

Microcontroller board based on the ATmega328

Flash Memory 32 KB (ATmega328)SRAM 2 KB (ATmega328)

Clock Speed 16 MHz

Operating Voltage 5V

14 digital input/output pins6 analog inputs

USB connection

Saturday, September 28, 13

Page 13: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

JavaScript Makers

BeagleBone by TI

13

Processor720MHz super-scalar ARM Cortex-A8 (armv7a)3D graphics acceleratorARM Cortex-M3 for power management

ConnectivityUSB clientUSB hostEthernet2x 46 pin headers2x I2C, 5x UART, I2S, SPI, CAN, 66x 3.3V GPIO, 7x ADC

Software4GB microSD card with Angstrom DistributionCloud9 IDE on Node.JS with Bonescript library

Saturday, September 28, 13

Page 14: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

JavaScript Makers

Raspberry Pi

14

Processor700MHz ARM1176 JZF-S (armv6k) - overclock at 800MHzBroadcam VideoCore IV

ConnectivityUSB clientUSB hostEthernet17 GPIOs pins

SoftwareDebian as defaultWebIDE with Python Library

Saturday, September 28, 13

Page 15: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

matrix

prototyping boards

15

Saturday, September 28, 13

Page 16: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

JavaScript Makers

16

serialPort.on("open", function () { console.log('open'); serialPort.on('data', function(data) { console.log('data received: ' + data); });

serialPort.write("ls\n", function(err, results) { console.log('err ' + err); console.log('results ' + results); }); });

node-serialport

Saturday, September 28, 13

Page 17: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

JavaScript Makers

Arduino Interfacing with Beaglebone

17

Node.jsHTTP / WEB SOCKET SERVER

Serial

node-serialport firmata

HTTP

johnny-five

firmata.js

Node.jsHTTP / WEB SOCKET SERVER

Saturday, September 28, 13

Page 18: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

demo: Johnny2Beagle

18

Saturday, September 28, 13

Page 19: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

JavaScript Makers

trailr

19

Node.jsHTTP / WEB SOCKET SERVER

Node.jsHTTP / WEB SOCKET SERVER

Node.jsHTTP / WEB SOCKET SERVER

Saturday, September 28, 13

Page 20: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

lookin’ good:

extend with modules

tessel

20

var  tessel  =  require('tessel');var  servos  =  require('servo-­‐pca9685')    .connect(tessel.port('A'));    var  degrees  =  0;setInterval(function  ()  {    servos.moveServo(1,  degrees);    degrees  =  degrees  ==  0  ?  180  :  0;},  500);

var  rfid  =  require('rfid-­‐pn532')    .connect(tessel.port('b'),  function  ()  {        rfid.on('read',  function  (err,  data)  {            //  Read  data  whenever  a  card  is  read.            console.log('Read  a  card:',  data);        });    });

Saturday, September 28, 13

Page 21: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

interactive JS interpreter for Micro-controllersplug/play - no software to installcan be installed on other boards

espruino

21

Saturday, September 28, 13

Page 22: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

A most effective step in refining/developing a thing is collaborating with

others on it.

22

Saturday, September 28, 13

Page 23: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

trailr-remote push sketches over WebSocket

trailr-mesh R24 mesh network and node.js based server

trailr-admin app running on a central hub (Beaglebone)‘Floor Plan View’ with HTML5 Canvas

trailr-solar solar charge voltage divider

trailr

23

Saturday, September 28, 13

Page 24: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

HTML5 and the Internet of Things

24

Solar Charge

ACS715 Hall Effect sensor

Grape Solar 100-Watt Monocrystalline

Off-Grid PV Solar Panel

void loop() { // read the input on analog pin 0: int sensor0Value = analogRead(A0); float pinVoltage = sensor0Value * 0.00488; float battVoltage = pinVoltage * ((10+20)/10); // Vout = (R2/(R1+R2))//float solarPower = solarPanelVoltage * solarPanelCurrent;// P = V*I , power = voltage * current , measured in W i.e. 79% of 100W MAX capacity

Serial.print(battVoltage); Serial.println(" V - battery");}

Saturday, September 28, 13

Page 25: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

HTML5 and the Internet of Things

25

Solar ChargeGrape Solar 100-Watt Monocrystalline

Off-Grid PV Solar Panel

12V 10Amp Charge Controlller

Saturday, September 28, 13

Page 26: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

HTML5 and the Internet of Things

26

Solar Charge

Voltage Divider

Saturday, September 28, 13

Page 27: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

onboard, live HD video streamingauto stabilizerswifi enabled

nodecopter

27

Saturday, September 28, 13

Page 28: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

demo: AR-Drone Basics

28

Saturday, September 28, 13

Page 29: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

demo: AR-Drone WebFlight

29

Saturday, September 28, 13

Page 30: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

Begin with the end in mind.

30

Saturday, September 28, 13

Page 31: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

from wiFli to wiRide

31

node-wiFliInteractive Toy ConceptsAmazon refurb - $15

Saturday, September 28, 13

Page 32: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

demo: wiRide

32

Saturday, September 28, 13

Page 33: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

airspace - overview of the leapWebSocket serverJSON data format

leapjs

33

Saturday, September 28, 13

Page 34: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

demo: leapjs, console

34

Saturday, September 28, 13

Page 35: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

demo: web based visualizer

35

Saturday, September 28, 13

Page 36: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

demo: nodecopter-leap

36

Saturday, September 28, 13

Page 37: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

The first step in making a thing, is visualizing it.

37

Saturday, September 28, 13

Page 38: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

3D modeling - basics, building Objectsparent/child - workflowreading/phonics - signs, menusmath - replJS programming patterns - modular, async

scriptcraft

38

Saturday, September 28, 13

Page 39: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

demo: scriptCraft building blocks

39

Saturday, September 28, 13

Page 40: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

demo: math repl

40

Saturday, September 28, 13

Page 41: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

demo: reading sight words

41

Saturday, September 28, 13

Page 42: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

Create 3d voxel games like Minecraft in the browser with WebGL/JS

voxel.js

42

Saturday, September 28, 13

Page 43: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

demo: voxel creator

43

Saturday, September 28, 13

Page 44: JavaScript Makers: How JS is Helping Drive the Maker Movement

9 28 2013200ok 2013

200ok 2013

More than any other programming language JavaScript is helping drive the Maker movement.

As open hardware lowers the barrier of entry to electronics...

As 3D printing lowers the barrier of entry to manufacturing...

JavaScript lowers the barrier of entry to programming.

JavaScript Makers

44

Saturday, September 28, 13

Page 45: JavaScript Makers: How JS is Helping Drive the Maker Movement

© 2012 frog. All rights reserved.

Saturday, September 28, 13