If you’ve been here before then you know I use Node-Red, if not and you don’t know what Node-Red is, you should check it out. To get a frontend UI out of Node-Red there has always been the Dashboard node for us to use and a set of Dashboard nodes to go with it. I have never been a huge fan of the Dashboard, but it was what we had and it did the job. The Dashboard nodes allowed you place UI nodes and connect them to your data and it would do the rest, no HTML code required on your behalf. But that was one of the limitations, was that you did not have control over the code. Enter UIBuilder.
The UIBuilder Wiki and the Github for the author have a ton of information and examples of how to get a few basic things done. Just expect most of them to be done with VueJS. It appears (at least to me, I could be wrong) that UIBuilder was originally VueJS heavy/dependent and as it matures it is more open to other frameworks. As of v3.1.3 it no longer installs Bootstrap-Vue and VueJS by default, as it had done it all prior versions. So just be aware that you can use any framework you want, but all of the examples (so far) are all written in VueJS. There is also the Node-Red forums if you get stuck, the author also happens to frequent the group.
I had been looking for a STL of a stoplight to print for about a year now. I wanted to use the colors of the stoplight to signal to my younger kids when it was ok to wake up in the morning, and when it was time to go back to sleep. My ideal was that I could use Node-Red running on the home server via MQTT to regulate when the stoplight changed colors. Thingiverse’s search is horrible and you could spend days there and not actually get what you are looking for so I never found one that would work. The other day I was searching for some reference STLs of something and accidentally came across a STL for a stoplight. Not one, but three (two remixed from the other).
The first one looked great, good size and decent design. Except it was designed for LEDs and an ATTiny to drive its sequence. The second was a remix of the first. The third was another remix that extended the back casing. The remixes made things easier to print but still relied on LEDs and an ATTiny of sorts. This was a great starting point for me. I have no problems modifying STLs for my purposes. I like to use Tinkercad, not very good with Fusion 360. I downloaded the files and started my own remix. I took elements from all three versions of the stoplight.
I modified the back case to allow a Lolin v3 to be able to mount to it. Then I had to create a cover for the Lolin. I took the front from the original thing, I preferred its one piece to the remixes four piece but I filled in the slot for the little switch. I used the LED panes/covers from the original, unmodified. This was great, I had a front and back a cover, LED panes and the inlay to hold the LEDs. So I printed it all out and went to work. First things first, I tested the LEDs. Like I thought, the LEDs I have are not the super bright ones and running off of the Lolins 3v they just didn’t have enough brightness to shine through very well. No super bright LEDs but I do have some WS2812 neopixels. I hooked one up to test and yes they were perfect. So I modified the LED inlay to hold three neopixels.
I wanted to be able to control the stoplight via MQTT from my server running Node-Red. I used the neopixel example from Adafruit and the default Pubsubclient example for an ESP8266. Mashed the two together and I was able to change the colors on the fly with no problems. I showed off the stoplight to a friend of mine and he loved it. He wanted one for himself, but he doesn’t have a server or anything that runs MQTT. No problem, the Lolin can handle web GUIs. A quick google for a web server on an ESP turned up a nice little tutorial on how to turn on and off GPIO pins from a web GUI. BAM! I took that code and mashed it up with the neopixel code I already had an I was able to get a nice little web page displayed to change the colors of the stoplight. This is awesome.