41 lines
1.8 KiB
JavaScript
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
|
|
}
|
|
} |