Upload files to "Kode Program Website dan Flow Node_RED"
This commit is contained in:
commit
0c3380e87e
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,479 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Monitoring Website</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.css">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.3.0/raphael.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/justgage@1.4.0/dist/justgage.min.js"></script>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
|
||||
<style>
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f4f4f4;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
h1 {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
color: #333;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 20px auto;
|
||||
background-color: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||||
overflow: hidden;
|
||||
width: 80%;
|
||||
max-width: 1200px;
|
||||
}
|
||||
.data-display-container {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
width: 100%;
|
||||
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.data-display
|
||||
font-size: 1.2em;
|
||||
color: #333;
|
||||
}
|
||||
.data-display .icon {
|
||||
margin-right: 5px;
|
||||
}
|
||||
.row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
}
|
||||
.gauge-container, .chart-container {
|
||||
width: 45%;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
}
|
||||
.gauge {
|
||||
width: 400px;
|
||||
height: 200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.gauge-title, .chart-title {
|
||||
margin-bottom: 10px;
|
||||
color: #555;
|
||||
}
|
||||
.gauge-title .fas, .chart-title .fas {
|
||||
margin-right: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Data Monitoring</h1>
|
||||
|
||||
<div class="container">
|
||||
<div class="data-display-container">
|
||||
<div class="data-display">
|
||||
<span class="icon">🔋</span><span id="voltage-value">-</span> V
|
||||
</div>
|
||||
<div class="data-display">
|
||||
<span class="icon">🔌</span><span id="current-value">-</span> A
|
||||
</div>
|
||||
<div class="data-display">
|
||||
<span class="icon">⚡</span><span id="power-value">-</span> W
|
||||
</div>
|
||||
<div class="data-display">
|
||||
<span class="icon">💡</span><span id="energy-value">-</span> kWh
|
||||
</div>
|
||||
<div class="data-display">
|
||||
<span class="icon">💸</span>Rp <span id="biaya-value">-</span>
|
||||
</div>
|
||||
<div class="data-display">
|
||||
<span class="icon">💳</span>Rp <span id="sisasaldo-value">-</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="gauge-container">
|
||||
<div class="gauge-title">🔋 Voltage Gauge</div>
|
||||
<div class="gauge" id="voltage-gauge"></div>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<div class="chart-title">🔋 Voltage</div>
|
||||
<canvas id="voltage-chart" width="400" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="gauge-container">
|
||||
<div class="gauge-title">🔌 Current Gauge</div>
|
||||
<div class="gauge" id="current-gauge"></div>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<div class="chart-title">🔌 Current</div>
|
||||
<canvas id="current-chart" width="400" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="gauge-container">
|
||||
<div class="gauge-title">⚡ Power Gauge</div>
|
||||
<div class="gauge" id="power-gauge"></div>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<div class="chart-title">⚡ Power</div>
|
||||
<canvas id="power-chart" width="400" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="gauge-container">
|
||||
<div class="gauge-title">💡 Energy Gauge</div>
|
||||
<div class="gauge" id="energy-gauge"></div>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<div class="chart-title">💡 Energy</div>
|
||||
<canvas id="energy-chart" width="400" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="gauge-container">
|
||||
<div class="gauge-title">💸 Biaya Gauge</div>
|
||||
<div class="gauge" id="biaya-gauge"></div>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<div class="chart-title">💸 Biaya</div>
|
||||
<canvas id="biaya-chart" width="400" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="gauge-container">
|
||||
<div class="gauge-title">💳 Sisa Saldo Gauge</div>
|
||||
<div class="gauge" id="sisasaldo-gauge"></div>
|
||||
</div>
|
||||
<div class="chart-container">
|
||||
<div class="chart-title">💳 Sisa Saldo</div>
|
||||
<canvas id="sisasaldo-chart" width="400" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function fetchData(url) {
|
||||
return fetch(url)
|
||||
.then(response => response.json())
|
||||
.catch(error => console.error('Error fetching data:', error));
|
||||
}
|
||||
|
||||
function updateDataDisplay(data) {
|
||||
document.getElementById('voltage-value').textContent = data.voltage;
|
||||
document.getElementById('current-value').textContent = data.current;
|
||||
document.getElementById('power-value').textContent = data.power;
|
||||
document.getElementById('energy-value').textContent = data.energy;
|
||||
document.getElementById('biaya-value').textContent = data.biaya;
|
||||
document.getElementById('sisasaldo-value').textContent = data.saldo;
|
||||
}
|
||||
|
||||
function updateGauges(data) {
|
||||
if (!window.voltageGauge) {
|
||||
window.voltageGauge = new JustGage({
|
||||
id: "voltage-gauge",
|
||||
value: data.voltage,
|
||||
min: 0,
|
||||
max: 300,
|
||||
title: "Voltage",
|
||||
label: "V",
|
||||
decimals: 2
|
||||
});
|
||||
} else {
|
||||
window.voltageGauge.refresh(data.voltage);
|
||||
}
|
||||
if (!window.currentGauge) {
|
||||
window.currentGauge = new JustGage({
|
||||
id: "current-gauge",
|
||||
value: data.current,
|
||||
min: 0,
|
||||
max: 50,
|
||||
title: "Current",
|
||||
label: "A",
|
||||
decimals: 2
|
||||
});
|
||||
} else {
|
||||
window.currentGauge.refresh(data.current);
|
||||
}
|
||||
if (!window.powerGauge) {
|
||||
window.powerGauge = new JustGage({
|
||||
id: "power-gauge",
|
||||
value: data.power,
|
||||
min: 0,
|
||||
max: 2000,
|
||||
title: "Power",
|
||||
label: "W",
|
||||
decimals: 2
|
||||
});
|
||||
} else {
|
||||
window.powerGauge.refresh(data.power);
|
||||
}
|
||||
if (!window.energyGauge) {
|
||||
window.energyGauge = new JustGage({
|
||||
id: "energy-gauge",
|
||||
value: data.energy,
|
||||
min: 0,
|
||||
max: 1000,
|
||||
title: "Energy",
|
||||
label: "kWh",
|
||||
decimals: 3
|
||||
});
|
||||
} else {
|
||||
window.energyGauge.refresh(data.energy);
|
||||
}
|
||||
if (!window.biayaGauge) {
|
||||
window.biayaGauge = new JustGage({
|
||||
id: "biaya-gauge",
|
||||
value: data.biaya,
|
||||
min: 0,
|
||||
max: 500000,
|
||||
title: "Biaya",
|
||||
label: "Rp",
|
||||
decimals: 2
|
||||
});
|
||||
} else {
|
||||
window.biayaGauge.refresh(data.biaya);
|
||||
}
|
||||
if (!window.sisasaldoGauge) {
|
||||
window.sisasaldoGauge = new JustGage({
|
||||
id: "sisasaldo-gauge",
|
||||
value: data.saldo,
|
||||
min: 0,
|
||||
max: 500000,
|
||||
title: "Sisa Saldo",
|
||||
label: "Rp",
|
||||
decimals: 2
|
||||
});
|
||||
} else {
|
||||
window.sisasaldoGauge.refresh(data.saldo);
|
||||
}
|
||||
}
|
||||
|
||||
let voltageChart, currentChart, powerChart, energyChart, biayaChart, sisasaldoChart;
|
||||
let chartCounter = 0;
|
||||
|
||||
function initializeCharts() {
|
||||
const voltageCtx = document.getElementById('voltage-chart').getContext('2d');
|
||||
voltageChart = new Chart(voltageCtx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [{
|
||||
label: 'Voltage (V)',
|
||||
data: [],
|
||||
borderColor: 'rgba(75, 192, 192, 1)',
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||||
fill: true,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
type: 'linear',
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const currentCtx = document.getElementById('current-chart').getContext('2d');
|
||||
currentChart = new Chart(currentCtx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [{
|
||||
label: 'Current (A)',
|
||||
data: [],
|
||||
borderColor: 'rgba(153, 102, 255, 1)',
|
||||
backgroundColor: 'rgba(153, 102, 255, 0.2)',
|
||||
fill: true,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
type: 'linear',
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const powerCtx = document.getElementById('power-chart').getContext('2d');
|
||||
powerChart = new Chart(powerCtx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [{
|
||||
label: 'Power (W)',
|
||||
data: [],
|
||||
borderColor: 'rgba(255, 159, 64, 1)',
|
||||
backgroundColor: 'rgba(255, 159, 64, 0.2)',
|
||||
fill: true,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
type: 'linear',
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const energyCtx = document.getElementById('energy-chart').getContext('2d');
|
||||
energyChart = new Chart(energyCtx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [{
|
||||
label: 'Energy (kWh)',
|
||||
data: [],
|
||||
borderColor: 'rgba(255, 206, 86, 1)',
|
||||
backgroundColor: 'rgba(255, 206, 86, 0.2)',
|
||||
fill: true,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
type: 'linear',
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const biayaCtx = document.getElementById('biaya-chart').getContext('2d');
|
||||
biayaChart = new Chart(biayaCtx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [{
|
||||
label: 'Biaya (Rp)',
|
||||
data: [],
|
||||
borderColor: 'rgba(54, 162, 235, 1)',
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
||||
fill: true,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
type: 'linear',
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const sisasaldoCtx = document.getElementById('sisasaldo-chart').getContext('2d');
|
||||
sisasaldoChart = new Chart(sisasaldoCtx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [],
|
||||
datasets: [{
|
||||
label: 'Sisa Saldo (Rp)',
|
||||
data: [],
|
||||
borderColor: 'rgba(255, 99, 132, 1)',
|
||||
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
||||
fill: true,
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
type: 'linear',
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function updateCharts(data) {
|
||||
chartCounter++;
|
||||
|
||||
voltageChart.data.labels.push(chartCounter);
|
||||
voltageChart.data.datasets[0].data.push(data.voltage);
|
||||
voltageChart.update();
|
||||
|
||||
currentChart.data.labels.push(chartCounter);
|
||||
currentChart.data.datasets[0].data.push(data.current);
|
||||
currentChart.update();
|
||||
|
||||
powerChart.data.labels.push(chartCounter);
|
||||
powerChart.data.datasets[0].data.push(data.power);
|
||||
powerChart.update();
|
||||
|
||||
energyChart.data.labels.push(chartCounter);
|
||||
energyChart.data.datasets[0].data.push(data.energy);
|
||||
energyChart.update();
|
||||
|
||||
biayaChart.data.labels.push(chartCounter);
|
||||
biayaChart.data.datasets[0].data.push(data.biaya);
|
||||
biayaChart.update();
|
||||
|
||||
sisasaldoChart.data.labels.push(chartCounter);
|
||||
sisasaldoChart.data.datasets[0].data.push(data.saldo);
|
||||
sisasaldoChart.update();
|
||||
}
|
||||
|
||||
function fetchDataAndUpdateUI() {
|
||||
Promise.all([
|
||||
fetchData('fetch_data2.php'),
|
||||
fetchData('fetch_data3.php')
|
||||
]).then(([sensorData, biayaData]) => {
|
||||
const data = {...sensorData, ...biayaData};
|
||||
updateDataDisplay(data);
|
||||
updateGauges(data);
|
||||
updateCharts(data);
|
||||
}).catch(error => console.error('Error updating UI:', error));
|
||||
}
|
||||
|
||||
initializeCharts();
|
||||
setInterval(fetchDataAndUpdateUI, 1000);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
//fetch_data2
|
||||
<?php
|
||||
$servername = "localhost";
|
||||
$username = "root";
|
||||
$password = "devbas2603";
|
||||
$dbname = "tugas_akhir";
|
||||
$conn = new mysqli($servername, $username, $password, $dbname);
|
||||
if ($conn->connect_error) {
|
||||
die("Connection failed: " . $conn->connect_error);
|
||||
}
|
||||
|
||||
$sql = "SELECT voltage, power, current, energy, timestamp FROM sensor_reference1 ORDER BY id DESC LIMIT 1";
|
||||
$result = $conn->query($sql);
|
||||
$data = array();
|
||||
if ($result->num_rows > 0) {
|
||||
// Output data of each row
|
||||
while ($row = $result->fetch_assoc()) {
|
||||
$data = array(
|
||||
'voltage' => $row['voltage'],
|
||||
'current' => $row['current'],
|
||||
'power' => $row['power'],
|
||||
'energy' => $row['energy']
|
||||
);
|
||||
}
|
||||
}
|
||||
$conn->close();
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode($data);
|
||||
?>
|
||||
|
||||
//fetch_data2
|
||||
<?php
|
||||
$servername = "localhost";
|
||||
$username = "root";
|
||||
$password = "devbas2603";
|
||||
$dbname = "tugas_akhir";
|
||||
$conn = new mysqli($servername, $username, $password, $dbname);
|
||||
if ($conn->connect_error) {
|
||||
die("Connection failed: " . $conn->connect_error);
|
||||
}
|
||||
$sql = "SELECT saldo, biaya, timestamp FROM biaya_reference ORDER BY id DESC LIMIT 1";
|
||||
$result = $conn->query($sql);
|
||||
$data = array();
|
||||
if ($result->num_rows > 0) {
|
||||
while ($row = $result->fetch_assoc()) {
|
||||
$data = array(
|
||||
'saldo' => $row['saldo'],
|
||||
'biaya' => $row['biaya']
|
||||
);
|
||||
}
|
||||
}
|
||||
$conn->close();
|
||||
header('Content-Type: application/json');
|
||||
echo json_encode($data);
|
||||
?>
|
||||
Loading…
Reference in New Issue