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

211
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 opts = { const DATA_URL = 'https://cloud.richoux.me/seafhttp/f/2582b44ba453453f8793/?op=view'
angle: 0.15,
lineWidth: 0.44,
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 opts = {
const canvas = document.getElementById('gauge-canvas'); angle: 0.15,
lineWidth: 0.44,
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
};
let gauge; const container = document.getElementById('gauge-container');
function initGauge() { const canvas = document.getElementById('gauge-canvas');
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); let gauge;
gauge.maxValue = 100; function initGauge() {
gauge.setMinValue(0); const { width, height } = container.getBoundingClientRect();
gauge.animationSpeed = 32; canvas.width = width * window.devicePixelRatio;
} canvas.height = height * window.devicePixelRatio;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
async function updateGauge() { gauge = new Gauge(canvas).setOptions(opts);
try { gauge.maxValue = 100;
const res = await fetch(DATA_URL, { cache: 'no-store' }); gauge.setMinValue(0);
if (!res.ok) throw new Error(res.status); gauge.animationSpeed = 32;
const text = await res.text(); }
const pct = Math.min(100, Math.max(0, parseFloat(text))); function updateGaugeColor(value) {
gauge.set(pct); const color = getColorForValue(value);
document.getElementById('value').textContent = pct.toFixed(1) + ' %'; opts.colorStart = color;
} catch (e) { opts.colorStop = color;
document.getElementById('value').textContent = 'Erreur de chargement'; gauge.setOptions(opts);
console.error(e); }
}
}
window.addEventListener('load', () => { function getColorForValue(value) {
initGauge(); if (value < 20) {
updateGauge(); return '#f44336'; // Rouge
setInterval(updateGauge, 30_000); } else if (value <= 80) {
}); return '#ff9800'; // Orange/Jaune
} else {
return '#4caf50'; // Vert
}
}
window.addEventListener('resize', () => { async function updateGauge() {
const last = gauge ? gauge.value : 0; try {
initGauge(); const res = await fetch(DATA_URL, { cache: 'no-store' });
gauge.set(last); if (!res.ok) throw new Error(res.status);
}); const text = await res.text();
</script> 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);
}
}
</body> window.addEventListener('load', () => {
initGauge();
updateGauge();
setInterval(updateGauge, 30_000);
});
window.addEventListener('resize', () => {
const last = gauge ? gauge.value : 0;
initGauge();
if (gauge && last !== undefined) {
updateGaugeColor(last);
gauge.set(last);
}
});
</script>
</body>
</html> </html>