Finalisation jauge alcool
This commit is contained in:
Gabriel
@@ -1,118 +1,137 @@
|
||||
<!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;
|
||||
}
|
||||
<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%;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#gauge-canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
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;
|
||||
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>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="gauge-container">
|
||||
<canvas id="gauge-canvas"></canvas>
|
||||
<div id="value">Chargement…</div>
|
||||
</div>
|
||||
<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';
|
||||
<script>
|
||||
|
||||
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 DATA_URL = 'https://cloud.richoux.me/seafhttp/f/2582b44ba453453f8793/?op=view'
|
||||
|
||||
const container = document.getElementById('gauge-container');
|
||||
const canvas = document.getElementById('gauge-canvas');
|
||||
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
|
||||
};
|
||||
|
||||
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';
|
||||
const container = document.getElementById('gauge-container');
|
||||
const canvas = document.getElementById('gauge-canvas');
|
||||
|
||||
gauge = new Gauge(canvas).setOptions(opts);
|
||||
gauge.maxValue = 100;
|
||||
gauge.setMinValue(0);
|
||||
gauge.animationSpeed = 32;
|
||||
}
|
||||
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';
|
||||
|
||||
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);
|
||||
}
|
||||
}
|
||||
gauge = new Gauge(canvas).setOptions(opts);
|
||||
gauge.maxValue = 100;
|
||||
gauge.setMinValue(0);
|
||||
gauge.animationSpeed = 32;
|
||||
}
|
||||
function updateGaugeColor(value) {
|
||||
const color = getColorForValue(value);
|
||||
opts.colorStart = color;
|
||||
opts.colorStop = color;
|
||||
gauge.setOptions(opts);
|
||||
}
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
initGauge();
|
||||
updateGauge();
|
||||
setInterval(updateGauge, 30_000);
|
||||
});
|
||||
function getColorForValue(value) {
|
||||
if (value < 20) {
|
||||
return '#f44336'; // Rouge
|
||||
} else if (value <= 80) {
|
||||
return '#ff9800'; // Orange/Jaune
|
||||
} else {
|
||||
return '#4caf50'; // Vert
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('resize', () => {
|
||||
const last = gauge ? gauge.value : 0;
|
||||
initGauge();
|
||||
gauge.set(last);
|
||||
});
|
||||
</script>
|
||||
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)));
|
||||
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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user