Introduction: Simple and Intuitive Web Interface for Your Raspberry Pi

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: https://www.instructables.com/id/Web-Controlled-8-Channel-Powerstrip/. Thanks to Rleddington for his amazing project.

Update: French version here

Step 1: The Electronic Part

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

Step 2: Installing and Using the Wiring Pi Library

As said before, Wiring Pi is a library. It simplifies a lot using the Raspberry Pi GPIOs (one command instead a long process). It also means that you can use it in any of your C codes. However, we won't build and use a C program but the Gpio utility. It's a software made by Gordon and coming with the library. It allows you to control the GPIOs in a bash script or directly in a command line. Using this utility is however a lot slower than a C program.

We first need to install it. Gordon himself is explaining it very well on his website: http://wiringpi.com/download-and-install/. You just need to download it from GIT then to build it using the ./build command.
You should now be able to use the Gpio utility, type the "gpio mode 0 out" command to test it out. If nothing special appears, everything's fine. Else, if the board is printing "command not found error" or something like that, be sure that you've followed the guide and build the library.

Let's turn on and off the first LED (Wiring pin 0). You first need to set the pin as an output. Use the "gpio mode 0 out" command to do so. "0" is the wiring pin number and "out" simply stands for output. Now, use the "gpio write 0 1" command to turn on your LED. "0" is again the pin number and "1" is the status (1 for ON and 0 for OFF). If everything's fine you should see your LED shining. To turn it off, simply use the "gpio write 0 0" command.
Just a little tip, if you want to use the actual pin number (GPIO-17) instead of the Wiring Pi number (0 is corresponding to GPIO-17), use the -g flag in your command. Ex: "gpio -g write 17 1" instead of "gpio write 0 1".

There is also the "gpio read" command which allows you to read the pin's status. It may seems useless when the pin has been set as an output but it allows you to be sure of the pin's status when you can't see the LED. Using it is as simple as before, just type "gpio read 0" where "0" is the wiring pin number. The command is returning the pin's status (again 1 for ON and 0 for OFF).

Finally the Wiring Pi library is containing a lot of other commands/functions but I'm not gonna cover them in this instructable since there are not useful here. See this page if you are more curious: http://wiringpi.com/reference/ (library's functions) and https://projects.drogon.net/raspberry-pi/wiringpi/the-gpio-utility/ or the "man gpio" command for the Gpio utility.

Now that you can use this utility, let's play a little bit with it. You can first, if it's not already the case, control remotely your Raspberry Pi with SSH. You can use Putty for Windows or ServerAuditor for your Smartphone. Then have fun with bash scripts such as this one which is turning on LEDs 0 to 7, waiting 2 seconds, then turning them off again:

#!/bin/bash

#set mode to output
for i in 0 1 2 3 4 5 6 7;
do gpio mode $i out;
done;

#turn on LEDs 0 to 7
for i in 0 1 2 3 4 5 6 7;
do gpio write $i 1;
done;

#wait 2 seconds
sleep 2;

#turn LEDs off
for i in 0 1 2 3 4 5 6 7;
do gpio write $i 0;
done;

Step 3: Installing a Web Server Then Transferring Your Website to It

Controlling the LEDs remotely with SSH is pretty cool but the interface (console) isn't very user friendly and typing the commands every time is long and annoying. That's why we need a graphical interface for our project.
Programming an app for each OS (IOS, Android, Windows phone, Mac, Linux, Windows,...) would be too long and would require to know a lot of different languages for nearly nothing. It would also require to do an application running on the Raspberry Pi. Making it this way would be overkill and time wasting.
That's why a website is the best solution, it's compatible with all devices and you "only" need to know four languages: HTML (for the page's skeleton), CSS (page's style), PHP (interactions with the server) and JavaScript (interactions with the user).

We indeed need to install a web server on the Raspberry Pi. In our case, we don't need a MySQL database, only a HTTP server and its PHP extension.
After updating your Raspberry Pi with the "sudo apt-get update" command, type "sudo apt-get install apache2 php5 libapache2-mod-php5" to install Apache HTTP server and PHP5 extension. You can now test if your server is working by typing the IP of your Raspberry Pi in your browser. You should now see a "It works!" page with two other lines. If you don't, then check your board's IP, try re-installing Apache or rebooting your Raspberry Pi. This page is showing that your Apache server is working properly but not its PHP extension. To check it, navigate to your "/var/www/" directory by using the "cd /var/www/" command. If you use the "ls" command, you should have only one file named "index.html". This file corresponds to the "It works!" page. You can now delete it ("sudo rm index.html") and create another one called "index.php" (use "sudo nano index.php"). Then type the following text:

<?php
    phpinfo();
?>


After saving it using ^o (Ctrl + o), exit nano editor with ^x (Ctrl + x). Now if you refresh your browser, you should see a long page with lots of information about your server and PHP. If you don't, check the index.php file, try re-installing PHP or try to understand the error displayed instead of the page (Google it if necessary).

If both pages were correctly displayed, then you now have a fully functional Apache/PHP server but using nano every time is annoying and not very comfortable. We indeed need to transfer files from your computer to your Raspberry Pi. You may want to install a FTP server but it isn't necessary, you can already transfer files using the SFTP protocol. All you need is an SFTP client on your computer. I'm personally using WinSCP for Windows but there are Cyberduck for mac and Filezilla for Linux. If you try transferring files before reading what's next, you'll probably have issues such as "access refused" or "cannot write here". It's due to the fact that the user pi isn't owning the www directory. Indeed, if you try the "ls -l /var/www" command, you'll see that only root (the super user) is owning the www directory. You can (like I did) use the "sudo chown -R pi /var/www" command to change it or create a group named www-data in which you place the pi user then use the "sudo chown -R www-data /var/www" command. The -R flag is standing for recursive, it means that the user/group isn't owning only the directory itself but also everything inside (index.php as example).
You now have your server ready to work and to receive web pages. Have fun with it if know HTML, CSS and PHP.

Edit:Apparently, apache's default folder has been changed to "var/www/html" so may need to adapt the previous commands.

Step 4: Controlling the LEDs With PHP

We now have a web server and a library, let' put them together.
PHP stands for "PHP: Hypertext Preprocessor", It's a server side scripting language. It means that the PHP code is executed once (each time the page is requested) by the server and cannot be seen by the client. I used this language because it's the most popular (and that's the only one I know) but you have to know that they are other server side languages like Python, Ruby, Lua, Perl, ... However, I don't know if the functions we are gonna use have their equivalents in these languages.

Executing applications with a PHP code can be done with two different functions: exec (for execute) and system. Firstly, the "system" function. It takes two parameters: "system ( string $command, int $return_var )", as you guessed it, the first parameter is the command to execute and the second one is the returned status of the executed command. The second parameter isn't compulsory. You can use this function if you don't expect an answer from the command executed. Thus, you can use it if you need to execute "gpio mode 0 out" or "gpio write 0 1" commands. Example:

<?php
     system ( "gpio mode 0 out" );
     system ( "gpio write 0 1" );
?>

Then, the "exec" function. This function is making exactly the same work than "system" but it reads and stores what the command printed. It takes three parameters: "exec ( string $command, array $output, int $return_var )", again $command and $return_var are the same parameters and the only difference is the $output array. As it's name says it will store the command's output in an array. Thus, you can use this function if you need what the command prints like with the "gpio read 0" command. Example:

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

You can now execute nearly whatever command you want but let's make a little PHP example to practice: We will turn on LEDs 0 to 7, then wait 2 seconds, then turn them off. Just like we did with the bash script. Edit the index.php file with the following code:

<?php
$status = array ( 0 );
//set pins mode to output
for ($i = 0; $i <= 7; $i++ ) {
     system ( "gpio mode ".$i." out" );
}
//turns on the LEDs
for ($i = 0; $i <= 7; $i++ ) {
     system ( "gpio write ".$i." 1" );
}
//reads and prints the LEDs status
for ($i = 0; $i <= 7; $i++ ) {
     exec ( "gpio read ".$i, $status );
     echo ( $status[0] );
}
//waits 2 seconds
sleep ( 2 );
//turns off the LEDs
for ($i = 0; $i <= 7; $i++ ) {
     system ( "gpio write ".$i." 0" );
}
?>


Step 5: Making the Interface

We can now control our Raspberry Pi with simple PHP scripts but there is no interaction with the user and thereby we can't choose the LED to turn on/off. Let's make the interface!
It's composed of pictures I've found on Google images (search for "on/off button"). One was green and the other one red, I just added the number using The Gimp. Each picture/button is corresponding to its LED, so if you click on one of these, the corresponding LED will be turned on/off and the picture will be changed to its green/red version. The page's skeleton will be made with HTML, the server interactions and page's generation with PHP and at last JavaScript to manage interactions with the user and page's animation. If you don't know, JavaScript is a client side language and unlike PHP, it's executed not once, but continuously by your browser. That's why you can change the page's look without reloading it or accessing to an other. If you are wondering why I spoke about CSS before, it's just because we need it for some style and page-layout like the the black background. I didn't make a full .css file because it wasn't necessary here.
We first need an "index.php" file (extension is .php and not .html cause we will use PHP code, it helps the server to know if there is PHP to execute before sending the generated page). This page is the main page containing the 8 buttons. These buttons are first generated with a "exec ( "gpio read ".$i, $output );" in a for loop. Then we need to detect when the user is clicking on one of these buttons. That's where the JavaScript is useful, I put it in a separate file called "script.js" but it's still included in index.php. The script is simply adding an event listener to all of the eight buttons and each time one of these is pressed, it uses a function which is asking for gpio.php, receiving the answer then returning it. Finally, in function of this, the JavaScript changes the button to red (for OFF) or to green (for ON). Now, the last page: gpio.php. It contains the PHP code to turn on/off the LEDs in function of what the JavaScript function sent. The user shouldn't normally ask for this precise page but there is one golden rule when creating websites and you should always remember this one: "NEVER TRUST THE USER". In other words, never think the user is always gonna do what you think he's gonna do. Thus, I added some securities at the begin of the PHP code like making sure the user gave a correct value and not a letter as example. I made a small diagram to sum up all this text.

You can download the full project directly on this website below.

Step 6: Conclusion and Ideas of Improvements

This small but long explained project was fun and I learned a lot. I hope you did the same. However, controlling LEDs isn't very useful. That's why what we made is rather a tool than a real project. Christmas is soon (about one and a half months from the day I wrote this instructable) so why not replacing LEDs by relays and controlling lights around your house. There are some pretty good relay boards for the Raspberry Pi on Ebay and more generally on the Internet. Alternatively, and if you're not scared about working on your house, you can even control your house's lights, garage door, coffee machine, heating system, ... The only limit is your imagination.
There are also a lot of possible improvements like changing the interface, adding more LEDs via a shift register, using vocal recognition, ... In addition, with PHP, you are not limited to gpio write or read. You can use the full Gpio utility and thus interact with other devices with UART or any other implemented protocol. You can also use PWM (Pulse Width Modification) to control servos, ...
Writing this Instructable and sharing my little knowledge was a great pleasure for me and I hope it was the same for you to read it. I tried to keep it simple but at the same time to teach the most possible. I didn't want to do a simple and dumb step by step: "download this code, run it, you're done". I think that something is useless to learn until you understand how it works or why you do this and not that. Let me know if you think it's the good way or if I should do it otherwise.

PS: This is my very first instructable and English is not my native language so if you have any comment, advice, suggestion, idea, ... Just let me know, I'll be glad to answer you and of course to learn.

Comments

author
JakeB136 (author)2017-09-18

hey i got everything but the last, my webpage gets the title and black background, but doesnt load any buttons

author
trock62 made it! (author)2017-09-10

Fantastic, this is just what I needed to finish my project. All three of my garage doors open and the three lights (front side and back). I enjoyed this and plan on trying to learn more. But your design was use and go ready for beginners like me. I appreciate PPL like you willing to help the less knowledge. This was very easy, and the whole project no has my garage totally automated now.

IMG_20170910_171835.jpg21273617_1485150531531023_1916343435441892529_o.jpg
author
Metoliusk made it! (author)2016-12-27

Thank you for the excellent instructable; this is exactly what I was looking for when I wanted to control my 8 channel relay board over the web with a GUI. As others, I wanted to use different gpio pins than 0-7 that TheFreeElectron used and he actually mentioned how to do it in the comments, but I thought I would post the slightly modified gpio.php and index.php files for others that had trouble specifying what gpio pins to trigger. Like TheFreeElectron said, add an array named $pin in the gpio.php file with your specific pin numbers - will look something like this depending on the pins you are using: "$pin = array(21,22,23,24,25,27,28,29);". Then change the "$pic" to "$pin[$pic]" in the "system" and "exec" lines of the code. Next, in the index.php file, add the same "$pin = array(21,22,23,24,25,27,28,29);" array then change the "$i" to "$pin[$i]" in the "system" and "exec" lines of code. That's all you you have to do to be able to specify what pins you want to control with this slick web app. Thanks again, TheFreeElectron!

gpio.PNGindex.PNG
author
CesarO27 (author)Metoliusk2017-09-10

thank you very much, question: what can i do to change the icons. I want it when this high is red and when Low is green.

Thank you.

author
AtilaH1 (author)Metoliusk2017-06-08

Hi

Metoliusk .

Just a quick question. Is it really working ?? I did the same .....page getting loaded successfully and even button changing as per clicks but no execution or action in GPIO pins. Fyi .. The Author Files are absolutely working fine for me .But i am still finding how to use my own desired GPIOS. One more question. What pin numbers actually used in this gpio.php file( BCM,Wpi,Physical ???) I am using Pi 3 Model B

Thanks

Atila

author
Metoliusk (author)AtilaH12017-06-08

Hello,
Yes it is working really well, I currently have it running on a raspberry pi 2 (pi 3 will work the same) controlling an 8-channel relay board that is connected to a traffic light. I can control it through a web browser on any device that is on my WiFi network. I did have a few refresh issues with Internet Explorer if I remember correctly so try to use it on Google Chrome if you are having issues with IE or Edge. The pin numbers are the gpio pin numbers. If you run the command "gpio readall' you will see where the gpio pins are located and what state they are in. If you follow his directions and then change his gpio.php and index.php files to look like the ones I posted it should work just fine. I hope that helps!

author
tobiassparrow (author)2017-09-08

HI, nice project, i use it for a backyard Door.

But i have one problem, when i insert a "sleep(0,2)" argument to open the relay again, i get a blank website. I only use one button ($i= 4; $i<5;)

Code:

for ($i = 4; $i < 5; $i++) {

//if off

if ($val_array[$i][0] == 0 ) {

echo ("<img id='button_".$i."' src='data/img/red/red_".$i.".jpg' onclick='change_pin (".$i.");'/>");

sleep(0,2);

//turns off

for ($i = 4; $i <= 5; $i++ ) {
system ( "gpio write ".$i." 0" );

}

i don´t know whats wrong

author
profesorcuauh made it! (author)2017-07-24

Great job!! It's working already!! Thanks a lot!!

IMG_20170724_075935.jpg
author

Hi, What is that blue board?

author
MohammadR106 made it! (author)2017-08-30

I have seen many tutorials on this subject. Your method was straightforward and well structured.

photo_2017-08-30_20-54-03.jpg
author
sammysouza6 (author)2017-08-17

I've finished this project but I'm having an issue replacing the icons with some I created specifically for my setup, when I replace the images in var/www/data , the original icons still show up... Any ideas?

author
uffek (author)sammysouza62017-08-21

Hi

I had the same problem.....clearing browser's cache (history) made things right.

author
uffek made it! (author)2017-08-03

Very good instructable...works OK ... easy to follow.

IMG_20170803_093013067.jpg
author
uffek (author)uffek2017-08-04

Trying to figure out the best way to update the state of outputs to every browser directed to control page....if <meta http-equiv="refresh" content="10" > is added to head section of php the whole page is updated every 10 sec but there must be a better way .... to update onlly the button pictures .. if someone has done it please share... Cheers, Uffek

author
GlennK2 (author)2017-06-21

Hello there, I love this instructable. I do have a question though, what if I wanted one of the buttons to turn on when clicked, but turn off again 1 second later? I'm not a coder by any means but I'm using one of the buttons to control a relay that is connected to a garage door opener. Thanks again for all of your help.

author
vieuxpalais (author)GlennK22017-07-13

Hi, you can use your browser to do the trick with this small php

save it with any name and then call with this eemple

// ======Start =============

<?php

//

// ex: http://192.168.1.40/1sec.php/?pin=3

// This turn ON Pin 3 for 1 seconds and turn off after

//

$pin = htmlspecialchars($_GET["pin"]);

//

system ( "gpio mode {$pin} out" );

system ( "gpio write {$pin} 1 " );

sleep(1);

system ( "gpio write {$pin} 0 " );

system ( "gpio read {$pin}" );

?>

// === end ====

author
trent155h (author)vieuxpalais2017-07-13

where do you put it

author
vieuxpalais (author)trent155h2017-07-15

All php files should be on: /var/www/html/

author
mettauk (author)2016-03-28

Hi, a great project, I got it working first time. However the pins I want to you are different.

I want to change to GPIO pins 17,27,22,5,6,13 but I cannot see how to change the pins in your scrips.

Any help would be very welcome.

author
vieuxpalais (author)mettauk2017-07-13

Pin numbers ref:

Led0=pin11

Led1=pin12

Led2=pin13

Led3=pin15

Led4-pin16

Led5=pin18

Led6=pin22

Led7=pin7

author
lcipir (author)mettauk2016-04-21

I was really hoping he'd answer this. It was also asked before and it was stated that it is already in the instructions how to. Really though, all that is in the instructions was how to wire your GPIO to pins 0 -7, not how to re-wire your existing project to those pins...

I think question could be better asked is how to alter from pins 0-7 so those of us not starting from scratch can use the pins already in use.

author
TheFreeElectron (author)lcipir2016-04-22

Hi!

I think I already answered this question in another comment but if I didn't then here's how you can use whatever pins you want:
-Use the same code
-In gpio.php add an array making the link between numbers 0 to 7 and the pins' number you want to use. For instance [5,6,7,8...,13] if you want to use pins 5 to 13. It doesn't need to be in a particular order. That way, the user still asks for pin 0 which will, due to the array, corresponds to its first element. Here it would be 5.

Hope I Helped,
TheFreeElectron

author
NivethK1 (author)TheFreeElectron2016-10-27

please help me, where do i add the files in the zip folder to

author
lcipir (author)TheFreeElectron2016-04-22

Thank you for answering! So would an example of that be near the top?

0 = 5

1 = 6

etc?

Thanks.

author
TheFreeElectron (author)lcipir2016-04-23

That's it. So instead of putting $pin (from 0 to 7) in the exec function, you put $array[ $pin ] (array for 5 to 13)

author
lcipir (author)TheFreeElectron2016-04-23

Sorry if I am not getting this but here is how my exec line reads in gpio.php

exec ("gpio read ".$pic, $status, $return );

I don't get at all what you have said to swap out into this line or where 0-7 are getting pulled from this line to begin with? Here is the entire gpio.php file if you could replace in here exactly how to add these random pins for easy example: 0,2,3,5,8,9,12,13.

Thanks again for your time~!

<?php

//TheFreeElectron 2015, https://www.instructables.com/member/TheFreeElectr...

//This page is requested by the JavaScript, it updates the pin's status and then print it

//Getting and using values

if (isset ( $_GET["pic"] )) {

$pic = strip_tags ($_GET["pic"]);

//test if value is a number

if ( (is_numeric($pic)) && ($pic <= 7) && ($pic >= 0) ) {

//set the gpio's mode to output

system("gpio mode ".$pic." out");

//reading pin's status

exec ("gpio read ".$pic, $status, $return );

//set the gpio to high/low

if ($status[0] == "0" ) { $status[0] = "1"; }

else if ($status[0] == "1" ) { $status[0] = "0"; }

system("gpio write ".$pic." ".$status[0] );

//reading pin's status

exec ("gpio read ".$pic, $status, $return );

//print it to the client on the response

echo($status[0]);

}

else { echo ("fail"); }

} //print fail if cannot use values

else { echo ("fail"); }

?>

author
TheFreeElectron (author)lcipir2016-04-23

At the beginning of the code, create $array = [5,...,13]
Then in the system and exec commands, replace $pic by $array[$pic]

author
lcipir (author)TheFreeElectron2016-04-23

Ok, I did exactly as you said and now the page errors if you try to click on a on/off button. This is to the point of going to look for another instructable.

I edited to what you said as you can see below. I am not sure why you would not just post a complete example to get this simple question out of the way.

<?php

//TheFreeElectron 2015, https://www.instructables.com/member/TheFreeElectr...

//This page is requested by the JavaScript, it updates the pin's status and then print it

//Getting and using values

if (isset ( $_GET["pic"] )) {

$pic = strip_tags ($_GET["pic"]);

$array = [0,27,2,3,4,5,6,7]

//test if value is a number

if ( (is_numeric($pic)) && ($pic <= 7) && ($pic >= 0) ) {

//set the gpio's mode to output

system("gpio mode ".$array[$pic]." out");

//reading pin's status

exec ("gpio read ".$array[$pic], $status, $return );

//set the gpio to high/low

if ($status[0] == "0" ) { $status[0] = "1"; }

else if ($status[0] == "1" ) { $status[0] = "0"; }

system("gpio write ".$array[$pic]." ".$status[0] );

//reading pin's status

exec ("gpio read ".$array[$pic], $status, $return );

//print it to the client on the response

echo($status[0]);

}

else { echo ("fail"); }

} //print fail if cannot use values

else { echo ("fail"); }

?>

author
TheFreeElectron (author)lcipir2016-04-23

Try to ask directly for /gpio.php?pic=0 in your browser to see what it gives you. In function of that you should be able to troubleshoot the error: print variables, try separate commands, etc, simply do what a programmer would do.

If you want to look for another instructable, you are obviously absolutely free.

author
lcipir (author)TheFreeElectron2016-04-23

more headache than it's worth.. thank you anyway. Really too bad you couldn't have just answered differently to solve vs idk what. How hard would it have been for you to just look at the code I posted and corrected it? If we were coders we likely wouldn't be on this site and if you just confuse people you are not helping them learn..

author
stax12 (author)lcipir2016-09-06

You know I actually signed up for this site just so I could reply to your post. I find it frustrating that after this guys spends all that time getting this documented and written up that you can't spend a little time troubleshooting your own issue. Having been a programmer for 20+ years I have found that when there is an issue with my code it is very often a missing semi-colon or some typo or the like. The first thing you should have learned with DIY (Do It Yourself) projects is that there are hundreds of projects out there that will be close do what you want to do, but you might need to spend a little time on your own playing with it to find out how to do exactly what you want to do. Learning isn't always easy and you will find it may not always fun. But in the end after you have spent the time troubleshooting it I promise it will be worth the time learning. Especially when someone like this is pointing the way. It is when you are on your own in uncharted territory that really causes you to pause and think if this might be beyond your capabilities. The hardest part is sometimes you have to go back to the beginning and start all over to really find your issue. Good luck, I am sure if you spend just a little time you will figure it out!

author
Eddberry (author)lcipir2016-04-27

You really need to take a look at yourself. This is an excellent tutorial, and the author has been extremely helpful to you and many others.

Helping them learn != doing it for them.

Be nice!

author
mettauk (author)TheFreeElectron2016-04-27

I'm not sure I am understanding how to use various GPIO pins that are not in any sequence...

So $array = [5,13,19,18,22] would be OK? and $pic is a mystery.. but the same?

author
StevenK49 (author)2017-04-09

My button images come out like this, what is the matter?

Screenshot_2017-04-09-18-49-42.jpg
author
vieuxpalais (author)StevenK492017-07-13

Hi, images are not on the right Directory. This why you can't see it

Images structure are:

http://local-ip/data/img/green/green_0.jpg

http://local-ip/data/img/red/red_0.jpg

author
WagnerF4 (author)2017-06-23

Good.. =)

author
mgonzo619 (author)2017-06-07

I have a question about updating the web page. I noticed if you have two browsers open to the web page and one makes a pin selection the second browser will not see the pin selection made until it manually refreshes the page. Is there a way to force the page to refresh for every browser when a change is made?

author
wpnsmith (author)2017-06-07

This is just what I was looking for to start putting control buttons on my Raspberry Pi websites, thanks so much!

author
ThorbenK1 made it! (author)2017-05-08

Great. Thanks a lot, i use this script in my Project poolcontroller. The waf (woman accept factor) is very high. It works fine for me. The only "error" with IE or edge, i can only click one time, with Chrome or Firefox all okay. :-( This year i have change from http to https, and all is okay.

gpio2.JPGgpio1.jpg
author
Mulepunch (author)2017-05-02

Great tutorial! I am trying to embed a video stream in the index.php file. I have successfully done this by adding an iframe. However, once I add the iframe I can only control the leds a single time. So I can turn any led on but in order to hit the button a second time and turn the led off I have to refresh the webpage. Can someone explain what I'm doing wrong?

author
Mulepunch (author)Mulepunch2017-05-02

So I've played with this some more and it appears to be because the video stream is constant. If I replace the video stream with a still image it all works fine. Is there a special way in which I could embed the video stream while still being able to control the LEDs?

author
PeterK107 (author)2017-04-23

Nice :)

author
MartynSudworth (author)2017-04-11

"English is not my native language"? - in that case I'm even more impressed, it's better English that most tutorials I've seen, many thanks.

author
StevenK49 (author)2017-04-09

The code is super. Only have problem with images of buttons

author
CorneliusBueller (author)2017-04-08

I cannot change the state of the LEDs by clicking on the images in the interface. I can change them by modifying parts of the code, but the images never appear to be clickable. What am I doing wrong?

author
orskier (author)2017-03-29

Thanks a lot for this great Instructable - it is a great start for my project. And your English is very good!

I wonder if you can suggest how to make the web app work from outside the local network, or maybe point me to another tutorial for that part.

author
jtom1989 (author)2017-03-23

how do i run de program?do i copy all of these files (index,gpio en java script)

in the /var/www/html? or just run them? pls can you help me

author
anmolh12 (author)2017-03-17

I like your projects .I've also tried few of them.I'm glad that now i can control my Rpi's gpio pins using an app .Now,I want to control servo motor using the app.But I'm not able to write php code for controlling servo

Can somebody please post a php code for controlling servo motors?

author
praju1 made it! (author)2017-03-07

Works flawless...

web_interface.JPG
author
chinnu mihir made it! (author)2017-03-06

good instructable

0.jpg

About This Instructable

712,943views

1,448favorites

License:

More by TheFreeElectron:Simple and intuitive web interface for your Raspberry Pi
Add instructable to: