Initial Working Copy
This commit is contained in:
commit
0731843a82
357 changed files with 120880 additions and 0 deletions
357
html/sensor_pages/comms_cab.php
Normal file
357
html/sensor_pages/comms_cab.php
Normal file
|
|
@ -0,0 +1,357 @@
|
|||
|
||||
<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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue