Basic Arduino + JavaScript (Workshop)

Basic Arduino + JavaScript (Workshop)

Basics to 'bots! Build your first few projects with Arduino, and work up to simple Javascript programming with NodeBots.

  • 12,121 views
  • 1 comment
  • 29 respects

Components and supplies

Ardgen 101
Arduino 101 & Genuino 101
Any Arduino will work! Make sure you have the cable handy.
×1
09590 01
LED (generic)
×1
Mfr 25frf52 100r sml
Resistor 100 ohm
Pick one with a value that matches your LED. Often, LEDs will ship with matching resistors, but otherwise you can try a 100-ohm or 1k-ohm value.
×1
Omron b3f 1000 image 75px
SparkFun Pushbutton switch 12mm
×1
Mfr 25frf52 10k sml
Resistor 10k ohm
×1
11026 02
Jumper wires (generic)
×1
12002 04
Breadboard (generic)
×1

Apps and online services

About this project

Get up and running in under two hours! You'll need a computer, an Arduino with a compatible cable to connect it to your computer, and whatever it is that you'd like to control. Swap out the LEDs in this workshop for other components, plug in another Node module or two, and you'll be able to build a virtually infinite array of different projects – all from a few simple pieces.

Setup

Bust out your laptop and install the latest complete version of the Arduino IDE, from the top of this page: https://www.arduino.cc/en/Main/Software

Plug your Arduino board into a USB port on your computer.

Get out your components.

All set!

First, let's configure an output! We'll communicate information from the Arduino to the user, via a flashing LED.

Load up Arduino's built-in example at File > Examples > Basics > Blink

Like most Arduino boards, the Uno comes with a built-in LED that's connected to digital pin 13. Upload the code and watch it flash on and off, changing once per second.

Now, do the same thing with an external LED! Grab yours and plug the long positive leg into the header at digital pin 13. Plug the short leg into the GND (ground) header. You can also move the positive leg to any of the other digital pins, and change the "13" in your code to match. (Most of the time, "pin 13" is going to mean digital pin 13. The analog pins will almost always be explicitly named.)

But running your Arduino this way lets too much power flow through the circuit, and can burn out the LED – and/or the microcontroller pin itself. Let's add a resistor before moving on: move the LED to a breadboard, with each leg in a different 5-hole row. Add a jumper wire connecting the negative leg to GND. Place another wire from digital pin 13 to an empty row, then connect that with the LED's positive leg using your resistor.

Here's some more info on why we really do need the resistor.

CODE

So! What are we actually doing here?

The code starts with some introductory notes, which are commented out with slashes and asterisks: one of two ways to tell the machine, "this piece is for humans – ignore." Well-commented code is a great way to make sure others can understand and modify it later.

/* Multi-line comments...
...use slashes and asterisks like this...
...and keep going until we "close" them. */
// A double forward-slash will comment out anything after it on the same line.
SO, THIS IS ACTIVE CODE // But this bit is commented out.

The Arduino-friendly part begins with a setup section, which runs first, each time you power on the board (or press reset). This is where you tell the Arduino what's connected to it: inputs such as sensors, outputs such as displays, and more. In our setup section, we're telling it that there is a controllable output on digital pin 13.

Once setup is done, the loop section takes over and (as the name implies) runs over and over again until the board is powered off. Our loop turns the LED on (HIGH) or off (LOW) every 1 second (1000 milliseconds).

Project 2. Button

Our second project adds user input: a way to send a message to the Arduino.

File > Examples > Digital > Button

This sketch includes a great description of the circuit right in the opening comments. Hook it up like so:

Notice how the LED's part of the circuit looks now. Most breadboards have power and ground rails running their entire length. That makes it easier to hook up circuits with just a single wire for each running back to your controller. So, both the resistor from the button and the LED are hooked back into this ground rail – instead of taking up both of the Arduino's GND pins.

The resistor we've just added is a pulldown resistor. Our code is going to check to see whether or not our digital pin 2 is connected to power, via the button-press. But while unconnected, the pin's value floats somewhere between HIGH (powered) and LOW (grounded). So, we let a bit of power flow to the ground pin all the time, through this 10 k‎Ω resistor, which "pulls it down" LOW. But when the button is pressed, power starts flowing between the 5V pin and pin 2, so it goes HIGH.

CODE

This time, we begin with some declarations of different variables that we'll be using. In the Blink sketch, if you wanted to change which pin the LED was on, you had to change pin 13 in three different places. This time, we tell the Arduino that we'll be using "buttonPin" to represent pin 2, and "ledPin" to represent pin 13. Now, anytime we swap things around physically, we just need to change that pin number in one place.

Those variables are going to stay the same the whole time the program is running, so we call them constants – hence the const int . The other variable we have will change to reflect our button-pressing, so it's just a plain int .

This time, we've got INPUTs (button) and OUTPUTs (LED) in the setup section.

In our loop, the first thing we do is check pin 2 to see whether it's HIGH or LOW, using digitalRead . Then, depending on the result, we use an if/else statement to trigger the right action. If it's HIGH (button pressed), set the LED HIGH as well. Else (otherwise), set the LED LOW.

FYI, you can have more than two conditions – in which case, you tell it "if the button is on, then turn the LED on; else if the button is not pressed, then turn the LED off; else (say the button has ceased to exist or Schrödinger is visiting) run around and freak out."

Project 3. Serial feedback

Now, let's learn to read data directly from the Arduino as text – we'll see how it "talks".

Open up File > Examples > Basics > DigitalReadSerial and don't worry about changing your circuit. Upload it to your board.

CODE

Things should be looking pretty familiar by now. The new stuff has to do with the serial monitor:

In setup(), look for Serial.begin(9600); which tells the Arduino to start communicating via text, at 9600 baud. The baud rate controls how much information is sent per second.

And in the loop(), you'll see the command Serial.println(buttonState); – this tells the Arduino to take the current value of the button and print it to the monitor as a single line of text.

The monitor itself can be opened with the button at the top-right of the IDE:

Open it up, and you'll start to see a column of 0s. Push your button, and they will turn into 1s! Magic!

If you don't see the pretty 1s and 0s, check the settings at the bottom of the window:

  • AUTOSCROLL should be selected
  • NEWLINE should be selected
  • 9600 BAUD should be selected

Project 4. Firmata + Johnny-Five

Here's where the Javascript comes in! We still have one more Arduino sketch to upload: File > Examples > Firmata > StandardFirmata

Hit the upload button and leave your board plugged in. This sketch teaches the Arduino to listen for commands over the serial connection – the same connection we were just using to talk to it via the serial monitor.

Now, there's a bit of setup to do on your computer itself.

Install Node.js and npm, using the instructions here: https://nodejs.org

These won't show up as regular applications – they live in your command line! To make sure it's done correctly, open up the Terminal application (often in Applications/Utilities) and type node -v

Hit enter, and this should return the version of Node.js that you're running.

Node Package Manager (npm) is the utility that installs modules: plugins for Node applications that give you powerful commands to work on things like robotics, websites, spreadsheets, and managing other applications. We're using it to install Johnny-Five (Hackster page), a robotics module.

To do that on a Mac/Linux system, fire up your terminal and enter:

mkdir arduino-nodebots && cd arduino-nodebots
npm install johnny-five

This means: "Create a directory (folder) called arduino-nodebots and go into it. There, install the Johnny-Five module so we can use it in applications that also live in this directory."

Your circuit is still gonna stay the same. Yay!

CODE

Let's see what we can do with Johnny-Five!

Head to the main site and grab this code: http://johnny-five.io/examples/led/

OK, so, use your favorite method to save that as a text file, "led.js", in your new arduino-nodebots directory. Careful: if you're using a normal-people text editor, it may try to stick a ".txt" or ".rtf" on the end there – erase it!

Now, in the terminal, you can run node led.js and the application starts running!

Check out the commands listed on the Johnny-Five tutorial page: you can run led.stop() and led.off() and led.on() and led.blink() .

Explore the site to find more cool stuff you can do with this super-smart LED and other components. :)

Try more things!

https://github.com/rwaldron/johnny-five/wiki/Getting-Started

http://johnny-five.io/examples/button/

http://johnny-five.io/examples/led-pulse/

http://johnny-five.io/examples/servo/

Next Steps

Want to run this as a workshop? Use this handy-dandy slideshow!

nodebots.io/ – Join a local NodeBots group!

hackster.io/johnny-five/projects – See what others have built with NodeBots!

node-ardx.org/ – Another method for getting started, in case you get hung up on this one

See the whole series of Hackster 101 tutorials on Hackster and YouTube

Code

LED example from johnny-five.io (led.js)JavaScript
var five = require("johnny-five");
var board = new five.Board();

board.on("ready", function() {
  var led = new five.Led(13);

  // This will grant access to the led instance
  // from within the REPL that's created when
  // running this program.
  this.repl.inject({
    led: led
  });

  led.blink();
});
"Blink": Arduino example sketchC/C++
/*
  Blink
  Turns on an LED on for one second, then off for one second, repeatedly.

  Most Arduinos have an on-board LED you can control. On the Uno and
  Leonardo, it is attached to digital pin 13. If you're unsure what
  pin the on-board LED is connected to on your Arduino model, check
  the documentation at http://www.arduino.cc

  This example code is in the public domain.

  modified 8 May 2014
  by Scott Fitzgerald
 */


// the setup function runs once when you press reset or power the board
void setup() {
  // initialize digital pin 13 as an output.
  pinMode(13, OUTPUT);
}

// the loop function runs over and over again forever
void loop() {
  digitalWrite(13, HIGH);   // turn the LED on (HIGH is the voltage level)
  delay(1000);              // wait for a second
  digitalWrite(13, LOW);    // turn the LED off by making the voltage LOW
  delay(1000);              // wait for a second
}
"Button": Arduino example sketchC/C++
/*
  Button

 Turns on and off a light emitting diode(LED) connected to digital
 pin 13, when pressing a pushbutton attached to pin 2.


 The circuit:
 * LED attached from pin 13 to ground
 * pushbutton attached to pin 2 from +5V
 * 10K resistor attached to pin 2 from ground

 * Note: on most Arduinos there is already an LED on the board
 attached to pin 13.


 created 2005
 by DojoDave <http://www.0j0.org>
 modified 30 Aug 2011
 by Tom Igoe

 This example code is in the public domain.

 http://www.arduino.cc/en/Tutorial/Button
 */

// constants won't change. They're used here to
// set pin numbers:
const int buttonPin = 2;     // the number of the pushbutton pin
const int ledPin =  13;      // the number of the LED pin

// variables will change:
int buttonState = 0;         // variable for reading the pushbutton status

void setup() {
  // initialize the LED pin as an output:
  pinMode(ledPin, OUTPUT);
  // initialize the pushbutton pin as an input:
  pinMode(buttonPin, INPUT);
}

void loop() {
  // read the state of the pushbutton value:
  buttonState = digitalRead(buttonPin);

  // check if the pushbutton is pressed.
  // if it is, the buttonState is HIGH:
  if (buttonState == HIGH) {
    // turn LED on:
    digitalWrite(ledPin, HIGH);
  } else {
    // turn LED off:
    digitalWrite(ledPin, LOW);
  }
}
"DigitalReadSerial": Arduino example sketchC/C++
/*
  DigitalReadSerial
 Reads a digital input on pin 2, prints the result to the serial monitor

 This example code is in the public domain.
 */

// digital pin 2 has a pushbutton attached to it. Give it a name:
int pushButton = 2;

// the setup routine runs once when you press reset:
void setup() {
  // initialize serial communication at 9600 bits per second:
  Serial.begin(9600);
  // make the pushbutton's pin an input:
  pinMode(pushButton, INPUT);
}

// the loop routine runs over and over again forever:
void loop() {
  // read the input pin:
  int buttonState = digitalRead(pushButton);
  // print out the state of the button:
  Serial.println(buttonState);
  delay(1);        // delay in between reads for stability
}

Schematics

1. Arduino + LED
Arduino led
2. Arduino + button
Arduino button
3. Arduino + button (using internal pullup resistor)
Arduino button with pullup

Comments

Similar projects you might like

Button: Arduino Basics

by Alex Glow

  • 11,363 views
  • 0 comments
  • 12 respects

NeoPixel LEDs: Arduino Basics

by Alex Glow

  • 43,196 views
  • 1 comment
  • 46 respects

LED Blinkies: Arduino Basics

by Alex Glow

  • 5,633 views
  • 1 comment
  • 11 respects

Hackster Live March 2017 Workshop

Project tutorial by Katie Kristoff

  • 1,465 views
  • 1 comment
  • 12 respects
Add projectSign up / Login