Need to see serial port data

Hi all.
I need see what my ESP32 send to serial port, there are lots of lines string.
is there any node to see it ?
all my string are end with \n
easy solution if possible , not complicated .. any idea?

What have you already tried and how didn't it work?

Have you looked at the serial port nodes? node-red-node-serialport (node) - Node-RED

Right now I use serial port node and write to file . now all data write to file ..
But I don't need store to file .. just easy terminal like in Arduino IDE ..
Now working with write to file .. but see in web page .. for max 10k of char ..

So you need to create a web page that shows each received entry on a web page up to 10k entries.

Lots of ways to do that depending on your experience level.

The easiest method of showing a web page is usually Dashboard. However, I don't think it has a log style output so you would need to hand-craft that.

If you can do some basic HTML and JavaScript, it would be pretty easy to do using uibuilder. However, if you've not used Node-RED before or don't know any HTML, you might find getting going a little daunting.

I've done some similar outputs with uibuilder before though so if you are lucky, I might be able to find enough time to knock up a quick demo.

Here is the quick and dirty uibuilder version. Though note that it doesn't currently truncate the text output.


<!doctype html>
<html lang="en"><head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Simple log page - Node-RED uibuilder</title>
    <meta name="description" content="Node-RED uibuilder - Simple log page">
    <link rel="icon" href="./images/node-blue.ico">

    <!-- Your own CSS -->
    <link type="text/css" rel="stylesheet" href="./index.css" media="all">

</head><body class="uib">
    <h1>uibuilder Simple log page</h1>

    <pre id="loggy"></pre>

    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
    <script src="../uibuilder/vendor/">/* REQUIRED: Socket.IO is loaded only once for all instances. Without this, you don't get a websocket connection */</script>
    <script src="./uibuilderfe.min.js">/* REQUIRED: remove 'min.' to use dev version */</script>
    <script src="./index.js">/* OPTIONAL: Put your custom code here */</script>
    <!-- #endregion -->




uibuilder.onChange('msg', function(msg){
    const eMsg = document.getElementById('loggy')
    eMsg.textContent += msg.payload + '\n'

Doesn't get much easier than that! Here is the flow:

Yup, only 1 node, just connect your serial-in to the uibuilder node.

Of course, this is rather noddy but at least it shows you how little code you need for something simple in uibuilder. Most of the HTML is actually the default blank template.

And here is an amended index.js that limits the length of the log by dropping the top elements. New elements are added to the end as in the previous example.


const maxLogLength = 10

uibuilder.onChange('msg', function(msg){
    const loggy = document.getElementById('loggy')

    while (loggy.childElementCount >= maxLogLength) {

    const c = document.createElement('span')
    c.innerText = `${msg.payload}${'\n'}`
1 Like

Thanks .. but .. ehm .. I don't know who to use it .. but in fact , right now use text file .. and working
good .. , now don't have free time , later I look at it ..

best regards , and thanks for your time ..

Just put your msg.payload into that template node.
this should do the trick.

        "id": "bb6b9203fe0f6550",
        "type": "ui_template",
        "z": "03b2c8e647d8021c",
        "group": "310c82156d24681c",
        "name": "",
        "order": 5,
        "width": "23",
        "height": 10,
        "format": "\n<!--<pre><code id=\"shell\" class=\"language-bash bash\" ng-bind=\"msg.payload\"></code></pre>-->\n<pre><code id=\"shell\" class=\"language-bash bash\"></code></pre>\n\n<script>\n    $(document).ready(function() {\n      $('#shell').each(function(i, e) {hljs.highlightElement(e)});\n    }); \n</script>\n\n\n<script>\n(function(scope) {\n  scope.$watch('msg', function(msg) {\n    if (msg) {\n        debugger\n      $(\"#shell\").text(msg.payload);\n      $('#shell').each(function(i, e) {hljs.highlightElement(e)});\n      //$(\"#shell\").scrollTop(function() { return this.scrollHeight; });\n      $(\"#shell\").closest(\".nr-dashboard-template\").scrollTop(function() { return this.scrollHeight; });\n    }\n  });\n})(scope);\n</script>",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": true,
        "templateScope": "local",
        "className": "",
        "x": 560,
        "y": 500,
        "wires": [
        "id": "310c82156d24681c",
        "type": "ui_group",
        "name": "Test",
        "tab": "b58c8f02fe80b3fc",
        "order": 1,
        "disp": false,
        "width": "23",
        "collapse": false,
        "className": ""
        "id": "b58c8f02fe80b3fc",
        "type": "ui_tab",
        "name": "Test",
        "icon": "dashboard",
        "order": 28,
        "disabled": false,
        "hidden": false

Huh .. :anguished: sorry.. I'm totally don't know what to do .. But stop it .
I solve problem with Write to File node and work good .
If you have some easy solution or make new Node .. let me know .. but now thanks
for your time ..

best regards.

I test what you post .. but .. only last character see ... } .. that all ..

If your information arrives in a burst of messages, you need to bring them together with a Join node. Put this node before the template node.
you can change the timeout or if you know the number of incoming messages, indicate this instead of the timeout
And then you will have all your information on the web dashboard for sure.



After install new node


all working what I want .. remove join node , and add only ring-buffer ..

Thanks to all who help me .. now working perfect..

1 Like