How to dynamically change the color of texts on a gauge-node

Dashboard
1

How to dynamically change the color of texts on a gauge-node?

NodeRed_PL1
NodeRed_PL1138×107 2.39 KB

So I want to be able to make the white text red or green depending on a positive or negative payload

2

Hi,

you can use a mix of override CSS (Gauge ui-gauge | Node-RED Dashboard 2.0) and function node.

Here is a function node I use to add an icon based and change the color compring the previous temp value detect with the current value: red if the temp increase, blue if decrease and back if stable:

// Define the Icon
// Retrieve the previous temperature from the context
let prevTemp = context.get(msg.topic + "_pTemp") ?? null;

// Update the context with the current temperature
context.set(msg.topic + "_pTemp", msg.payload);

// Default values
let gIcon = "mdi-thermometer-off";
let gIconColor = "gIconColGray";

// Check if a previous temperature exists
if (prevTemp === null) {
    gIcon = "mdi-thermometer";        // First time receiving data
    gIconColor = "gIconColBlack";     // Neutral color
} else if (prevTemp > msg.payload) {
    gIcon = "mdi-thermometer-minus";    // Temp decreased
    gIconColor = "gIconColBlue";        // Cool color
} else if (prevTemp < msg.payload) {
    gIcon = "mdi-thermometer-plus";     // Temp increased
    gIconColor = "gIconColRed";         // Hot color
} else {
    gIcon = "mdi-thermometer";      // No change
    gIconColor = "gIconColBlack";   // Neutral color
}

msg.ui_update = {
    label: "Temperatura",
    gtype: "gauge-34",
    gstyle: "rounded",
    icon: gIcon,
    units: "°C",
    segments: [
        {"color":"SkyBlue","from":10,"to":20},
        {"color":"#5CD65C","from":20,"to":24},
        {"color":"Orange","from":24,"to":30},
        {"color":"Red","from":30,"to":100}],
    min: 10,
    max: 35
}

msg.class = gIconColor;
return msg;

And here is the related Dashboard2 Template node to apply the CSS override to update the text icon:

.gIconColRed .nrdb-ui-gauge-value label {
    color: red !important;
}

.gIconColBlue .nrdb-ui-gauge-value label {
    color: blue !important;
}
.gIconColBlack .nrdb-ui-gauge-value label {
    color: black !important;
}

gIconColGray .nrdb-ui-gauge-value label {
    color: gray !important;
}

Hope this help,
Giulio