124 lines
3.0 KiB
HTML
124 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Stock alcool</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/gaugeJS/dist/gauge.min.js"></script>
|
|
<style>
|
|
html, body {
|
|
margin: 0;
|
|
padding: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #f0f0f0;
|
|
font-family: sans-serif;
|
|
}
|
|
|
|
#gauge-container {
|
|
flex: 1;
|
|
width: 90vw;
|
|
max-width: 400px;
|
|
aspect-ratio: 2 / 1;
|
|
position: relative;
|
|
background: white;
|
|
border-radius: 8px 8px 0 0;
|
|
overflow: hidden;
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
#gauge-canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
}
|
|
|
|
#value {
|
|
position: absolute;
|
|
bottom: 1rem;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
font-size: 1.5rem;
|
|
background: rgba(255,255,255,0.8);
|
|
padding: 0.3rem 0.8rem;
|
|
border-radius: 0.5rem;
|
|
pointer-events: none;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="gauge-container">
|
|
<canvas id="gauge-canvas"></canvas>
|
|
<div id="value">Chargement…</div>
|
|
</div>
|
|
|
|
<script>
|
|
const DATA_URL = 'https://cloud.richoux.me/seafhttp/f/2582b44ba453453f8793/?op=view';
|
|
const opts = {
|
|
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 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';
|
|
if (!gauge) {
|
|
gauge = new Gauge(canvas).setOptions(opts);
|
|
gauge.maxValue = 100;
|
|
gauge.setMinValue(0);
|
|
gauge.animationSpeed = 32;
|
|
}
|
|
}
|
|
|
|
function updateGaugeColor(v) {
|
|
const color = v < 20 ? '#f44336' : v <= 80 ? '#ff9800' : '#4caf50';
|
|
opts.colorStart = color;
|
|
opts.colorStop = color;
|
|
gauge.setOptions(opts);
|
|
}
|
|
|
|
async function fetchAndUpdate() {
|
|
try {
|
|
const res = await fetch(DATA_URL, {cache:'no-store'});
|
|
if (!res.ok) throw new Error(res.status);
|
|
const pct = Math.min(100, Math.max(0, parseFloat(await res.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);
|
|
}
|
|
}
|
|
|
|
function refresh() {
|
|
initGauge();
|
|
fetchAndUpdate();
|
|
}
|
|
|
|
window.addEventListener('load', () => { refresh(); setInterval(fetchAndUpdate, 30000); });
|
|
window.addEventListener('resize', refresh);
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|