Finalisation jauge alcool
This commit is contained in:
@@ -49,7 +49,7 @@
|
|||||||
|
|
||||||
<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,
|
||||||
@@ -85,6 +85,22 @@
|
|||||||
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getColorForValue(value) {
|
||||||
|
if (value < 20) {
|
||||||
|
return '#f44336'; // Rouge
|
||||||
|
} else if (value <= 80) {
|
||||||
|
return '#ff9800'; // Orange/Jaune
|
||||||
|
} else {
|
||||||
|
return '#4caf50'; // Vert
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
async function updateGauge() {
|
async function updateGauge() {
|
||||||
try {
|
try {
|
||||||
@@ -92,6 +108,7 @@
|
|||||||
if (!res.ok) throw new Error(res.status);
|
if (!res.ok) throw new Error(res.status);
|
||||||
const text = await res.text();
|
const text = await res.text();
|
||||||
const pct = Math.min(100, Math.max(0, parseFloat(text)));
|
const pct = Math.min(100, Math.max(0, parseFloat(text)));
|
||||||
|
updateGaugeColor(pct);
|
||||||
gauge.set(pct);
|
gauge.set(pct);
|
||||||
document.getElementById('value').textContent = pct.toFixed(1) + ' %';
|
document.getElementById('value').textContent = pct.toFixed(1) + ' %';
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
@@ -109,10 +126,12 @@
|
|||||||
window.addEventListener('resize', () => {
|
window.addEventListener('resize', () => {
|
||||||
const last = gauge ? gauge.value : 0;
|
const last = gauge ? gauge.value : 0;
|
||||||
initGauge();
|
initGauge();
|
||||||
|
if (gauge && last !== undefined) {
|
||||||
|
updateGaugeColor(last);
|
||||||
gauge.set(last);
|
gauge.set(last);
|
||||||
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user