Finalisation jauge alcool

2025-06-11 14:14:55 +02:00
parent e96032aefc
commit 08e3473670
1 changed files with 115 additions and 96 deletions
--- a/static/stocks.html
+++ b/static/stocks.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="fr">
-<head>
+    <head>
        <meta charset="UTF-8">
        <title>Stock alcool</title>
        <script src="https://cdn.jsdelivr.net/npm/gaugeJS/dist/gauge.min.js"></script>
        <style>
-    html, body {
+html, body {
    margin: 0;
    padding: 0;
    height: 100%;
@@ -13,7 +13,7 @@
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
-    }
+}

    #gauge-container {
        flex: 1;
@@ -39,8 +39,8 @@
        border-radius: 0.5rem;
    }
        </style>
-</head>
-<body>
+    </head>
+    <body>

        <div id="gauge-container">
            <canvas id="gauge-canvas"></canvas>
@@ -49,7 +49,7 @@

        <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 = {
                angle: 0.15,          
@@ -85,6 +85,22 @@
                gauge.setMinValue(0);
                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() {
                try {
@@ -92,6 +108,7 @@
                    if (!res.ok) throw new Error(res.status);
                    const text = await res.text();
                    const pct = Math.min(100, Math.max(0, parseFloat(text)));
+                    updateGaugeColor(pct);
                    gauge.set(pct);
                    document.getElementById('value').textContent = pct.toFixed(1) + ' %';
                } catch (e) {
@@ -109,10 +126,12 @@
            window.addEventListener('resize', () => {
                const last = gauge ? gauge.value : 0;
                initGauge();
+                if (gauge && last !== undefined) {
+                    updateGaugeColor(last);
                    gauge.set(last);
+                }
            });
        </script>

-</body>
+    </body>
 </html>
-