class GaugeGroup { constructor(nodeId, Location, gaugesCount, maxGaugeValues, dataTypes) { this.nodeId = nodeId; this.gaugesCount = gaugesCount; this.maxGaugeValues = maxGaugeValues; // Maximum value the gauge can display this.dataTypes = dataTypes; // Array of data type names for each gauge this.location = Location; // Create a new div element this.element = document.createElement("div"); this.element.className = "gaugeGroup"; // Set the HTML of the new div this.element.innerHTML = `

${this.nodeId} - ${this.location}

${Array(this.gaugesCount).fill().map((_, i) => `
0
`).join('')}
`; // Append the new div to the body document.body.appendChild(this.element); } updateGauge(gaugeId, value) { if (!this.maxGaugeValues || gaugeId - 1 < 0 || gaugeId - 1 >= this.maxGaugeValues.length) { console.error('Invalid gaugeId or maxGaugeValues:', gaugeId, this.maxGaugeValues); return; } const needle = document.getElementById(`needle${this.nodeId}_${gaugeId}`); const gaugeText = document.getElementById(`gaugeText${this.nodeId}_${gaugeId}`); const maxGaugeValue = this.maxGaugeValues[gaugeId - 1]; // Get the maximum value for this gauge const rotationDegree = ((value / maxGaugeValue) * 180) - 90; // Convert value to degree (-90 to 90) needle.style.transform = `rotate(${rotationDegree}deg)`; gaugeText.textContent = `${this.dataTypes[gaugeId - 1]}: ${value}`; // Update the text with data type } }