Instructables

Simple and intuitive web interface for your Raspberry Pi

Featured
Picture of Simple and intuitive web interface for your Raspberry Pi
P1040971.JPG
P1040976.JPG
P1040977.JPG
P1040978.JPG

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

Simple.JPG
P1040967.JPG
P1040968.JPG
raspberry-pi-rev2-gpio-pinout.jpg
     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 224Next »
rustic99 made it!3 days ago

TheFreeElectron,

Thank you for the brilliant tutorial! I'm having a bit of trouble changing what GPIO pin is used for button 0 (because I think I shorted out GPIO17 and damaged the Pi). In your diagram you define GPIO17 for button 0 but I cannot find this anywhere in your code. Where in the code can I change what GPIO pin is used? Other than that this was a fantastic tutorial!

IMG_7986.JPG
TheFreeElectron (author)  rustic993 days ago
Thank you! Your installation looks really nice!

Actually, I haven't defined anything, I just have 8 buttons (from 0 to 7) corresponding to Wiring Pi pins 0 to 7, the only link is the one defined by Gordon when he made the library and soft (see the link provided in one of the step). If you want to change a pin, you'll have to do it in the JS I think, instead of calling the "change_pin" function with parameters (0,1), do it with (8,1) where 8 is corresponding to the pin you wanna use.

Hope I Helped,
TheFreeElectron
rustic994 days ago

Red/green on and off buttons for everyone to use!

Green.jpgRed.jpg
TheFreeElectron (author)  rustic994 days ago
Nice work! Thank you!
fedexxx15 days ago

You have a java script (for php) for check the status of pin in real time?

fedexxx16 days ago

hi,

if i compile a file .c and i run on php ( system("./path"); ) it's not work!

I try whitc blink.c

TheFreeElectron (author)  fedexxx16 days ago
Hi!

I already tried such a thing, If I remember well, I had to place the compiled file into a special directory, so Linux recognized it as an application I could use by typing its name. This way, I had no trouble executing the compiled C code with a PHP script. Search for something like "creating linux commands".

Hope I Helped,
TheFreeElectron

I think that the error is on "wiringPI" because if executive the "blink" on Guest ( no root - no sudo) i have:

pi@raspberrypi / $ blink

wiringPiSetup: Must be root. (Did you forget sudo?)

Sorry for my english

TheFreeElectron (author)  fedexxx15 days ago

yeah that's right, you must be root when using the wiringpi lib in a C code (sse the reference for more info). So you cannot use it via PHP (or you find a tricky solution on the internet). I was executing batch scripts using the software provided by Gordon, so no need for sudo.

AnfalA8 days ago

you use the LED and some resistors and what else the tools you used for this project ?

TheFreeElectron (author)  AnfalA8 days ago
none, only a few wires and a breadboard.
AnfalA9 days ago

hi

please can you give me the tools for this project?

because i won't to make it .

thank you !

TheFreeElectron (author)  AnfalA8 days ago
Hi!

All the software and hardware required for this project are shown in this 'Ible. I don't really understand your request.

Hi,

Very informative tutorial. But how am i suppose to operate this from anywhere in the world??

Thanks in advance

Hi!

You'll need to open your router's port to allow incoming external connections. There are many tutorials on it, just google "access wamp server from outside" or something like this.

Hope I Helped,
TheFreeElectron
I have relay. And when i connect relay to pi it turn all relay lights on. 1. time with relay so i do not know is that normal. When i turn off light in the room connected to relay it light on a litle diode on the relay. When turn on .. than ,on the relay diode is off.( I think that should be reverse . When red picture is displayed than ralay or diode light on should be off.) If that is true. Can you tell me how to reverse all picture. Red to be green . Or how to change state on whole php and java from 0 when is off to 1 to be off and 0 to be on. ... it is hard to explain , sorry for long explanation. Maybe i should say how to reverse 0 and 1 state .
TheFreeElectron (author)  gago.babic.319 days ago

Hi!
If your problem is only that on and off status are reversed, simply reverse the green and red pictures in the index.php and script.js or by renaming the pictures directly (this method being a bit long and messy).

Hope I Helped,
TheFreeElectron

well. that helped. but , every time when site loads I have to click 2 times to turn on. and when turned on ,, if I reload page everything is fine but again I have to click 2 times. but thats fine. at least i got feedback of lights .. if they are turned on or off.

TheFreeElectron (author)  gago.babic.317 days ago

That's a kinda weird issue, try your browser's developer's mode/tool to observe the requests your browser is sending to the server so you can see if the request is sent twice or only once. This way, you'll understand better what is going on and what is changing and where.

browser is sending requests . i have replaced in index.php (

src='data/img/red/red_".$i.".jpg' alt='off'/>"); ) for (

src='data/img/green/green_".$i.".jpg' alt='on'/>"); ) and other vay around ..and in script.js i changed -

//if red
if ( button_0.alt === "off" ) {
//use the function
var new_status = change_pin ( 0, 0);
if (new_status !== "fail") {
button_0.alt = "on"
button_0.src = "data/img/green/green_0.jpg";
return 0;

from data/img/green/green_0.jpg TO data/img/red/red_0.jpg ...

And in whole butons I have changed from red to green and from green to red. so i think that first request from browser cant be correct. so something need to change in code. but i do not know what.

i get from developer s mode . only text replay when first click is presed. then second he is changing picture. i get this after first click.

gpio.php?pin=0&status=0

TheFreeElectron (author)  gago.babic.317 days ago

Well, that's kinda hard for me to understand what's happening. I understood that you've reversed red and green (which is basically just a visual trick) but I don't see why there would be the need to click twice for a status change to be effective. Maybe that you made, somewhere, a change in the code that compromised its logic and provoked this situation.
Try to ask someone, a programmer friend... if he can help you. That's all I can say thousands miles away with the information you gave me. ;)

satish.ip made it!17 days ago

TheFreeElectron,

Thanks for a wonderful tutorial! I tweaked few things to get the scripts working with Python GPIO control and integrated with your Php/Javascripts. And also added weaved IOT service on the Pi (they have a iOS app too), now I can control the devices being anywhere in the world!

Rpi_with_Relay_WebControl.JPG
TheFreeElectron (author)  satish.ip17 days ago
Thank you!
What you've done looks absolutely awesome!
SamK418 days ago

I followed all the steps but when I try and run the webpage on my computer it appears as a blank white page

Help would be appreshiated as I plan to make a robot that would be controlled using a php webpage

TheFreeElectron (author)  SamK418 days ago

Hi!
Did you checked if your server and the php extension are correctly working? (with the code in the step talking about the php.)
If you did and there was no problem at that time, make sure the files have been placed in the www folder. If yes, try other tests to find where the failure is. The goal is to test each component of the project one after the other to find where the issue is and to correct it, that's all I can say in front of my computer. ;)

Hope I Helped,
TheFreeElectron

milit.mitra18 days ago

Hi,

I tried placing the files (index.php, gpio.php javascript.js) in the www directory but could not using WinSCP. Could you please tell me how to access the www directory using WinSCP or should I be coding the files. I'm not so fond of coding but I want to complete this super interesting experiment as it fascinates me.

Hoping a reply.

TheFreeElectron (author)  milit.mitra18 days ago
Hi!

What do you mean by "could not using WinSCP"?
If your problem is finding the directory, its absolute path is "var\www".
If your problem are access rights, make sure your "user" (pi by default) is correctly owning the dir and its sub dir.

Hope I Helped,
TheFreeElectron
minagabriel19 days ago

You have an infinite loop

TheFreeElectron (author)  minagabriel19 days ago

Thanks, I've corrected, looks like the "++" have disappeared for no reason.

Hello again, i have been having lots of fun with this project and has been great fun in doing so. Im just hoping youd be able to help, i have the code below but wont to be able to create a master on and off button. but i can only get it to turn one pin on/off at a time. Does anybody know how to get to to do multiple pins at once??

--------------------------------------------------------------------------------------------

button_8.addEventListener("click", function () {

//if green

if ( button_8.alt === "on" ) {

//use the function

var new_status = change_pin ( 0, 1);

if (new_status !== "fail") {

button_8.src = "data/off-button.png";

return 0;

}}} );

Hi!
As said in one of my previous comment, you have two possibilities:
+You add a new function to gpio.php which turns all leds on or off and ask for that function in the JS code (the best and cleanest option to me)
+You add a kind of loop to the JS script using n times the change_pin function (slow and not sure this will work correctly because of doing having multiple request in a small amount of time)

Hope I Helped,
TheFreeElectron
mikerosati26 days ago

Wonderful first Instructable in English my friend :) I will be trying these steps out later today on a brand new pi B+...

TheFreeElectron (author)  mikerosati26 days ago
Thank you so much! That'll always be a pleasure! ;)

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

Hi!
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,
TheFreeElectron

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,
TheFreeElectron

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?

Thanks

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. ;)

1-40 of 224Next »