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