Iain
Published © MIT

JavaScript with Hardware [Part Two]: Using Modern JavaScript

Part Two of a series covering JavaScript with Hardware! Iain covers the use of JavaScript devtools and using modern JavaScript features.

EasyProtip1 hour1,454
JavaScript with Hardware [Part Two]: Using Modern JavaScript

Things used in this project

Hardware components

Arduino UNO & Genuino UNO
Arduino UNO & Genuino UNO
×1
Breadboard (generic)
Breadboard (generic)
×1
LED (generic)
LED (generic)
×1
Pushbutton switch 12mm
SparkFun Pushbutton switch 12mm
×1
Resistor 330 ohm
Resistor 330 ohm
×1
Jumper wires (generic)
Jumper wires (generic)
×5

Software apps and online services

Johnny-Five
Johnny-Five

Story

Read more

Schematics

Simple Nodebot

Same circuit as Part One — no changes!
First nodebot f4zqgjryd6

Code

index.js

JavaScript
The updated version of our simple Nodebot using ES6 and Babel!
// @flow

/* eslint-disable no-console */
import { Board, Led, Button } from 'johnny-five';

// Set `lightOn` to true as a default since our LED will be on
let lightOn = true;

// Make a new Board Instance
const board = new Board();

// When the board is connected, turn on the LED connected to pin 9
board.on('ready', function() {
  console.log('[johnny-five] Board is ready.');

  // Make a new Led object and connect it to pin 9
  const led = new Led(9);

  // Make a new Button object assigned to pin 7
  // We also need to say it is a pullup resistor!
  const pushButton = new Button({
    pin: 7,
    isPullup: true,
  });

  // Switch it on!
  led.on();

  // If the button is pressed, toggle the LED on or off
  pushButton.on('down', () => {
    if (lightOn) {
      led.off();
      lightOn = false;
    } else {
      led.on();
      lightOn = true;
    }
  });

  // REPL object so we can interact with our LED
  this.repl.inject({
    // Control the LED via calling for the object
    led,
    // switchOn and switchOff functions to turn LED on and off using REPL
    switchOn: () => {
      if (lightOn) {
        console.log('[johnny-five] LED is already on!');
      } else {
        led.on();
        lightOn = true;
      }
    },
    switchOff: () => {
      if (!lightOn) {
        console.log('[johnny-five] LED is already off!');
      } else {
        led.stop().off();
        lightOn = false;
      }
    },
  });

  // When the board is closing, stop any LED animations and turn it off
  this.on('exit', () => {
    led.stop().off();
    console.log('[johnny-five] Bye Bye.');
  });

});

package.json

JSON
The package file used in this tutorial.
{
  "name": "basic-nodebot",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "start": "babel-node index.js",
    "test": "eslint ./ && flow"
  },
  "dependencies": {
    "johnny-five": "^0.13.0"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-eslint": "^8.2.1",
    "babel-preset-env": "^1.6.1",
    "babel-preset-flow": "^6.23.0",
    "eslint": "^4.9.0",
    "eslint-config-airbnb-base": "^12.1.0",
    "eslint-plugin-flowtype": "^2.42.0",
    "eslint-plugin-import": "^2.7.0",
    "flow-bin": "^0.64.0"
  }
}

.editorconfig

JavaScript
The EditorConfig code for consistent typing in code.
# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.json]
insert_final_newline = ignore

.babelrc

JSON
{
  "presets": [
    "env",
    "flow"
  ]
}

.eslintrc.json

JSON
{
  "extends": [
    "airbnb-base",
    "plugin:flowtype/recommended"
  ],
  "plugins": [
    "flowtype"
  ],
  "rules": {
    "func-names": "off",
    "space-before-function-paren": "off",
    "padded-blocks": "off"
  } 
}

Credits

Iain

Iain

5 projects • 44 followers
Hello! I'm Iain, a digital creator. I like making projects with code, art, and robots. Follow me for awesome projects and fun tidbits!

Comments