IoT DASHBOARD

IN previous section basic HTML is discussed and now we will see a new HTML with PHP script code used to create IoT DASHBOARD.

LED CONTROL SCRIPT

To control LED we need some files on server. If you have your own domain and web hosting, then go to the Cpanel, create a sub-domain (you can also do the same with main domain) .

In this sub-domain, we need to add files to create IoT Dashboard (in the same folder recommended) those are

  1. bulb.txt, this is empty text file (name depend upon script)
  2. index.php, this is used for web page code.
Cpanel IoT dashboard files
There are more files you can avoid them.

index.php

[wpdm_package id=’4119′]

<?php
  if(isset($_GET['light'])) {
    $light = $_GET['light'];
    
    if($light == "on") {
      $file = fopen("bulb.txt", "w") or die("can't open file");
      fwrite($file, '1');
      fclose($file);
    } 
    else if ($light == "off") {
      $file = fopen("bulb.txt", "w") or die("can't open file");
      fwrite($file, '0');
      fclose($file);
    }
  }
  
?>

<html>
  <head>      
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>LED for ESP8266</title>
   
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>
    <div class="row" style="margin-top: 20px;">
      <div class="col-md-8 col-md-offset-2">
        <a href="?light=on" class="btn btn-success btn-block btn-lg">Turn On</a>
        <br />
        <a href="?light=off" class="led btn btn-danger btn-block btn-lg">Turn Off</a>
        <br /> <br />
        <a href="https://pijaeducation.com/iot-internet-of-things/control-led-using-nodemcu-esp8266/" class="led btn btn-success btn-block btn-lg"> CODE: CONTROL LED USING NODEMCU / ESP8266</a>
        <br /> 
      </div>
    </div>
  </body>
</html>

OUTPUT

led control iot dashboard

You can see data in “bulb.txt”file by visiting URL: “http://iot-dashboard.shoolinlabs.com/2/bulb.txt”. When you change state using Turn On and Turn Off it will overwrite “bulb.txt” data from “0” to “1” or vice versa.

bulb txt

LED & TEMPERATURE SCRIPT

In previous script we used only two files, but here we want another parameter which is temperature sensor data that’s why we need 3 files this time

  1. bulb.txt, this is empty text file (name depends upon script)
  2. temprature.txt, empty file (name depends upon script)
  3. index.php, this is used for web page code.

index.php

[wpdm_package id=’4120′]

<?php
  if(isset($_GET['light'])) {
    $light = $_GET['light'];
    
    if($light == "on") {
      $file = fopen("bulb.txt", "w") or die("can't open file");
      fwrite($file, '1');
      fclose($file);
    } 
    else if ($light == "off") {
      $file = fopen("bulb.txt", "w") or die("can't open file");
      fwrite($file, '0');
      fclose($file);
    }
  }
  
  if(isset($_GET['temprature'])){
    $temprature = $_GET['temprature'];
    
    if ($temprature) {
        $file = fopen("temprature.txt", "w") or die("can't open file");
        fwrite($file, $temprature);
        fclose($file);
    }
  }

?>

<html>
  <head>      
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>LED for ESP8266</title>
   
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>
    <div class="row" style="margin-top: 20px;">
      <div class="col-md-8 col-md-offset-2">
        <a href="?light=on" class="btn btn-success btn-block btn-lg">Turn On</a>
        <br />
        <a href="?light=off" class="led btn btn-danger btn-block btn-lg">Turn Off</a>
        <br />
        <div class="light-status well" style="margin-top: 5px; text-align:center">
        <?php
            if(isset($_GET['light'])){
                if($light=="on") {
                    echo("LED should be ON now");
                }
                else if ($light=="off") {
                    echo("LED should be OFF now");
                }            
            }
        ?>

        <h1>
        <?php 
    
            $file = fopen("temprature.txt", "r") or die("can't open file");
            $getTemprature = fread($file,filesize('temprature.txt'));
            $tempString = "Last  Known Temprature is : ".$getTemprature;
            echo($tempString);
            fclose($file);    
        ?>
        </h1>
        </div>

        <br /> 
        <a href="https://pijaeducation.com/iot-internet-of-things/send-temperature-data-on-server-using-iot/" class="led btn btn-success btn-block btn-lg"> CODE: SEND TEMPERATURE DATA ON SERVER USING IOT</a>
        <br />                
      </div>
    </div>
  </body>
</html>

OUTPUT

led temperature iot dashboard

Same as above you can visit both “bulb.txt” and “temprature.txt” while when you hit this URL: “http://iot-dashboard.shoolinlabs.com/2/?temprature=261”, Temperature field get update with the value you write with “?temprature=261”, this is what we are doing with NodeMCU. Watch video for bettter understading

VIDEO