TL:DR
This is an article on why I decided to use UIBUILDER as opposed to Dashboard 2 in Node-RED (NR) to create my 'Basic Dashboard' and how I used AI to create a custom meter. I still have many things to learn and my coding may not be the neatest, but it works to my satisfaction. More importantly, I understand how it works and what I need to do to change it if needed. I have discovered that HTML, JS and CSS have certainly moved on since I used them over 15 years ago for a couple of projects I worked on.
Now that Dashboard 1 is being deprecated, I needed to decide which Dashboard to use in Node-RED. I tried UIBUILDER a couple of years ago and didn't really understand properly what I was doing. Then I tried Dashboard 2 and found that some of the 'widgets' I wanted to use were not available, which was a problem for me as I don't have the programming skills required to develop them for my own needs. Decision time was now here and after procrastinating for a couple of days, I took the plunge and decided to use UIBUILDER (7.4.3), which would enable me to generate my own widgets with HTML, Javascript (JS) and CSS. But knowing how supportive this Forum is, I knew that I wasn't completely on my own.
The reason for all this is that I had started a new project to monitor some devices/systems that I installed in our Motorhome. New Solar Panels, MPPT Solar Controller, DC to DC Charger and a Battery Shunt along with a new Battery and Charger. These devices are all Victron except for the battery which is a Fogstar Lithium battery. They are all, except the Fogstar battery, able to communicate through Bluetooth using the Victron App or via the installed VE.Bus (Victron proprietary). The Fogstar Battery only uses Bluetooth.
I had loaded a RPi Zero 2 W with Victron's VenusOS which basically takes the place of the (much more expensive) Victron Cerbo GX communication-centre (basically the VenusOS is ported to RPi). VenusOS on the RPi is capable of communicating over the VE.Bus through a purchased 4 port USB Adapter to the Victron devices (a boxed version is available now). VenusOS also has it's own MQTT server and so can be used as the MQTT Server for Node-RED Although VenusOS gives a perfectly readable Dashboard of it's own, it wasn't capable of seeing other devices that I was intending to monitor/use.
For the 'other' devices, and Node-RED I had purchased a used Dell WYSE 3040 Thin Wire Client (@Ā£15 - slow boot, but very cheap!!). First, I loaded up DietPi to the 3040 and then added Pi-Hole, Node-RED, Grafana and InfluxDB all from the DietPi included repository. I also added Zigbee2MQTT (Z2M) using the standard install instructions from HERE. With a quick test creating a flow to read MQTT messages from the Victron devices, Z2M and REST API request messages from the Teltonika RUTX50 Router, I was able to read all the information I needed and it seemed stable. All good so far!
Initially, I contacted @TotallyInformation to discuss some guidelines as to how I might be able to achieve my goals. He was kind enough to do some initial 'handholding' while I sorted myself out. One problem was to get current information from my devices/MQTT into a web page. Back to TotallyInformation and we discussed a couple of ways. It turned out that the easiest was just to pass a uib-var message from NR to the UIBUILDER Node/page that had a placeholder for that variable in the HTML page, basically it involved passing a msg.topic and msg.payload,. It worked perfectly.
Once pointed in the right direction, I managed to create a Static website with some readings from Temperature Sensors and a Couple of embedded Grafana Graphs. Very pleased was I, nothing too difficult and, more importantly, I could follow what I was doing, I could carry on in the safe knowledge that this wasn't as difficult as I had been expecting! I just had to work out how to get multiple pages to be displayed.
While turning this over in my mind, @Paul-Reed asked a question in the Forum regarding a SPA website in UIBUILDER, so I looked up what this style of website was, turns out that it is a Single Page Application where a single page is loaded (index.html) and using a combination of HTML, JS and CSS, different information (pages) could be displayed in the body of the page when that page is selected from a static menu. This is exactly what I was looking for, a simple Menu with different pages inserted into the body to display the relevant information as required. Back to TotallyInformation and he told me that one of the Examples available in UIBUILDER was a 'hastily put together' SPA flow labelled 'FE Router Test'. This had been created to help a user develop his own SPA website. Jackpot! Although this example flow was hastily developed, TotallyInformation asked that any problems found were to be reported so that improvements to the example could be made to make it easier for us beginners to understand. Oh, and of course to make sure the example worked correctly!!
In this new SPA method, I managed to get an Index page working (index.html) and with the help of using HTML, Javascript and CSS, I was able to cobble together a couple of 'pages'. This was easier once I understood that FE or Front End was the term used to describe this style of site as it's pages are pre-loaded to make a website quicker to load. I worked by creating a static page/website and then, once working, transferred it into a SPA pages. Things worked well for the Temperatures and Graphs pages I wanted, so I felt that I was well on my way.
The next item I was looking to display was a Speedometer, the reason for this is that on the Motorhome, the speedo is both inaccurate (wrong wheel size), and because of my height and the dashboard design, not that easy to read. I could get information via the REST API from my Teltonika RUTX50 Router and display this using @HotNipi's donated Meter Web Component. I had some problems initially (lack of experience), but managed to work them out for myself to get a Speedo/meter displayed in a static page and I could also get it to update as the REST API messages came in. When I transferred it to work on the SPA website, it wouldn't update. However, this would have to wait as Paul-Reed had posted another, interesting to me, topic regarding running Justgage in UIBUILDER. I thought, how convenient, this would be a good way to display the various voltages and currents etc. I wanted to display.
Again, with the help of both TotallyInformation and Paul-Reed, I managed to get it working. Thanks here go to Paul-Reed as he educated me in that I could use 'DeGIT' to download his SPA/PWA Repository straight into a configured UIBUILDER Node with the URL already defined, a technique I was not aware of! His version was for a PWA (Progressive Web Application), it runs on any device as an App if the Browser supports the framework (Firefox Desktop does not!)), but nodes used in the flow were also suitable for a SPA website.
I tried to follow instructions to download/DeGIT the flow for the first time and nothing appeared to happen for some unknown reason (probably PEBKAC), tried again and this time I got an overwrite warning. Nothing to lose and so I Overwrote my flow which consisted of just the UIBUILDER Node. I then added a couple of suggested Inject Nodes to put repeating Random Numbers into the UIBUILDER node, but I couldn't get them to work as in there were no gauges, but after looking at the Browser Developer Tools I could see that there was space on the Webpage for them.
Back to a Static page and looking at the Browser Developer Tools, still spaces, but no gauges, an error message in the Browser Developer Tools suggested that the Raphael Library was not located where it was expected to be. The problem was eventually traced to me misunderstanding how the Raphael Library loaded with Justgage, I had the wrong location. Once that was sorted, the gauges appeared and updated. Another lesson, using the Browser Web Developers Tools to help locate any problem.
Moving this flow over to the SPA website and the gauges appeared, but they wouldn't update. So I asked Paul-Reed if he had done something special with Justgage in the SPA to get multiple gauges working. He recalled that he had had to create a 'centralised message handling section' to his script to pass the updated variable to the correct placeholder in whichever part webpage. I looked at Paul-Reed's script and managed to work out what was going on and so transferred the same principles to my SPA website. I also created the handling of HotNipi's gauge update, which now, suprisingly to me, worked! I was very pleased with myself, I had proven to myself that I had understood what was being done by the scripts and also understood their application.
All this tied together gave me the basis of the site that I had been looking to develop. Nothing hard once the principles were understood.
As an aside, but still important, during the adaption of these scripts, I found that I had a problem in doing a CTRL-C then CTRL-V to Cut and Paste, I managed to get around it by Right Clicking and using the menu to Cut and Paste. This caused me quite a few hours delay and a headache and after noting this apparent bug/error in my continuing effort in getting Justgage working, TotallyInformation advised that there is a known behaviour difference between Windows and Linux with Cutting and Pasting. 'This is a Windows vs UNIX line ending issue. Very rare these days but can still happen.' Funnily enough, it was down to the use or should I say, lack of use of the Semi-colon in JS and the fact that it is no longer required. Some Apps lose track of the formatting with no Semi-colon, and when pasting, don't recognise where the New Line or Semi-colon should be, so producing 'bad code'. All the errors I saw were where there was no Semi-colon at the end of a line, problem solved! Well, at least overcome!!
As I progressed, I found that Justgage doesn't seem to have the ability to create a Centre Zero Gauge and so I had a think and decided an edgewise meter, similar to HotNipi's Dashboard 1 meter would be ideal. When I was tracking down the Copy and Paste problem, both Paul-Reed and TotallyInformation had prompted the use of AI to both fault-find and create snippets of code. I described the gauge to ChatGPT, and it produced a result, unfortunately it didn't work (what, AI getting it wrong?). I didn't understand how to get it to work (the 'bad' code) or what to do to modify it to do my wishes. I then asked Perplexity AI and it came up with the script for a gauge which I could both understand how it worked, and more importantly, I could modify it to suit my needs for a 'normal' edgewise meter with a left hand zero. This is the option I chose.
I will add my code below - Too big, if you want a copy, let me know!! I am happy with the results as a starting place and although it needs a few tweaks, it is not beyond my abilities to get what I want. My coding may not be the best, but it works.
Would I recommend UIBUILDER as a Dashboard for Node-RED, yes, absolutely! I got further with this than I did with Dashboard 2 and so I am content!
I would like to thank @TotallyInformationand @Paul-Reed for their help, patience, and encouragement along the way. I would also like to thank @HotNipi for his Meter Web Component, such a nice meter!
As a footnote, this flow also works in UIBUILDER 7.5.0.
