<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/paho-mqtt/1.0.1/mqttws31.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="app">
<?php
require_once './sql.php';
$dht = $conn->query("select * from dht order by id desc limit 10")->fetch_all();
?>
<div class="row">
<div class="row">
<h3>Nhiet do: </h3>
<p class="nd"><?php echo $dht[0][1]?>C</p>
</div>
<div class="row ml">
<h3>Do am: </h3>
<p class="da"><?php echo $dht[0][2]?>%</p>
</div>
</div>
<button class="bat">Bat/tat led</button>
<h2>Lich su</h2>
<table border="1">
<th>STT</th>
<th>Nhiet do</th>
<th>Do am</th>
<th>Cap nhat luc</th>
<?php
foreach ($dht as $value) {
echo "<tr>";
for ($i = 0; $i < count($value); $i++) {
echo '<td>' . $value[$i] . '</td>';
}
echo "</tr>";
}
?>
</table> <br>
<canvas id="line-chart"></canvas>
<canvas id="line-chart2"></canvas>
</div>
</body>
<?php
$tg = $conn->query("select thoigian, nhietdo, doam from dht order by id desc limit 10")->fetch_all();
$arrTg = [];
$arrNd = [];
$arrDa = [];
foreach ($tg as $row) {
array_unshift($arrTg, $row[0]);
array_unshift($arrNd, $row[1]);
array_unshift($arrDa, $row[2]);
}
?>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<script>
new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: <?php echo json_encode($arrTg) ?>,
datasets: [{
data: <?php echo json_encode($arrNd) ?>,
label: "Nhiệt độ",
borderColor: "#3cba9f",
fill: false
}]
},
options: {
title: {
display: true,
text: 'Chart JS Line Chart Example'
}
}
});
new Chart(document.getElementById("line-chart2"), {
type: 'line',
data: {
labels: <?php echo json_encode($arrTg) ?>,
datasets: [{
data: <?php echo json_encode($arrDa) ?>,
label: "Do am",
borderColor: "#3cba9f",
fill: false
}]
},
options: {
title: {
display: true,
text: 'Chart JS Line Chart Example'
}
}
});
</script>
</html>
<?php
$tt = $conn->query("select * from led")->fetch_all();
$trangthai = $tt[0][0];
?>
<script>
let check = <?php echo json_encode($trangthai) ?>;
client = new Paho.MQTT.Client("broker.emqx.io", Number(8083), "clientId" + Math.random());
client.onConnectionLost = onConnectionLost;
client.onMessageArrived = onMessageArrived;
client.connect({
onSuccess: onConnect
});
function onConnect() {
console.log("onConnect");
client.subscribe("dht");
}
function onConnectionLost(responseObject) {
if (responseObject.errorCode !== 0) {
console.log("onConnectionLost:" + responseObject.errorMessage);
}
}
let checkDaGui = 0;
function onMessageArrived(message) {
console.log("onMessageArrived:" + message.payloadString);
if (message.destinationName == "dht") {
let dht = JSON.parse(message.payloadString);
let nhiet = dht.nhiet
let doam = dht.doam
fetch(`./add.php?nhietdo=${nhiet}&doam=${doam}`, {
method: "GET"
})
.then(res => res.json())
.then(data => {
console.log(data);
})
.catch(err => {
console.log(err);
})
if (check == 1 && checkDaGui == 0) {
message = new Paho.MQTT.Message("on");
message.destinationName = "conghoa";
client.send(message);
checkDaGui = 1;
} else if(check == 0 && checkDaGui == 0) {
message = new Paho.MQTT.Message("off");
message.destinationName = "conghoa";
client.send(message);
checkDaGui = 1;
}
location.reload();
}
}
$('.bat').click(function() {
if (check == 0) {
message = new Paho.MQTT.Message("on");
message.destinationName = "conghoa";
client.send(message);
check = 1;
fetch(`./update.php?trangthai=${check}`, {
method: "GET"
})
.then(res => res.json())
.then(data => {
console.log(data);
})
.catch(err => {
console.log(err);
})
} else {
message = new Paho.MQTT.Message("off");
message.destinationName = "conghoa";
client.send(message);
check = 0;
fetch(`./update.php?trangthai=${check}`, {
method: "GET"
})
.then(res => res.json())
.then(data => {
console.log(data);
})
.catch(err => {
console.log(err);
})
}
});
</script>