Pi on the Web
Using WebIOPi, you can transform a humble Raspberry Pi into a powerful and versatile web-connected device.
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.
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 ./setup.sh
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
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.
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" "http://www.w3.org/TR/html4/loose.dtd"> 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 }); 08 09 function outputSequence() { 10 var sequence = "01" 11 webiopi().outputSequence(25, 500, sequence, sequenceCallback); 12 } 13 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.
Pages: 6
Price $15.99
(incl. VAT)