Web-Based Physical Computing

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

  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

  • 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

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

Actuating User Feedback

  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

Image for post
Image for post

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

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.

Image for post
Image for post

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

  • 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

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

Result

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

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

Switches

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post

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

Image for post
Image for post
  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

Image for post
Image for post
  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

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 package.json 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

Image for post
Image for post

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/

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store