This example can be used to output a standardised web page template. I've used Zurb Foundation to provide the structure.
It also shows how to use both raw websockets and MQTT over websockets (via the Paho library) to send/receive live data between the web page and Node-Red.
There are a number of dependencies, flows, subflows and files so I've put all the code on Github rather than here.
https://github.com/TotallyInformation/node-red-example-liveupdates
Output Subflow
The current debugging capability of Node-Red leaves a lot to be desired. While there are plans to improve it, these will take some time to complete.
In the meantime, I've created an alternative that is fairly easy for anyone to implement and seems to work well. I'm now using it in my projects.
The approach is to create a subflow that outputs a msg to MQTT instead of debug. Then to create a flow that creates a debug web page that receives the MQTT debug messages. The page creates a section for each message TOPIC so it is important to set that correctly before sending the msg to the subflow. Then each topic shows a formatted display of the full msg object. The topic display is updated each time a message with the same topic is sent out. A timestamp is included to show when each topic was last updated.
As there is both a flow and a subflow & some example images, I've put the example on github.
https://github.com/TotallyInformation/node-red-example-debug
Well maybe "debug" is slightly over selling it!
This example will dump any msg you send to the uibuilder node out to the front-end web page and will nicely format it.
You will get an entry on the page for every topic that you send.
UPDATE March 2023: There is now a shiny new version of this example that uses vanilla HMTL and no longer needs a framework. Please check it out at uibuilder dynamic SVG example - no framework needed (flows.nodered.org).
This was inspired by Steve and Bart's SVG addon for Dashboard. It made me wonder how hard it would be to combine an SVG floorplan with SVG icons showing things like whether lights are on or off and even being able to control them.
Well, turns out that it is crazy simple!
Much is mentioned in the Node-RED forum about exposing Node-RED to the Internet. This flow is an example that provides a reasonable amount of security for most casual use.
It makes use of a cloud service called NGROK and you will need to sign up for an account. NGROK is run by a commercial organisation and you have to put some level of trust in them that they aren't intercepting data though it seems unlikely. The service is widely used and would almost certainly be exposed if they were doing anything egregious.
The default configuration of ngrok isn't that secure so I did some playing and came up with a flow that turns the ngrok link on/off via a secure Telegram bot. That way, you only turn on the link when you actually need it.
You need to use a slightly more complex command than the default to get ngrok reasonably secure:
http https://localhost:1880 -bind-tls=true -auth='jk:jk' -inspect=false -region=eu
The original for this (which may get updated from time-to-time and therefore may be more current than this) is contained in the uibuilder WIKI.
If you do want a build step, please check the WIKI article Using VueJS with Webpack.
See also the WIKI article Load Vue components without a build step (modern browsers only) for an alternative approach.
Many front-end frameworks require you to have a build step (using webpack or similar) in order to put everything together in a way that will work in all browsers.
A simple example of how to do caching by topic with a function node is included with uibuilder v2.0.2 or above. You can import the example from the library in Node-RED.
Also see the following WIKI articles:
The original for this is kept on the uibuilder WIKI, note that the WIKI version may get updated from time-to-time, please check there for the latest version.
Here is a very simple example of producing a bar chart using Vue-ECharts which integrates ECHARTS with VueJS along with uibuilder v2, VueJS and bootstrap-vue.
Add an instance of uibuilder to your flows and replace the index.html and index.js files with the code below.
I'm loading the chart libraries using a CDN here, the next step would be to install the two packages using uibuilder's npm interface.
The original for this is kept on the uibuilder WIKI, note that the WIKI version may get updated from time-to-time, please check there for the latest version.
Here is an example of how to use ApexCharts with the default uibuilder v2 installation to add a simple chart.
Add an instance of uibuilder to your flows and replace the index.html and index.js files with the code below.
I'm loading the chart libraries using a CDN here, the next step would be to install the two packages using uibuilder's npm interface.
The original for this is kept on the uibuilder WIKI, note that the WIKI version may get updated from time-to-time, please check there for the latest version.
Here is an example of how to use Chartkick with the default uibuilder v2 installation to add a multiple charts using both Chart.js and Google Charts.
ChartKick is a library that simplifies the creation of charts using one or more chart libraries: Chart.js, Google Charts, and Highcharts.
Add an instance of uibuilder to your flows and replace the index.html and index.js files with the code below.