UIBUILDER: using uib-var custom attribute

General
1

I got my first object "SHM":

const myDevices = ['SHM'];
myDevices.forEach(dev => {
    uibuilder.onTopic(dev, (msg) => {
        uibuilder.set(dev, msg.payload);

        if (dev === 'SHM' && msg.payload) {

            if (msg.payload.P !== undefined) {
                uibuilder.set('SHM_P_class', msg.payload.P < 0 ? 'green' : '');
            }

            if (msg.payload.P0 !== undefined) {
                uibuilder.set('SHM_P0_class', msg.payload.P0 < 0 ? 'green' : '');
            }
        }
    });
});

the value is shown, but I donĀ“t get it green:

         <div uib-attr-class="SHM_P_class" class="default-style">
         Leistung: <span uib-var="SHM.P">--</span> Watt
        </div>

        <div uib-bind:class="SHM_P_class" class="default-style">
            Leistung P: <span uib-var="SHM.P">--</span> Watt
        </div>

        <div :class="SHM_P_class" class="default-style">
            Leistung P: <span uib-var="SHM.P">--</span> Watt
        </div>

do you have an idea?

2

You are over-thinking things. :smiley:

The uib-var attribute and the <uib-var> component are short-cuts to updating things in the DOM. When working with web pages, remember that CSS is separate to the HTML (DOM).

So if you want to update the colour of a visible element based on data from Node-RED, you don't need to set a variable, you can update the CSS or Style directly.

Typically for something like this, you'd probably just add or remove a style from the appropriate element, something like this:

const myDevices = ['SHM'];
// NOTE: In your HTML, set the div to have
// an id matching the device name, e.g. <div id="SHM">
myDevices.forEach(dev => {
    uibuilder.onTopic(dev, (msg) => {
        // Grab a ref to the appropriate div
        const el = $(`#${dev}`)
        // Set the style on the element
        el.style.color = msg?.payload?.P < 0 ? 'green' : ''
    });
});
3

Okay, I solved it with:

const myDevices = ['SHM', 'SDM630', ... , ... ];
myDevices.forEach(dev => uibuilder.set(dev, {}));
myDevices.forEach(dev => {
    uibuilder.onTopic(dev, (msg) => {
        uibuilder.set(dev, msg.payload);
        if (!msg.payload) return;
        Object.keys(msg.payload).forEach(key => {
            const val = msg.payload[key];
            const el = document.querySelector(`[uib-var="${dev}.${key}"]`);
            if (el) {
                if (val !== undefined && val !== null) {
                    el.innerText = val;
                }
                if (dev === 'SHM' && (key === 'P' || key === 'P0')) {
                    el.classList.toggle('green', val < 0);
                }
                if (dev === 'SDM630' && key === 'P') {
                    el.classList.toggle('red', val > 0);
                }
            }
        });
    });
});

Advantage: 0 (number) is displayed now