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: Thanks to Rleddington for his amazing project.

Remove these adsRemove these ads by Signing Up

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: 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: (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 137Next »
RobertL57 days ago

Nicely done! I'm thinking about adding a crontab to the PHP code you provided. That way when I go on vacation my house will random turn on and off light making it seem like someone is home.

TheFreeElectron (author)  RobertL57 days ago
That is an amazing idea! But you better use directly a bash script, you do not need php since php is just here to make some treatment but especially to execute commands as you would do by yourself in the terminal. And that's super easy to use crontabs with a. Bash script.
Also randomly is not what I would recommend. Try using a lighting schedule that makes sense.
khims12 days ago


i downld u project web file.. when i try to call ip raspberry on web, only show black background and the image button didn show.. please help..

TheFreeElectron (author)  khims12 days ago
Hi Khims,
all required files were at there respective places when I downloaded the project and I haven't made any modification.
Is Apache well configured, JavaScript, PHP?
Do you have the small icon meaning "mising picture" or something like that?

That's all I'm thking about. I never experienced such troubles.


yes i have smal icon like u say. how can i fix it??

TheFreeElectron (author)  khims12 days ago

That means two things: -Or the pic's link is pointing at the wrong place -Or the link is right but the pic isn't at its place. You should check the link by taking a look at the page's code (developer's mode or Ctrl+u) then see where the link is pointing at and if the pic is at this place.

thanks my interface web is work. but I still have problems..

is it true ? before running the web, I have to run script.js ? when i run the script.js on the terminal, appear message like this:

var buuton_0 = document.getElementById("button_0")

referenceError: document is not defined

at Object.<anonymous> (/var/www/script.j:3:16)

at Module._compile (module.js:446:26)

at ......... and more

I 've installed nodejs. pless help.

TheFreeElectron (author)  khims11 days ago

JavaScript is ran automatically by your browser, you have nothing to do. So the answer is wrong.

It is completely normal to get this error since script.js was written to be executed by a browser and is making references to the web page. When running it with node.js, these objects are therefore undefined. Node.js is in this case completely useless.

phoneman124 days ago

Did I miss the CSS file?

TheFreeElectron (author)  phoneman124 days ago

CSS code is directly within the index.php file. Creating a separate CSS file wasn't necessary to change only background's color and some layout.

HabibN1 month ago

Oh great instructable!

I want to control lights' bedroom with my RPI. I made the web interface but nothing good..I use CM15 modules..Please help!
PS : My English is just bad! Sorry

TheFreeElectron (author)  HabibN28 days ago
Hi HabibN,

Thanks, I never tried CM15 modules but you should take a look at the 'Ible linked in the first step and google "CM15 Raspberry pi", this should help you.

Hope I Helped,
oamparo1 month ago

Hello TheFreeElectron,

I actually made this to work but i would like to make some modifications i just would like it to be a non latching push button switch. So when i push the button for 1 second it will turn on then a second later the pin will automatically goes off. Can you help me? I don't know where to start. Thank you so much.

TheFreeElectron (author)  oamparo28 days ago
Hi Oamparo,
I don't really have so much time now but that's all about the JavaScript, Therefore, you should begin by learning it especially timing functions. This should allow you to really understand the code then to modify it at your convenience.

Hope I Helped,
ganesh-rpi2 months ago

Hello Author.!

It is really good work.! I have done this kind of implementation, not this much pretty design.! But, succeeded.! Now, I started trying serial communication look back implementation. From command line, I succeeded with this implementation Now, I would like to go on further with UI design. I designed an UI, but at the stage of interaction with my PHP code to python. I am getting failed.!

If you idea about my problem, Can you please guide me to finish it successfully.!!

Thanks in advance.!!

Mickey4D2 months ago

The solution for zqsd control (oklm for me)

Mickey4D2 months ago

Hi, it work really well !

But i have a problem, i want to build a drone with raspberry pi and your project and i want to use letters like zqsd instead of use the mouse and click i don't know how to remove the security.

thank you in advance !

hxc2 months ago work...
TheFreeElectron (author)  hxc2 months ago
Glad to know that. Enjoy your raspberry pi
hxc2 months ago
hey....i download ur projeck web file..

all this file place at /var/www ? or only index.php
TheFreeElectron (author)  hxc2 months ago
Hi hxc,
All of them should be placed in your /var/www folder.
thx...i will try...
but i cant move file "data" to /var/www
"mv data /var/www"
access denied

sorry...this my 1st time using raspberry pi..
TheFreeElectron (author)  hxc2 months ago

no problem, I also had these troubles at the beginning. The issue you're having is probably coming from the rights of access used by the Linux os. You need to own the www directory if you want to transfer data into it. Did you followed the commands given in step 3? If yes check who's owning the www directory with ls -l.

If you did all of this, you should be able to transfer the data folder. If not try to Google your problem.


i made it..thx
now need to setup hardware...
TheFreeElectron (author)  hxc2 months ago

ok, no problem. Don't give up and have fun with the raspberry pi. Don't hesitate to ask if you have any other problem.

if i transfer using filezilla...
where i can find file "/var/www"?
in what folder?
IveaghC2 months ago

Thank you for the great instructable.

If I open the web page in two browsers the second browser successfully syncs with the i/o states set by the first. However any further changes by either browser are not reflected in the other. Is there a simple solution to scan and update the i/o states in code? This would allow dual control, keeping the current states in sync on both browsers

TheFreeElectron (author)  IveaghC2 months ago
Hi IveaghC,
In fact this code isn't made for dual control. However I see two solutions. The first would be to find a way to transform your browser into a kind of server waiting for data coming from the Rpi but I doubt that it is possible, you should try to Google it. The second solution would be to add a new js function that would ask for the pins' status every half second as example. In addition you'd need to create a new php page that reads and sends the pins' status everytime you ask for it.

I hope that I helped,
hitac2 months ago


I have 8 relay module connected directly into GPIO's. Problem is that relay is pulled when GPIO is 'low'. When Raspberry is booted, GPIO's are 'high' or something else, all relays are off. Once I refresh interface web page, all GPIO's are pulled down, which activates all relays on board, this is not very good and can be dangerous too depending what relay is controlling.

I am still learning the code, but is there a easy way to invert GPIO's by code. So, that after booting it is like now, no relays activated and after refreshing page, GPIO's are at 'high' instead 'low'. Thanks in advance.


TheFreeElectron (author)  hitac2 months ago

Hi Juha,

Basically the interface web page is doing nothing else than reading the GPIO's status, not modifying it. However, it is possible that when the mode is set to "out" for the first time, it may pull them down, I don't really know. A quick look to the reference of the library or testing by typing the commands directly in the terminal would be interesting. If it is the problem, a solution to that would be to remove the line 15 of index.php and 10 of gpio.php then to create a batch script (executed when booting) which would set the mode of each GPIO to out then the status to "high". The GPIOs would be "low" for only a very small amount of time.

Also, with the help of a message, I recently corrected an error in index.php. Try downloading the updated version.

I do not see anything else I could say about your problem, you should take a look at the project linked in the first step which is also using a relay module.

Hope I helped,


dragons.n.s5 months ago

Hi TheFreeElectron,

its me again, i have finish this instructable and its woking perfectly, yet it still have problems; it only works in RPi's browser 'midori' it don't work in any other smartphones or any other PC's browsers. so plz help me with that

TheFreeElectron (author)  dragons.n.s5 months ago

Hi Dragon,

I'm glad to know that's it's "perfectly" working for you!

Concerning your problem, it's kind of weird. The fact that it is working only on the Rpi itself doesn't really makes sense. However I may see an option, sometimes my LAN network doesn't work, I can access the Internet but I can't access other computers of my network. Also if I type my computer's address (also used as a server with ip, it works. It's probably because the browser recognizes the address and then connects directly to the server without asking anything to the router. I usually turn off/on the router and it works again!

Else maybe that your server isn't configured to accept connection others than from localhost, you should search "put wamp/lamp server online" on google or something like that.

Finally, I see no other options, you should test your LAN network if none of everything over is working. See if this problem happens to other computers, if you can connect to them. Also, google is one of best friend if you still have troubles.

Hope I Helped,


Hi TheFreeElectron,

thanks again!!!!!!!!!!!!!

TheFreeElectron (author)  dragons.n.s5 months ago

No problem, do not hesitate if you need something else.

hey, you know what! it finally works 100%. thank you for your help TheFreeElectron

dragons.n.s5 months ago

Hi TheFreeElectron,

its me again, i have finish this instructable and its woking perfectly, yet it still have problems; it only works in RPi's browser 'midori' it don't work in any other smartphones or any other PC's browsers. so plz help me with that

dragons.n.s5 months ago

Hi TheFreeElectron,

its me again, i have some doubts on the final step, about the three files index.php, gpio.php and the JavaScript file. should i place the files in the /var/www/ or i have to create a new directory in the /home/pi. and i have another doubt, can i simply access page by using the ip address. and one more thing I'm sorry if my English skills are bad, B'coz i'm from india

TheFreeElectron (author)  dragons.n.s5 months ago
Hi Dragon,

You have to place all of them in the /var/www directory. If you can, download the zip file and simply paste the content in /var/www.
After that, to access your Rpi, you need its local/LAN address. To get it, you can type the "ifconfig" command in the terminal or access your router's page, you usually need to type in the URL bar. Once you have this LAN ip, simply type it in the URL bar and if you did everything well, you should have the home page with the buttons.

Hope I helped,

Hi TheFreeElectron,

Thanks for the reply it helped me a lot. and thanks again!!!!!!!! =)

TheFreeElectron (author)  dragons.n.s5 months ago
No problem! ;)
1-40 of 137Next »