Finalisation jauge alcool

This commit is contained in:
Gabriel
2025-06-11 14:14:55 +02:00
parent e96032aefc
commit 08e3473670

View File

@@ -1,11 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="fr"> <html lang="fr">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title>Stock alcool</title> <title>Stock alcool</title>
<script src="https://cdn.jsdelivr.net/npm/gaugeJS/dist/gauge.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gaugeJS/dist/gauge.min.js"></script>
<style> <style>
html, body { html, body {
margin: 0; margin: 0;
padding: 0; padding: 0;
height: 100%; height: 100%;
@@ -13,7 +13,7 @@
font-family: sans-serif; font-family: sans-serif;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
#gauge-container { #gauge-container {
flex: 1; flex: 1;
@@ -39,8 +39,8 @@
border-radius: 0.5rem; border-radius: 0.5rem;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="gauge-container"> <div id="gauge-container">
<canvas id="gauge-canvas"></canvas> <canvas id="gauge-canvas"></canvas>
@@ -49,7 +49,7 @@
<script> <script>
const DATA_URL = 'https://cloud.richoux.me/f/5c1f3252fbe44f5f9fa1/?dl=1'; const DATA_URL = 'https://cloud.richoux.me/seafhttp/f/2582b44ba453453f8793/?op=view'
const opts = { const opts = {
angle: 0.15, angle: 0.15,
@@ -85,6 +85,22 @@
gauge.setMinValue(0); gauge.setMinValue(0);
gauge.animationSpeed = 32; gauge.animationSpeed = 32;
} }
function updateGaugeColor(value) {
const color = getColorForValue(value);
opts.colorStart = color;
opts.colorStop = color;
gauge.setOptions(opts);
}
function getColorForValue(value) {
if (value < 20) {
return '#f44336'; // Rouge
} else if (value <= 80) {
return '#ff9800'; // Orange/Jaune
} else {
return '#4caf50'; // Vert
}
}
async function updateGauge() { async function updateGauge() {
try { try {
@@ -92,6 +108,7 @@
if (!res.ok) throw new Error(res.status); if (!res.ok) throw new Error(res.status);
const text = await res.text(); const text = await res.text();
const pct = Math.min(100, Math.max(0, parseFloat(text))); const pct = Math.min(100, Math.max(0, parseFloat(text)));
updateGaugeColor(pct);
gauge.set(pct); gauge.set(pct);
document.getElementById('value').textContent = pct.toFixed(1) + ' %'; document.getElementById('value').textContent = pct.toFixed(1) + ' %';
} catch (e) { } catch (e) {
@@ -109,10 +126,12 @@
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
const last = gauge ? gauge.value : 0; const last = gauge ? gauge.value : 0;
initGauge(); initGauge();
if (gauge && last !== undefined) {
updateGaugeColor(last);
gauge.set(last); gauge.set(last);
}
}); });
</script> </script>
</body> </body>
</html> </html>