64 lines
2.0 KiB
HTML
64 lines
2.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Load Cell Monitor</title>
|
|
<style>
|
|
body { font-family: Arial; text-align: center; padding: 50px; }
|
|
.box {
|
|
border: 2px solid #333;
|
|
padding: 20px;
|
|
margin: 20px auto;
|
|
width: 300px;
|
|
border-radius: 10px;
|
|
}
|
|
.value { font-size: 48px; color: #2196F3; }
|
|
.label { font-size: 14px; color: #666; }
|
|
.small { font-size: 24px; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Load Cell Monitor</h1>
|
|
|
|
<div class="box">
|
|
<div class="label">Volume (mL)</div>
|
|
<div class="value" id="volume">--</div>
|
|
</div>
|
|
|
|
<div class="box">
|
|
<div class="label">Weight Average (g)</div>
|
|
<div class="value small" id="avg">--</div>
|
|
</div>
|
|
|
|
<div class="box">
|
|
<div class="label">Individual Weights (g)</div>
|
|
<div class="value small">
|
|
<span id="w1">--</span> |
|
|
<span id="w2">--</span> |
|
|
<span id="w3">--</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="label">Time: <span id="time">--</span>s</div>
|
|
|
|
<script>
|
|
function fetchData() {
|
|
fetch('/data')
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
document.getElementById('volume').textContent = data.volume_ml.toFixed(1);
|
|
document.getElementById('avg').textContent = data.weight_avg.toFixed(1);
|
|
document.getElementById('w1').textContent = data.w1.toFixed(1);
|
|
document.getElementById('w2').textContent = data.w2.toFixed(1);
|
|
document.getElementById('w3').textContent = data.w3.toFixed(1);
|
|
document.getElementById('time').textContent = data.time.toFixed(1);
|
|
})
|
|
.catch(err => console.log('Error:', err));
|
|
}
|
|
|
|
setInterval(fetchData, 500); // 0.5초마다 업데이트
|
|
fetchData();
|
|
</script>
|
|
</body>
|
|
</html>
|