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

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

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

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

Sorry Giulio, for the late response. I work with dashboard and therefore not with dashboard 2.0. I have now made something else and it works to my satisfaction. Thanks for your response!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.