Arduino – Communicate With Server – Part 3 – Web Based Panel

This is the code for the web based panel (web based UI) that will display the data received from arduino or can send some command to the Arduino

All communications are done through a server (web server)

The frontend code

<?php
date_default_timezone_set("Asia/Kolkata");
$conn = mysql_connect("localhost","root","xxxxxxxxxx");
if(!$conn)
{
    echo "Error: failed to connect DB";
    die();
}

if(!mysql_select_db("xxxxxxxx",$conn))
{
    echo "Error: failed to connect DB";
    die();
}
$jsonArray1 = array();
$jsonArray2 = array();
$i=0;

$result = mysql_query("select * from weather");
while($rows = mysql_fetch_array($result))
{
    $jsonArray1[$i] = array(date("Y,m,d,H,i",$rows['time']), floatval($rows['temperature']));
    $jsonArray2[$i++] = array(date("Y,m,d,H,i",$rows['time']), floatval($rows['paM']));
}
?>
<html>
  <head>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script type="text/javascript">
      var chart, chart2;
      window.onload = function () {
        chart = new CanvasJS.Chart("chartContainer",
        {
          title:{
          text: "Temperature"
          },
          axisY:{
            minimum: 0,
            maximum: 50      
          },
           data: [
          {
            type: "line",
    
            dataPoints: [
            <?php
                for($j=0;$j<$i;$j++)
                {
           ?>
                       { x: new Date(<?php echo $jsonArray1[$j][0] ?>), y: <?php echo $jsonArray1[$j][1] ?> } <?php echo $j<$i-1?"," :"" ?>
           <?php         
                }
            ?>            
            ]
          }
          ]
        });
    
        chart.render();
        
        
        chart2 = new CanvasJS.Chart("chartContainer2",
        {
          title:{
          text: "paM"
          },
          axisY:{
            minimum: 1000,
            maximum: 1040      
          },
           data: [
          {
            type: "line",
    
            dataPoints: [
            <?php
                for($j=0;$j<$i;$j++)
                {
           ?>
                       { x: new Date(<?php echo $jsonArray2[$j][0] ?>), y: <?php echo $jsonArray2[$j][1] ?> } <?php echo $j<$i-1?"," :"" ?>
           <?php         
                }
            ?>            
            ]
          }
          ]
        });
    
        chart2.render();
      }
      
    function updateTemp() 
    {
        var str = JSON.parse(updateData("t"));
        var date = str[1].split(",");
        chart.options.data[0].dataPoints.push({x : new Date(date[0],date[1],date[2],date[3],date[4]),  y : parseFloat(str[0]) });
          
        chart.render();         
    };
    
    function updatePressure() 
    {
          var str = JSON.parse(updateData("p"));
          var date = str[1].split(",");
        chart2.options.data[0].dataPoints.push({ x : new Date(date[0],date[1],date[2],date[3],date[4]), y : parseFloat(str[0]) });
        chart2.render();
    };
    
    function updateData(type)
    {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", "dataPlotter.php?q=" + type, false);
        xmlhttp.send();
        return xmlhttp.responseText;
    }
    
    setInterval("updateTemp()",360000);
    setInterval("updatePressure()",480000);
    
  </script>
  </head>

  <body>
<?php
$result = mysql_query("select * from led_status");
$rows = mysql_fetch_array($result);
?>  
      LED 1 <input type="checkbox" value="<?php echo $rows['led_1']==1 ? 1 : 0 ?>" <?php echo $rows['led_1']==1 ? "checked="checked"" : "" ?> id="led_1" name="led_1" onclick="changeLEd('led_1')" />
      LED 2 <input type="checkbox" value="<?php echo $rows['led_2']==1 ? 1 : 0 ?>" <?php echo $rows['led_2']==1 ? "checked="checked"" : "" ?> id="led_2" name="led_2" onclick="changeLEd('led_2')" />
    <!--Div that will hold the column chart-->
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
    
    <div id="chartContainer2" style="height: 300px; width: 100%;"></div>
    
    <script src="canvasjs.min.js"></script>
    <script src="jquery.canvasjs.min.js"></script>
    
    <script type="text/javascript">
        function changeLEd(whichLed)
        {
            var state;
            
            if(document.getElementById(whichLed).checked == true)
            {
                state = 1;
            }
            else
            {
                state = 0;
            }
            
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("GET", "change-led.php?which="+whichLed+"&state="+state, false);
            xmlhttp.send();
            return xmlhttp.responseText;
        }
    </script>
  </body>
</html>

The backend codes

dataplotter.php

<?php
date_default_timezone_set("Asia/Kolkata");
$conn = mysql_connect("localhost","root","xxxxxxxxxx");
if(!$conn)
{
    echo "Error: failed to connect DB";
    die();
}

if(!mysql_select_db("xxxxxxxx",$conn))
{
    echo "Error: failed to connect DB";
    die();
}
$jsonArray = array();
$i=0;

if(isset($_GET['q']) && strlen(strip_tags($_GET['q'])))
{
    $type = strip_tags($_GET['q']);
}
else
{
    $type = "t";
}

if($type == "t")
{
    $type = "temperature";
}
else
    if($type == "p")
    {
        $type = "paM";
    }

$result = mysql_query("select ".$type.",time from weather order by time desc limit 0,1");
$rows = mysql_fetch_array($result);

header('Content-Type: application/json');
echo json_encode(array($rows[$type],date("Y,m,d,H,i",$rows['time'])));
?>

change-led.php

<?php
$conn = mysql_connect("localhost","root","xxxxxxxxxx");
if(!$conn)
{
    echo "Error: failed to connect DB";
    die();
}

if(!mysql_select_db("xxxxxxx",$conn))
{
    echo "Error: failed to connect DB";
    die();
}

$whichLed = strip_tags($_GET['which']);
$state = strip_tags($_GET['state']);
mysql_query("update led_status set ".$whichLed." = ".intval($state));
?>

Code Bank

Arduino – Communicate With Server – Part 3 – Web Based Panel

Leave a Reply Cancel reply