480 lines
10 KiB
HTML
480 lines
10 KiB
HTML
<!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>
|
|
|