Simple and intuitive web interface for your Raspberry Pi

Picture of Simple and intuitive web interface for your Raspberry Pi

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

Remove these adsRemove these ads by Signing Up

Step 1: The electronic part

Picture of 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).
1-40 of 337Next »
Inrich10 days ago

Hello, I used your project for your purposes.
It is, however, one drawback, with some users do not refresh buttons.
In the user that switches actually running, while in another which has an open side does not.
I've added a page refresh every 10 seconds.
Question for you.
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.
Your solution secured and password encrypted https additionally joined CRON schedule.

Litter a modified version of my script action.
I changed the settings but does not work as I want.


Irek from Polish.

Inrich10 days ago

Hello, I used your project for your purposes.
It is, however, one drawback, with some users do not refresh buttons.
In the user who tunes actually running, while in another that is not open side.
I've added a page refresh every 10 seconds.
question for you.
of the keys would do as temporary - 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, 23. I have an electric garage door blind
you run one inpulsem 2 seconds, after opening signal from the reed will
be forwarded to the input pin 23 having an open state for the change to
Your solution zbezpieczyłem szfrowanym password and https additionally joined CRON schedule.

Litter a modified version of my script action.
I changed the settings but does not work as I want.


Irek from Polish.

Inrich10 days ago
daxnal2317 days ago

Could this code be modified to have one "switch" control multiple relays?

SsgtS7ARK19 days ago

Hi Guys, and Gals,

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!


nitishmech21 days ago

hello , I want to display room temp on the web interface , is it possible ?

lemmanuel124 days ago

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

lioniss25 days ago


Screen Shot 2015-07-09 at 21.07.55.png
tali19741 month ago

THANKS SO SO Much for this tutorial...
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...

If some one want the code for controlling SainSmart iMatic V2 Kit Wireless just tell ask...

TheFreeElectron (author)  tali19741 month ago

Happy for you! Have fun! ;)

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, & 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.

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?

Thank You

Links between pin's number and name are quiet confused. See this http://wiringpi.com/pins/ page where everything is shown. Also you can easily choose and control other pins. The pinout is in one of the steps.
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.

Hope I Helped,

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.

Do i have to put something on the command line to update a file or rebuild it at all? Any help would be great.

Thank You

No problem!
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.

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 :)

Hope I Helped,

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?


Glad to know it works!
Buttons are actually images so simply use paint or gimp to modify them.
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. ;)

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 & off. Which works.

Any ideas?

Screen View.png

Of course it is possible to call each button separately. If you really have 8 buttons, each of them has an id, a "name" 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.

I attached an "updated" version of the scripts to the comment, try to see if you can inspire from them to solve your problem.

Hope I Helped,

index.php896 bytes

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.


Thank You

Are you sure you cannot save them? I have absolutely no problem opening or saving them with "save link as" or copy/paste. What kind of error do you get?

I try to download the php file and i get forbiden sa i would like that layout also

bradywang1 month ago

Thank you for a nice tutorial and web interface but i have a question. I need to have the relays start in the on state instead of the off state.

bruno832 months ago


Unfortunately your program is wrong, your use of
the AJAX function is totally false.

See French Correction:




TheFreeElectron (author)  bruno831 month ago


Unfortunately, correcting the code was easy as pie. Though, I used another simpler and shorter version made for a similar project and updated the link.

AndreaC141 month ago

$status = array (0, 0, 0, 0, 0, 0, 0, 0);

for ($i = 0; $i < count($status); $i++) {

system("gpio mode ".$i." out");

exec ("gpio read ".$i, $status[$i], $return );

//if off

if ($status[$i][0] == 0 ) {

echo ("<img id='button_".$i."' src='data/img/red/red_".$i.".jpg' alt='off'/>");


Can you explain the code? What Does the exec command uses the variables $ return and $status[$i]? $ status [$ i] [0], why did you write "[" $ i "] [0]"?

TheFreeElectron (author)  AndreaC141 month ago

exec puts the terminal's response in the $status[$i] variable and transforms it into an array. So adding [0] will select the first case which is what we want. Code has been updated btw.

AbrahamG21 month ago

I used this guide along with several others and hooked the GPIO up to a relay and a remote control to remotely control my lights from my tablet, awesome guide. Thank you so much for it, I originally made a seperate python script, then a bash script with wiring pi to try and get it to work, but none of these would have worked, so I just used a PHP script in the end, it was the first time I ever looked at PHP, but now it works wonderfully.

Thank you so much! :)

TheFreeElectron (author)  AbrahamG21 month ago

I also tried all these techniques before this! ;)
The code has been updated btw, some corrections and bug fixes.

erdyl made it!1 month ago

thank you beutiful informative tutorial.

First tutorial I have made with web server.

I have a question.

What do I have to change in the ''script.js'', ''index.php'' and ''gpio.php'' to use actual pin number instead of the wiring pi numbering.

Did use in shell the next commands succesfully

''gpio mode -g write 4 out''

''gpio -g write 4 1''

because the wiring pin number 7 is my gpio pin 4 I have succesfully tested the web page with button 7. But I would like to use the otter pins with gpio pin numbering

Hope you can help me thank you in advance :)

TheFreeElectron (author)  erdyl1 month ago

Glad you made it! ;)
If you want to change the pin numbering, the easiest solution is to create an array in gpio.php. It will contain the match between the default button's numbers (0 to 7) and the pins you wanna use (whatever you want but be careful about pin numbering and the name you're using). Then you use the array's value instead of the default value (array[$pin] instead of $pin). The Source code has been updated btw.

Hope I Helped,

godfreyhoh1 month ago


Thank you for your (very) informative tutorial. I am currently thinking about modifying your solution to work "in reverse" i.e., to check whether a particular GPIO input has been closed (shorted to GND) or not, and display that fact via the WWW interface. Will simply changing the GPIO mode from "out" to "in" work for me?

Thanks in advance!

TheFreeElectron (author)  godfreyhoh1 month ago


Thank you!

You may need to adapt the code too, changing the mode from "out" to "in" will transform your 5V output into a "button" so you can use the "gpio read" command to check whether it's on or off. Also you'll have to use a refresh function in the JS so that pin are updated every x seconds. Finally, having clickable buttons isn't useful in your case. So lot of modifications ahead! ;)

Hope I Helped,

SeokwooY1 month ago

Thanks for posting this article! I have a question.I am thinking to make LED to blink when I push the button. Do you know how I can give a delay on php or js so that LED can have some time when toggling between On and Off?


TheFreeElectron (author)  SeokwooY1 month ago

You have three solutions:
*In Js, you write a function using the change_pin funct, wait a bit, use the change_pin again, wait, then repeat. This will however rely on many parameters (connection, charge, ..) that will make the blinking unregular.
*In PHP, Do the same but directly with system or exec. The script can be executed several times simultaneously but this may give weird results.
*Create the little Daemon, I described in many other comments so you precisely control what's happening.

Hope I Helped,

wxmanbna2 months ago

Hi TheFreeElectron!

Great information you have here. Plans on putting this to use in my home project to control fans and lights.

What Pi would you recommend as there are several different kinds out there.

Also like the interface that enggsam has. Would you mind sharing that with me?

Thanks in advance!

enggsam wxmanbna2 months ago

Raspberry Pi Model B+ works fine. The snapshot shown is of the code running on a B+

wxmanbna enggsam2 months ago

Awesome. Thanks, enggsam!

TheFreeElectron (author)  wxmanbna2 months ago

Hi Wxmanbna!
Thank you! And it looks you have a great project there!
I don't think there is one to recommend, any of them since the model B 512MB should work but you better buy the latest version which is actually twice more powerful. So you won't be limited in any other project.
Concerning my graphics, there are all in the project's file you can download in one of the last steps. For Enggsam, send him a PM. Basically he just changed the pictures and HTML.

Thank you. I appreciate the information. :)

enggsam made it!3 months ago

perfectly working, thanks a lot :)

1-40 of 337Next »