| My Raspberry Pi Projects |
| Contact: |
- Headless Setup - ie. without using a monitor or keyboard for setup/control ->
- Hello World Remote Controller - control an LED on the RasPi via web ->
- Monitor - CPU load, temp, procs, mem, network traffic, etc ----->
- ...
| 2. Hello World Remote Controller |
Nueva Gorgona, 3 Sep 2013
There are lots of writeups on controlling an LED from the Raspberry Pi
(e.g. a slew of GPIO Code examples).
This project adds the ability to control the LED via a web page hosted by the RasPi's web server.
I've added the meta tags to the HTML so that it looks like a native iOS app on an iPhone, iPod or iPad.
But of course, it works on any browser.The steps described below are:
- Setup the hardware - one or more LEDs connected to the GPIO pins on your RasPi.
- Install the gpio package on the RasPi.
- Copy my software to your Raspi.
- A CGI that invokes the gpio command installed in Step 2.
- HTML for the UI.
- And for a nice look on an iPhone, iPod or iPad, call the web app from your Home Screen.
1: A single LED.
1. Hardware
See the 1: A single LED article for directions on hooking up LEDs to your Rasperry Pi's GPIO pins using a breadboard and jumper wires. I used Adafruit's Cobbler Kit from the RasPi to my breadboard.
I hooked up 3 LEDs to the following RasPi pins:
|
After installing software
(see below) to control them |
2. gpio Package
Then, I downloaded and installed his gpio package per the Download and Install page. Check his page for current instructions, but basically it was:
tar xfz wiringPi-f18c8f7.tar.gz
cd wiringPi-f18c8f7
./build
I copied the gpio executable that this built to /usr/bin.cd wiringPi-f18c8f7
./build
Here is the conversion to this library's wiringPi notation:
| My LED Color | RasPi's Physical Pin | wiringPi |
| Red | 11 | 0 |
| Green | 12 | 1 |
| Blue | 13 | 2 |
Then I tried out his command-line interface:
gpio -v
gpio write 0 1 (turned on the red LED)
gpio write 0 0 (turned off the red LED)
gpio version: 2.13
Copyright (c) 2012-2013 Gordon Henderson
This is free software with ABSOLUTELY NO WARRANTY.
For details type: gpio -warranty
This Raspberry Pi is a revision 2 board.
gpio readall
+----------+-Rev2-+------+--------+------+-------+
| wiringPi | GPIO | Phys | Name | Mode | Value |
+----------+------+------+--------+------+-------+
| 0 | 17 | 11 | GPIO 0 | IN | Low |
| 1 | 18 | 12 | GPIO 1 | IN | Low |
| 2 | 27 | 13 | GPIO 2 | IN | Low |
| 3 | 22 | 15 | GPIO 3 | IN | Low |
| 4 | 23 | 16 | GPIO 4 | IN | Low |
| 5 | 24 | 18 | GPIO 5 | IN | Low |
| 6 | 25 | 22 | GPIO 6 | IN | Low |
| 7 | 4 | 7 | GPIO 7 | IN | Low |
| 8 | 2 | 3 | SDA | IN | High |
| 9 | 3 | 5 | SCL | IN | High |
| 10 | 8 | 24 | CE0 | IN | Low |
| 11 | 7 | 26 | CE1 | IN | Low |
| 12 | 10 | 19 | MOSI | IN | Low |
| 13 | 9 | 21 | MISO | IN | Low |
| 14 | 11 | 23 | SCLK | IN | Low |
| 15 | 14 | 8 | TxD | ALT0 | High |
| 16 | 15 | 10 | RxD | ALT0 | High |
| 17 | 28 | 3 | GPIO 8 | IN | Low |
| 18 | 29 | 4 | GPIO 9 | IN | Low |
| 19 | 30 | 5 | GPIO10 | IN | Low |
| 20 | 31 | 6 | GPIO11 | IN | Low |
+----------+------+------+--------+------+-------+
gpio mode 0 outgpio write 0 1 (turned on the red LED)
gpio write 0 0 (turned off the red LED)
3. My software
So, what I'll do is simply make a web page on the RasPi's web server invoke a CGI when the user clicks on a button on the page. The CGI invokes the gpio command (installed in Step 2) to control the LED.
--PC--- --------------------RasPi--------------------
User -> browser -> network -> web server -> CGI -> gpio command -> GPIO pin -> LED
<- <- <- <- <-
3a. CGI
To try an initial practice CGI, I followed the first.cgi example on Executing Linux / UNIX commands from web page.
Then, using Geany on the RasPi, I coded up the following CGI to invoke the gpio command that was built above (and should now be located in /usr/bin):
#!/bin/bash
# Put this in: /usr/lib/cgi-bin/gpio.cgi on your RasPi
# Mike Niemi, svbreakaway@gmail.com, 24 Sep 2013
# Ref: http://svbreakaway.info/tp-raspi-hwrc.php
PIN=`echo "$QUERY_STRING" | grep -oE "(^|[?&])pin=[0-9]+" | cut -f 2 -d "=" | head -n1`
VAL=`echo "$QUERY_STRING" | grep -oE "(^|[?&])val=[0-9]+" | sed "s/%20/ /g" | cut -f 2 -d "="`
echo "Content-type: text/plain"
echo ""
#echo "QUERY_STRING="$QUERY_STRING", PIN="$PIN", VAL="$VAL
sudo gpio mode $PIN out
sudo gpio write $PIN $VAL
if [[ $VAL -eq 0 ]]
then
echo "off"
else
echo "on"
fi
It needs to execute the gpio command with superuser authority. To enable that, this was a handy note. Based on it, I added www-data to /etc/sudoers (using sudo visudo):
www-data ALL=NOPASSWD: ALL
To debug CGIs, the web server logs located in /var/log/apache2/ are very helpful.
To test it, I simply entered:
http://192.168.0.102/cgi-bin/gpio.cgi?pin=0&val=1
(substitute the IP address of your Raspi)
on a browser on my Mac. The CGI turns on the red LED and replies with "on" to the browser. To turn the LED off, enter:
http://192.168.0.102/cgi-bin/gpio.cgi?pin=0&val=0
(substitute the IP address of your Raspi)
on the browser.|
3b. HTML for the UI Here is the UI. It's pretty simple:
|
Mac screen shot
Chrome browser |
|
The selector lets the user pick which GPIO to control - -> For this exercise, they are the first 3 on the list,
|
|
Then clicking on the "Click Me!" button turns the LED on and off.
The web page changes the text of the button (to "Off" when the LED is on and "On" when it is off) after the CGI confirms that it issued the gpio command. So, there is some roundtrip validation and also, you get some indication of the responsiveness of the system. Note that it is not 100% confirmation of the change, but it's something.
So, here is my html (note that you need to change the IP address, where theUrl is set in the html below, to match your setup):
<html>
<!-- Simple button to turn an LED on and off -->
<!-- Put this in /var/www/hwrc.html on your RasPi -->
<!-- Mike Niemi, svbreakaway@gmail.com, 24 Sep 2013 -->
<!-- Ref: http://svbreakaway.info/tp-raspi-hwrc.php -->
<head>
<title>Hello World Remote Controller</title>
<link href="hwrc-favicon.png" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" />
<link rel="apple-touch-icon" href="hwrc-favicon.png">
<script type="text/javascript">
var ledIsOn = 0;
var thePin = 0;
var nextVal = new Array( "1","0" );
function changed()
{ thePin = document.getElementById( "pinselector" ).value;
ledIsOn = 0;
}
function endsWith(str, suffix)
{ return str.indexOf(suffix, str.length - suffix.length) !== -1; }
function clicked()
{ var xmlHttp = null;
var theUrl = '';
// Change the IP address to match your setup
theUrl = 'http://192.168.0.103/cgi-bin/gpio.cgi?pin=' + thePin + '&val=' + nextVal[ledIsOn];
xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", theUrl, false );
xmlHttp.send( null );
if ( endsWith(xmlHttp.responseText.trim(), "on") )
{ document.getElementById( "thebutton" ).innerHTML = "Off";
ledIsOn = 1;
}
else
{ document.getElementById( "thebutton" ).innerHTML = "On";
ledIsOn = 0;
}
return;
}
</script>
<style type="text/css">
body { margin-top:100px; padding:0; border:0; text-align:center; background-color:#4475cd; }
#centered { width:270px; text-align:center; background-color:#4475cd; padding:10px; margin:0 auto; }
#pinselector { font:18px arial,sans-serif; width:150px; }
#title1 { font-family:arial; font-size:120%; }
#thebutton { width:200px; height:200px; font-size:200%; }
</style>
</head>
<body>
<div id="centered">
<span id="title1">Physical pin:</span>
<select id="pinselector" onchange="changed()">
<option value="0" selected>11 (GPIO 0)</option>
<option value="1">12 (GPIO 1)</option>
<option value="2">13 (GPIO 2)</option>
<option value="3">15 (GPIO 3)</option>
<option value="4">16 (GPIO 4)</option>
<option value="5">18 (GPIO 5)</option>
<option value="6">22 (GPIO 6)</option>
<option value="7"> 7 (GPIO 7)</option>
<option value="8"> 3 (GPIO 8)</option>
<option value="9"> 4 (GPIO 9)</option>
<option value="10"> 5 (GPIO 10)</option>
<option value="11"> 6 (GPIO 11)</option>
</select><br> <br>
<button id="thebutton" onclick="clicked()">Click Me!</button>
</div>
</body>
</html>
To invoke it, enter:
http://192.168.0.102/hwrc.html (substituting the IP address for your setup)
in a web browser on any system connected to the network with the RasPi on it.4. On an iPhone, iPod or iPad
Note that I've added the meta tags to the html to make the result look nice (and look similar to a native iOS app) when displayed on the iPhone, iPod and iPad. To do that, first, in the Safari browser on your iPhone, iPod or iPad, go to http://192.168.0.102/hwrc.html (again, substituting your RasPi's IP address).
Then follow these steps (it looks similar in iOS 7):
1. Click on this button
at the bottom |
2. Click on
"Add to Home Screen" |
3. Pick a name,
then "Add" |
4. It is added to
your Home Screen |
Sample Screenshots
Here are some screen shots of the UI. On an iPhone, iPod or iPad, if you follow the steps above to add it to your Home Screen, when you start it from there, you get a screen without any address bar at the top or tool bar at the bottom - for example, the 2 screen shots on the right:
|
Mac screen shot
Chrome browser |
iPod screen shot
|
iPad Mini screen shot
|
-- FIN --
References
Projects controlling an LED on the RasPi
- 1: A single LED - command line using wiringPi, a C library
- 1: Getting Started with Raspberry Pi GPIO and Python - another, using a python library
- Tutorial: How to use your Raspberry Pi like an Arduino - examples using python, bash and C
- RPi Low-level peripherals - pinout and lots of GPIO LED example code
- Pins - good reference