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 274Next »
Stevec919 hours 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!

MohsinH4 days ago

Hello,

Awesome article This really helped me out a lot,

I was just wondering if its possible to add lets say 8 push buttons to turn the LED light on or off to mimic the buttons on the web page.
I plan to use this with an 8 channel relay and i want to add manual control and web control.

TheFreeElectron (author)  MohsinH3 days ago
Hi MohsinH !
Thank you, it's always a pleasure to help!

Since the gpio program is completely independent from the web server, you can use it separately with the server running or not. That means manual and web control can work at the same time.

Using a button is actually just reading the button's state permanently (every 10ms for example). Therefore, you need to write a script reading the buttons pins and running permanently. You should find what you need on google:
https://www.cl.cam.ac.uk/projects/raspberrypi/tutorials/robot/buttons_and_switches/
In your case, you'll just have to modify the script so that when you press a button, it reads the corresponding relay's pin and change its state to the opposite.

Hope I Helped,
TheFreeElectron
rsharma609 days ago

hi,

very nicely structured tutorial, however i am stuck at last step the web folder that u have provided where do i have to paste it.

Do i copy the contents to /var/www/ folder or the folder requires to be inside it or any particular file.

thanks

TheFreeElectron (author)  rsharma608 days ago
Hi!
Thank you!

You have three files "index", "gpio", "script" and 1 folder "data". Place all of them in the /var/www folder. Just be careful about the access rights.

Hope I Helped,
TheFreeElectron
iQBenQi13 days ago

Hi,

This is a great project, that has been written extremely well! I am stuck, however, as the images won't load properly (see picture), even though I've followed everything accordingly.

Regards,

Ben

noimages.png
TheFreeElectron (author)  iQBenQi13 days ago
Hi Ben!
Thank you!

If you followed everything written, that's a bit weird that you get this problem. Are the pictures folders placed in the same directory as the php pages? with the correct file tree?
What do you get if you directly ask for the picture via your browser "192.168.1.**/data/img/green/green_0.jpg" for example?
Is the folder correctly owned? (access rights are very often the problem)

That's what I can imagine with what you told me, hope this helps. ;)

TheFreeElectron

It was indeed an issue with Permissions. Managed to get it sorted, thank you very much.

Again, a great project with great instructions.

Regards,
Ben

TheFreeElectron (author)  iQBenQi11 days ago

Glad it now works for you!

Have fun with your Raspberry Pi!

i made email python that send email. well i have a problem. I would like to --- when state of buton changes or I meen , when someone click and change buton from red to green that than I recive email. well i tryed with script.js but nothing worked ..... can you tell me is this posible? over script.js or some kind php code.

myemail.jpg
TheFreeElectron (author)  gago.babic.313 days ago
Hi !

I already played a bit with python and I have one simple solution: sockets.
No change in the JavaScript but in the gpio.php page. Instead of using the gpio software, you send requests to a python daemon via local port socket. The daemon is a simple script running permanently and listening to a given port. If it receives a request from the php script, it sends a mail or do whatever you want. To sum it up, you have something like this: User -> Html interface -> JavaScript -> PHP script (server side)-> sockets -> Python -> email sent.

Take a look at these pages:
http://php.net/manual/en/book.sockets.php
https://docs.python.org/2/howto/sockets.html

It may look quiet hard but it's actually easy as pie! ;)

Hope I Helped,
TheFreeElectron
i tryed to learn but nothing... i am totaly begginer. Can you do that for me ? if it is not a problem. my server is on 5223 port . i just don't know good enough. never hered for sockets . Please.!
TheFreeElectron (author)  gago.babic.312 days ago

Here's a code I made a while ago;
*index.php hasn't changed.
*Script.js has been cleaned and optimized.
*gpio.php is now using sockets (nothing to modify in it except removing the part receiving the data back)
*gpio_server.py has been added, remove the whole wiring pi part and replace with your smtp functions (everything happens in the "main" part around line 123)

Just launch gpio_server.py on your Rpi and that should work if you modified everything right. Try to visit the links I gave you to fully understand what's happening.

Hope I Helped,
TheFreeElectron

well I did that. i have error . in line 7 . it say import " wiringpi2 as wp " "no module named wirinpi2". i have wirinpi instaled but i don't know what is wiringpi2. do i have to erase 2 ? and thanx for help.

sorry. i am instaling wiringpi2 than I will see.

TheFreeElectron (author)  gago.babic.312 days ago

As I said, you can remove everything that is not related to the socket server so it also includes the wiring pi library that has nothing to do with it.
Keep lines 1-5, 95-132 and replace:

print >>sys.stderr, 'sending data back to the client'
data = str ( file_shiftOut ( data[0], data, clock, latch ) )
connection.sendall(data)

With :

print >>sys.stderr, 'sending mail'
"function sending mail"

You'll have to modify several things if you want the button to change its color when clicking it but you have here the main idea.

it is working. i guess. "starting up on localhost port 1000
waiting for a connection" but my butons are reciving server error. I don't know why. i will study this. but I am afraid that will not be successful
. thanx.

donk121 days ago

Thanks for the excellent project! I put the whole thing together and it works great! Keep up the good work. btw- I am a native english speaker (almost one language under control!) and your english is one step below impeccable.

very awesome!

TheFreeElectron (author)  donk121 days ago
Just a huge thank you! I'm really glad you made it! ;)
e.ma.niak made it!23 days ago

How to use i2c with it? Could be your next instructable.

P1050489.JPG
TheFreeElectron (author)  e.ma.niak23 days ago
Hi!

I think wiring pi does have a i2c functionality. You should check its reference. And you should be able to do everything via the gpio program and commands.
Unfortunately, I have no longer the time to do projects. Your picture looks really nice, what about writing an 'ible on it yourself ? ;)
ACPixel.27 days ago

hey man i,m kinda new to all this php and javascript mixing stuff... i was wondering how to just make a simple one button and one led. i cant seem to find any good in depth tutorials on ajax and the gpio pins. i would love a little explanation of how everything is being processed. i hate using things that i don't know how/why they work. I'm making all of this through ssh if that helps at all... i just don't really understand how it all works and how the html calls a javascript that calls php and gets values back... thanks for your time <3 i hope you can help me ;)

TheFreeElectron (author)  ACPixel.25 days ago
Hey!

I really understand the fact that you don't like using things you don't understand, I'm in the same case ;)
Actually the html is just the page's skeleton with the 8 pictures. JavaScript is transforming these pic into clickable buttons. Every time you click one, your browser (executing the script) is asking for the gpio.php page. Actually this page will execute wiring pi commands via "system" and "exec" functions to change the GPIO pins status. Once it read the new status, the php code prints it on the response and that's what the browser gets back. Finally, the JS reads that answer and updates the pic in function of it.

If you want to make a single button, you'll have to modify quite a lot of things. I think that an example has already been posted in one of the comments. You should take a look.

Hope I Helped,

TheFreeElectron

yeah man you totally helped <3 thank you so much!!!

TheFreeElectron (author)  ACPixel.25 days ago

No problem! ;)

AlW226 days ago

Such a useful tutorial and so well written, especially if English isn't your first language.

I'm trying to combine this project with the reading and activation of an NFC reader, which also uses pins 23 (GPIO 11) / 24 (GPIO 8). Is is possible to use alternative GPIO pins with this project??

TheFreeElectron (author)  AlW225 days ago
Hi!
Really thank you!

Actually, I have been a bit lazy so the Wiring Pi pin's number is directly corresponding to the pic's number. There are two workarounds:
-Add a certain number to the pin's number in gpio.php so instead of using WP pins 0 to 7, you'll be using n to 7+n. In this case, don't forget to subtract back at a moment if necessary.
-Change the pin's number in the JavaScript, you'll probably have more modifications to do.

In both cases, you'll have to be careful. I've put some verification at certain points and they may disturb the process if not adapted to your solution.

Hope I Helped,

TheFreeElectron
hughjeremy29 days ago

Hi there, great tutorial!

I love the idea and it looks great, but from what I can see this runs through the router. How would I make this so that the Rapsberry Pi is creating its own wifi where you can control the GPIO through this.

As another function I would find really useful, if there was a way to activate each pin through a URL link rather than just on a UI. For example when the URL is something like 'raspberrypi.ip/pin2=HIGH' it will set Pin 2 to high. Similar to on this page 'http://davstott.me.uk/index.php/2013/03/17/raspber...' Problem is I don't really understand whats happening over there :(

Thanks very much,

Hugh

TheFreeElectron (author)  hughjeremy29 days ago
Hi Hugh!

Thank you, that's always a pleasure!

Creating a wifi network between the Rpi and your phone (for example) should be possible. Anyway your phone may have the capability to create the network itself. Ask Google to find a tutorial.

This project is actually working with URL links. The UI is only used to generate the request via JavaScript. This is the line sending the request:
request.open( "GET" , "gpio.php?pin=" + pin + "&status=" + status );
You ask for the gpio.php page followed by the pin's number and the status. Like "gpio.php?pin=0&status=1"

Hope I Helped,
TheFreeElectron

Brilliant! I suspected, but wasn't sure if I was right.

I really appreciate the time you put into this and helping out, thank you very much!

TheFreeElectron (author)  hughjeremy28 days ago

It'll always be a pleasure! :)

Just thought I'd mention that, with the help of your tutorial, and five others (as well as countless scraps of one line sections of code from google) I have made a Frankenstein of a project that which will automatically unlock my car when I walk up to it, and lock it when I walk away. All I need to do now is wire the car keys instead of LEDs using some optocouplers, which I've done before and is fairly easy.

I'm only 17 and don't have any experience other than self taught tutorials like this that help me so much! So I wanted to say a massive thank you for your awesome tutorial that has helped me to create this first Frankenstein project of mine!

TheFreeElectron (author)  hughjeremy27 days ago

Your "Frankenstein" as you call it, looks amazingly cool! Try optimizing your project, cleaning it up a bit and why not publishing an 'Ible about it?

I'm pretty much in the same case as you, self-taught, just having fun with great things, being curious and discovering more and more! Now it's up to you to make things and share them with people in our case! ;)

Which parts of the script do I have to change if I want to change the commands to sudo rasperry-remote/send 10101 3 1 (and 0 to turn off). I'm just confused because there are a few command with "system" oder "exec" and I have no idea which is used for the commands to send the commands. Thanks for all answers.

I've searched a long time for this solution but I don't have the essential coding skills to adapt this project to my needs. I want to control sockets via WiFi.

TheFreeElectron (author)  AcousticAnimal29 days ago
Hi!

It's as you said the "system" and "exec" functions that are used to execute commands in a kind of virtual terminal. The expression between tiles is the command, the variable after it is the one used to get the result from this same command.
However you're trying to execute your command as super-user (via sudo) I don't think this will work since apache (or php) isn't super user.

Hope I Helped,
TheFreeElectron

Thank you very very much for the quick answer!

Is it possible to boot the raspberry pi directly into the Rasperry-remote directory? :) https://www.youtube.com/watch?v=ZOgJtNaJZ_4 This is the project I try to copy (it's german but the commands are the same). What I don't get is if I have to change te system and exec commands in index.php or gpio.php.

TheFreeElectron (author)  AcousticAnimal29 days ago

No problem! ;)
I'm not a linux expert, you better ask google. I don't know if it is possible.
Just use the "system" function:

system( "command" );

This will execute the command but don't know in what directory. I know it is possible to make a program "global" so you can launch it from anywhere you want. Another solution would be giving the program's full path. Try things like that, ask google. That's what I usually do in this kind of situation.

I've quickly watched the video, your project looks really cool! :)

gaelp11 month ago

Hello , we conducted a tutorial that works perfectly, but now we want to insert data from our arduino sensor on our website, but we do not know commme do. Can you please answer us ?

TheFreeElectron (author)  gaelp11 month ago
Hi!

I think the best way would be creating a script (python or whatever allowing serial and file writing) that you run every x minutes via a cron job. This script is interrogating the arduino about the sensor, receiving the value then writing it into a chosen file. You website would be using some php to read the file and display it on your website. If you want auto-refresh, add some JavaScript asking for the file every x seconds.
That's what I would do, it allows you to keep all your data and they are not dependent on your website.

Hope I Helped,
TheFreeElectron
Syed TalalH1 month ago

Hi, the question is relevant to this article only because I used your concept and extended it to make something like an mp3player. I made a php page which lists all songs in my directory and added javascript clickable links. I have one problem. when it tries to play the song I get this error

" * failed to open vchiq instance". the PHP command I use is system("omxplayer 01.mp3") and song is in the right directory. I tried to play with changing chown,chmod rwx permissions but still no solutions. Any help?

1-40 of 274Next »