Dual Relay for Raspberry Pi

Dual Relay for the Raspberry Pi

Download build manual Dual Relay Build Manual.pdf


This design is a dual relay controller for the raspberry pi, the two relays are controlled by GPIO21 and GPIO10 via an NPN Transistor, relay status is displayed on one of two LED’s D2 & D4.

Click on image to enlarge
Click on image to enlarge

The board is designed on a 2 layer PCB as shown below


This board is compatible with the original Model A & B Raspberry Pi’s with the 26 way connector

Compatibility with Raspberry Pi Models


Bill Of Materials


—  ———           —–



2    R1,R3               120

2    R2,R4               560



1    C3                  100n

1    C4                  10uF



2    Q1,Q2               BC549BP



2    D1,D3               1N4001

2    D2,D4               LED



1    CN1                 CONN-DIL26

2    J1,J2               TBLOCK-I3

2    RL1,RL2             G5CLE-1-DC5

Connecting it to the network using Webiopi

So it’s all very well switching the relays on and off from a terminal window, but how about switching the relays on and off from a web browser using a couple of buttons like these…

Well it turns out thanks to a fantastic package called webiopi

to be pretty easy to to do.

First we need to install webiopi as the commands needed to

do this are detailed on the website and repeated below:

$ wget http://webiopi.googlecode.com/files/WebIOPi-0.6.0.tar.gz

$ tar xvzf WebIOPi0.6.0.tar.gz

$ cd WebIOPi0.6.0

$ sudo ./setup.sh

Once set up we will need to start the service this is done with the command

$ sudo /etc/init.d/webiopi start

Now open a browser and go to http://localhost:8000/ on the raspberry pi you should be asked for a username and password these are

username: webiopi

password: raspberry

Now you should see the default screen and switch on and off GPIO 10 and GPIO 21 to switch on and off the relays.

That’s great but how am I going to hit those little buttons while sitting on the couch browsing on my ipad ? Well it turns out it is extremely easy to customize the webiopi interface.

Firstly we need to write a HTML page as below:-

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>



        <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>

        <meta name=”viewport” content = “height = device-height, width = 420, user-scalable = no” />

        <title>WebIOPi | Relay control demo</title>

        <script type=”text/javascript” src=”/webiopi.js”></script>

        <script type=”text/javascript”>

        webiopi().ready(function() {



                var content, button;

                content = $(“#content”);

                // create a “SWITCH” labeled button for GPIO 21

                button = webiopi().createGPIOButton(21, “RELAY 1”);

                content.append(button); // append button to content div

                // create a “LED” labeled button for GPIO 25

                button = webiopi().createGPIOButton(10, “RELAY 2”);

                content.append(button); // append button to content div



        function mousedown() {

                webiopi().setValue(25, 1);


        function mouseup() {

                webiopi().setValue(25, 0);


        function outputSequence() {

                var sequence = “01010100110011001100101010” // S.O.S. morse code or whatever you want

                // output sequence on gpio 25 with a 100ms period

                webiopi().outputSequence(25, 100, sequence, sequenceCallback);


        function sequenceCallback(gpio, data) {

                alert(“sequence on ” + gpio + ” finished with ” + data);


        function callMacro() {

                var args = [“User”,”Name”] // or whatever you want

                // call HelloWorld(args)

                webiopi().callMacro(“HelloWorld”, args, macroCallback);


        function macroCallback(macro, args, data) {




        <style type=”text/css”>

                button {

                        display: block;

                        margin: 5px 5px 5px 5px;

                        width: 160px;

                        height: 45px;


                        font-size: 24pt;

                        font-weight: bold;

                        color: black;


                input[type=”range”] {

                        display: block;

                        width: 160px;

                        height: 45px;


                .LOW {

                        background-color: White;


                .HIGH {

                        background-color: Red;





        <div id=”content” align=”center”></div>



Now save this page as index.html I put it in the pi folder.

Now all we need to do is change the configuration file at /etc/webiopi/config

sudo nano /etc/webiopi/config

and we need to change the line starting to the new location of your index page

docroot = /home/pi/

Now reload your browser and you should see 2 big buttons to switch the relays on and off