React and Johnny-Five Traffic Lights

React and Johnny-Five Traffic Lights © MIT

A small JavaScript project for controlling and animating a set of LEDs that act like Traffic Lights via a Microcontroller.

  • 2,469 views
  • 0 comments
  • 5 respects

Components and supplies

A000066 iso both
Arduino UNO & Genuino UNO
×1
09590 01
LED (generic)
Preferably, one red LED, one yellow LED, and one green LED.
×3
08377 02 l
Resistor 330 ohm
220 Ohm Resistors also work fine!
×3
11026 02
Jumper wires (generic)
×8

Apps and online services

Screen%20shot%202016 06 16%20at%2011.43.43%20am
Johnny-Five
React
React is what we're using for our app's interface.

About this project

React and Johnny-Five Traffic Lights

A simple project involving the use of Johnny-Five and React to control a set of lights, using actions and functions to control and animate them. This is an (imperfect) creation I'm releasing. This is actually the first project I made that makes use of JavaScript to build an IoT application.

Circuit

The circuit is very simple for this — it consists of 3 LEDs (red, yellow, and green) to act like a set of traffic lights.

List of components

  • Arduino Uno (any Arduino would do, actually)
  • Breadboard (Prefereably one with side rails for the power)
  • 3 LEDs (1 red, 1 yellow, 1 green)
  • 3 220Ohm Resistors
  • 8 coloured jumper cables (5 black jumper cables for ground connection)

Diagram

The diagram is pretty simple — connect up each LED to pins 11, 10, and 9, respectively, along with the 220Ohm resistors for each LED. Remember to attach the Ground so the circuit can work! All in all, the circuit is very simple to put together.

Installing

You can use NPM or Yarn to install and use the application, though I recommend yarn, it's pretty good for dependency management.

You can do npm install or yarn install to download all the app's dependencies.

Commands

There are various commands you can use to work the app, from building, to development, to testing. Again, you can use Yarn or NPM to run the app.

List of Commands

start — Start the app Server (note: run build first!)build — Build the app for a production environmentdev-start — Start the app server under the development environmentdev-server — Runs the Webpack development server for the client-side React appstyles — Build the Application styles (uses PostCSS)test — Runs ESlint and Flow to check the code for issues.

About The Author

Iain is a developer, designer, and artist with Asperger's Syndrome who makes things and has a fascination with all things creative. He likes to experiment with code, boards, and digital art.

Support the author!

Follow on Twitter, like on Facebook, and pledge to Iain on Patreon!

Code

Github
https://github.com/IainIsCreative/react-johnny-five-traffic-lights

Schematics

Traffic Lights Circuit
A very simple setup — wire up a red LED, a yellow LED, and a green LED. Be sure to remember a 220 Ohm resistor for each light!
Traffic lights diagram hdgt6l9mhx

Comments

Similar projects you might like

Smooth RGB LED Transitions with Johnny-Five

by Iain

  • 8,106 views
  • 3 comments
  • 27 respects

Crossroad Traffic Lights (FSM)

Project showcase by Daniel Turner and Carlos Silva

  • 1,293 views
  • 1 comment
  • 6 respects

Traffic Light Information System

Project tutorial by Pieter Luyten and Joppe Smeets

  • 16,236 views
  • 18 comments
  • 36 respects

Traffic Monitor- Monitors traffic on the Go

Project tutorial by Patel Darshil

  • 3,732 views
  • 0 comments
  • 8 respects
Add projectSign up / Login