Web-Based Physical Computing

Web-Based Physical Computing logo

Slides from Mini Maker Faire Elephant & Castle 2013 to control a Raspberry Pi through a web browser


The purpose of this tutorial is to introduce you to:

  1. Raspberry Pi
  2. Basic hobby eletrical 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

You will need the following items to complete this tutorial:

Slide 1


1x HDMI monitor
1x Keyboard
1x Mouse
10x Lengths of wire
(red, blue, black, etc.)


1x HDMI lead
1x Ethernet Cable
(to connect to a router)
1x 5v Micro USB Power Cable


1x SD Card
1x Raspberry Pi (Model B)
1x 10kΩ resistor
1x Tactile push button switch
1x LED
1x Resistor for LEDs
(find out more later)


1x Solderless breadboard
2x Power sockets
(one for the Raspberry PI, one for the HDMI monitor)
1x Raspberry Pi Cobbler
1x Cobbler Cable

Preparing your Raspberry Pi

If you were using a different SD card, you would have to install Raspbian, GIT and Node.JS which can take a few hours, so the SD cards have this provided for you.

Slide 2


If you're starting from scratch, you will need to run through the following instructions after installing Raspbian.

Insert your SD card into the Raspberry Pi, boot the device and follow these instructions in your terminal.

curl http://nodejs.org/dist/v0.10.1/node-v0.10.1.tar.gz | tar xz
cd node-v0.10.1
make install

To test if you have installed this properly run this command:

node –v

Node.JS comes with NPM (Node Package Manager) that allows you to retrieve libraries with ease making development much easier; however NPM uses GIT that is not included by default in the operating system. You can download it using the apt-get installer:

sudo apt-get install git


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.

Slide 3


Firstly we will setup the power to get passed through the breadboard. With your Raspberry Pi, you will generally want to use the 3V3 (or 3.3V) instead of the 5V.

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

Slide 4

Step 1

Slot in your Raspberry Pi Cobbler in to the breadboard.

Step 2

With red wire, connect your 3V3 to the closest inside bus strip (or on the bus strip with the red line).

Step 3

With black wire, connect your GND to the closest outside bus strip (or on the bus strip with the blue line).

Step 4

So that power can be shared on both sides, we can wire the opposing bus strips.

Actuating User Feedback

In this part of the workshop, we will be looking at 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.
Slide 5

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.

Slide 6


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.

Slide 7

Calculating Resistance

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

Values from LED

Forward voltage: 2V
Forward current: 20mA

This information should be printed on the packet or included on instructions with your LEDs.

Values from LED

Source voltage: 3.3V

3.3V is the standard voltage for the Raspberry Pi

5V is the standard voltage for Arduino (if you're using that)


Using this information, 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Ω) but do not decrease the resistance (e.g.: 62Ω).

Wiring the LED

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

Slide 8

Step 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.

Step 2

Wire the Cobber pin #22 to the positive pin on the LED.

Step 3

Connect the negative pin of the LED to the GND bus strip using your 68Ω resistor.

Sensing User Input

In this part of the workshop, 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 correctly to the Raspberry Pi.
  2. Extend a prototype on a breadboard.
Slide 9


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.

Slide 10


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

Slide 11

Step 1

Insert the tactile push button switch across the central gutter of the breadboard.

Step 2

Wire the Cobber pin #23 to the button leg closest to the Cobber pin.

Step 3

Connect your 10KΩ resistor from the right side of the button leg to the GND bus strip.

Step 4

Wire the button leg opposing the resistor to the power bus strip (3.3V)

Tactile push button switches

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.

Slide 12

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:

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

Directory setup

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

This contains the JSON structure required to start a project and install the required dependencies for this project.

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

npm install
    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"



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.



Allows for easy implementation of HTML files to include dynamic data. Those familiar with PHP, ASP and ERB (rails) will appreciate EJS.



Enables real-time communication between websites and your Node.JS application.



Lets Node.JS communicate with the GPIO (General Purpose Input/Output)

Running your code

The code to run this is available from GitHub. It is commented to introduce you to developing with Express, EJS, Socket.IO and OnOff.

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:

Slide 15