PVR/overzeuknup.top
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Finalisation jauge alcool

Browse Source
This commit is contained in:
Gabriel
2025-06-11 14:14:55 +02:00
parent e96032aefc
commit 08e3473670
1 changed files with 115 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

209
static/stocks.html
View File

@@ -1,118 +1,137 @@
<!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%;
overflow: hidden; overflow: hidden;
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;
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
#gauge-canvas { #gauge-canvas {
width: 100%; width: 100%;
height: 100%; height: 100%;
display: block; display: block;
} }
#value { #value {
position: absolute; position: absolute;
bottom: 1rem; bottom: 1rem;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
font-size: 2rem; font-size: 2rem;
background: rgba(255,255,255,0.7); background: rgba(255,255,255,0.7);
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
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>
<div id="value">Chargement…</div> <div id="value">Chargement…</div>
</div> </div>
<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,
lineWidth: 0.44, lineWidth: 0.44,
radiusScale: 1, radiusScale: 1,
pointer: { pointer: {
length: 0.6, length: 0.6,
strokeWidth: 0.035, strokeWidth: 0.035,
color: '#000' color: '#000'
}, },
limitMax: false, limitMax: false,
limitMin: false, limitMin: false,
colorStart: '#4caf50', colorStart: '#4caf50',
colorStop: '#4caf50', colorStop: '#4caf50',
strokeColor: '#EEEEEE', strokeColor: '#EEEEEE',
generateGradient: false, generateGradient: false,
highDpiSupport: true highDpiSupport: true
}; };
const container = document.getElementById('gauge-container'); const container = document.getElementById('gauge-container');
const canvas = document.getElementById('gauge-canvas'); const canvas = document.getElementById('gauge-canvas');
let gauge; let gauge;
function initGauge() { function initGauge() {
const { width, height } = container.getBoundingClientRect(); const { width, height } = container.getBoundingClientRect();
canvas.width = width * window.devicePixelRatio; canvas.width = width * window.devicePixelRatio;
canvas.height = height * window.devicePixelRatio; canvas.height = height * window.devicePixelRatio;
canvas.style.width = width + 'px'; canvas.style.width = width + 'px';
canvas.style.height = height + 'px'; canvas.style.height = height + 'px';
gauge = new Gauge(canvas).setOptions(opts); gauge = new Gauge(canvas).setOptions(opts);
gauge.maxValue = 100; gauge.maxValue = 100;
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);
}
async function updateGauge() { function getColorForValue(value) {
try { if (value < 20) {
const res = await fetch(DATA_URL, { cache: 'no-store' }); return '#f44336'; // Rouge
if (!res.ok) throw new Error(res.status); } else if (value <= 80) {
const text = await res.text(); return '#ff9800'; // Orange/Jaune
const pct = Math.min(100, Math.max(0, parseFloat(text))); } else {
gauge.set(pct); return '#4caf50'; // Vert
document.getElementById('value').textContent = pct.toFixed(1) + ' %'; }
} catch (e) { }
document.getElementById('value').textContent = 'Erreur de chargement';
console.error(e);
}
}
window.addEventListener('load', () => { async function updateGauge() {
initGauge(); try {
updateGauge(); const res = await fetch(DATA_URL, { cache: 'no-store' });
setInterval(updateGauge, 30_000); 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) {
document.getElementById('value').textContent = 'Erreur de chargement';
console.error(e);
}
}
window.addEventListener('resize', () => { window.addEventListener('load', () => {
const last = gauge ? gauge.value : 0; initGauge();
initGauge(); updateGauge();
gauge.set(last); setInterval(updateGauge, 30_000);
}); });
</script>
</body> window.addEventListener('resize', () => {
const last = gauge ? gauge.value : 0;
initGauge();
if (gauge && last !== undefined) {
updateGaugeColor(last);
gauge.set(last);
}
});
</script>
</body>
</html> </html>