Test jauge bière

2025-06-11 09:23:59 +02:00
parent b27ea4eee0
commit 2e5bff6417
1 changed files with 117 additions and 0 deletions
--- a/static/stocks.html
+++ b/static/stocks.html
@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+  <meta charset="UTF-8">
+  <title>Jauge plein écran</title>
+  <script src="https://cdn.jsdelivr.net/npm/gaugeJS/dist/gauge.min.js"></script>
+  <style>
+    html, body {
+      margin: 0;
+      padding: 0;
+      height: 100%;
+      overflow: hidden;
+      font-family: sans-serif;
+      display: flex;
+      flex-direction: column;
+    }
+
+    #gauge-container {
+      flex: 1;
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+
+    #gauge-canvas {
+      width: 100%;
+      height: 100%;
+      display: block;
+    }
+
+    #value {
+      position: absolute;
+      bottom: 1rem;
+      left: 50%;
+      transform: translateX(-50%);
+      font-size: 2rem;
+      background: rgba(255,255,255,0.7);
+      padding: 0.5rem 1rem;
+      border-radius: 0.5rem;
+    }
+  </style>
+</head>
+<body>
+
+  <div id="gauge-container">
+    <canvas id="gauge-canvas"></canvas>
+    <div id="value">Chargement…</div>
+  </div>
+
+  <script>
+    const DATA_URL = 'https://votre.site.com/chemin/vers/percent.txt';
+
+    const opts = {
+      angle: 0.15,          // portion du cercle
+      lineWidth: 0.44,      // épaisseur
+      radiusScale: 1,
+      pointer: {
+        length: 0.6,
+        strokeWidth: 0.035,
+        color: '#000'
+      },
+      limitMax: false,
+      limitMin: false,
+      colorStart: '#4caf50',
+      colorStop: '#4caf50',
+      strokeColor: '#EEEEEE',
+      generateGradient: false,
+      highDpiSupport: true
+    };
+
+    const container = document.getElementById('gauge-container');
+    const canvas = document.getElementById('gauge-canvas');
+
+    let gauge;
+    function initGauge() {
+      const { width, height } = container.getBoundingClientRect();
+      canvas.width  = width  * window.devicePixelRatio;
+      canvas.height = height * window.devicePixelRatio;
+      canvas.style.width  = width  + 'px';
+      canvas.style.height = height + 'px';
+
+      gauge = new Gauge(canvas).setOptions(opts);
+      gauge.maxValue = 100;
+      gauge.setMinValue(0);
+      gauge.animationSpeed = 32;
+    }
+
+    async function updateGauge() {
+      try {
+        const res = await fetch(DATA_URL, { cache: 'no-store' });
+        if (!res.ok) throw new Error(res.status);
+        const text = await res.text();
+        const pct = Math.min(100, Math.max(0, parseFloat(text)));
+        gauge.set(pct);
+        document.getElementById('value').textContent = pct.toFixed(1) + ' %';
+      } catch (e) {
+        document.getElementById('value').textContent = 'Erreur de chargement';
+        console.error(e);
+      }
+    }
+
+    window.addEventListener('load', () => {
+      initGauge();
+      updateGauge();
+      setInterval(updateGauge, 30_000);
+    });
+
+    window.addEventListener('resize', () => {
+      const last = gauge ? gauge.value : 0;
+      initGauge();
+      gauge.set(last);
+    });
+  </script>
+
+</body>
+</html>
+