Many of the Internet of LEGO projects rely on Node-RED for orchestration and client interactions. I found that building the backend services were pretty natural with the platform, but building a simple web page was a little more challenging. This article is just a simple example of my own tips & tricks to help other Node-RED enthusiasts. Mustache style chart.
Initially, I used to combine all of the file contents into a single “mustache” node. This node is responsible for providing the HTML to the client’s browser. This worked, but the node would have too much code in it, that could actually be split up and re-used by other portions of the site such as style sheets and scripts.
I have created a sample Node-RED Flow to demonstrate how this can be accomplished, complete with an AJAX form post to get the results back to the client as well as send the information onto additional flows.
The important technique is how the mustache templates are used. Each template will set the “property” relative to the content.
Mustache names chart
Basic Client Site Flow
The CSS mustache node will contain your style code. Set the “property” to “msg.payload.style” (or similar convention).
The HTML mustache node will contain your HTML code but will now include the scripts and styles, along with other imports in a familiar way.
Ideas how this could be used
Dashboard, filled with buttons and widgets
Hopefully Node-RED users will find these Tips & Tricks helpful for their next project!
Please feel free to share comments or post examples of your own solutions on the Internet Of LEGO Facebook page