Raspberry pi remote control

In this project I created a web page on the Raspberry pi that can be used to control power sockets or anything else that requires to be switched. The advantage of the Raspberry is the speed and the bigger memory compared to an Arduino with a ESP8266 WiFi. The disadvantage is that the Raspberry is not realtime so it’s difficult to create time critical programs, but thats not needed for this project anyway.

How does it work?

First copy all the files to your Raspberry webserver. In my case that’s the directroy /avr/www/html.

Then go to the page http://yourRaspberryIp/test.php and a page with 4 buttons appears on the screen.

Start page test.php

 

Click on a button and a led corrosponding to a particular GPIO get activated. Pressing the button again will turn off the led.

The hardware

The hardware is any Raspberry , a couple of led’s and some resistors to keep the current low.

Raspberry connection details

 

I soldered a few led’s on a pcb, but a breadboard can be used too.

The Raspberry with the leds

 

The software

There is one file called gpio and that one is the compiled ‘c’ file with the code to enable or disable a led/gpio. To enable or disable a port you have to give 2 parameters. The firs parameter is the text “on” to enable a pin or anything else to turn off a pin. The second number contains the pin number to enable or disable.

I used the wiringPi.h library for the gpio application and that means the pin’s in the library corrosponding to the physical pin’s are a as below.

WiringPi pinout

 
gpio

#include <iostream>
#include <stdio.h>
#include <stdlib.h> // for itoa
#include <wiringPi.h>
#include <string.h>

int main(int argc, char**argv) {
    // Prints welcome message...
    
    char param2Temp[10];
    char onTextArray[] = "on";
    char offTextArray[] = "off";
    int param2Int;
    
    if (wiringPiSetup () == -1)
    return 1 ;
 
    pinMode (7, OUTPUT) ; // pin 4
    pinMode (0, OUTPUT) ; // pin 6
    pinMode (3, OUTPUT) ; // pin 8
    pinMode (12, OUTPUT) ; // pin 10
    
    
    if( argc != 3 ) {
      printf("We need 2 arguments\n");
      
      return 0;
   }
    else if (argc == 3){ // is 2 params
      if (strlen(argv[1]) > 3){
          printf("First parameter got to many chars\n");
          return 0;
      }
      else{
          strcpy(param2Temp, argv[1]);
          param2Int = atoi(param2Temp);
      }
      
      if (param2Int < 1 || param2Int > 4 ){
          printf("Pin number out of range, only 1-4\n");
          return 0;
      }
      
      if(strcmp(argv[2], onTextArray) == 0){
          
          switch(param2Int){
              
              case 1:
                  digitalWrite (7, 1) ;
                  break;
              case 2:
                  digitalWrite (0, 1) ;
                  break;
              case 3:
                  digitalWrite (3, 1) ;
                  break;
              case 4:
                  digitalWrite (12, 1) ;
                  break;
              default:
                  break;
              
          }
          
      }
      else if (strcmp(argv[2], offTextArray) == 0){
          switch(param2Int){
              
              case 1:
                  digitalWrite (7, 0) ;
                  break;
              case 2:
                  digitalWrite (0, 0) ;
                  break;
              case 3:
                  digitalWrite (3, 0) ;
                  break;
              case 4:
                  digitalWrite (12, 0) ;
                  break;
              default:
                  break;
              
          }
      }
      //delay(2000);
      return 1;
  }
   

    return 0;
}

 

The file buttonaction.php is the server side scipt that will execute the gpio file on the server/Raspberry with a parameter to decide which pin to enable or disable.

buttonaction.php

<?php

$buttonName = $_GET["name"];

if($buttonName == "button1on"){
	exec('./gpio 1 on');
}
else if ($buttonName == "button1off"){
	exec('./gpio 1 off');
}
else if ($buttonName == "button2on"){
	exec('./gpio 2 on');
}
else if ($buttonName == "button2off"){
	exec('./gpio 2 off');
}
else if ($buttonName == "button3on"){
	exec('./gpio 3 on');
}
else if ($buttonName == "button3off"){
	exec('./gpio 3 off');
}
else if ($buttonName == "button4on"){
	exec('./gpio 4 on');
}
else if ($buttonName == "button4off"){
	exec('./gpio 4 off');
}


?>

 

The test.php file is the starting file you have to call within a browser. It contains a few links to the button images and executes the buttonaction.php script when clicking on the button.
test.php

<?php

?>

    
<article>
 

<h4>Rapberry GPIO:</h4>
<table>
  <tr>
    <td>Lamp livingroom</td>
    <td><img alt="" src="images/button1_on.png" id="imgClickAndChange" onclick="btn1Clicked()"  /></td>
  </tr>
<tr>
    <td>Camera garage</td>
    <td><img alt="" src="images/button2_on.png" id="img2ClickAndChange" onclick="btn2Clicked()"  /></td>
  </tr>
<tr>
    <td>Fan</td>
    <td><img alt="" src="images/button3_on.png" id="img3ClickAndChange" onclick="btn3Clicked()"  /></td>
  </tr>
<tr>
    <td>Television</td>
    <td><img alt="" src="images/button4_on.png" id="img4ClickAndChange" onclick="btn4Clicked()"  /></td>
  </tr>
</table>
    



<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
    <script type="text/javascript">

    var currentImage1 = 1;
    var currentImage2 = 1;
    var currentImage3 = 1;
     var currentImage4 = 1;

 function btn1Clicked() {   
    if (currentImage1 == 1){
	document.getElementById("imgClickAndChange").src = "images/button1_off.png";
	currentImage1 = 0;
	$.get("buttonaction.php", { name:"button1off" });

    }
    else if (currentImage1 == 0){
	document.getElementById("imgClickAndChange").src = "images/button1_on.png";
	currentImage1 = 1;
	$.get("buttonaction.php", { name:"button1on" });
    }

    return false;
 }

    function btn2Clicked() {   
    if (currentImage2 == 1){
	document.getElementById("img2ClickAndChange").src = "images/button2_off.png";
	currentImage2 = 0;
	$.get("buttonaction.php", { name:"button2off" });
    }
    else if (currentImage2 == 0){
	document.getElementById("img2ClickAndChange").src = "images/button2_on.png";
	currentImage2 = 1;
	$.get("buttonaction.php", { name:"button2on" });
    }
    return false;
    }

    function btn3Clicked() {   
    if (currentImage3 == 1){
	document.getElementById("img3ClickAndChange").src = "images/button3_off.png";
	currentImage3 = 0;
	$.get("buttonaction.php", { name:"button3off" });    }
    else if (currentImage3 == 0){
	document.getElementById("img3ClickAndChange").src = "images/button3_on.png";
	currentImage3 = 1;
	$.get("buttonaction.php", { name:"button3on" });
    }
    return false;
    }

     function btn4Clicked() {   
    if (currentImage4 == 1){
	document.getElementById("img4ClickAndChange").src = "images/button4_off.png";
	currentImage4 = 0;
	$.get("buttonaction.php", { name:"button4off" });
    }
    else if (currentImage4 == 0){
	document.getElementById("img4ClickAndChange").src = "images/button4_on.png";
	currentImage4 = 1;
	$.get("buttonaction.php", { name:"button4on" });
    }
    return false;
     }
    
</script>




</article>




 

Instead of led’s it’s also possible to use a relay-board and enable/disable power sockets. Another way is using the well know RF transmitter and receiving units. In the next project I will reverse engineer the RF remote and create an application for the Raspberry to act like an RF remote. Thanks for reading!