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: https://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).
<p>Great tutorial, Really helped me understand the basics ;)!</p>
fantastic tut thank you very much.
<p>hi can you share the code sir..</p>
<p>Thanks! Gave me a good baseline to begin my project!</p>
Wonderfully explained! Hats off to you creator!
<p>Hello,</p><p>thanks for the nice instructable! It works great!</p>
<p>Hello, I love this article! But I am having problems...</p><p>I am using Flask as my web server and created php web pages. </p><p>Right now I am just trying to get the bare simples to work. I cannot get the &quot;system&quot; or &quot;exec&quot; commands to work or do anything. Any suggestions?</p>
<p>Great stuff.........Tx for sharing friend...</p>
<p>Thank you for the excellent instructable; this is exactly what I was looking for when I wanted to control my 8 channel relay board over the web with a GUI. As others, I wanted to use different gpio pins than 0-7 that TheFreeElectron used and he actually mentioned how to do it in the comments, but I thought I would post the slightly modified gpio.php and index.php files for others that had trouble specifying what gpio pins to trigger. Like TheFreeElectron said, add an array named $pin in the gpio.php file with your specific pin numbers - will look something like this depending on the pins you are using: &quot;$pin = array(21,22,23,24,25,27,28,29);&quot;. Then change the &quot;$pic&quot; to &quot;$pin[$pic]&quot; in the &quot;system&quot; and &quot;exec&quot; lines of the code. Next, in the index.php file, add the same &quot;$pin = array(21,22,23,24,25,27,28,29);&quot; array then change the &quot;$i&quot; to &quot;$pin[$i]&quot; in the &quot;system&quot; and &quot;exec&quot; lines of code. That's all you you have to do to be able to specify what pins you want to control with this slick web app. Thanks again, TheFreeElectron!</p>
<p>Thank you for the great instructable. It provided me with a base for my automation project.Best Regards,</p>
<p>how can i run python script on web page. i want to auto increment a variable in python script and display the variable on webpage</p>
<p>Hi, great instructable and awesome project! I do however have some issues. I have connected to relays to my pi, on gpio &quot;0&quot; and &quot;2&quot;. Therefore I have also added an array to my gpio.php file, and fetching the values in the array using $i. In index.php I have exchanged the &quot;default&quot; for loop with a for loop which produces numbers from 0 to 2. And inside I have an if-statement with a &quot;$i % 2 == 0&quot; statement.</p><p>The thing is, when I do &quot;/gpio.php?pic=x&quot; with &quot;0&quot; and &quot;1&quot; as values for x - it works fine! The relays turn of and on nicely. But when I press the two buttons showing up, it only works for button &quot;0&quot; - not for button &quot;2&quot;.</p><p>I have been at it for severaly hours over 2 evenings, and I am tired... Are anyone able to spot the problem from what I just wrote?</p><p>Thanks!</p>
<p>Cool project! not too complicated and you can do a lot with it.</p>
<p>Hello, thanks for your tutorial. (:</p><p>I have a question about the tutorial. On my raspberry pi 3 I have installed wiring pi, apache2 webserver and php5. </p><p>How can you use wiringpi on the webserver? i can't find anything about wiringpi in your index.php , gpio.php , script.js? </p><p>Best regards,</p><p>Rasmus.</p>
<p>If you refer to the gpio.php file, there is a section to read and a section to write the output of the gpio. The php code executes a system command that is similar to typing it from the command line.</p>
<p>This was a fun project to build and i have used it for several projects. However I was wondering if it is possible to make the output momentary as apposed to the toggle setup. If so could someone provide me with more info as how to do this, it would be greatly appreciated. I hope to be able to use this in a remote controlled car.</p>
<p>Really well done instructable. Thanks for writing it. It was fun to build. For other builders, I put the .php, .js files and that data folder in the /var/www/html<br>folder on the RPi using WINSCP after having run the sudo chown -R pi /var/www. I just started with one LED to test. </p>
<p>can you give me a video tutorial of this whole project? please it will a big help</p>
<p>Excellent instructable. I had a lot of fun making this and I am definitely gonna do more like these!</p>
<p>Can you give me a video tutorial of this whole project .. please??</p>
<p>i cant get this code running '<em>sudo chown -R pi /var/www/html' , can someone help me with it</em></p><p><em> <br></em></p>
<p>Awesome, this is my first project with my RaspPi, and I feel it really helped me to learn and to see what is it able to do. Thank you very much for such a great work!</p>
<p>Hi, a great project, I got it working first time. However the pins I want to you are different.</p><p>I want to change to GPIO pins 17,27,22,5,6,13 but I cannot see how to change the pins in your scrips.</p><p>Any help would be very welcome.</p>
<p>I was really hoping he'd answer this. It was also asked before and it was stated that it is already in the instructions how to. Really though, all that is in the instructions was how to wire your GPIO to pins 0 -7, not how to re-wire your existing project to those pins... </p><p>I think question could be better asked is how to alter from pins 0-7 so those of us not starting from scratch can use the pins already in use. </p>
Hi!<br><br>I think I already answered this question in another comment but if I didn't then here's how you can use whatever pins you want:<br>-Use the same code<br>-In gpio.php add an array making the link between numbers 0 to 7 and the pins' number you want to use. For instance [5,6,7,8...,13] if you want to use pins 5 to 13. It doesn't need to be in a particular order. That way, the user still asks for pin 0 which will, due to the array, corresponds to its first element. Here it would be 5.<br><br>Hope I Helped,<br>TheFreeElectron
<p>please help me, where do i add the files in the zip folder to</p>
<p>Thank you for answering! So would an example of that be near the top?</p><p>0 = 5</p><p>1 = 6</p><p>etc?</p><p>Thanks.</p>
<p>That's it. So instead of putting $pin (from 0 to 7) in the exec function, you put $array[ $pin ] (array for 5 to 13)</p>
<p>Sorry if I am not getting this but here is how my exec line reads in gpio.php</p><p>exec (&quot;gpio read &quot;.$pic, $status, $return );</p><p>I don't get at all what you have said to swap out into this line or where 0-7 are getting pulled from this line to begin with? Here is the entire gpio.php file if you could replace in here exactly how to add these random pins for easy example: 0,2,3,5,8,9,12,13.</p><p>Thanks again for your time~!</p><p>&lt;?php</p><p>//TheFreeElectron 2015, <a href="https://www.instructables.com/member/TheFreeElectron/" rel="nofollow"> https://www.instructables.com/member/TheFreeElectr...</a></p><p>//This page is requested by the JavaScript, it updates the pin's status and then print it</p><p>//Getting and using values</p><p>if (isset ( $_GET[&quot;pic&quot;] )) {</p><p> $pic = strip_tags ($_GET[&quot;pic&quot;]);</p><p> //test if value is a number</p><p> if ( (is_numeric($pic)) &amp;&amp; ($pic &lt;= 7) &amp;&amp; ($pic &gt;= 0) ) {</p><p> //set the gpio's mode to output</p><p> system(&quot;gpio mode &quot;.$pic.&quot; out&quot;);</p><p> //reading pin's status</p><p> exec (&quot;gpio read &quot;.$pic, $status, $return );</p><p> //set the gpio to high/low</p><p> if ($status[0] == &quot;0&quot; ) { $status[0] = &quot;1&quot;; }</p><p> else if ($status[0] == &quot;1&quot; ) { $status[0] = &quot;0&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><p> }</p><p> else { echo (&quot;fail&quot;); }</p><p>} //print fail if cannot use values</p><p>else { echo (&quot;fail&quot;); }</p><p>?&gt;</p>
<p>At the beginning of the code, create $array = [5,...,13]<br>Then in the system and exec commands, replace $pic by $array[$pic]</p>
<p>Ok, I did exactly as you said and now the page errors if you try to click on a on/off button. This is to the point of going to look for another instructable. </p><p>I edited to what you said as you can see below. I am not sure why you would not just post a complete example to get this simple question out of the way.</p><p>&lt;?php</p><p>//TheFreeElectron 2015, <a href="https://www.instructables.com/member/TheFreeElectron/" rel="nofollow"> https://www.instructables.com/member/TheFreeElectr...</a></p><p>//This page is requested by the JavaScript, it updates the pin's status and then print it</p><p>//Getting and using values</p><p>if (isset ( $_GET[&quot;pic&quot;] )) {</p><p>$pic = strip_tags ($_GET[&quot;pic&quot;]);</p><p>$array = [0,27,2,3,4,5,6,7]</p><p>//test if value is a number</p><p>if ( (is_numeric($pic)) &amp;&amp; ($pic &lt;= 7) &amp;&amp; ($pic &gt;= 0) ) {</p><p>//set the gpio's mode to output</p><p>system(&quot;gpio mode &quot;.$array[$pic].&quot; out&quot;);</p><p>//reading pin's status</p><p>exec (&quot;gpio read &quot;.$array[$pic], $status, $return );</p><p>//set the gpio to high/low</p><p>if ($status[0] == &quot;0&quot; ) { $status[0] = &quot;1&quot;; }</p><p>else if ($status[0] == &quot;1&quot; ) { $status[0] = &quot;0&quot;; }</p><p>system(&quot;gpio write &quot;.$array[$pic].&quot; &quot;.$status[0] );</p><p>//reading pin's status</p><p>exec (&quot;gpio read &quot;.$array[$pic], $status, $return );</p><p>//print it to the client on the response</p><p>echo($status[0]);</p><p>}</p><p>else { echo (&quot;fail&quot;); }</p><p>} //print fail if cannot use values</p><p>else { echo (&quot;fail&quot;); }</p><p>?&gt;</p>
<p>Try to ask directly for /gpio.php?pic=0 in your browser to see what it gives you. In function of that you should be able to troubleshoot the error: print variables, try separate commands, etc, simply do what a programmer would do.<br><br>If you want to look for another instructable, you are obviously absolutely free.</p>
<p>more headache than it's worth.. thank you anyway. Really too bad you couldn't have just answered differently to solve vs idk what. How hard would it have been for you to just look at the code I posted and corrected it? If we were coders we likely wouldn't be on this site and if you just confuse people you are not helping them learn.. </p>
<p>You know I actually signed up for this site just so I could reply to your post. I find it frustrating that after this guys spends all that time getting this documented and written up that you can't spend a little time troubleshooting your own issue. Having been a programmer for 20+ years I have found that when there is an issue with my code it is very often a missing semi-colon or some typo or the like. The first thing you should have learned with DIY (Do It Yourself) projects is that there are hundreds of projects out there that will be close do what you want to do, but you might need to spend a little time on your own playing with it to find out how to do exactly what you want to do. Learning isn't always easy and you will find it may not always fun. But in the end after you have spent the time troubleshooting it I promise it will be worth the time learning. Especially when someone like this is pointing the way. It is when you are on your own in uncharted territory that really causes you to pause and think if this might be beyond your capabilities. The hardest part is sometimes you have to go back to the beginning and start all over to really find your issue. Good luck, I am sure if you spend just a little time you will figure it out!</p>
<p>You really need to take a look at yourself. This is an excellent tutorial, and the author has been extremely helpful to you and many others.</p><p>Helping them learn != doing it for them. </p><p>Be nice!</p>
<p>I'm not sure I am understanding how to use various GPIO pins that are not in any sequence... </p><p>So $array = [5,13,19,18,22] would be OK? and $pic is a mystery.. but the same?</p>
<p>where do i add these files? to which place</p>
<p>Hello there,</p><p>I'm pretty new to this sort of thing, and got lost right away on step 1. I'm not sure</p><p>a) Where I can obtain these materials</p><p>b) What do to (ex. connect what to what)</p><p>I have installed WiringPi</p><p>Thanks</p>
<p>Hi. this is awesome project. Thanks for ur guide in this project. I've been waiting for ur next great project. </p>
<p>thx in advance for this great project</p><p>however i neeed to read some input pins stutas with green if high and red if low .... is it possible to help me .</p>
No problem, it'll always be a pleasure.<br>Actually, pin status is read and updated every time you click a button.<br>What you can do is to create a web page with 8 indicators and a JavaScript routine sending a request to the server, every second for example. Every time the server gets that request, a PHP script sets all pins as inputs, reads their status then prints it back to the client. Once the JS received the response, it updates the 8 indicators. If you have some experience in JS and PHP, it's easy as pie.<br><br>Hope I helped,<br>TheFreeElectron
<p>Hi can you make a script for a single pin / LED on a preset pin ? Thank you</p>
<p>Sure, I've made an instructable how to control Single LED, you can see at my blog</p><p>http://engineer2you.blogspot.com/2016/09/raspberry-gpio-from-phone.html</p>
<p>This is a cracking Instructable, and I can see me using it for much more than I am at present.</p><p>I have a couple of SkyHD boxes that (typically) crash from time to time, and Sky's solution is to pull the power cord. When the boxes are mounted in a busy rack, this isn't quite so easy.</p><p>I have made some changes, including paring the UI down to 2 circuits and adding a little text here and there so my other half can understand it, as well as using my own images.</p><p>All I need to do now is mount it in a neat enclosure.</p><p>Good work TheFreeElectron!!</p>
<p>Hi did you configured the script to work with only one pin ? HOW !? i'm killing myself to get it to work with only just GPIO 27 ... </p>
<p>Very nice! I see there a very practical and useful application! With, by the way, a nice and clean interface.<br>Good work to you too!</p>
<p>I made it. It was very interesting, but i research use internet instead wifi.</p><p>Please help me</p>
<p>Nice instructable, base on your instruction, i made remote light switch through phone.</p><p>Anyone interested this project, please visit my blog: </p><p>http://engineer2you.blogspot.com/2016/06/raspberry-pi-remote-light-switch.html</p>
<p>Have been trying to setup a web interface for the past few days. Found a few but none of them really worked for some or the other reason. This is the only one which worked the first time through! Amazing.Thank you so much.</p>
<p>hi, nice project.. i want to ask. how to add password to active each button? how the about the code... </p>

About This Instructable




More by TheFreeElectron:Simple and intuitive web interface for your Raspberry Pi 
Add instructable to: