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.

 
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 148Next »
jopiezettie14 hours 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.

ThaddeusW3 days ago

Nice Tutorial. But a few words of caution:

I would avoid using wood in any electronics enclosure, especially one carrying mains voltage. It has a lower point of ignition and absorbs moisture. It might also be against code to have wood in any electrical enclosure. You can buy plastic or metal NEMA rated enclosures from manufactures such as Altech or Bud Industries. They are pretty cheap and can be purchased from a number of online retailers (Allied, Newark etc.) Also, the NEC wants the receptacles (sockets) mounted via the holes on the metal tabs on each end. You can do this from the inside using tapered flathead screws and a metal rail, perhaps a piece of aluminum angle, 15mm and 1.5-2mm thick (1/2 inch and 1/16 thick). The screws that come with the receptacles will do , they are 6-32 and you can purchase hardware for them at a hardware store quite easily. This way the face can be free of screw heads but you still have securely mounted receptacles that are up to code and considered safe for use.

I also would suggest using lighttpd. It is less bulky than Apache and better suited for embedded use cases like the memory constrained pi. It also handles PHP so no problems there.

TheFreeElectron (author)  ThaddeusW23 hours ago
Hi ThaddeusW,
Thank You, concerning the enclosure, I really agree with you but, as I remember, I never spoke about a wooden enclosure in this project and even have a plastic enclosure for the Rpi (the top was removed to access the pins)
I also agree with you concerning lighttpd but I used Apache simply because of my habits and that this 'Ible is rather instructional than a real 24/7 running project. Still, in that last case, your option is better.
KHOR2 days ago

sir,sorry,may i know that is it i need to transfer your web.zip file to raspberry pi and run all of the document in lxterminal?

TheFreeElectron (author)  KHOR23 hours ago
You just need to place the www folder's content (after extracting web.zip) into the server's www folder.
amaanu10 days ago

What if i want to control a 50w load?

TheFreeElectron (author)  amaanu10 days ago
The Raspberry Pi isn't powerfull enough, you better look at the project linked in the intro which is using relays, therefore allowing whatever load your relay can support.
Zipkin13 days ago

Hi

Thanks,

It work!!!!!

TheFreeElectron (author)  Zipkin12 days ago
No problem, glad to know you did it :)

You might want to have people install the g++ libraries. They were not installed for me so I was having compiling problems.

sudo apt-get install libc-dev g++ build-essential

I've never needed to execute that command but thank you for anybody that could need it.
RobertL51 month 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)  RobertL51 month 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.
khims1 month ago

hellooo

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)  khims1 month 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.

TheFreeElectron

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

TheFreeElectron (author)  khims1 month 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)  khims1 month 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.

phoneman11 month ago

Did I miss the CSS file?

TheFreeElectron (author)  phoneman11 month 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)  HabibN1 month 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,
TheFreeElectron
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)  oamparo1 month 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,
TheFreeElectron
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)

https://docs.google.com/document/d/1K6IOQwCZwZ90rc...

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 !

hxc3 months ago
thx...it work...
temp_-1906717386.jpg
TheFreeElectron (author)  hxc3 months ago
Glad to know that. Enjoy your raspberry pi
hxc3 months ago
hey....i download ur projeck web file..
index.php
gpio.php
script.js
data

all this file place at /var/www ? or only index.php
TheFreeElectron (author)  hxc3 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)  hxc3 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.

TheFreeElectron

i made it..thx
now need to setup hardware...
temp_-1115055010.jpg
TheFreeElectron (author)  hxc3 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?
IveaghC3 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)  IveaghC3 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,
TheFreeElectron
hitac3 months ago

Hi,

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.

-juha

1-40 of 148Next »