Instructables
loading
loading

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

Picture of 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 313Next »
wxmanbna4 days 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!

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

Awesome. Thanks, enggsam!

TheFreeElectron (author)  wxmanbna4 days 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!20 days ago

perfectly working, thanks a lot :)

Picture1.png

Love the interface. Any chance of sharing the code and graphics for this?

TheFreeElectron (author)  enggsam20 days ago
No problem, enjoy your raspberry pi!
nitishmech6 days ago

Hi , I have a raspberry pi 2 model B , will this work on that ?

TheFreeElectron (author)  nitishmech5 days ago
Pins numbering may have changed but the code is nearly the same.
ITechGuy.7 days ago

Hi thanks a lot for this project I've been looking for something like this for a while and I have finally found it!Just a little question:Can you make it work for the BeagleBoneBlack? It has many more GPIO's and would work better for such applications.

TheFreeElectron (author)  ITechGuy.7 days ago
Hi!
Glad you found it! ;)
I've never used the beagle bone but it looks like it's able to run apache, php without any trouble so that part of the project should work. However, I'm using a library designed for the Rpi so that's were you'll have to do modifications. Search for an equivalent or maybe the Beagle-bone already have this kind of functionality (a command line as way to control the pins would be the easiest to use with this code). I can't help you on that, sorry.

Hope I Helped,
TheFreeElectron
There are commands to control GPIO's from the command line on the BBB and raspberry py even without a library but the pins arent consecutive numbers and I would have to modify all the for loops in the scripts...
TheFreeElectron (author)  LupuV6 days ago

Maybe try creating a list in which the element number 0 is corresponding to the id of your first pin, the number 1 to your second, and so on up to seven. This way, in every loop or script "0 to 7" is not telling the port's number but the number of the corresponding port in the list.
Also, the only thing you'll have to do is to change the command used in "exec" and "system" functions.

Is there any way I could use python?
LupuV6 days ago
btw its still me but on a different account
andresr417 days ago

Hi, thanks a lot for the post. I'm having issues running the scripts.js for some reason they are not working, any ideas why?

I created an index.php that runs a script that is supposed to open anoter page, when I open index.php in chrome from the local files in windows everything works great, but from the server it doesn't.

Any help is appreciated!

TheFreeElectron (author)  andresr416 days ago
Hi!

This may be caused by a wrong file path (relative or absolute), wrong reference to the desired file or something like that. Did you tested the website on a wamp server directly on your computer?
You may use chrome's developer's mode (Ctrl + Maj + I by default) to understand what is happening. The network and profile tabs being the most useful in your case.
Of course, also check if the problem is not coming from the script you created.

Hope I Helped,
TheFreeElectron
Stevec924 days ago


Hello,
I would like to ask for help ...
I did the procedure several times, only works with the page "It works !!" or with any php page, but after entering your project and insert the ip in the browser always gives me a blank screen ... help me ... and I'm sorry for my bad English!
Thanks in advance!

TheFreeElectron (author)  Stevec923 days ago
Hi Steve!
Here are some ideas that may help you solve your issue or at least troubleshoot it:
*Can you access directly to the resources (pictures,..) by entering their URL in you browser? "192.168.1.**/data/img/" for example
*Did you placed the files in the correct folder with the corresponding file tree?
*Did you allowed apache to access the www folder and its subfolders?

That's what I can say miles away ;)
Hope I Helped,
TheFreeElectron

It works !!! Thank you so much, I hadn't entered the permission to apache to get into subfolders !!! Thank you very warmly !!

TheFreeElectron (author)  Stevec923 days ago

No problem, glad it works for you now. Enjoy your Rpi!

I'm sorry you will still get annoyed but I would like to ask you a question .Why if I change the button images do not show them to me more and instead get back if the images of work before? Thanks in advance and excuse me again !!

TheFreeElectron (author)  Stevec923 days ago
That will never annoy me, don't worry ;)
I don't really understand what you mean. If you could explain again. I'm sorry.
I assume you tried to change the button's pictures. In that case, you need to give the exact same name to the new picture since all the code is using this name.

I put the same name of the image that you provided, however, does not show ...

TheFreeElectron (author)  Stevec922 days ago
In this case, try to explain your problem again. What did you tried? What did you changed?
I haven't understood the first time you explained.

Excuse me for my bad English!
I can not change the image of the interface, even changing the name.

TheFreeElectron (author)  Stevec922 days ago
You cannot rename the pictures in the img folder, these names are permanently defined in the html page and javascript.
If you want to change the button's picture. You have to replace the green button (in the green subfolder) by your own ON button picture. Same for red/off. In any case, you stricly have to keep the same names "green_1" or something like that.

Ok,thank you very much!!!!!!

Thanks for availability!!

TheFreeElectron (author)  Stevec922 days ago
No problem, have fun!
ShubhamA522 days ago

please help me out

i am not getting the idea about how to put images on my server

TheFreeElectron (author)  ShubhamA522 days ago
You just need to put them in the "var/www" folder. In my case, I created several sub-folders so the www directory is cleaner.

when i am trying to put them in this folder its saying."permission denied".

TheFreeElectron (author)  ShubhamA522 days ago
That's simply because the user pi isn't owning the www folder. You just need a chmod as said in one of the steps.

are you talking about this command

sudo chown -R pi /var/www

sudo chown -R www-data /var/www


it's done man quite a project

thanks for helping me

TheFreeElectron (author)  ShubhamA522 days ago
No problem, have fun tinkering!
ShubhamA522 days ago

please help

ShubhamA522 days ago

this is what i am getting on adding anything to the /var/www folder

IMG_20150429_140526762[1].jpg
ShubhamA522 days ago

please help me out

i am not getting the idea about how to put images on my server

1-40 of 313Next »