Web-Based Physical Computing

Bashkim Isai
Feb 25 · 8 min read

This article is a brief introduction into electronics for web developers which allows you to control circuits from a web-based interface. Download the code samples from the GitHub Repository.

Originally presented at the Mini Maker Faire Elephant & Castle on 6 July 2013.

Original format was provided as a PowerPoint presentation, it has been reformatted for the web.


Introduction

The purpose of this tutorial is to introduce you to:

  1. Raspberry Pi
  2. Basic hobby electrical engineering
  3. Node.JS and WebSockets

This tutorial has been designed for Web Developers who are interested in physical computing.

By the end of this tutorial, you should be able to demonstrate how to complete the following:

  1. How to setup the Raspberry Pi
  2. How to wire an LED
  3. How to wire a push button
  4. How to sense and actuate though electronics
  5. How to make a web interface engage with electronics

Required equipment

  • 1x Raspberry Pi (setup with monitor, keyboard and mouse, ethernet)
  • 10x Lengths of wire (red, blue, black, etc.)
  • 1x Tactile push button switch
  • 1x LED
  • 1x 10kΩ resistor (for the push button)
  • 1x Resistor (for the LED, more specific details later)
  • 1x Solderless breadboard
  • 1x Raspberry Pi Cobbler and Cable

Preparing your Raspberry Pi

This tutorial assumes that you already have a Raspberry Pi setup with a linux-based operating system (e.g.: Raspbian). You will also need to install GIT and Node.JS.

When this tutorial was presented, the SD cards provided had been setup with the configuration above.

Actuating User Feedback

How to provide feedback to a user when an event occurs. By the end of this section, you should be able to demonstrate how to complete the following:

  1. Use a breadboard to prototype a basic circuit.
  2. Wire an LED light correctly to the Raspberry Pi.
  3. Calculate resistance values for LEDs.

Light emitting diodes

LEDs (as they are commonly known) are simple light modules which you can use to provide feedback in your electronics.

LEDs are polarised, so you must make sure you put them in the correct direction. Reversing the component risks a short circuit. Looking down from the top of the LED there is usually a flattened edge, this identifies the negative pin of the LED.

As LEDs need a specific amount of electricity in order to function effectively, you will need a resistor to limit the amount of power transmitting to the LED. The resistor (more details to follow) can be on either side of the LED.

Resistors

Resistors limit the flow of electricity in your circuit. If you do not calculate the required amount of resistance, you may cause your LED to burn out.

You will need to calculate the amount of resistance required to run your LED. The amount of resistance will depend on your individual part and each part varies there is no standard value.

This LED resistor wizard will help you find which resistor you should use.

For this example, we can calculate our resistor value. You will need to find your forward voltage and current from your diodes.

Values from the LED

For this tutorial, we are going to use the following component information:

  • Forward voltage: 2V
  • Forward current: 20mA

This information should be printed on the packet or included on instructions with your LEDs. Each set of LEDs are different, so it’s important that you check this information specifically for your components.

Values from the Microcontroller

Depending on what you’re connecting up to (in our case, a Raspberry Pi) you will need to consider the source voltage.

  • 3.3 V for the Raspberry Pi
  • 5 V for Arduino (if you’re using that)

Result

Using this information, and putting it in to the calculator at the LED wizard, we would have to use a 68Ω resistor.

If you don’t have a 68Ω resistor available, you can increase the resistance to a nearby value (e.g.: 75Ω), it just won’t shine as bright). However, do not decrease the resistance (e.g.: 62Ω), as it will burn out.

Sensing User Input

In this part of the tutorial, we will be looking at how to sense when an event occurs in the real world. By the end of this section, you should be able to demonstrate how to complete the following:

  1. Wire a tactile push button switch correctly to the Raspberry Pi.
  2. Extend a prototype on a breadboard.

Switches

These push buttons are a simple type of switch that allows an electronic circuit to sense a binary event in the real world (on or off).

The switches we are using today (tactile push buttons) are not like a light switch you’d finder in your house; they’re more like door buzzer buttons.

These are simple components which allow you to change the direction of electrical current.

The orange wire will take either one of two paths:

  1. When the button is not pressed, it will connect to GND (through the 10kΩ resistor); or
  2. When the button is pressed down, it will connect to GND and to 3.3V, but the 3.3V will take precedence.

Doesn’t this cause a short circuit when the button is pressed?

No — this is due to Ohm’s Law: electricity always takes the path of least resistance. Because we placed the 10kΩ resistor between the button and ground, electricity will flow to the Raspberry Pi instead of causing a short circuit.

Assembly

Breadboards

Sometimes called protoboards, breadboards allow to rapidly prototype a temporary electronic circuit. The devices are reusable as they are solderless.

Terminal strips are coloured as red arrows in the diagram and labeled as numbered columns, this is where the majority of your circuit will sit.

Bus strips are the long rails which run across the columns on the site and are generally used for helping power pass through the breadboard.

Power

Firstly we will setup the power to get passed through the breadboard. While the Raspberry Pi does have a 5V option, you will generally want to use the 3V3 (or 3.3V) instead.

We are using the Raspberry Pi Cobbler as it allows for easier access to the GPIO on the Raspberry Pi.

  1. Slot in your Raspberry Pi Cobbler in to the breadboard.
  2. With red wire, connect your 3V3 to the closest inside bus strip (or on the bus strip with the red line).
  3. With black wire, connect your GND to the closest outside bus strip (or on the bus strip with the blue line).
  4. So that power can be shared on both sides, we can wire the opposing bus strips.

Wiring the LED

We’re going to connect our LED to actuate when we program our commands.

  1. Insert the LED in to the breadboard across two separate terminal strips. Observe which side is positive and place that closer to the Cobbler.
  2. Wire the Cobbler pin #22 to the positive pin on the LED.
  3. Connect the negative pin of the LED to the GND bus strip using your 68Ω resistor.

Button

We’re going to add our push button to sense a physical interaction.

  1. Insert the tactile push button switch across the central gutter of the breadboard.
  2. Wire the Cobbler pin #23 to the button leg closest to the Cobbler pin.
  3. Connect your 10kΩ resistor from the right side of the button leg to the GND bus strip.
  4. Wire the button leg opposing the resistor to the power bus strip (3.3V)

Programming

User interaction

In this part of the tutorial, we will be looking at how to get your button and your LED to respond to user interaction from a web browser.

By the end of this tutorial, you should be able to demonstrate how to complete the following:

  • Start using Node.JS to develop web sites.
  • Develop a basic prototype to sense when the button is pressed.
  • Respond to events on the website in real-time to actuate electronic components.

Create a folder that will house the application.

To develop the web interfaces for node, we need a few libraries to make the process of development easier and to enable real-time communication between a web interface and the hardware.

mkdir ~/web-based-phy-comp cd ~/web-based-phy-comp

This contains the JSON structure required to start a project and install the required dependencies for this project. Your should look similar to the following code:

{
name : "PiNodeLight",
version: "0.0.1",
private: true,
dependencies: {
"express" : "2.5.5",
"ejs" : "~0.7.1",
"socket.io" : "0.9.6",
"onoff" : ">= 0.1.5"
}
}

We can then run the Node Package Manager (NPM) to install all dependencies:

npm install

What are these dependencies?

  • Express: http://expressjs.com
    A web application framework for Node.JS which helps to handle HTTP requests, limiting the amount of work you need to do in order to get and application up and running.
  • EJS: http://www.embeddedjs.com/
    Allows for easy implementation of HTML files to include dynamic data. Those familiar with PHP, ASP and ERB (rails) will appreciate EJS.
  • Socket.IO: http://socket.io
    Enables real-time communication between websites and your Node.JS application.
  • OnOff: https://github.com/fivdi/onoff
    Lets Node.JS communicate with the GPIO (General Purpose Input/Output)

Running the code

The code to run this is available from theGitHub repository. It is commented to introduce you to developing with the dependencies.

When you’re ready to run your application, go to the application’s root directory and run the following command:

$ [sudo] node ./app.js

You can then launch a web browser and go to the following address to start interacting with your circuit via:

http://localhost:3000/
Bashkim Isai

Written by

London-based Creative Technologist specialising in Tangible Media and Web Development.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade