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 192Next »

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

TheFreeElectron (author)  mikerosati22 hours 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. ;)

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

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.

callum.payne@live.co.uk

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?

JohnM4311 days ago

Thank you! After five days of searching over the internet and ten reinstallation's of Rasberian, I found the perfect article for GPIO managing.

Thank you again!!!

TheFreeElectron (author)  JohnM4311 days ago
No problem! I'm really glad I helped you to end your quest for the Rpi Gpio's! ;)
alm8616 days ago

I have edited the index.php as above but how do I execute this?

TheFreeElectron (author)  alm8615 days ago
The php code is executed by server which generates a page sent to you. To "execute" index.php, place it in the "www" folder then type "server_ip" in your browser.

Hope I Helped,
TheFreeElectron
ToreM17 days ago

Hi

Than You for the nice exercise. It works fine but affects only GPIO4 (Pin 7 on my B+). I am a novice in PHP and Java so my question is:

"The second if statement in gpio.php tests on $pin<=7 and $pin>=0. Why and how will it find the other six GPIO ports."

Is there something about the pin numbering I don't understand?

Kind regards

/Tore

TheFreeElectron (author)  ToreM16 days ago
Hi ToreM,
Thank you!
This statement simply check that the request only ask for pins 0 to 7. If you want to use more pins, you'll have to change it to "0 to 10" for example.
Concerning the fact that only the pin 7 is affected, check your wiring (pay attention to the equivalent with the wiringPi soft) then test each pin by typing commands in the terminal like in one of the step. If everything's fine after doing that, the issue is further.
That's all I can say with your description of the issue.

Hope I Helped,
TheFreeElectron
SimoneB318 days ago

Hi,
I have changed your project to read the status of the pins (GPIO 4-7) connected to 4 bistable relay.
The bistable relay is connected to the physical button to turn on the light.

Image RELAY (FINDER 26.02): http://www.ondaradio.es/portals/0/img/Productos/13772/P_26028230_12110521423156.jpg

Connection scheme: http://www.xorse.it/wp-content/uploads/2014/12/DipTrace-Schematic-Schema-Souliss-Tipito-Step-Relays-CUT.jpg

If you turn on the light from the physical button, to get the green icon on the browser should I do refresh (F5), how can I set an auto refresh in PHP code?

Thank you

TheFreeElectron (author)  SimoneB317 days ago
Hi Simone,
I do not have the time to really get into your project and read all your schematics but each pin has two mode:
   *When in "input", the read command will tell you whether the pin has incoming current or not.
    *When in "output", the read command will tell whether this pin is HIGH or LOW.

In any case, my php code was reading the new pin's status then sending it back to the client that will update his icon. Use the developer mode to see the server's response and if it's corresponding to what you want. If not, see what you need to change for this to work.

Hope I Helped,
TheFreeElectron 
jopiezettie2 months ago

Nice tutorial. My Christmas lights are working remote controlled from all over the world.

Just a question/remark. I used your files. When I use IE, I only can switch it on/off only one time. after that the GPIO are not responding anymore, but the pictures on the screen are still changing.

TheFreeElectron (author)  jopiezettie2 months ago
Thank you!

Concerning your issue, It may depend on your IE version, older versions are sometimes not able to execute some functions that other browsers or newer versions of IE can use.
Also try to check the code, they are maybe some errors or things like that, the developer's mode in Chrome is really useful.

Hope I helped,
TheFreeElectron

I can confirm that this is working perfectly when running firefox on a PC and safari on an IOS device. IE on a PC does not work and I believe I have it narrowed down to the javascript file. I'm not a JS guy, so I've beat my head against the wall trying to find the problem.

TheFreeElectron (author)  jim.trapnell20 days ago

Thank You for your feedback!
You're right IE (or at least older version) is the issue of web developers. Many commands, functionalities and so on are not compatible so you have the choice between using tricks, writing your code with all the IE exceptions or simply choosing not to support it. I made the last one so it may explain why not everything's not working on IE. So stop beating your poor head :)

Cheers,
TheFreeElectron

i made it. i found this site . (

http://www.noveldevices.co.uk/rp-webserverport ) and changed ports. and in my router wan and local ports have configured that i recive wan 80 and local 5223 and it works. i can now access to my pi over internet. thank you very much.

TheFreeElectron (author)  gago.babic.31 month ago

No problem, glad to know it works for you!

Martv1 month ago
(removed by author or community request)
TheFreeElectron (author)  Martv1 month ago
Hi Matv!
Thanks! Your project looks really interesting!
Concerning the input pins, you first need to initialize these pins as input with the "gpio mode 1 in" command then each time you want to read their status, simply use the "gpio read 1" command. Of course, you'll need the exec command to fetch what has been printed when executing the command. If everything's fine, this should work. ;)

Hope I helped,
TheFreeElectron
Martv1 month ago

Hi,
Thanks, it worked. this really is a good instructable.

I want to make a door alarm. I want to have two output pins(they are working) and two input pins. the output pins are for the buzzer and led, the input pins for my homemade tinfoil doorsensors. Do you know how to make the phpcode for the input pins?

Thanx

Thanx . in whole internet . this is for everyone. please just one more thing. how can i change port to display site to internet , since my operater has block port 80.

in my router i can assign some other port but not 80 or 8080....so how ... or where do i have to make change... please help . this is only thing i need. i do not know much about programing , so thanx again.

TheFreeElectron (author)  gago.babic.31 month ago
Oh Thank You!
This project was designed to be ran on a local network and I've never tested it outside my home but some made it as said in the comments.
80 is the default http port so if you want to change it you'll have to do several manipulations but nothing hard, I found this for you and apparently it's all about configuring Apache and your firewall:

http://superuser.com/questions/605148/are-there-good-alternative-http-ports-rather-than-port-80

http://stackoverflow.com/questions/3940909/configure-apache-to-listen-on-port-other-than-80

Also, as said in one of the post, When you changed your port, you'll have to precise it when browsing: For example: "www.address.comm:8989" where 8989 is the port you configured.

Hope I helped and that you'll find a solution to your issue.
TheFreeElectron
mikes131 month ago

Very informative instructable. I am working on a project where I need to control relays. I'm thinking this instructable covers about everything I want to do except I'd like to use tasker to send an http post to execute the command. The problem is I'm a terrible coder. Maybe you could point me in the right direction. I want to be able to send a http post that would turn on relay 1 then wait 1 second and turn on relay 2 for 2 seconds then turn both off and then wait for another command. Or send a different http post that would turn on relay 1 then wait 1 second and turn on relay 3 for 5 seconds then turn both off. Please help if you can. Thanks!

TheFreeElectron (author)  mikes131 month ago
Hi mike!
Thank you! to control relays, you can take a look at the project linked in the intro, it's directly using relays and wall plugs.
Concerning your sequence (turn on relay 1, wait...), you have several possibilities:
--You do it via the client (Tasker in your case) and ask it to send the appropriate request to the gpio.php page (since the index is just an interface for us humans ;) After, I've never used tasker so I have no idea if you can create a small script and execute it.
--You do it via the gpio.php page and replace the simple "gpio write command" by a longer batch script. However I don't know if it is possible to execute a full script in the same exec (if not, use multiple exec and sleep in php). This option being, I think, the simplest to put in place.
--You do it via a python daemon (or whatever language) but if not multi-threaded, your daemon will be blocked for the time of execution. That last option being the hardest to put in place but I described it more precisely in other comments.

These are different option you have, I let you choose. Google is also a very good friend, I'm sure that if you search for Rpi home automation you find even examples of code.

TheFreeElectron
LukasG21 month ago

Hello FreeElectron. Very nice Tutorial. But I've got a problem. I can't switch my LEDs over the web interface. Wiring Pi, my webserver and php works. Also I think i set the right permissions. Where could be the problem? Can you help me please? Thank you very much

TheFreeElectron (author)  LukasG21 month ago
Hi Lukas,

Thank you! Concerning your issue, I can't tell a lot about it, if everything is working separately, It means the problem is happening between a system and another, between php and wiring Pi for instance. This way, the more you know about what is happening and the more chance you have to find the problem.Therefore, try several simple scripts and commands to test each connection between two systems, one by one, and if everything is still not working, think a little bit more time about it before restarting from zero. That's how I do in such a case.

That's all I can say thousand miles away, I hope you'll find the problem and also remember that google is men's best friend! :)

TheFreeElectron

Thank you. I found the Problem. I hab run the lighttpd server in place of the apache2 server. I read on another site, a variant with lighttpd. I thought the lighttpd server runs, but there was something wrong which i don't know.

But thanks for your Help. With Apache2 Server I didn't get problems. It runs very good.

TheFreeElectron (author)  LukasG21 month ago

No Problem, I'm glad it now works for you!

Running Lighttpd would actually be a quiet good idea as purposed in another comment, since as its name says, it's lighter than Apache and therefore better for the memory and CPU restricted Rpi but I never tried it so can't tell. Also at our scale (max 10 requests per second), performances aren't so important so apache is still good.

Have fun with your Rpi!

Electrolight2 months ago

So I really like what you are trying to do here. As I really am looking for functionality like this to interface with my already working Arduino system. But for someone who's never touched a Raspberry Pi it is a bit dense :/
Which would have been fine had I gone into it thinking I couldn't do it... But I thought it would have instructions for us simpletons. :/

TheFreeElectron (author)  Electrolight1 month ago
Thank you!
That's always hard to imagine how someone with less experience will understand your 'Ible and I tried to make it as simple as possible. Unfortunately I do not have time to rewrite all the 'Ible or at least to make it less "dense" as you said. And you are right on that point, every steps is teaching something quiet new and doing it rather quickly. So it is completely normal if you think (think is important) you cannot do it. But you are all wrong on that point. As I said in one of the first comments, begin with a simpler tutorial and as soon as you gained experience on the Rpi, come back here and you'll see, it's gonna be super easy! Me too, I had to learn before doing this project.

Concerning communicating with the Arduino, you'll have to do it via the serial port (USB) so in this case, the python daemon I described in other comments would be more appropriate.

Do not give up, have fun and keep going!  ;)

TheFreeElectron
Hello again,

I re-read my comment and it seemed more critical than I intended. I am still really grateful for your contribution to the community. I have already bought my raspberry pi and it gets here tomorrow. So I am looking forward to doing some introductory tutorials to have fun and gain experience with it. Hopefully in the near future I can come back to your tutorial and walk right through it ^^.

And to communicate with arduino I can use usb? That never even crossed my mind but it sounds genious. I was ready to to interface with arduini using the digital I/o pins which sound less "clean" as a final solution.

Thanks again,

PS: Your name is awesome! ^^
1-40 of 192Next »