Vonbaron's Project Experiments

[vonbaron]

Now that I have tinkered with Node Red and more recently UIBuilder over the past few weeks, I thought I would share my progress to date, mostly to get feedback and critique while possibly giving others some ideas based on my own designs.

First a bit of history on how I got to being here, in the Node Red community that is.

Having started out many years ago tinkering with all things electronics, both analogue and digital together with learning the various programming languages, from assembler through to C/C++ and more recently in the past years Python and common web language tools, I now find myself quite enchanted with using Node Red.

So, end of 2025 I made the effort to learn more about Node Red, first as an add-on to a Home-Assistant setup I got going and then seeing HA was not going to meet my needs, swapping over to Node Red as my core base.

I should say at this point, my use case is my own off grid energy system I have here in the cabin on the sunny side of a mountain on the little island I call home. A real system that is important for my state of sanity. A solar system based on Victron equipment and 20kWh of LiFePO4 cells.
I could speak about this in another topic.

Okay, so now visualisation, how best to do this I wondered. After a light bit of reading it was Dashboard 2 initially. After more reading and many errors I made quite a nice and workable dashboard using Dashboard 2.

But then I could see I was going to hit impassable walls fairly quickly once again, what to do ?
Enter UIBUILDER, yes, I thought. More reading on UIBUILDER from TotallyInformation, which was really starting to get me excited with the possibilities, so I dived in and pulled apart the example flows. I was mostly interested in the full client side logic single page application SPA) concept.

UIBUILDER was presented as a way to allow you to code and created your own visual component in the way you wish, with the help of a good selection of uibuilder helper nodes, could things get any better ?

Okay, so my Node Red lives on a little industrial RPi based machine, a compute module 4 (CM4), and the hardware is made by SeedStudio: reComputer R1125
This box of tricks is quite the beast, rugged and reliable. As an aside, I use these in my industrial projects working in the hot and dusty environments of north western Australia in mining projects.
Anyhow, this is what I have mounted on DIN rail near my off grid solar system playing Node Red server.

Back to visualisation: After some more tinkering I thought to myself, could I slip in my existing front end code base I had developed over the years. Answer, absolutely yes.

My existing front code makes use of only a couple of small helper libraries, namely one to bind data between my objects held by the main Javascript and the HTML being displayed. The other is a small front end router. These two libraries are tinybind.js and routie,js.

I looked at how I do things and how best I could wrangle my code to fit in with UIBUILDER eco-system and found it was best to continue to use both these libraries.

Tinybind offers nice features and is easy to implement the bound data to HTML.
Routie, the front end router, while probably quite similar to the router in uibuilder, allows me to do a few other things. Importantly, when I load up HTML to be placed into the router content section, I also need to load up a corresponding js file. For me, this is important, to have loaded content comprising both HTML and a Javascript module.

The js module holds the code needed explicitly for that HTML visual component. It gets cleanly destroyed on route change to avoid a runaway heap and reduce loading on browser garbage collection processes.

@TotallyInformation, can the router in UIBULDER handle loading of js modules together with the HTML like this ?

Next post - a few screen captures from a live system.
Please, if people have suggestions or questions, do write.

[vonbaron]

I promised screen captures, but first a little on the Node Red side and the flows I have developed.

I have a small number of flows, one for the off grid energy system, one for Wiz smart lights, another for the Ecowitt weather station and finally one for playing and testing my PLC (Programmable Logic Controller) developments.

Below is the flow for the off grid system. As mentioned, I use Victron gear, which is one Victron MPPT SmartSolar charge controller for the 4.8kW solar array, one SmartShunt and then an RS Smart 48V | 6000 kW inverter. The battery bank is 16 cells of 400Ahr Winston LiFePO4, giving around 20kWhrs of energy storage for my little mountain cabin.

This system will be expanded to a much larger system in the not too distant future to accommodate larger and new loads, think EV.

Back to flows, here is an image of the energy flow. The three Victron devices communicate data over VE.Direct using at this stage the simple text protocol. The function blocks you see there do the protocol decoding and store data to both a flow based object as well as a smaller object that is sent via web sockets. The data is rate limited to assist in keeping the channel noise free and there is no need to stream this data in super high definition.

I mentioned a flow based object and also an object pushed out as a payload of the functions.
The flow based object is a super set of the smaller pushed out variable and contains more data per data point or as I call them, tag.

The purpose for both will become clearer, but essentially, the larger flow based variable is retrived by the client side front end on first start and it fills a likewise object in the front end, mirroring each other. The smaller object pushed out over web sockets now updates this front end object when ever new data is decoded.

Again, the purpose for this is simple. On front end startup, the web client already then has an up to date value for all data. This allows the user to then navigate to any page immediately and see data. This method also makes any alarm events that occurred earlier to be made available and displayed right away.

Without this concept, the user would either need to wait to see all data or press some sort of button to initiate a call to get data. This is all automatic with this method.

Please bear in mind the GUI screen captures are undergoing constant development and are in a state of flux shall we say.

Below is the screen that details the Victron solar charge controller.
As you can see, I have a left side navigation system, something I have used in past projects and continue to use it here. (Already I have made updates to this and will tell more about later)

The gauges are based on the good old canvas gauge, which appear to function quite well. They also work well as a centre based gauge. They offer fair amount of tweaking to customise the appearance. I will want for more, but for now they will suffice.

The next screen is the Victron SmartShunt and make more data available.

The battery state of charge (SoC) is a simple CSS bar gauge, and since the SoC is at 100% it is all that lovely duck egg blue with no white showing which is the case as the SoC goes down.
As you can see, it does not go below 90% SOC, so I do have lots of energy to play with.

The lower section is showing data I get and decode from the Neey cell balancer, which provides a fair amount of data. More on what I did with the Neey another time, but as a hint I pulled the bluetooth module out and popped an Arduino Feather and Wizznet 5500 Ethernet controller to make it connectable via Ethernet.

Time for a break

[vonbaron]

At this point I can hear you all say, 'well, show us the complex uibuilder flow that you must have'.
Err, umm, well, like a shameful school kid with little to show for their assignment, may I present le flux complexe.

How is that possible I hear you ask.
Right, so, first up, I do not use UIBUILDER to set the various hmtl and js files, I use VSCode to remotely connect over SSH to the reComputer and do all my file editing with VSCode, just so beautiful and gorgeous to use, says he from a Linux world.

Yes, it is a single uib node, just used to setup and activate an http and ws server, that's it.
Quite fitting I think for my single page application too.

The next image, not so different from previous images details the inverter data I retrieve from the RS Smart 48 | 6000. Not much to show.

Again, showing the basics.
I should mention, I maintain as part of the flow based object variable the minimum and maximum values for each tag item as part of the data decoding routine. I have a flow function, which holds these functions and can be called by any of the decoding functions.

I display these stats where I think they are required, but each tag does have this as part of the larger flow object. I also store scaling and tag units in there, all of which is transferred to the front end system and lives in a live object there.

The last page to show for now is the cabin lights.
Now, these are smart lights, made by Wiz and it was quite a simple matter to use a node module specifically to operate Wiz lights. From this page it is possible to operate via toggle the light on or off as well as use sliders to set the brightness and also the temperature colour.

This screen is still in its infancy and later on as I think and tinker it will develop into more.
For example, it is possible that the security cameras I use will be able to operate certain lights if I wish, based on detection of either people or vehicles.

The smart lights are also connected by remotes and I now have a new toy to play with, a SMLIGHT SLZB-06p7 device to now play MQTT. It will be connected to the second Ethernet port on the reComputer (RPi CM4).

I am only implementing a few of the lights in the cabin, as a way to learn and develop.

Below is the flow for this screen:

I will still need to get the Wiz outputs back to the client front end, not a difficult task, just needs some time to do.

Again, the function block decodes what is being sent from the web socket sent from the client front end. One function to filter out the packet which details lights and the second to decode the individual lights and their operating functions.

Time to do more programming

[dynamicdave]

Hello and welcome to the Forum!

Thank you for painting such a vivid picture of your journey into Node-RED land. Living off-grid in a cabin on the sunny side of a mountain sounds absolutely wonderful — what an inspiring setup.

At this point, I feel obliged to give you the official health warning: Node-RED is addictive.
I can say that with confidence — I’ve been happily hooked for more than eight years now!

I’m sure you’re going to have a great time here on the Forum. Welcome aboard

[krambriw]

@vonbaron

I got going and then seeing HA was not going to meet my needs, swapping over to Node Red as my core base

Yeah, most welcome and you are not alone making that journey, same here, Node-RED is the way to go!

I'm also using and combining it with many of my already written Python services, integrating them all via MQTT, works so good!!

From the HA world, one thing though I just love and will keep is the ESPHome for ESP devices, makes it so easy to create small distributed devices for all kind of tasks

Don't know about your cabin, sounds beatiful, but if you need remote management of it, check out Tailscale; I recently did and now I can remotely access sites with Node-RED innstallations (and others) and manage them as if I was sitting on site, so nice and free of charge for a normal users usage

PS about mining, I really enjoy watching "Aussie Gold Hunters", all the people walking around in the heat w metal detectors, hoping for nuggets, looks a bit hard and hot to me

[dynamicdave]

I totally agree with Walter about Tailscale - brilliant application and very easy to setup and use.

[vonbaron]

Hello dynamicdave and krambriw, thank you for your comments.

I've know of Node Red for many years now, but I choose not to bury myself in its claws back then. Thinking it was nothing more than a poor mans way to quickly try out a method. Maybe it was back then, and maybe it was good I didn't get into it only to become disillusioned, never to return.

How fortuitous the timing.

Having spent many years with C/C++ and Python developing my own SCADA system, I recently got to thinking and realising the effort to maintain systems as I had developed was going to be problematic going forward.

For me, Node Red offers an effective and efficient way to move forward with my existing code base and to be able to develop new systems for customers quickly without blowing my few remaining synapses

Thanks for mentioning Tailscale, I did not know about it. So, I did some quick looking into it to learn more. I see it is based on VPN, in particular wireguard. I use wireguard for point to point links directly in my Mikrotik routers, so router to router based wireguard link. Wireguard is very good, lightweight and performant.

About 12 months ago I did some research looking at how best to provide secure remote access to remote equipment for one of my customers. I do mean secure and I do mean remote, again the top end of western Australia in the mining region. I also needed reliability and possibly support for when I do get stuck.

I needed to get remote access back into PLC and HMI and VFD equipment on mobile platforms in these areas. I had used 4G with some success, but when the equipment went out of range of these systems I no longer have access.

Using Starlink was an option, but how to reverse back in. Until recently, this was not so easy with Starlink. My research led me to another Canadian company, not Taiscale, but a company that provides something superior to a VPN, and that is Zero Trust Network.

The company I settled on is Agilicus.
Unlike Tailscale, it requires nothing special on the clients side, just your normal everyday web browser. Agilicus uses the concept of a client network side connector, which initiates the outbound connection. Hence, a reverse connection back through Starlink is now possible.

Having a Zero Trust concept is important for my customers, it is the idea of user to resource and not user to network which is what VPN is.

Then I quickly did an online search for Tailscale vs Agilicus and behold, some information came forth, albeit from Agilicus, but well worth a read if you are interested.
Here is the quick read: Tailscale vs Agilicus

I have read Julian's write up on using Cloudflare for also getting remote access, and I had a quick look at some of its documentation a few weeks back. Again, to me, it appears convoluted.

I use Agilicus for my own home based setup and use it to access my own system remotely when I am on the big island. I already use Agilicus for my customers and it has passed their stringent security requirements.

I have had one on one meetings with the guys at Agilicus and they have been most helpful, answering my many questions promptly with clarity.

As an added bonus, the very industrial RPi I talk about which is hosting the extremely lightweight Agilicus connector AnyX, also runs Node Red.

I now have SSH, directory shares and launchers for Windows based applications, all from the one web access portal, just brilliant in m y opinion.

Agilicus has a guide about installing Node Red on your AnyX connector. Now I have full time access to these remote sites and can develop the Node Red flows remotely and will be adding some clever smarts and GUI as I progress.

@krambriw luckily I do not live anywhere near the region I talk about, but rather on the little island that hangs underneath the big island, once called Van Dieman's land, where life is much more pleasant. Plus, there are nuggets of gold to be found in my area. I sometimes look in my little stream that passes over my land.

I had been thinking over the past weeks to write an article on remote access with Agilicus, I may do yet.

[mudwalker]

Hi Paul,

Looks good, must admit the use of VSCode, in fact the whole way you achieve your Installation came as a surprise! At the end of the day, if the system gives you what you need in an effective way, then it has to be good for you!

Glad you achieved what you needed with Node-RED, UIBUILDER and all the other techniques you have utilised! (Certainly opened my eyes!)

Best wishes,
Colin

[krambriw]

Regarding remote access management solutions; there are of course plenty available, companies providing such things including their own platform & routers for all kind of networks (Teltonika & HMS Networks as example that I have experience from)

Interesting comparison Tailscale vs Agilicus, understood. In my case, all private anyway, I realize I already have included 8 devices in my setup. This is still covered fine with the free version of Tailscale but would not with the other. So unless a huge need, or commercial, I prefer the free variant of course

[TotallyInformation]

@vonbaron

The js module holds the code needed explicitly for that HTML visual component. It gets cleanly destroyed on route change to avoid a runaway heap and reduce loading on browser garbage collection processes.

@TotallyInformation, can the router in UIBULDER handle loading of js modules together with the HTML like this ?

The uib router is a fairly simple beast and so is useful for simple needs. There should be no issues with using a different SPA router should you need features that my router can't deliver.

Having said that, the uib router has two modes of operation. You can either choose to completely destroy the previous route when changing - that should fully unload everything from the DOM and memory. Or you can choose to simple hide things. Each, of course, have their own advantages and disadvantages.

Bottom line is that yes, the uib router should be able to do what you are asking for. In fact, that is the default mode.

@vonbaron

How is that possible I hear you ask.
Right, so, first up, I do not use UIBUILDER to set the various hmtl and js files, I use VSCode to remotely connect over SSH to the reComputer and do all my file editing with VSCode, just so beautiful and gorgeous to use, says he from a Linux world.

Yes, it is a single uib node, just used to setup and activate an http and ws server, that's it.
Quite fitting I think for my single page application too.

Fantastic! This has long been one of UIBUILDER's core design philosophies. If you already have a web workflow that fits into static resources, use it! Use Node-RED to manage the data which is what it excels at.

Most people though will have data feeding into the uibuilder node from other sources which is why UIBUILDER is pitched at creating data-driven web apps. This is how I typically use it. Using Node-RED to gather and manipulate the data from different sources and front-end code to do the final tweaking and display. Other uibuilder capabilities, of course, allow people without front-end coding skills to also make use of it.

I guess the only thing I would say is, don't overlook Node-RED's ability to act as an orchestrator for data and the ease in which you can then send that data to your front-end over a single, robust realtime connection.

@vonbaron

I have read Julian's write up on using Cloudflare for also getting remote access, and I had a quick look at some of its documentation a few weeks back. Again, to me, it appears convoluted.

That is absolutely true! But Cloudflare Zero Trust really is in a slightly different category to TailScale. Where as TS is a purely network layer capability, CFZT is able to operate at different layers such as HTTPS. Which is why it is somewhat more complex.

I like CFZT because it also includes several additional cloud security layers including DDOS protection and other firewall-like features that run in their highly secured cloud infrastructure.

When you use a VPN, your security is only as good as the weakest link.

@vonbaron

Agilicus

Is there a free tier for this? It isn't clear. They have a free "Try Now" but it isn't clear whether you can carry on using that.

@mudwalker

must admit the use of VSCode, in fact the whole way you achieve your Installation came as a surprise!

Ah, Colin, I think I've mentioned this to you before!

[mudwalker]

:lol You have, but my thought was that was just for easier editing of code from Node-RED, and uploading the modified code back to to Node-RED.

I have a love-hate relationship with VSCode, I am afraid it comes down VERY heavily on hate!! Never have got to grips with using other than when if comes to uploading new firmware to my 3D Printer.

[TotallyInformation]

@mudwalker

I have a love-hate relationship with VSCode, I am afraid it comes down VERY heavily on hate!! Never have got to grips with using other than when if comes to uploading new firmware to my 3D Printer.

Other editors are available.

I know what you mean about VSCode though. I've been having some issues with it recently. I suspect that I need to completely remove it and its settings and start afresh. But who has time for that! It is the best IDE/Editor I've ever used though, despite its limitations. The integration with ESLINT alone is worth it. Adding extensions for HTML and CSS linting also helps a load. And there is the "Markdown all-in-one" extension that really helps with writing documentation. And now, of course, the integration with GitHub Copilot AI is really helping me push the boundaries of what I could achieve before.

Bottom line is, choosing a few, well placed extensions turns it from an editor into a development workflow tool.

[mudwalker]

@TotallyInformation Accepting your challenge, albeit VSCodium. Added said extensions and now I have made a couple of changes (OK, they were pointed out to me, but we will gloss over that for now…). How do I get VSCode(ium) to play nice with Node-RED Editor. AI says something, but I don’t believe it for now!!

@vonbaron What library did you use for the gauges, or was it your own design in the end?

[TotallyInformation]

@mudwalker

How do I get VSCode(ium) to play nice with Node-RED Editor. AI says something, but I don’t believe it for now!!

Depends what you want to do. If you are wanting to edit front-end code for uibuilder nodes, you will simply just click on the handy VSCode icon in the node's Editor config panel.

You might also find it helpful to create a link to quickly open your userDir folder in VSCode. Useful if you sometimes find yourself wanting to edit a file there, such as the settings.js file.

If you ware wanting some ideas on extensions when working with UIBUILDER, lets start a separate thread.

[vonbaron]

Colin, the gauges I am using at present are a basic and well known canvas gauge. They use the HTML canvas element to draw the graphics. The canvas element is a pixel based concept as opposed to SVG, which is a vector based approach. Both methods have their advantages.

A link to canvas gauges to get you started: Canvas Gauge

Thanks everyone for all the comments so far. Seems we could have a lively discussion on the topic of remote access based on the different experiences each of us has. Again, yes, there will be different use cases where selecting one service or method will be better than another.

Julian, your question on Agilicus and is there a free tier, yes there is, check here: Agilicus Pricing

The "Starter Home User" pack is what I have myself for my own testing, while my customers are signed up for business use. I currently am the admin for the customers, from which I set up sub orgs, users and then resources such as web app and application launchers which are tightly controlled to users.

To start, you can run the Anyx service on a measly little RPi 3+ or even less I would say. Some routers like certain Mikrotik units can run the AnyX service in a container. There are many ways to do this and the site has a large selection of guides that describe all this.

Colin: I think if you are able to update firmware for your 3D printer with VSCode, then you will find using it for working on your uibuilder code bliss-full. You will already be editing the code, say HTML in the editor in Node Red and using VSCode is only going to be better, as Julian says, you will have syntax highlighting and so you are going to see your errors as you type.

IDE's, yes it can be a whole other topic for discussion. I started out about 15 years ago and went straight to Eclipse. It was big and it was finicky, but it was good. I could in the one instance be coding up C/C++ for Intel and and be working on Javascript/HTML/CSS and so on with all the syntax highlighting. I also used a version for Arduino based projects.

Having the one IDE to do all my coding and even markdown allow me to be more productive.

Then VSCode came along and I haven't looked back, having used it now for a number of years for my Python work. Just give yourself a little time to learn and the community is there to help when needed.

Not much else to report on the project as yet, oh, but wait.
I did do some tests a week ago with my other old time favorite gauges. I'm sure many of you will have seen these, developed by Gerrit Grunwald, aka Hans Solo (yes, don't ask), the SteelSeries canvas gauges, which he brought over from his developments in JavaFX.

The functionality of these gauges are really good, but as much as they do look nice, they can look a little too real to traditional style gauges. Many years ago, I did get in and made some extensions on his work to add a vertical bar gauge to suit a project I was working on at the time. Maybe I still have that code somewhere.

But here is a little thing I put together last week, based on the SteelSeries gauges and is running at a different end point to my main project. I forgot it was still there.
The gauges are animated with random data, though you will not see this in the image below. It does have some appeal and wonder what others think of this style gauge ?

Time for programming now

[TotallyInformation]

@vonbaron

t does have some appeal and wonder what others think of this style gauge ?

I'm personally not a great fan of overly "realistic" looking gauges on websites. - unless your whole look is retro style. Often feels like you are constraining the site in ways we don't need to since we aren't restricted by physics.

I think I already mentioned @hotNipi's gauge? He gifted a version to the community that I've hosted as a web component here: GitHub - TotallyInformation/gauge-hotnipi: A nice looking gauge W3C component gifted by hotnipi for use with Node-RED, uibuilder and other uses