The Raspberry Pi is an amazing 35 dollars mini-computer. It allows you to do everything you could do with a regular Linux computer (Connecting to the internet, watching videos, launching applications, ...) but also to interact with the world surrounding it, just like an Arduino. That's why I qualify it as a mix between a computer and a micro-controller.
That's also why I chose it for this project. I'm going to show you how to control LEDs with your Raspberry Pi. Firstly directly from the Raspberry Pi itself, then from any device in your house like your Smartphone or your tablet.

Here is a very good example of what you can achieve after reading this Instructable: http://www.instructables.com/id/Web-Controlled-8-Channel-Powerstrip/. Thanks to Rleddington for his amazing project.

Update: French version here

Step 1: The electronic part

     The electronic part is nothing special, it's only 8 LEDs with their protecting resistor. The only hard part is to connect the LEDs to the good pin on the Raspberry Pi. Indeed, I'll be using later a library called Wiring Pi made by Gordon Henderson (You can visit his website at: http://wiringpi.com/) and the pin's numbers used in this library aren't the same than the ones on the Raspberry Pi. See this page for matches: http://wiringpi.com/pins/ (just be careful about your Raspberry Pi revision, the pinout isn't exactly the same). I'll be using Wiring pins 0 to 7.
     Concerning the resistors, they should be 270Ω but since I don't have this precise value, I'm using 560Ω resistors (LEDs are just less bright).
     Finally, I've made two schematics to make it simpler. The first one (with the complete Raspberry Pi) is showing you the real pins as they are shown on the board. The second one is a simplified version, it's showing you only the useful pins and their matches in the Wiring Pi library (GPIO Wiring number/Actual number on the board).
Hmmm, do you have a link to the code? Cheers Jochen
The whole project should be available for download in one of the last steps. Named Web20.zip or something like that.<br><br>Hope I Helped,<br>TheFreeElectron
<p>Thanks ! ,Moving with actual device no :)</p>
<p>Hi! Thank you so much for posting this, love it!</p><p>I only need to use one relay, so can I remove the other 7 pictures, so I only have one &quot;relay button&quot; on the webpage. Im really new to php and java so if you have an easy solution to this, that would be marvelous! </p><p>Thanks again for this amazing project! </p><p>Cheers, Max</p>
<p>Thank you! I'm really glad you loved it.</p><p>The very simple solution would be to limit the php &quot;for loops&quot; of index.php to 1 and remove the reference to the other seven buttons in the script.js. These are the lines at the beginning of the code. No need to change the gpio.php code. Replace by these lines in index and script:</p><p>$val = 0;<br>//this php script generate the first page in function of the file<br>//set the pin's mode to output and read them<br>system(&quot;gpio mode &quot;.0.&quot; out&quot;);<br>exec (&quot;gpio read &quot;.0, $val, $return );<br>echo (&quot;&lt;img id='button_&quot;.0.&quot;' src='data/img/red/red_&quot;.0.&quot;.jpg' onclick='change_pin (0);'/&gt;&quot;);</p><p>var button_0 = document.getElementById(&quot;button_0&quot;);<br>var Buttons = [ button_0 ]</p><p>Hope I Helped,<br>TheFreeElectron</p>
<p>what changes should I make to use a relay module?</p>
<p><a href="http://www.instructables.com/id/Web-Controlled-8-Channel-Powerstrip/" rel="nofollow">Use a relay board</a></p>
<p>There should be no major change. Look for &quot;arduino relay&quot; or something like that on Google or use a pre-made board like:<br></p>
<p>how to make the change to start high?</p><p>//set the gpio to high/low</p><p>if ($status[0] == &quot;1&quot; ) { $status[0] = &quot;0&quot;; }</p><p>else if ($status[0] == &quot;0&quot; ) { $status[0] = &quot;1&quot;; }</p><p>system(&quot;gpio write &quot;.$pic.&quot; &quot;.$status[0] );</p><p>//reading pin's status</p><p>exec (&quot;gpio read &quot;.$pic, $status, $return );</p><p>//print it to the client on the response</p><p>echo($status[0]);</p>
I don't really understand what you're asking for but I think you want the LEDs to be high when you start the system. Correct me if I'm mistaken.<br>To put them all high every time you load the page, just add system(&quot;gpio write &quot;.$pic.&quot; 1&quot; ); in the &quot;for&quot; loop of index.php, before the exec/read command. But this will set them high every time you reload the page.<br>To put them all high every time you start the pi, write a bash script that'll be launched at the startup.<br><br>Hope I Helped,<br>TheFreeElectron
<p>Thanks, works great! And a great exercise.<br>I have one followup question.<br>Is it possible to control multiple pi's with something like this. I know the website and server are on one RPi, but maybe use one RPi as a server and multiple other RPi's as clients? </p>
Thanks to you and as you said, It's an exercise to lead you to much more amazing projects! :)<br>To answer your question, Everything would be done in the javascript. You simply have to use the ip of the rpi you wanna interact with. Instead of gpio.php, ask for rpi's_ip/gpio.php. What i would recommend would be adding an argument (the rpi's ip) to the function making the request. This way, you just need to change the embedded js code in the declaration of each button (in index.php). <br>Hope I helped,<br>TheFreeElectron
Thanks for your reply. I'm working on it now but ran in to a dumb (noob) problem I can't seem to solve.<br>I wan't the led's to blink before they stay on or off.<br>I have used php before for this like so:<br><br>07 $gpio-&gt;output(17, 1);<br>08 sleep(1);<br>09 $gpio-&gt;output(17, 0);<br>10 sleep(1);<br><br>But how would I integrate this into your:<br><br>if ($status[0] == &quot;0&quot; ) { $status[0] = &quot;1&quot;; }<br><br>Sorry, I'm new to GPIO in combination with PHP.<br>I'm more of a python guy.<br>But I love how short this code is for so many functionality.<br>
<p>I'm not sure but I think I've already had a similar question in the comments.</p><p>If you want the leds to blink at the pi's startup, you can try to use a python deamon as described in other comments. Especially if you are a python guy! ;) So the script would start with the pi, blink the leds then wait for new instructions via a TCP socket (very easy to use). I even uploaded an example somewhere I think.</p><p>If you want the leds to blink every time you ask for index.php. Add a new JavaScript function which sends the order to blink and would be called once at the loading of the page.</p><p>I wouldn't personnaly try to do it in php.</p><p>Thanks, I always appreciate getting feedback! ;)</p><p>Hope I Helped,</p><p>TheFreeElectron</p>
<p>Also, I was a bit in a hurry before and I'm not sure I understood your request but here's a last possibility:<br>If you want the led to blink then stay on/off every time you click on its button. This can be indeed done in the PHP code. To do that, you would update the led, wait, reverse its status, update the led and repeat. Search the php reference for the &quot;sleep&quot; function or something like that.<br>Of course, using a sleep would block your script but apache can run multiple scripts in parallel. However you may get some surprises and not a regular blink if you click the same button multiple times.</p>
<p>If you are controlling from web, it will be nice to have a login page. </p>
The point was here to keep it very simple but an authentification system is indeed necessary when you want to control things from the other side of the planet. After, such a system, is quiet easy to add. There are many tutorials online.
fantastic tut thank you very much.
<p>Hi, good tutorial easy to follow but I have a problem where it doesn't let me turn the led's off after I have turned them on through the website. any help would be appreciated. Thanks :)</p>
<p>Hi. </p><p>This is by far the best tutorial for controlling the raspberry gpio and the Pi over the web. I have been playing with the raspberry for a month or so looking for a tutorial. Thank you so much for doing this. </p>
hey I have been buiding pages and stuff for my raspberry pi for a little while now, and I feel I know it decent enough,but I have tiptoed around the javascript, avoiding it like it's the plague. though I downloaded your example, and it looks very complicated. do you think you can run through each line of code and explain what it does? I know the basics of javascript, but I just can't follow your code.
<p>Hello, i have managed to get all of your code working, but i cannot figure out what pins i should be connecting to. I have the Raspberry PI Model B, &amp; i think its the rev 1. Could you help please as im getting confused as an image i found said gpio 27 but i cannot find that gpio and only have 26 pins.</p><p>Also ever since i have restarted my pi i cannot access the index.php page from my browser via the ip address, do i have to manually start the service again or can i set it to start automaticaly?</p><p>Thank You</p>
Hi!<br> Links between pin's number and name are quiet confused. See this&nbsp;<a href="http://wiringpi.com/pins/" rel="nofollow">http://wiringpi.com/pins/</a>&nbsp;page where everything is shown. Also you can easily choose and control other pins. The pinout is in one of the steps.<br> Try to see if the apache service is running (google it to find the command), if not start it again and see if it can be ran at every start-up, if yes the issue is somewhere else. In any case, I'm not very good with linux commands so google you problem and if no solution is working. Simply re-install apache.<br> <br> Hope I Helped,<br> TheFreeElectron
<p>Hi thank you for your reply i have now managed to get all the pins correct and working, BUT when clicking the buttons they are the opposite way round, when the button shows as on (green) it is actually off :/ I have looked at the code and tried editing it as well as changing the numbers from 1 - 8 rather than 0 - 7 and then restarted the pi. But nothing seems to of changed or updated.</p><p>Do i have to put something on the command line to update a file or rebuild it at all? Any help would be great.</p><p>Thank You</p>
<p>No problem! <br>I actually never had a such issue but the more you know about what's happening and the more likely you'll find the solution. The first way is to use the browser's developer's mode where you can see what the server gets and send back. It will tell you if the issue is somewhere on the server's side or rather on the client's one. </p><p>Normally, the only commands you need to type are the one written in this 'Ible. Also do not forget you can begin with a fresh start (re-installing the OS) so you should no longer have issues (this is a kind of last stand :)</p><p>Hope I Helped,<br>TheFreeElectron</p>
<p>Hi thank you for the reply, i now have everything working fine :) Is there any way i can change the button numbers to go from 1 - 8 ? And also what would i need to do to add two buttons, one for all on and one for all off?</p><p>Thanks</p>
<p>Glad to know it works!<br>Buttons are actually images so simply use paint or gimp to modify them.<br>For the two other buttons, add two of them to the index.php page then in the javascript and finally add two new functions to the gpio.php page; one switching everything on, the other off. Also, since the release of the 'Ible, I've successfully put the 8 (or ten buttons) in an array which makes the javascript MUCH cleaner so give it a try. ;)</p>
<p>I have figured out that the numbers are in the images. But what i wanted to do was create a table in the index.php file and then call each button seperately, is this possible? As i am new to JS i have no idea, i have tried playing around with it but having no luck. By what i have gathered it just calls all the buttons over by one lot. I have added new images and changed it so i only have the two now, on &amp; off. Which works. </p><p>Any ideas?</p>
<p>Of course it is possible to call each button separately. If you really have 8 buttons, each of them has an id, a &quot;name&quot; by which you can call and use them in the JavaScript. I've never worked with DW or any soft like that so I cannot really help you in finding these id's.</p><p>I attached an &quot;updated&quot; version of the scripts to the comment, try to see if you can inspire from them to solve your problem.</p><p>Hope I Helped,<br>TheFreeElectron</p>
<p>Is there a possibility to upload the file once more? I'm trying to make a button that changes on GPIO pin 24 value. </p>
<p>Thank you for the reply, is there any chance you can email me the files please as for some reason it will not let me open them to save them.</p><p>callum.payne@live.co.uk</p><p>Thank You</p>
<p>Are you sure you cannot save them? I have absolutely no problem opening or saving them with &quot;save link as&quot; or copy/paste. What kind of error do you get?</p>
<p>I try to download the php file and i get forbiden sa i would like that layout also </p>
<p>I followed these instructions exactly...but when I navigate to the site I can only turn a pin on, not off. I can refresh the page, but whatever pins I turned on are stuck on until I reboot my Pi. The only difference in my setup is that I am using a Pi 2. Is this still supposed to work, or is it incompatible with the Pi 2?</p>
<p>After tinkering with the PHP I managed to get it to work....sometimes the picture doesn't update when I click it, but it still switches the pins which is all I really care about.</p><p>I have been an expert with HTML and MS command prompt for years, but am somewhat of a noob with PHP and Unix command line</p>
<p>Thank you!</p>
Hey nice project!!! <br>If I am using port 1, where should I make the changes. <br>I am using only ine LED. <br>I am a not a pro. <br>THNX!!!
<p>Hello, i am looking for some help. I started using this tutorial a while ago. And have made a few mods on the website. BUT i was wondering if somebody could help with abit of code. </p><p>The website fully works, but if i turn a light on and either refresh the site or open it on a different device.without turning the light off. It site on the other device shows as being off when its really on.</p><p>I am wanting the site to grab the state of the lights as either on or off on the page loading.</p><p>HOPE SOMEBODY CAN HELP</p><p>I can provide the code i have if somebody can help me out.</p>
<p>great example for learning, just what I wanted to get started.</p><p>In script.js for the conditional inputs why have you used 'if ( !(data.localeCompare(&quot;0&quot;)))' and not simply if (data==0)?</p><p>looking up localeCompare it seems to be more for comparing strings in alphabetical order?</p>
<p>Hello, I used your project for your purposes.<br> It is, however, one drawback, with some users do not refresh buttons.<br> In the user that switches actually running, while in another which has an open side does not.<br> I've added a page refresh every 10 seconds.<br> Question for you.<br> One of the keys I'd like to do as a momentary - it has something to attach for 2 seconds and then turn off, the state of the button to download from one of the input pin for example, electric roller shutters 23. I have you run a garage inpulsem 2 seconds, after opening signal from the reed switch input will be forwarded to pin 23 having an open state for the button to change to green.<br> Your solution secured and password encrypted https additionally joined CRON schedule.<br><br> Litter a modified version of my script action.<br> I changed the settings but does not work as I want.<br><br> Greetings<br><br> Irek from Polish.</p>
<p>Hello, I used your project for your purposes.<br>It is, however, one drawback, with some users do not refresh buttons.<br>In the user who tunes actually running, while in another that is not open side.<br>I've added a page refresh every 10 seconds.<br>question for you.<br>One <br> of the keys would do as temporary - it has something to attach for 2 <br>seconds and then turn off, the state of the button to download from one <br>of the input pin for example, 23. I have an electric garage door blind <br>you run one inpulsem 2 seconds, after opening signal from the reed will <br>be forwarded to the input pin 23 having an open state for the change to <br>green.<br>Your solution zbezpieczyłem szfrowanym password and https additionally joined CRON schedule.<br><br>Litter a modified version of my script action.<br>I changed the settings but does not work as I want.<br><br>Regards<br><br>Irek from Polish.</p>
<p>Could this code be modified to have one &quot;switch&quot; control multiple relays?</p>
<p>Hi Guys, and Gals, </p><p>Could you please help me, I need only one button. I know nothing about coding, just enough to mix few lines together, yet I can't seem to get only one button working... I'd appreciate it greatly! - Great tutorial, helped me a-lot! </p><p>Chris</p>
<p>hello , I want to display room temp on the web interface , is it possible ? </p>
<p>hello, could you please list he components needed for this project. i had be awesome if you could also direct us to the retail site to purchase them</p>
<p>THANKS SO SO Much for this tutorial...<br>I have used it on PI and also on SainSmart iMatic V2 Kit Wireless... And had to change the code a bit and its working perfect.. With out this tutorial i would not have done it.. Thanks ALOT...<br><br>If some one want the code for controlling SainSmart iMatic V2 Kit Wireless just tell ask...<br>Regards<br>T</p>
<p>Happy for you! Have fun! ;)</p>

About This Instructable