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 247Next »
hughjeremy21 hours 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)  hughjeremy19 hours 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)  hughjeremy14 hours ago

It'll always be a pleasure! :)

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.

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.

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! :)

gaelp16 days 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)  gaelp16 days 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

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?

TheFreeElectron (author)  Syed TalalH8 days ago
Hi Syed!

This may help:

http://www.raspberrypi.org/forums/viewtopic.php?f=66&t=7104&start=25
https://digitalchild.info/raspberry-pi-failed-open-vchiq-instance-solved/

I've never used this kind of app but it looks like access rights problems.
deekaylol13 days ago

Hello! Excellent
work, working as it should J I´m just wondering, is It possible to make a timer?
For example in a form of slider? Or interval control? For example turn on from
1 PM to 3PM?

Thank you,
deekay

TheFreeElectron (author)  deekaylol13 days ago
Hi!
Thank You!
As said in some other comments, to add new functions. You have two solutions:
-- Do it in the JavaScript (but it won't work in your case)
-- Create a Python server that will be running permanently (this may be the solution if you have a changing interval with a slider)

Actually, the best way you can achieve this "1PM to 3PM" timer is to create a bash script turning lights off or on. Then you set a cron job to execute this script at the desired hour. You'll find plenty of information on Google.

Hope I Helped,
TheFreeElectron

lunadude15 days ago

Ok, I'm sorry if this is a stupid question, but when you say "GPIO Pin 27" in the diagram, do you mean the physical 27th pin, or the pin labelled "GPIO 27"? Again, sorry if I'm doing a dumb, but this would be helpful for me.

TheFreeElectron (author)  lunadude15 days ago

Hi!

Just look at this: http://wiringpi.com/pins/
Wiring pi pins do not go up to 27 so I think I was speaking about BCM GPIO 27, which is wiring Pi pin 2.

Hope I Helped,
TheFreeElectron

Thanks for clearing that up, and thanks for the great 'Ible! I really just needed to know if you meant BCM or Board numberings. **hint**(You might want to add that for other people like me)**hint**

Nevermind my first comment, I believe I have figured it out

e.ma.niak19 days ago
YOU Sir! You just made my day. Thanks a lot.
TheFreeElectron (author)  e.ma.niak19 days ago
Thanks a lot! Glad you liked it!
DeonS24 days ago

Hi. Thanks for the great work.

I only get "Array()" displayed in the browser when I direct my browser to the file "status.php" containing the following code:

<?php
exec ( "gpio -g read 12", $status );
print_r ( $status );
?>

All is good with the wiringPi installation; I can turn on LED, off, read status etc directly from the command line.

One difference, I am using lighttpd not Apache. Can this be the problem? When I run index.php (from browser) containing the code:

<?php

phpinfo()

?>

I successfully get the php 5 blue table listing System, Build Date, etc.

Can you possibly assist?

Thank you.

TheFreeElectron (author)  DeonS24 days ago

Hi Deon!

Thanks, glad you liked it!
Concerning your issue, I do not see any error in your code. Maybe lighttpd is actually the source of the problem but I've never used it so can't tell. Try to google "lighttp exec" like http://www.raspberrypi.org/forums/viewtopic.php?t=...

That's all I can say with what I have, good luck and I hope you'll solve your issue!

TheFreeElectron

DeonS24 days ago

Hi

Sorry the code I tested did not include "-g":

<?php
exec ( "gpio read 12", $status );
print_r ( $status );
?>

Thanks

rustic99 made it!1 month ago

TheFreeElectron,

Thank you for the brilliant tutorial! I'm having a bit of trouble changing what GPIO pin is used for button 0 (because I think I shorted out GPIO17 and damaged the Pi). In your diagram you define GPIO17 for button 0 but I cannot find this anywhere in your code. Where in the code can I change what GPIO pin is used? Other than that this was a fantastic tutorial!

IMG_7986.JPG
TheFreeElectron (author)  rustic991 month ago
Thank you! Your installation looks really nice!

Actually, I haven't defined anything, I just have 8 buttons (from 0 to 7) corresponding to Wiring Pi pins 0 to 7, the only link is the one defined by Gordon when he made the library and soft (see the link provided in one of the step). If you want to change a pin, you'll have to do it in the JS I think, instead of calling the "change_pin" function with parameters (0,1), do it with (8,1) where 8 is corresponding to the pin you wanna use.

Hope I Helped,
TheFreeElectron
rustic991 month ago

Red/green on and off buttons for everyone to use!

Green.jpgRed.jpg
TheFreeElectron (author)  rustic991 month ago
Nice work! Thank you!
fedexxx11 month ago

You have a java script (for php) for check the status of pin in real time?

fedexxx11 month ago

hi,

if i compile a file .c and i run on php ( system("./path"); ) it's not work!

I try whitc blink.c

TheFreeElectron (author)  fedexxx11 month ago
Hi!

I already tried such a thing, If I remember well, I had to place the compiled file into a special directory, so Linux recognized it as an application I could use by typing its name. This way, I had no trouble executing the compiled C code with a PHP script. Search for something like "creating linux commands".

Hope I Helped,
TheFreeElectron

I think that the error is on "wiringPI" because if executive the "blink" on Guest ( no root - no sudo) i have:

pi@raspberrypi / $ blink

wiringPiSetup: Must be root. (Did you forget sudo?)

Sorry for my english

TheFreeElectron (author)  fedexxx11 month ago

yeah that's right, you must be root when using the wiringpi lib in a C code (sse the reference for more info). So you cannot use it via PHP (or you find a tricky solution on the internet). I was executing batch scripts using the software provided by Gordon, so no need for sudo.

AnfalA1 month ago

you use the LED and some resistors and what else the tools you used for this project ?

TheFreeElectron (author)  AnfalA1 month ago
none, only a few wires and a breadboard.
AnfalA1 month ago

hi

please can you give me the tools for this project?

because i won't to make it .

thank you !

TheFreeElectron (author)  AnfalA1 month ago
Hi!

All the software and hardware required for this project are shown in this 'Ible. I don't really understand your request.

Hi,

Very informative tutorial. But how am i suppose to operate this from anywhere in the world??

Thanks in advance

Hi!

You'll need to open your router's port to allow incoming external connections. There are many tutorials on it, just google "access wamp server from outside" or something like this.

Hope I Helped,
TheFreeElectron
I have relay. And when i connect relay to pi it turn all relay lights on. 1. time with relay so i do not know is that normal. When i turn off light in the room connected to relay it light on a litle diode on the relay. When turn on .. than ,on the relay diode is off.( I think that should be reverse . When red picture is displayed than ralay or diode light on should be off.) If that is true. Can you tell me how to reverse all picture. Red to be green . Or how to change state on whole php and java from 0 when is off to 1 to be off and 0 to be on. ... it is hard to explain , sorry for long explanation. Maybe i should say how to reverse 0 and 1 state .
TheFreeElectron (author)  gago.babic.31 month ago

Hi!
If your problem is only that on and off status are reversed, simply reverse the green and red pictures in the index.php and script.js or by renaming the pictures directly (this method being a bit long and messy).

Hope I Helped,
TheFreeElectron

1-40 of 247Next »