Getting started with WebIOPi

Lead Image/Daniel Villeneuve ,

Pi on the Web

Using WebIOPi, you can transform a humble Raspberry Pi into a powerful and versatile web-connected device.

The ability to access and control Raspberry Pi and connected devices via a web-based interface opens a whole new world of creative possibilities. Although it's not beyond the wit of man to develop a custom web-based interface from scratch, using WebIOPi makes a lot of sense.

Getting the most out of WebIOPi does require some technical chops, but using the framework to create relatively simple web apps is not all that complicated.

Preparatory Work

The first thing you need to do is deploy WebIOPi on your Raspberry Pi. Download the latest .tar.gz archive from the project's website [1] to the /home/pi directory on your Raspberry Pi. Then, use the

tar xvzf WebIOPi-x.x.x.tar.gz

command to extract the archive. Switch to the resulting directory and run

sudo ./

to install. That's all there is to it.

Start WebIOPi by running the

sudo /etc/init.d/webiopi start

command. If you want WebIOPi to start automatically on boot, run

sudo update-rc.d webiopi defaults

Once WebIOPi is up and running, you can point your browser to http://raspberrypi:8000 (replace raspberrypi with the actual IP address or domain name of your Raspberry Pi) and log in using the webiopi username and the raspberry password. (See the "Changing Password" box.) If everything works properly, you should see a web page with links to different sections (Figure 1). Click on the GPIO Header link to switch to a simple web app for controlling the GPIO pins.

Changing Password

If your Raspberry Pi is accessible from the Internet, you should change the default password right away. To do this, run the

sudo webiopi-passwd

command, enter the default webiopi user name, and specify a new password. Alternatively, you can replace the default webiopi user by entering the desired username and specifying a password. Once you've done that, restart using

sudo /etc/init.d/webiopi restart
Figure 1: WebIOPi features a bare-bones interface.

Controlling an LED and a Transistor Switch

Using the app, you can turn a specific GPIO pin on and off by pressing the button next to it. To do so, you can wire an LED and a 270Ohm resistor (Figure 2) and connect them to the 3.3V and GPIO 25 pins. In the web app, pressing the button next to GPIO 25 toggles the status between IN and OUT to turn the LED on and off.

Figure 2: LED wiring diagram.

Once you've ensured that WebIOPi is working, you can build a simple web app containing a button that toggles the LED. Start by creating the /home/pi/project/html directory. Create a new text file, paste the code in Listing 1 into it, and save the file under the index.html name in the /home/pi/project/html directory. Even if you only have a passing knowledge of HTML and JavaScript, you should be able to identify the two main building blocks of the page: a JavaScript code block containing a function that defines a button for controlling GPIO pin 25 and a stylesheet that specifies the appearance of the button.

Listing 1

Simple WebIOPi App

01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
02 <html>
03 <head>
04             <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
05             <title>WebIOPi | LED Control</title>
06             <script type="text/javascript" src="/webiopi.js"></script>
07             <script type="text/javascript">
08             webiopi().ready(function() {
09                             var button = webiopi().createGPIOButton(25, "LED");
10                             $("#controls").append(button);
11                             webiopi().refreshGPIO(true);
12             });
13             </script>
14             <style type="text/css">
15                             button {
16                                             display: block;
17                                             margin: 5px 5px 5px 5px;
18                                             width: 105px;
19                                             height: 45px;
20                                             font-size: 24pt;
21                                             font-weight: bold;
22                                             color: white;
23                             }
24             </style>
25 </head>
26 <body>
27             <div id="controls" align="center"></div>
28 </body>
29 </html>

Next, you need to reconfigure WebIOPi to use the /home/pi/project/html directory as its document root. Run the

sudo nano /etc/webiopi/config

command to open the config file in the nano text editor and add the doc-root = /home/pi/project/html line in the [HTTP] section. Save the changes and restart WebIOPi using

sudo /etc/init.d/webiopi restart

Now, point your browser to http://raspberrypi:8000, and you should see the new web app in all its bare-bones glory. Press the button to turn the LED on and off.

Besides the id and label parameters, the webiopi().createButton routine also supports an optional parameter that can be used to create a button with its own function. Using this functionality, you can modify the created web app to control the transistor switch described in a previous article [2]. As you may recall, this transistor switch was controlled using a simple Python script that turned the target GPIO pin on and off at a 0.5-second interval. To run the script, you had to execute it manually from the command line or configure Raspberry Pi to start the script on boot. Using WebIOPi, you can replace the script with a simple web app that lets you control the transistor switch via a button.

Writing an app that controls the transistor switch doesn't require too much work – you can use the example in Listing 1 as a template. All you have to do is to replace the code between the <script type="text/javascript"></style> tags with the code in Listing 2. As you can see, the code block that creates a button is similar to the previous example, but it uses the webiopi().createButton routine that defines a button with the outputSequence function call attached to it.

Listing 2

WebOPi Transistor Switch Code

01 <script type="text/javascript">
02         webiopi().ready(function() {
03                 var content, button;
04                 content = $("#content");
05                 button = webiopi().createButton("trigger", "Trigger!", outputSequence);
06                 content.append(button);
07 });
09 function outputSequence() {
10                 var sequence = "01"
11                 webiopi().outputSequence(25, 500, sequence, sequenceCallback);
12 }
14         function sequenceCallback(gpio, data) {
15                 alert("Triggered on GPIO" + gpio);
16         }
17 </script>

This function does two things: It defines a signal sequence and outputs it to a GPIO pin at a specific interval in milliseconds. In this case, the sequence turns the pin on and off at the 0.5-second interval. The webiopi().outputSequence routine, in turn, calls the sequenceCallback function, which displays an alert message that serves as a confirmation that the code has been executed successfully. Now, set up a transistor switch as shown in Figure 3 and use the created web app to trigger it. In this particular case, the transistor switch triggers an SLR camera, but it can be easily put to a variety of other uses.

Figure 3: Transistor switch wiring diagram.

Buy this article as PDF

Express-Checkout as PDF

Pages: 6

Price $2.95
(incl. VAT)

Buy Raspberry Pi Geek

Get it on Google Play

US / Canada

Get it on Google Play

UK / Australia

Related content

  • Pi in the Palace

    Welcome to the sixth issue of Raspberry Pi Geek magazine. In case you haven't done the math, six issues for a bimonthly magazine means we're celebrating our one year anniversary! We had a great year, and so did the amazing Raspberry Pi computer. It seems like we were just writing about the 2 millionth Raspberry Pi, and now the Foundation has announced the 3 millionth unit. 

  • PHP on Raspberry Pi

    Getting started with PHP on Raspberry Pi is easy. We show how to build a simple PHP app to control an LED.

  • DIY body cam with a Raspberry Pi

    Make your own body cam with a Raspberry Pi, a cannibalized webcam, a WiFi module, and some Python.

  • Android Pi

    Your Android device can be a versatile companion for Raspberry Pi. We describe some useful apps to help you make this happen.

  • Roasting beans in a repurposed air popper

    Transform an old air popcorn popper into a coffee bean roaster controlled by a Raspberry Pi and a slick user interface.