357 lines
No EOL
12 KiB
PHP
357 lines
No EOL
12 KiB
PHP
|
|
<html>
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8" />
|
|
<link rel="apple-touch-icon" sizes="76x76" href="../mat-dashboard/assets/img/apple-icon.png">
|
|
<link rel="icon" type="image/png" href="../mat-dashboard/assets/img/favicon.png">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
|
<title>
|
|
Sensor Stats
|
|
</title>
|
|
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
|
|
<!-- Fonts and icons -->
|
|
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" />
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
|
|
<!-- CSS Files -->
|
|
<link href="../mat-dashboard/assets/css/material-dashboard.css?v=2.1.1" rel="stylesheet" />
|
|
|
|
|
|
<!--<title>Bazza's Space</title>-->
|
|
<!--<link href="css/bootstrap.css" rel="stylesheet" />-->
|
|
|
|
<!--https://getbootstrap.com/docs/4.3/utilities/shadows/-->
|
|
</head>
|
|
<body>
|
|
<span style="display:none;">
|
|
<?php
|
|
$servername = "localhost";
|
|
$username = "svcPHPAdmin";
|
|
$password = "tgC3*&tghlRc";
|
|
$dbname = "sensor";
|
|
$fanstate = "";
|
|
$btn = "";
|
|
$curr_temp = 0;
|
|
$curr_humidity = 0;
|
|
|
|
//Read gpio pin state
|
|
unset($btn);
|
|
$btn = system("gpio read 26"); // this line writes the value to the screen ???? WTF!!!
|
|
if ($btn == 1){$fanstate = "OFF";}else{$fanstate = "ON";}
|
|
|
|
?>
|
|
</span>
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<!--<h1 class="text-center text-primary">Bazza's Space</h1>-->
|
|
<h1 class="text-center">Comms cabinet atmospheric data</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
|
|
<div class="col-lg-4 col-md-6 col-sm-6">
|
|
<div class="card card-stats">
|
|
<div class="card-header card-header-info card-header-icon">
|
|
<div class="card-icon">
|
|
<i class="material-icons">toys</i>
|
|
</div>
|
|
<p class="card-category">Fan State</p>
|
|
<h3 class="card-title"><?php echo $fanstate;?></h3>
|
|
</div>
|
|
<!--
|
|
<div class="card-footer">
|
|
<div class="stats">
|
|
<i class="material-icons">date_range</i> Last 24 Hours
|
|
</div>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden">
|
|
<?php
|
|
// get the data from the DB for the following 2 cards
|
|
// Create connection
|
|
$conn = new mysqli($servername, $username, $password, $dbname);
|
|
|
|
// Check connection
|
|
if ($conn->connect_error) {
|
|
die("Connection failed: " . $conn->connect_error);
|
|
}
|
|
|
|
$sql = "SELECT * FROM tblSENSOR_DATA WHERE SCODE = 'COMMS_CAB' ORDER BY ID DESC LIMIT 1";
|
|
$result = $conn->query($sql);
|
|
|
|
if ($result->num_rows > 0)
|
|
{
|
|
// output data of each row
|
|
while($row = $result->fetch_assoc())
|
|
{
|
|
$curr_temp = round($row["VALUE_1"],1);
|
|
$curr_humidity = round($row["VALUE_2"],1);
|
|
}
|
|
}
|
|
else
|
|
{
|
|
echo "No rows found";
|
|
}
|
|
|
|
$conn->close();
|
|
?>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6 col-sm-6">
|
|
<div class="card card-stats">
|
|
<div class="card-header card-header-info card-header-icon">
|
|
<div class="card-icon">
|
|
<i class="material-icons">warning</i>
|
|
</div>
|
|
<p class="card-category">Current Temperature</p>
|
|
<h3 class="card-title"><?php echo $curr_temp;?>°C</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-lg-4 col-md-6 col-sm-6">
|
|
<div class="card card-stats">
|
|
<div class="card-header card-header-info card-header-icon">
|
|
<div class="card-icon">
|
|
<i class="material-icons">warning</i>
|
|
</div>
|
|
<p class="card-category">Current Humidity</p>
|
|
<h3 class="card-title"><?php echo $curr_humidity;?>%</h3>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div> <!-- class="row" -->
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card card-chart">
|
|
<div class="card-header card-header-warning">
|
|
<div class="ct-chart" id="TemperatureChart" style="height:25vh"></div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Temperature Average</h4>
|
|
<p class="card-category">Last 24 Hours</p>
|
|
<!-- <div class="" style="height:20vh"></div> -->
|
|
</div>
|
|
<!--
|
|
<div class="card-footer">
|
|
<div class="stats">
|
|
<i class="material-icons">access_time</i> campaign sent 2 days ago
|
|
</div>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="card card-chart">
|
|
<div class="card-header card-header-warning">
|
|
<div class="ct-chart" id="HumidityChart" style="height:25vh"></div>
|
|
</div>
|
|
<div class="card-body">
|
|
<h4 class="card-title">Humidity Average</h4>
|
|
<p class="card-category">Last 24 Hours</p>
|
|
<!-- <div class="" style="height:20vh"></div> -->
|
|
</div>
|
|
<!--
|
|
<div class="card-footer">
|
|
<div class="stats">
|
|
<i class="material-icons">access_time</i> campaign sent 2 days ago
|
|
</div>
|
|
</div>
|
|
-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<table class="table table-hover">
|
|
<thead class="thead-dark">
|
|
<tr><td colspan=4>Last 24 hours</td></tr>
|
|
<tr>
|
|
<td>
|
|
<b>Sensor</b>
|
|
</td>
|
|
<td>
|
|
<b>Average</b>
|
|
</td>
|
|
<td>
|
|
<b>Minimum</b>
|
|
</td>
|
|
<td>
|
|
<b>Maximum</b>
|
|
</td>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<?php
|
|
//$servername = "localhost";
|
|
//$username = "svcfan";
|
|
//$password = "Tgh5^rtDBG";
|
|
//$dbname = "fan_control";
|
|
|
|
|
|
// Create connection
|
|
$conn = new mysqli($servername, $username, $password, $dbname);
|
|
|
|
// Check connection
|
|
if ($conn->connect_error) {
|
|
die("Connection failed: " . $conn->connect_error);
|
|
}
|
|
|
|
$sql = "select 'Temperature' AS Sensor,ROUND(avg(VALUE_1),1) AS Average,min(VALUE_1) AS Min,max(VALUE_1) AS Max
|
|
from tblSENSOR_DATA
|
|
where CREATED_DATE > curdate() + interval -1 day
|
|
AND SCODE = 'COMMS_CAB'
|
|
union
|
|
select 'Humidity %' AS Sensor,ROUND(avg(VALUE_2),1) AS Average,min(VALUE_2) AS Min,max(VALUE_2) AS Max
|
|
from tblSENSOR_DATA
|
|
where CREATED_DATE > curdate() + interval -1 day
|
|
AND SCODE = 'COMMS_CAB'";
|
|
$result = $conn->query($sql);
|
|
|
|
if ($result->num_rows > 0) {
|
|
// output data of each row
|
|
while($row = $result->fetch_assoc()) {
|
|
echo "<tr><td><b>" . $row["Sensor"] . "</b></td><td>" . round($row["Average"],1) . "</td><td>" . $row["Min"] . "</td><td>" . $row["Max"] . "</td></tr>";
|
|
}
|
|
} else {
|
|
echo "<tr><td colspan=4>No rows found</td></tr>";
|
|
}
|
|
$conn->close();
|
|
?>
|
|
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<!-- Core JS Files -->
|
|
|
|
<script src="../mat-dashboard/assets/js/core/jquery.min.js"></script>
|
|
<script src="../mat-dashboard/assets/js/core/popper.min.js"></script>
|
|
<script src="../mat-dashboard/assets/js/core/bootstrap-material-design.min.js"></script>
|
|
<script src="../mat-dashboard/assets/js/plugins/perfect-scrollbar.jquery.min.js"></script>
|
|
|
|
<!-- Plugin for the momentJs -->
|
|
<script src="../mat-dashboard/assets/js/plugins/moment.min.js"></script>
|
|
<!-- Plugin for Sweet Alert -->
|
|
<script src="../mat-dashboard/assets/js/plugins/sweetalert2.js"></script>
|
|
<!-- Forms Validations Plugin -->
|
|
<script src="../mat-dashboard/assets/js/plugins/jquery.validate.min.js"></script>
|
|
<!-- Plugin for the Wizard, full documentation here: https://github.com/VinceG/twitter-bootstrap-wizard -->
|
|
<script src="../mat-dashboard/assets/js/plugins/jquery.bootstrap-wizard.js"></script>
|
|
<!-- Plugin for Select, full documentation here: http://silviomoreto.github.io/bootstrap-select -->
|
|
<script src="../mat-dashboard/assets/js/plugins/bootstrap-selectpicker.js"></script>
|
|
<!-- Plugin for the DateTimePicker, full documentation here: https://eonasdan.github.io/bootstrap-datetimepicker/ -->
|
|
<script src="../mat-dashboard/assets/js/plugins/bootstrap-datetimepicker.min.js"></script>
|
|
<!-- DataTables.net Plugin, full documentation here: https://datatables.net/ -->
|
|
<script src="../mat-dashboard/assets/js/plugins/jquery.dataTables.min.js"></script>
|
|
<!-- Plugin for Tags, full documentation here: https://github.com/bootstrap-tagsinput/bootstrap-tagsinputs -->
|
|
<script src="../mat-dashboard/assets/js/plugins/bootstrap-tagsinput.js"></script>
|
|
<!-- Plugin for Fileupload, full documentation here: http://www.jasny.net/bootstrap/javascript/#fileinput
|
|
<script src="../mat-dashboard/assets/js/plugins/jasny-bootstrap.min.js"></script>-->
|
|
<!-- Full Calendar Plugin, full documentation here: https://github.com/fullcalendar/fullcalendar
|
|
<script src="../mat-dashboard/assets/js/plugins/fullcalendar.min.js"></script> -->
|
|
<!-- Vector Map plugin, full documentation here: http://jvectormap.com/documentation/
|
|
<script src="../mat-dashboard/assets/js/plugins/jquery-jvectormap.js"></script>-->
|
|
<!-- Plugin for the Sliders, full documentation here: http://refreshless.com/nouislider/
|
|
<script src="../mat-dashboard/assets/js/plugins/nouislider.min.js"></script>-->
|
|
<!-- Include a polyfill for ES6 Promises (optional) for IE11, UC Browser and Android browser support SweetAlert -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.js"></script>
|
|
<!-- Library for adding dinamically elements -->
|
|
<script src="../mat-dashboard/assets/js/plugins/arrive.min.js"></script>
|
|
<!-- Google Maps Plugin
|
|
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE"></script> -->
|
|
<!-- Chartist JS -->
|
|
<script src="../mat-dashboard/assets/js/plugins/chartist.min.js"></script>
|
|
<!-- Notifications Plugin -->
|
|
<script src="../mat-dashboard/assets/js/plugins/bootstrap-notify.js"></script>
|
|
<!-- Control Center for Material Dashboard: parallax effects, scripts for the example pages etc -->
|
|
<script src="../mat-dashboard/assets/js/material-dashboard.js?v=2.1.1" type="text/javascript"></script>
|
|
|
|
<!-- js for the sensor data -->
|
|
<!--<script src="../mat-dashboard/assets/data/sensor.js"></script>-->
|
|
|
|
<script>
|
|
$(document).ready(function()
|
|
{
|
|
// Javascript method's body can be found in mat-dashboard/assets/data/sensor.js
|
|
//sensor.initDashboardPageCharts();
|
|
//console.log("Before get command");
|
|
//var tdata;
|
|
$.get('http://10.0.0.140/data/comms_cab_data.php').done((tdata) =>
|
|
{
|
|
|
|
//console.log("got through");
|
|
//console.log(tdata);
|
|
|
|
//console.log("Parsed from JSON");
|
|
var JSONObject = JSON.parse(tdata);
|
|
//console.log(JSONObject);
|
|
//console.log("Parsed from JSON - logging labels")
|
|
//console.log(JSONObject["labels"]);
|
|
|
|
var tmin = Math.min.apply(null, JSONObject["series"]),
|
|
tmax = Math.max.apply(null, JSONObject["series"]);
|
|
|
|
var dataTemperatureChart = {'labels':JSONObject.labels, 'series':[JSONObject.series[0]]};
|
|
var dataHumidityChart = {'labels':JSONObject.labels, 'series':[JSONObject.series[1]]};
|
|
|
|
var optionsTemperatureChart =
|
|
{
|
|
axisX:
|
|
{
|
|
showGrid: false
|
|
},
|
|
low: tmin,
|
|
high: tmax + 0.2,
|
|
chartPadding:
|
|
{
|
|
top: 20,
|
|
right: 0,
|
|
bottom: 15,
|
|
left: 0
|
|
}
|
|
};
|
|
|
|
var responsiveOptions = {
|
|
lineSmooth: Chartist.Interpolation.cardinal({
|
|
tension: 1
|
|
}),
|
|
low: tmin,
|
|
high: tmax + 0.2,
|
|
chartPadding: {
|
|
top: 20,
|
|
right: 0,
|
|
bottom: 10,
|
|
left: 0
|
|
}
|
|
}
|
|
|
|
|
|
var TemperatureChart = Chartist.Line('#TemperatureChart', dataTemperatureChart, optionsTemperatureChart, responsiveOptions);
|
|
var HumidityChart = Chartist.Line('#HumidityChart', dataHumidityChart, optionsTemperatureChart, responsiveOptions);
|
|
});
|
|
});
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|