Passing data via uib-var

General
1

Hello all, I have just joined in to the discussions for NR and in particular UIBUILDER.
Firstly, I want to show my appreciation to TotallyInformation for the vast amount of work I can see has been put in to developing uibuilder, and also to others for their contribution.

I enjoyed the read from Collin (Mudwalker) on his journey into using uibuilder, and can relate very much to a lot of what Collin writes.

Secondly, my background is more from moving into using NR from many years developing my own SCADA systems based on Python for back end heavy lifting coupled to full javascript front end using SPA concepts with websockets for real time data updates.

So far, since starting with NR starting December 2025, firstly via HomeAssistant and now as stand alone NR server running on an industrial RPi (SeeedStudio reComputer CM4).

So, to my question: having only in past few days started with uibuilder and reading the very good documentation and reading many post here, I am doing some tinkering based on one of the examples, namely, FE SPA with router function.

I have a flow whereby I retrieve data from a PLC (Industrial box of magic tricks), via good old Modbus protocol. I pass the retrieved data through a buffer parser and end up with a key/value object, for example something like the following:

{"plc_vfd":{"fault_code":0,"warning_code":16},"_msgid":"9e35bf8c16035ee9"}

I then pass this into a uib-sender node.
Since I am using the example mentioned above, I am using route 3 as the space where I play, so in the route 3 html file I have placed the following:

<div>
    <ul>
        <li>VFD Fault Code: <uib-var variable="msg.plc_vfd.fault_code">...</uib-var></li>
        <li>VFD Warning Code: <uib-var variable="msg.plc_vfd.warning_code">...</uib-var></li>
    </ul>
</div>

I hit the deploy and set things in action and then issue a poll to the PLC.
Using the data as shown above, where the fault code is 0 and warning code is 16, what I notice on the page is that the value for fault code does not get updated, but for warning code it does.

After some tinkering, I found that if the value is 0, as in number zero, it does not update, but any other number will get through and be shown.

If I pass the value through as a string, so like "0" then of course it is shown.
I looked at using a filter to see if that could sort it, but no.

I am looking to reproduce a well defined and reliable SPA as an HMI for industrial projects.
In my existing SPA structures I make use of a nice little helper called Tinybind to do the magic of binding my data to the UI. Tinybind can do other very nice things like formatting of the data before being put to the UI. Maybe a bit like how the uibuilder filter might function.

If you're interested, Tinybind: https://blikblum.github.io/tinybind/

What is it that I might be doing wrong here with uib-var ?
And is there a better method to achieve what I wish with using uibuilder ?
Many thanks for any advice.

Edit:
Using another of uibuilder examples, uib-sender the exact same issue is noticed.
I set the uib sender node to send a payload of type number and try different numbers.
Again, without exception, all numbers except zero are sent to the UI.
I even tried -0 and 0.0, if the value equates to zero it will not get displayed.
It is as if it equates zero to a null.

1 Like
2

Welcome to the best forum on the Internet. :smiley:

Well thank you. That is much appreciated.

Well, looks like you've found a BUG! :beetle: I've probably been lazy somewhere and done the typical if (something) ... and so when something equals 0, it behaves as falsy.

Thanks for mentioning that. I drew inspiration from various places when finally adding dynamic binding properties but this isn't one I've seen. I will check it out to see if anything can be learned from it. However, the <uib-var> web component is a vanilla HTML component that doesn't need the DOM watchers that things like tinybind and larger frameworks typically have to use. Instead, it uses the same technique as I've given you below as a workaround. It just means you don't have to do the JavaScript yourself.

UIBUILDER does, though, use a a DOM watching technique for the uib-topic attribute.

Nothing! What you are doing should indeed work just fine.

Not a better method but at least a work around.

Instead of using <uib-var>, you can do it the "old" way. Though unfortunately, this does require a little JavaScript.

<div>
  <ul>
    <li>VFD Fault Code: 
      <span id="plc_vfd_fault_code" aria-live="polite">...</span>
    </li>
    <li>VFD Warning Code: 
      <span id="plc_vfd_warning_code" aria-live="polite">...</span>
    </li>
  </ul>
</div>

I've included aria-live="polite" in case you want to be properly accessible. :smiley: It indicates to screen readers that the output should be re-announced after an update.

In your index.js:

// uib shortcuts for grabbing a ref to an element by id
const elVfdFaultCode = $('#plc_vfd_fault_code')
const elVfdWarnCode = $('#plc_vfd_warning_code')
// Update the elements if the right data received
uibuilder.onChange('msg', (msg) => {
  if ( msg.plc_vfd ) {
    if ( 'fault_code' in msg.plc_vfd ) {
      elVfdFaultCode.textContent = msg.plc_vfd.fault_code
    }
    if ( 'warning_code' in msg.plc_vfd ) {
      elVfdWarnCode.textContent = msg.plc_vfd.warning_code
    }
  }
})

A little more code I'm afraid but it is robust and will always work.

Could I please trouble you to raise an issue for this on GitHub? Don't worry if you can't, I'll add one later.

3

Hi Julian, thank you for your detailed reply to my findings, and presenting a solution.

I'll do more testing tomorrow (when the sun comes again) and of course more tinkering.
I don't mind having to write up code, I find it very useful and aids understanding what I did for the future me.

My projects typically have quite a lot of data to push from real world devices to a UI, could be at least a few hundred items, and so using a binder like tinybind.js does make this easy.

I understand what you are saying regarding uib-var being vanilla HTML and that other frameworks do bring in their own complexities.

Using your method I would probably look to iterate through each object to keep the code size from exploding. The plc_vfd object would contain 20 or more items and then there are many other objects of greater size.

I'll spend some time on now that you have highlighted a few things for me to ponder on.

I was also going to mention I came to uibuilder by way of dashboard 2, and quickly seeing it was not going to meet my needs in the long term. Yes, I was able to quickly make a neat looking dashboard for my own off-grid energy system and tinkerings with various forms of home automations. But as you will know already, there are grumblings around the current lack of gauge widgets that I should qualify to say, perform in a way needed, i.e. centre needle style.
I'm sure Collin and others have struck this with their own energy systems where for example, a current shunt, say Victron SmartShunt, well it gives values of a negative range when discharging the battery and conversely positive values when current flows into the battery.

So, I figured that by using uibuilder I could at least design and code up my own gauges and other UI components as I need them.

Again, thanks for your help Julian.
I expect I will be making this community my new home as I develop projects based on NR and uibuilder and hopefully can contribute here at uibuilder :blush:

4

And that is absolutely what <uib-var> is meant to make easy and reduce code complexity. :wink:

If you do have a very large number of outputs to display, you will almost certainly find a break-even point where JavaScript code updates become much easier to manage than manual HTML entries.

BTW, I have found the issue in <uib-var> and it will be fixed in the next release. I can let you have a fixed version of the client library if you need one - though I suspect that you don't given your thoughts.

It was indeed some laziness on my part:

if (chkVal === true && !this.value && this.undef !== true) { ...

Should have been (and is in the next release):

if (chkVal === true && this.value === undefined && this.undef !== true) { ...

That's what UIBUILDER is here for! :smiley:

It is genuinely a pleasure.

I certainly welcome all contributions, thoughts and ideas. As I am now retired, I have more time to spend on developing my two main projects - UIBUILDER and my Web Components. So any thoughts or contributions, just let me know.

1 Like
5

In our Motorhome I have a cheap WYSE 3040, which is s-l-o-w..., but on it I use DietPi and Node-RED c/w UIBUILDER and PiHole. I have a RPi Zero 2 W running VenusOS which basically makes it into a Victron Cerbo GX and use it's MQTT server for handling all messages. The Dashboard on the Cerbo GXis actually very informative, I need to get the flashy system interconnect wires into UIBUILDER, but not just yet!

On my NR platform I have some pages with UIBUILDER edge meters both with LH and Centre Zero (Charge/Discharge), including data from a Victron SmartShunt. One thing to look at is a Duppa 4-port USB Hub, it makes connecting Victron stuff to VenusOS simple.

I will get the code for the meters and share on here - it is currently rough, but it works! Finessing my code on the Home Conntrol System at the moment. Will post here later today or tomorrow.

1 Like
6

You can, of course, have a gauge with zero in the middle, it is just that the arc still grows from the left hand end rather than symmetrically around the centre.

7

Hi Collin, a quick reply before I call it the night. Yes, I did read about what you have for your energy system in your motorhome. I'll like to chat more about this in another way, maybe pm ?
Yes, I have a number of Victron bits here, in fact all Victron for my system and have tied all VE.Direct ports via one of those Duppa boards (4 TTL async ports to a single USB) to a little Rpi3+ running VenusOS for a number of years now.

I thought it was time to get my teeth back into doing some more than what VensuOS gave, I wanted a local server, just like you also needed. That led me to HA initially, where I used NR addon and coded up a flow and handle the communications from all the Victron bits via the Duppa board. ( In fact, when I read your post the other day where you mentioned they now make the version in a small enclosure, I order one right away. So now I will have a spare.

It is VE.Direct protocol that the Victron devices stream out over the TTL VE.Direct ports, a simple tab delimited text message. So if you need any help, let me know.

I thought hard about the effort required to maintain my existing code base, and found using NR so much easier to develop and test, also fun too :slight_smile: While I love coding in Python, I'm quite keen to see how well NR will go and coupled with uibuilder I can imagine very good things to come.

Julian, great work indeed. Over the coming days I can start playing with other parts of what I want to do, start building up a UI, probably closely based on my existing SPA projects. But might be good if to make the fix, even if I find the relevant file and apply the fix.

More to write and to say, but another time, it's late here down under :sleeping_face:

1 Like
8

Hi the other Collin, yes, and that is something that doesn't look good, having the arc swing from the left all the time.

Take my example of the current shunt, when there is no current, the needle is top dead center and swings left for say discharge and swings right for charge.

In the industrial field, even all SCADA systems I have seen, all center based gauges never start their swing from either left or right, they start from center, just like a traditional mechanical center gauge.

I had some of those style you refer to in Dashboard 2, and for normal increasing gauge they look great, but not for center based values. So I went and used Hotnipi's linear gauge that is able to at least show one colour for negative values and another for positive values.

And it was this very fact that led me here to uibuilder :grin:

1 Like
9

Yes, I agree, a true centre zero gauge would be better. I believe that the problem at the moment is that there is very little manpower available to work on the dashboard.

Personally I use @colinl/node-red-dashboard-2-ui-gauge-classic which does not suffer from that issue.

[Edit], by the way, there is only one 'l' in Colin.

10

I get that problem all the time from our American Friends who pronounce it as in Collin Powell! :lol

1 Like