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 107Next »
dragons.n.s2 months ago

Hi TheFreeElectron,

its me again, i have finish this instructable and its woking perfectly, yet it still have problems; it only works in RPi's browser 'midori' it don't work in any other smartphones or any other PC's browsers. so plz help me with that

TheFreeElectron (author)  dragons.n.s2 months ago

Hi Dragon,

I'm glad to know that's it's "perfectly" working for you!

Concerning your problem, it's kind of weird. The fact that it is working only on the Rpi itself doesn't really makes sense. However I may see an option, sometimes my LAN network doesn't work, I can access the Internet but I can't access other computers of my network. Also if I type my computer's address (also used as a server with ip 192.168.1.24), it works. It's probably because the browser recognizes the address and then connects directly to the server without asking anything to the router. I usually turn off/on the router and it works again!

Else maybe that your server isn't configured to accept connection others than from localhost, you should search "put wamp/lamp server online" on google or something like that.

Finally, I see no other options, you should test your LAN network if none of everything over is working. See if this problem happens to other computers, if you can connect to them. Also, google is one of best friend if you still have troubles.

Hope I Helped,

TheFreeElectron

Hi TheFreeElectron,

thanks again!!!!!!!!!!!!!

TheFreeElectron (author)  dragons.n.s2 months ago

No problem, do not hesitate if you need something else.

hey, you know what! it finally works 100%. thank you for your help TheFreeElectron

dragons.n.s2 months ago

Hi TheFreeElectron,

its me again, i have finish this instructable and its woking perfectly, yet it still have problems; it only works in RPi's browser 'midori' it don't work in any other smartphones or any other PC's browsers. so plz help me with that

dragons.n.s2 months ago

Hi TheFreeElectron,

its me again, i have some doubts on the final step, about the three files index.php, gpio.php and the JavaScript file. should i place the files in the /var/www/ or i have to create a new directory in the /home/pi. and i have another doubt, can i simply access page by using the ip address. and one more thing I'm sorry if my English skills are bad, B'coz i'm from india

TheFreeElectron (author)  dragons.n.s2 months ago
Hi Dragon,

You have to place all of them in the /var/www directory. If you can, download the zip file and simply paste the content in /var/www.
After that, to access your Rpi, you need its local/LAN address. To get it, you can type the "ifconfig" command in the terminal or access your router's page, you usually need to type 192.168.1.1 in the URL bar. Once you have this LAN ip, simply type it in the URL bar and if you did everything well, you should have the home page with the buttons.

Hope I helped,
TheFreeElectron

Hi TheFreeElectron,

Thanks for the reply it helped me a lot. and thanks again!!!!!!!! =)

TheFreeElectron (author)  dragons.n.s2 months ago
No problem! ;)
TheFreeElectron (author)  dragons.n.s2 months ago
No problem! ;)
Hayaalsh4 months ago

Hello TheFreeElectron :)

Thank you for this amazing tutorial!
but I have a question. One of the members said that they
can control the LED lights from New-Zealand! However, I cannot control the pi
unless the pi and my Smartphone are connected to the same network.

Is there any way to control the pi
from any place in the world without the need of being connected to the same
network?

I hope you get what I mean.

Hayaalsh Hayaalsh3 months ago

please answer me :(

TheFreeElectron (author)  Hayaalsh3 months ago

Hi Hayaalsh,

Sorry for responding so late but I haven't been noticed of your comment. Maybe, the mail alert messed up or I just simply deleted unintentionally the message.

In fact, If you want to control your pi from all over the world, you need to connect to the wan ip of your box/router instead of the lan ip of yout pi, a lot of websites are giving you this ip. After that, you need to forward the http port (80) to your pi. It means that all the requests sent to your box/router won't be blocked anymore but instead, they'll be sent to your pi. Therefore you can access your home server from all over the world! There are plenty of tutorials on the web, search for "home web server", "port forwarding" or "making your pi accessible from the internet".

To answer the question of your other comment, the pi is in fact pretty much limited when it comes to powering something. These ports are rather meant to communicate with other boards. Thereby, to control something that is asking for more power you better be creating a separate second circuit which would be able to deal with more power, you can easily do this with relays or transistors. There's a link in the first step that will send you to another 'Ible in which you see how to control light bulbs or such things.

I hope I answered your questions and again, I'm really sorry.

TheFreeElectron

Thank you so much. That was very helpful!

I will try what you said and let you know what happens :)

stupidmachine made it!3 months ago

A really great instructable!

I made a little remote control car with a RPi, a USB Battery, a NiCd battery, an old RC car that didn't work anymore, a wi-fi dongle and transistors. Your tutorial helped me a lot. Now I can connect to my RPi's own wi-fi and control my car on a HTML page, with the arrow keys or with the accelerometer if I use a mobile device.

PS: Sorry for my english...

DSC_0005.JPG
TheFreeElectron (author)  stupidmachine3 months ago

Hi Stupidmachine,

Thank you for your feedback. Your project looks really interesting and amazing, why not writing an Instructable?

Why not, maybe when I've got a little spare time.

I've already done some kind of instructable because it's a project for school but it's in french so I'll have to translate it.

TheFreeElectron (author)  stupidmachine3 months ago

Don't worry, I'm french too (now it makes no sense to keep speaking in english but let's allow everybody to understand us ;) If you only need to translate, google traduction is one of your best friend (believe me) or you can even ask your english teacher. I'll be looking forward for your 'Ible and doubtless giving it a link in the first step!

Actually I'm from Switzerland.

I should be able to translate it but I just lack time these days... But I'll do it.

TheFreeElectron (author)  stupidmachine3 months ago

Excuse me, I couldn't know. Take your time and if I may ask, which grade are you in?

There's no need to apologize, it's not like it was bad to be french. ;)

I'm finishing the highschool this year and I'll be at the EPFL (école polytechnique fédérale de Lausanne) next year in microtechnology.

TheFreeElectron (author)  stupidmachine3 months ago

I'm also in last year of highschool but I won't be able to know where I'll be next year until the end of June (That's one drawback of being french ;). I just have a question, why did you do a project for school, is it something specific to your highschool/section or more generally to all Switzerland?

For the last year of highschool, we have to choose a specific option, and I choosed IT. We're in a small class and it's really fun. We learnt some web languages and we're now doing stuff with the RPi. We could freely choose a project to do with it and that's why I did that...

TheFreeElectron (author)  stupidmachine3 months ago

Ok, very well. In France, we have the choice between four "specialties" : Biology, Sciences and Physics, Maths and something called "ISN" (standing for "Informatique et Sciences du Numérique") which is probably the equivalent of your option. I personally chose Maths because the program was more interesting and it was better for the schools I'm aiming. It represents only 2 hours a week. It's also in rather small classes and it's also a lot of fun ( That's my opinion ;). We can stay in contact by e-mail if you want, you can send me your address by personal message.

dragons.n.s3 months ago

can you upload video tutorial for this?????

TheFreeElectron (author)  dragons.n.s3 months ago

Hi Dragon,

That would be a great idea but I'm not really keen on doing videos, maybe for another 'Ible.

felipemundy3 months ago
Hayaalsh3 months ago

Hi again,

I have another 2 questions:

Can I use LED light bulb instead of those small LED lights?

And can I control things other than light? like a small motor? or it would require more power?

justcus4 months ago

I am unable to download

You can download the full project at: http://www.mediafire.com/download/1rgs4t52o8ptd5r/Web.zip

Any help would be greatly appreciated!

TheFreeElectron (author)  justcus4 months ago

Hi Justcus,

It still works for me. A further description of the problem would be useful.

I have tried to download the web.zip file using IE11 and Google Chrome but to no avail. When I click on the download button, I am usually directed to another site and it downloads other files that I am suspicious of. Other times I get "This Page Can't Be Displayed. Is there another way to get the file?

Thanks,

TheFreeElectron (author)  justcus4 months ago

Hi Justcus,

I've tried downloading the file on other computers and platforms, all of them worked. It's maybe a network configuration problem. Have you tried the other links in the comments?

Hi TheFreeElectron,

I forgot to applaud you on the great project. I have it working up to the point of setting up the iPhone or Android to control the Raspberry Pi. I don't know crap about programming these days so the step by step was great. I last programmed in assembler and BASIC for the 8080A (1976) after that it was all appliance computing.

I tried one other the was on mediafire.com/download/xxxx/xxx.zip and had the same problem. Maybe it is my firewall or antivirus. My pea brain just doesn't work so good anymore. Can the file be placed in dropbox or can it be downloaded from a ftp site. As far as my network configuration I think it is OK I have downloaded files from other sites without any problems. The older I get the more about computers I have forgotten. CRS!

Thanks,

TheFreeElectron (author)  justcus4 months ago

Hi Justcus,

Definitely you won't stop harassing me (just kidding, there's no problem). Thank you for your comment, that's always interesting to exchange experiences and thoughts with others, writing this 'Ible was a real pleasure and finally, knowing that some people actually learned something by reading what I wrote is an even greater pleasure. By the way, I wasn't even born in 1976 and I've never heard about the 8080A. ;)

Concerning your problem, I didn't take the risk of another website not to work so I added a new "last" step in which I pasted the whole code and uploaded the different pictures.

Cheers,

TheFreeElectron

Thanks so much for the finishing touch!!!

When you don't have anything to do, look up IMSAI 8080. That is where it all started for me. Keep up the excellent work!!!

Again thanks,

kounenos4 months ago

Hey TheFreeElectron,

First of all thanks for this nice Tutorial it helped me a lot with web interface! i 'm new in web interface and i try to upload the files in /var/www with WinSCP and tells me

Permission denied.
Error code: 3
Error message from server: Permission denied

you can help me a little?

TheFreeElectron (author)  kounenos4 months ago

Hi Kouenos,

This problem is surely caused by the fact that the user you're connecting with (probably pi) isn't owning the www directory (therefore doesn't have read/write rights in it). You need to use the command "sudo chown -R pi /var/www" if pi is your user.

If this is not the cause, I do not see other possible reasons, maybe a configuration problem. Try the "ls -l" command to check who's having the rights on this folder.

Hope I helped,

TheFreeElectron

motzer4 months ago
Hey TheFreeElectron,

first of all thanks for this nice Tutorial - it helped me a lot! I am using your start to controll som Remote sockets. There is a little problem with my web programming skills =) So the Problem is to switch one socket on you have to set two GPIOs High for a short amount of time (~1sec) and then one of these Ports has to bet set Low again after this second. And tried it now for hours but no solution.

Little Example what I tried in the javascript file:

var new_status = change_pin ( 0, 0);
var new_status = change_pin ( 4, 1);
setTimeout(change_pin( 4, 0),1000);

So Pin 0 and 4 are the two GPIOs to set, but Pin 4 has to be toggled after one second. With this code it works sometimes and sometimes not on clicks so sometimes Pin4 is set LOW and sometimes not. Do you have an idea or a advice for me to solve this "small" Problem?

PseudoCode
Set Pin 0 and 4 High
Change Button0 Picture to Green
wait 1 secodn
Set pin 4 Low again

Cheers,
Ben
TheFreeElectron (author)  motzer4 months ago

Hi Ben,

Thank you for your comment and your feedback, I really appreciate.

As I understood your idea, you push one button to turn high two GPIO ports, then 1 second after, one of the two ports is turned low. Correct me if I'm wrong.

I'm not really a pro of JavaScript but you're setting the new_status variable to what the change_pin function returns for (0,0) then for (4,1) without doing anything between or after. You're also setting the pin 0 to 0 <=> LOW (first line). That's what I can say about your code example.

After that, dealing with the delays as the client doesn't seem, to me, a good idea. You can do this in the PHP script using the sleep( TIME_IN_SECONDS ) function. Or by using the method I described in several comments below (using a python daemon and a PHP page to make the link). Here's an example I wrote for another 'Ible: http://www.mediafire.com/download/p88afnrybdmxsu6/... It isn't including a delay but it's still very interesting to understand the method. You just need to run the gpio_server.py file and to put the rest in your www folder. I also corrected several bugs and "upgraded" the way the project works. Again that's just a personal opinion and using JS is also a good idea.

Hope I helped, do not hesitate If you have any other questions/problems.

Cheers,

TheFreeElectron.

1-40 of 107Next »