Upgrade to Pro — share decks privately, control downloads, hide ads and more …

JavaScript Makers

Jesse Cravens
September 28, 2013

JavaScript Makers

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.

Jesse Cravens

September 28, 2013
Tweet

More Decks by Jesse Cravens

Other Decks in Technology

Transcript

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

    View full-size slide

  2. 9 28 2013
    200ok 2013
    200ok 2013
    If it can be imagined it can be made.
    2
    Saturday, September 28, 13

    View full-size slide

  3. @jdcravens
    github.com/jessecravens
    html5hacks.com
    frog
    Saturday, September 28, 13

    View full-size slide

  4. 9 28 2013
    200ok 2013 4
    Saturday, September 28, 13

    View full-size slide

  5. JavaScript Makers
    How JS is helping drive the Maker Movement
    Saturday, September 28, 13

    View full-size slide

  6. 9 28 2013
    200ok 2013
    200ok 2013
    Capabilities Overview
    Prototyping Boards
    Sensors and WebSocket
    Actuators
    Peripherals
    Leap
    Drones
    AR Drone
    WiFli
    Virtual Worlds
    scriptCraft
    voxel.js
    JS Makers
    6
    Saturday, September 28, 13

    View full-size slide

  7. 9 28 2013
    200ok 2013
    200ok 2013
    Educational/Fun
    Beginner Programming
    Beginner Robotics
    Beginner Open Hardware/Electronics
    JS Makers
    7
    Saturday, September 28, 13

    View full-size slide

  8. 9 28 2013
    200ok 2013
    200ok 2013
    Making things always combines form
    with function, the art of making should be
    appreciated and celebrated
    8
    Saturday, September 28, 13

    View full-size slide

  9. 9 28 2013
    200ok 2013
    200ok 2013
    JS Makers
    9
    Saturday, September 28, 13

    View full-size slide

  10. 9 28 2013
    200ok 2013
    200ok 2013
    12 - open hardware/software demos
    3- prototyping boards
    1 - drone
    1 - dissected chopper
    1 - virtual world
    1 - 6 year old son as my co-presenter
    100’s - packets over the network
    What could possibly go wrong?
    JS Makers
    10
    Saturday, September 28, 13

    View full-size slide

  11. 9 28 2013
    200ok 2013
    200ok 2013
    @nonken
    @bassistance
    @voodootikigod
    @rwaldron
    @walter
    @maxogden
    ...and many more
    Path Pavers
    11
    Saturday, September 28, 13

    View full-size slide

  12. 9 28 2013
    200ok 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 pins
    6 analog inputs
    USB connection
    Saturday, September 28, 13

    View full-size slide

  13. 9 28 2013
    200ok 2013
    JavaScript Makers
    BeagleBone by TI
    13
    Processor
    720MHz super-scalar ARM Cortex-A8 (armv7a)
    3D graphics accelerator
    ARM Cortex-M3 for power management
    Connectivity
    USB client
    USB host
    Ethernet
    2x 46 pin headers
    2x I2C, 5x UART, I2S, SPI,
    CAN, 66x 3.3V GPIO, 7x ADC
    Software
    4GB microSD card with Angstrom Distribution
    Cloud9 IDE on Node.JS with Bonescript library
    Saturday, September 28, 13

    View full-size slide

  14. 9 28 2013
    200ok 2013
    JavaScript Makers
    Raspberry Pi
    14
    Processor
    700MHz ARM1176 JZF-S (armv6k) - overclock at 800MHz
    Broadcam VideoCore IV
    Connectivity
    USB client
    USB host
    Ethernet
    17 GPIOs pins
    Software
    Debian as default
    WebIDE with Python Library
    Saturday, September 28, 13

    View full-size slide

  15. 9 28 2013
    200ok 2013
    200ok 2013
    matrix
    prototyping boards
    15
    Saturday, September 28, 13

    View full-size slide

  16. 9 28 2013
    200ok 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

    View full-size slide

  17. 9 28 2013
    200ok 2013
    JavaScript Makers
    Arduino Interfacing with Beaglebone
    17
    Node.js
    HTTP / WEB SOCKET SERVER
    Serial
    node-serialport firmata
    HTTP
    johnny-five
    firmata.js
    Node.js
    HTTP / WEB SOCKET SERVER
    Saturday, September 28, 13

    View full-size slide

  18. 9 28 2013
    200ok 2013
    200ok 2013
    demo: Johnny2Beagle
    18
    Saturday, September 28, 13

    View full-size slide

  19. 9 28 2013
    200ok 2013
    JavaScript Makers
    trailr
    19
    Node.js
    HTTP / WEB SOCKET SERVER
    Node.js
    HTTP / WEB SOCKET SERVER
    Node.js
    HTTP / WEB SOCKET SERVER
    Saturday, September 28, 13

    View full-size slide

  20. 9 28 2013
    200ok 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

    View full-size slide

  21. 9 28 2013
    200ok 2013
    200ok 2013
    interactive JS interpreter for Micro-controllers
    plug/play - no software to install
    can be installed on other boards
    espruino
    21
    Saturday, September 28, 13

    View full-size slide

  22. 9 28 2013
    200ok 2013
    200ok 2013
    A most effective step in refining/
    developing a thing is collaborating with
    others on it.
    22
    Saturday, September 28, 13

    View full-size slide

  23. 9 28 2013
    200ok 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

    View full-size slide

  24. 9 28 2013
    200ok 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

    View full-size slide

  25. 9 28 2013
    200ok 2013
    HTML5 and the Internet of Things
    25
    Solar Charge
    Grape Solar 100-Watt Monocrystalline
    Off-Grid PV Solar Panel
    12V 10Amp Charge Controlller
    Saturday, September 28, 13

    View full-size slide

  26. 9 28 2013
    200ok 2013
    HTML5 and the Internet of Things
    26
    Solar Charge
    Voltage Divider
    Saturday, September 28, 13

    View full-size slide

  27. 9 28 2013
    200ok 2013
    200ok 2013
    onboard, live HD video streaming
    auto stabilizers
    wifi enabled
    nodecopter
    27
    Saturday, September 28, 13

    View full-size slide

  28. 9 28 2013
    200ok 2013
    200ok 2013
    demo: AR-Drone Basics
    28
    Saturday, September 28, 13

    View full-size slide

  29. 9 28 2013
    200ok 2013
    200ok 2013
    demo: AR-Drone WebFlight
    29
    Saturday, September 28, 13

    View full-size slide

  30. 9 28 2013
    200ok 2013
    200ok 2013
    Begin with the end in mind.
    30
    Saturday, September 28, 13

    View full-size slide

  31. 9 28 2013
    200ok 2013
    200ok 2013
    from wiFli to wiRide
    31
    node-wiFli
    Interactive Toy Concepts
    Amazon refurb - $15
    Saturday, September 28, 13

    View full-size slide

  32. 9 28 2013
    200ok 2013
    200ok 2013
    demo: wiRide
    32
    Saturday, September 28, 13

    View full-size slide

  33. 9 28 2013
    200ok 2013
    200ok 2013
    airspace - overview of the leap
    WebSocket server
    JSON data format
    leapjs
    33
    Saturday, September 28, 13

    View full-size slide

  34. 9 28 2013
    200ok 2013
    200ok 2013
    demo: leapjs, console
    34
    Saturday, September 28, 13

    View full-size slide

  35. 9 28 2013
    200ok 2013
    200ok 2013
    demo: web based visualizer
    35
    Saturday, September 28, 13

    View full-size slide

  36. 9 28 2013
    200ok 2013
    200ok 2013
    demo: nodecopter-leap
    36
    Saturday, September 28, 13

    View full-size slide

  37. 9 28 2013
    200ok 2013
    200ok 2013
    The first step in making a thing, is
    visualizing it.
    37
    Saturday, September 28, 13

    View full-size slide

  38. 9 28 2013
    200ok 2013
    200ok 2013
    3D modeling - basics, building Objects
    parent/child - workflow
    reading/phonics - signs, menus
    math - repl
    JS programming patterns - modular, async
    scriptcraft
    38
    Saturday, September 28, 13

    View full-size slide

  39. 9 28 2013
    200ok 2013
    200ok 2013
    demo: scriptCraft building blocks
    39
    Saturday, September 28, 13

    View full-size slide

  40. 9 28 2013
    200ok 2013
    200ok 2013
    demo: math repl
    40
    Saturday, September 28, 13

    View full-size slide

  41. 9 28 2013
    200ok 2013
    200ok 2013
    demo: reading sight words
    41
    Saturday, September 28, 13

    View full-size slide

  42. 9 28 2013
    200ok 2013
    200ok 2013
    Create 3d voxel games like Minecraft in the browser
    with WebGL/JS
    voxel.js
    42
    Saturday, September 28, 13

    View full-size slide

  43. 9 28 2013
    200ok 2013
    200ok 2013
    demo: voxel creator
    43
    Saturday, September 28, 13

    View full-size slide

  44. 9 28 2013
    200ok 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

    View full-size slide

  45. © 2012 frog. All rights reserved.
    Saturday, September 28, 13

    View full-size slide