Controlling Electronic & Electrical devices remotely

The major issues faced by all the industry is cutting down the electricity power inside the office premises. From the Whirldata’s IoT Laboratory, we build the simulation for controlling Electronic devices from the web-application. By using this model, we can control all the electronic and electrical devices from the remote.

Block diagram

 

 

Let’s wire up a few LEDs in breadboard and connect with Raspberry Pi’s port.

DiY Section

In this section, the following codes will help you to create the LED control.

Step #1: Install PHP & Apache and make the RPI as the Web Server
 >$ sudo apt-get install apache2 php5
 >$ sudo apt-get install lighttpd php5
Step #2: Installing bridge

Instead of writing Python code to control the PINs in RPI, we can install and build the wiringPi, to control the ports.
Install git in RPI

 >$ sudo apt-get install git-core

Clone the wiringPi’s git in /var/www/html/

 >$ git clone git://git.drogon.net/wiringPi

Build the wiringPi

 >$ cd wiringPi
 >$ ./build

To confirm the installation of wiringPi, check the version of wiringPi by

 >$ gpio -v

This wiringPi used to control the ports of RPI from the command line
ex:

 >$ gpio -g write 1

To control the LEDs there are three files are needed
1. ledcontrol.php
2. ledlistening.php
3. index.html

ledcontrol.php

Create ledcontrol.php in /var/www/html/ and copy the following codebase.

// The url parameter to set the value for the port
 $port = $_GET['port'];
 $status = $_GET['status'];

//If status is on then execute the command to switch on the LED, else switch off the LED
 if ($status == "on") {
   $mode = "gpio -g mode ".$port." out";
   shell_exec($mode);
   shell_exec("gpio -g write ".$port." 1");
   echo $mode;
 } else {
   $mode = "gpio -g mode ".$port." out";
   shell_exec($mode);
   shell_exec("gpio -g write ".$port." 0");
 }

Call process.php with the following URL structure

<ip of RPI>/ledcontrol.php?port=14&status=on
ledlistening.php
//To read the status of the port and return the status as JSON. In this example we used the ports 27, 7, 14. This PHP will return the status of these ports
$port = array(4, 14, 27);
 $json_data = [];
 for ($x = 0; $x < count($port); $x++) { 
    if (shell_exec("gpio -g read $port[$x]") == 1) 
      $json_data[$x] = array('port' => $port[$x], 'status' => 'on');
 else
     $json_data[$x] = array('port' => $port[$x], 'status' => 'off');
 }
 echo json_encode($json_data);

Sample response from the ledlistening.php is

 [
   {“port”:4,”status”:”on”},
   {“port”:14,”status”:”off”},
   {“port”:27,”status”:”on”}
 ]

index.html
The frontend html file is used to send the control signal from the web browser or mobile browser.
We have 3 buttons to control LEDs. The AJAX calls used call the PHPs to send the signal and get the current status of the LED connected ports.

<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script
 src="raspberry/jquery.min.js"></script>
<script
 src="raspberry/bootstrap.min.js"></script>
<link rel="stylesheet" href="raspberry/bootstrap.css">
<link rel="stylesheet"
 href="raspberry/custom.min.css">
<script
 src="raspberry/bootstrap.min.js"></script>
<link
 href="raspberry/bootstrap-toggle.min.css"
 rel="stylesheet">

<script
 src="raspberry/bootstrap-toggle.min.js"></script>
</head>
<body>
 <div class="container">
  <div class="row">
   <div class="col-sm-12">
    <label class="checkbox-inline"> 
       <input width="100%" class="col-sm-12" id="14" type="checkbox" onclick="initStatus()" onchange="getStatus(14)" data-toggle="toggle" data-on="Switch on" data-off="Switch off"> Light 1
    </label>
    <hr>
   </div>
 </div>
 <div class="row">
  <div class="col-sm-12">
   <label class="checkbox-inline"> 
    <input onchange="getStatus(24)" onclick="initStatus()" id="24" type="checkbox" data-toggle="toggle" data-on="Switch on" data-off="Switch off"> Light 2
   </label>
   <hr>
  </div>
 </div>
 <div class="row">
   <div class="col-sm-12">
    <label class="checkbox-inline"> 
      <input onchange="getStatus(23)" onclick="initStatus()" id="23" type="checkbox" data-toggle="toggle" data-on="Switch on" data-off="Switch off""> Light 3
    </label>
 </div>
 <span id="console-event"></span>
 <hr>
 <div class="col-sm-12 alert alert-dismissible alert-warning" id="response" style="display: none">
   <span id="target"></span>
 </div>
 </div>
 </div>

<script>
 isInitializing = false;
 statusPoint = "ledlistening.php";
 initialize();
 function initialize() {
  setInterval(function() {
   isInitializing = true;
   console.log("Initializing....");
     #Ajax call for read the status of the port defined at every 5 sec
   $.ajax({
     url : statusPoint,
     type : 'GET',
     contentType: "application/json; charset=utf-8",
     dataType: "json",
     success : function(data) {
     console.log(data);
     for ( var i in data) {
       console.log("Port=>" + data[i].port + " status=>"+ data[i].status);
       if (data[i].status == "on") {
         console.log(data[i].port);
         $("#" + data[i].port).bootstrapToggle('on');
       } else
         $("#" + data[i].port).bootstrapToggle('off');
       }
    }});
   }, 5000);
 }

 $(".checkbox-inline").click(function(event) {
   isInitializing = false;
 });

 function getStatus(port) {
   if ($("#" + port).prop('checked'))
    send(port, "on");
   else
    send(port, "off");
 }

 function send(port, status) {
   console.log("Port==> " + port + ", Status==> " + status);
   endPoint = "ledcontrol.php?port=" + port + "&status=" + status;
   $('#target').html("Port #" + port + " is switching " + status);
   if (isInitializing == false)
      $("#response").show();
   #Ajax call to display the status the port defined
   $.ajax({
     url : endPoint,
     type : 'GET',
     success : function(data) {
       $('#target').html("Port #" + port + " has been switched " + status);
       $("#response").hide(2000);
     }
  });
 }
</script>

</body>
</html>
Screenshot of the Webapplication

Download the full codebase in Github