fixed it so you can set types as text under the gauges
This commit is contained in:
@@ -1,8 +1,9 @@
|
|||||||
class GaugeGroup {
|
class GaugeGroup {
|
||||||
constructor(nodeId, gaugesCount) {
|
constructor(nodeId, gaugesCount, maxGaugeValues, dataTypes) {
|
||||||
this.nodeId = nodeId;
|
this.nodeId = nodeId;
|
||||||
this.gaugesCount = gaugesCount;
|
this.gaugesCount = gaugesCount;
|
||||||
this.maxGaugeValue = 100; // Maximum value the gauge can display
|
this.maxGaugeValues = maxGaugeValues; // Maximum value the gauge can display
|
||||||
|
this.dataTypes = dataTypes; // Array of data type names for each gauge
|
||||||
|
|
||||||
// Create a new div element
|
// Create a new div element
|
||||||
this.element = document.createElement("div");
|
this.element = document.createElement("div");
|
||||||
@@ -31,11 +32,16 @@ class GaugeGroup {
|
|||||||
}
|
}
|
||||||
|
|
||||||
updateGauge(gaugeId, value) {
|
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 needle = document.getElementById(`needle${this.nodeId}_${gaugeId}`);
|
||||||
const gaugeText = document.getElementById(`gaugeText${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)
|
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)`;
|
needle.style.transform = `rotate(${rotationDegree}deg)`;
|
||||||
gaugeText.textContent = value; // Update the text
|
gaugeText.textContent = `${this.dataTypes[gaugeId - 1]}: ${value}`; // Update the text with data type
|
||||||
}
|
}
|
||||||
}
|
}
|
Reference in New Issue
Block a user