Files
J1B3-Sensor-boxes/web/new website/GaugGroup.js
2024-03-27 20:48:24 +01:00

41 lines
1.8 KiB
JavaScript

class GaugeGroup {
constructor(nodeId, gaugesCount) {
this.nodeId = nodeId;
this.gaugesCount = gaugesCount;
this.maxGaugeValue = 100; // Maximum value the gauge can display
// Create a new div element
this.element = document.createElement("div");
this.element.className = "gaugeGroup";
// Set the HTML of the new div
this.element.innerHTML = `
<h2 class="groupTitle">Gauge Group for Node ${this.nodeId}</h2>
<div class="Node">
${Array(this.gaugesCount).fill().map((_, i) => `
<div class="Sensorvalues">
<div id="gaugeContainer${this.nodeId}_${i+1}" class="gaugeContainer">
<img src="gauge.png" class="gaugeImage">
<div id="gaugeValue${this.nodeId}_${i+1}" class="gaugeValue"></div>
<div id="needle${this.nodeId}_${i+1}" class="needle"></div>
<div id="gaugeText${this.nodeId}_${i+1}" class="gaugeText">0</div>
<div class="gaugeCover"></div>
</div>
</div>
`).join('')}
</div>
`;
// Append the new div to the body
document.body.appendChild(this.element);
}
updateGauge(gaugeId, value) {
const needle = document.getElementById(`needle${this.nodeId}_${gaugeId}`);
const gaugeText = document.getElementById(`gaugeText${this.nodeId}_${gaugeId}`);
const rotationDegree = ((value / this.maxGaugeValue) * 180) - 90; // Convert value to degree (-90 to 90)
needle.style.transform = `rotate(${rotationDegree}deg)`;
gaugeText.textContent = value; // Update the text
}
}