119 lines
2.8 KiB
HTML
119 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<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 {
|
|
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://cloud.richoux.me/f/5c1f3252fbe44f5f9fa1/?dl=1';
|
|
|
|
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';
|
|
|
|
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>
|
|
|