created row of gauges

This commit is contained in:
2024-03-27 18:53:42 +01:00
parent 7f79b46c01
commit a36b6746fd
3 changed files with 98 additions and 39 deletions

View File

@@ -1,10 +1,12 @@
// JavaScript
function updateGauge(value) {
const gaugeValue = document.getElementById('gaugeValue');
const gaugeText = document.getElementById('gaugeText');
const maxGaugeValue = 100; // Maximum value the gauge can display
const rotationDegree = ((value / maxGaugeValue) * 180) - 90; // Convert value to degree (-90 to 90)
gaugeValue.style.transform = `rotate(${rotationDegree}deg)`;
gaugeText.textContent = value; // Update the text
// Change color based on value
if (value <= 40) {
@@ -17,4 +19,4 @@ function updateGauge(value) {
}
// Example usage:
updateGauge(50); // Rotates the gauge to 0 degrees (50 out of 100) and changes color to orange
updateGauge(50); // Rotates the gauge to 0 degrees (50 out of 100), changes color to orange, and updates the text to "50"