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.
Since a typical front-end web page consists of several different files for JavaScripts, CSS style sheets and the HTML page, I wanted a way to keep these parts modular.
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 Flow
The important technique is how the mustache templates are used. Each template will set the “property” relative to the content.
Mustache names chart
The CSS node sets the “msg.payload.style” property. The JavaScript node sets the “msg.payload.script” property. The HTML node then includes these properties
Basic Client Site Flow
The JavaScript mustache node will contain your script code. Set the “property” to “msg.payload.script” (or similar convention).
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
Comments
There are no comments for this post "Web Form with Node-RED, CSS,JS,HTML - Internet of LEGO". Be the first to comment...
Add Comment