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 163Next »
mikes139 days 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)  mikes138 days 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
LukasG210 days 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)  LukasG210 days 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)  LukasG210 days 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!

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)  Electrolight17 days 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! ^^
TheFreeElectron (author)  Electrolight17 days ago

No problem, I was far from being offended. Personally, I began with Adafruit's tutorials and several 'Ibles/random web pages, especially on setting up a web-server.

I've never tested Serial communication on the Rpi but seen several tutorials. It would allow you to transfer data at a much better rate to the arduino and back from it, also, doing it gives you the possibility to do other tasks from simple calculation to recording in a file... And in that case, everything is more independent. It's a bit like:
Interface <-> Web server <-> [Sockets] <-> Python daemon <-> [Serial] <-> Arduino <-> Amazing

It may sound quiet hard, but becomes very easy when you understood the principle and know python (or any language that would work by the way)

I hope I helped and gave you an idea that will lead to an interesting project and maybe your own 'Ible! ;)

Ps: Thanks and your name's awesome too!

Thank you for this information. It works perfectly :)

Thank you, glad to know it worked!
KHOR26 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)  KHOR25 days ago
You just need to place the www folder's content (after extracting web.zip) into the server's www folder.

thanks, i have done my interface , but i cant turn on my led .... , is that any problem? my power supply to pi is 5v 2amp for model B+

TheFreeElectron (author)  KHOR22 days ago

no problem, did you try turning your led on directly via the command line? (eg: "gpio mode LED_PIN out" then "gpio write LED_PIN 1")There are 2 possibilities:

-This command is not working and the problem is coming or from the gpio soft or a wrong pin connection...

-This command works and the problem is further, are all the other php test scripts working? Also try your browser's developer's mode, it's often useful to understand what's happening.

That's all I can say with what you said.

Hope I Helped,

jopiezettie25 days 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)  jopiezettie24 days 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
ThaddeusW28 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)  ThaddeusW25 days 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.
amaanu1 month ago

What if i want to control a 50w load?

TheFreeElectron (author)  amaanu1 month 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.
Zipkin1 month ago

Hi

Thanks,

It work!!!!!

TheFreeElectron (author)  Zipkin1 month 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.
khims2 months 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)  khims2 months 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)  khims2 months 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)  khims2 months 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.

phoneman12 months ago

Did I miss the CSS file?

TheFreeElectron (author)  phoneman12 months 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.

HabibN2 months 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)  HabibN2 months 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
oamparo2 months 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)  oamparo2 months 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
1-40 of 163Next »