# Show serial console on dashboard

**URL:** https://discourse.nodered.org/t/show-serial-console-on-dashboard/77546
**Category:** Dashboard
**Tags:** node-red-dashboard
**Created:** [13 April 2023 21:40 UTC](https://discourse.nodered.org/t/show-serial-console-on-dashboard/77546 "2023-04-13T21:40:00Z")
**Posts on this page:** 15
**Page:** 1

<div class="post-metadata">

### Author: ![KnottyCord](https://avatars.discourse-cdn.com/v4/letter/k/d9b06d/32.png) [@KnottyCord](https://discourse.nodered.org/u/KnottyCord)
#### Post date: [13 April 2023 21:40 UTC](https://discourse.nodered.org/t/show-serial-console-on-dashboard/77546/1 "2023-04-13T21:40:01Z")

</div>

Hi,  
I'm new to node-red, and I would like to add to my dashboard the serial connection data that's being sent to my raspberry pi. I would like to show the data one line at a time (the incoming data already has a return carriage at the end) with the time stamp and I would like to have a play and pause button on the the terminal so I can read the data. How can I do it? At the moment I can only show one line at a time. But I would like to show all line with a scrolling bar too.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [14 April 2023 08:55 UTC](https://discourse.nodered.org/t/show-serial-console-on-dashboard/77546/2 "2023-04-14T08:55:32Z")

</div>

Feels like you are jumping into the deep end. I have to say that if you don't need any of the other features of Dashboard, this would be a lot easier with uibuilder since you would have more direct access between Node-RED and the front end.

---

<div class="post-metadata">

### Author: ![KnottyCord](https://avatars.discourse-cdn.com/v4/letter/k/d9b06d/32.png) [@KnottyCord](https://discourse.nodered.org/u/KnottyCord)
#### Post date: [14 April 2023 18:50 UTC](https://discourse.nodered.org/t/show-serial-console-on-dashboard/77546/3 "2023-04-14T18:50:44Z")

</div>

> [@TotallyInformation](#):
>
> uibuilder

So I made some changes, but I can only get one message too show up and not all of them.  
[https://pastebin.com/H9HDiYYc](https://pastebin.com/H9HDiYYc)  
Let me know any changes that I can do to show the data with a scroll bar

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [14 April 2023 19:03 UTC](https://discourse.nodered.org/t/show-serial-console-on-dashboard/77546/4 "2023-04-14T19:03:54Z")

</div>

Can you share an example input msg please? As I don't have your serial input.

Also, what is the simpletime node doing? I don't have that either.

---

<div class="post-metadata">

### Author: ![KnottyCord](https://avatars.discourse-cdn.com/v4/letter/k/d9b06d/32.png) [@KnottyCord](https://discourse.nodered.org/u/KnottyCord)
#### Post date: [14 April 2023 21:16 UTC](https://discourse.nodered.org/t/show-serial-console-on-dashboard/77546/5 "2023-04-14T21:16:11Z")

</div>

So this is a sample of the information that I'm getting through the serial connection. They are all separate line with a carriage return at the end. simpletime is to inject a time stamp it's a package that you can add to node-red.

> **[HM STAT 24-A4MH OK 0F-32OM STAT 24-ABMO OK 60-29AM STAT 24-9DMA OK -...](https://pastebin.com/j4FS3f9y)**
>
> Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [14 April 2023 22:55 UTC](https://discourse.nodered.org/t/show-serial-console-on-dashboard/77546/6 "2023-04-14T22:55:35Z")

</div>

OK, so here is a simple uibuilder based flow that I _think_ might do what you are expecting.

It doesn't have the timestamp at this point and it presents as a simple list but that is just a matter of some CSS to get the required format.

The initial flow adds a blank list with a heading to the uibuilder page. The lower flow inputs your long string from the previous post and splits it to simulate a bunch on inputs from a serial node.

Each input line adds a new row to the list.

There are, of course, some flaws in this process. For starters, you would want the page title and blank list to be always set up on page load, that can be done with a cache node. Then you would probably want to have a max number of lines in your output page.

But this is just a siimple proof of concept.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/6/664c624ab0e0fc2f1b041e949b973f3bf5f1531f.png)

Just 7 nodes of which 3 would be replaced by your serial-in node. Is that the kind of thing you were thinking of?

```auto
[{"id":"04dad0e199505c6f","type":"inject","z":"d5835c53bc24f9f0","name":"","props":[],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":355,"y":780,"wires":[["6bcec8dca66dc97e"]],"l":false},{"id":"1ac871009db4f695","type":"split","z":"d5835c53bc24f9f0","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":490,"y":780,"wires":[["88aff19d1c411f03"]]},{"id":"62f63e099c2783be","type":"uib-element","z":"d5835c53bc24f9f0","name":"","topic":"","elementtype":"ul","parent":"body","parentSource":"","parentSourceType":"str","elementid":"term-list","elementId":"","elementIdSourceType":"str","heading":"Terminal List","headingSourceType":"str","headingLevel":"h2","position":"last","positionSourceType":"str","confData":{},"x":670,"y":720,"wires":[["80c5c8ce476a9afa"]]},{"id":"88aff19d1c411f03","type":"uib-element","z":"d5835c53bc24f9f0","name":"","topic":"","elementtype":"li","parent":"body","parentSource":"","parentSourceType":"str","elementid":"#term-list ol","elementId":"","elementIdSourceType":"str","heading":"","headingSourceType":"str","headingLevel":"h2","position":"last","positionSourceType":"str","confData":{},"x":670,"y":780,"wires":[["80c5c8ce476a9afa"]]},{"id":"419b14e12f9ab34a","type":"inject","z":"d5835c53bc24f9f0","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":490,"y":720,"wires":[["62f63e099c2783be"]]},{"id":"80c5c8ce476a9afa","type":"uibuilder","z":"d5835c53bc24f9f0","name":"","topic":"","url":"term-test","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"reload":false,"sourceFolder":"src","deployedVersion":"6.4.0","showMsgUib":false,"x":910,"y":720,"wires":[[],[]]},{"id":"6bcec8dca66dc97e","type":"function","z":"d5835c53bc24f9f0","name":"data","func":"msg.payload = `HM STAT 24-A4\nMH OK 0F-32\nOM STAT 24-AB\nMO OK 60-29\nAM STAT 24-9D\nMA OK 00-15\nBM STAT 24-9E\nMB OK 00-16\nCM STAT 24-9F\nMC OK 00-17\nDM STAT 24-A0\nMD OK 00-18\nEM STAT 24-A1\nME OK 00-19\nFM STAT 24-A2\nMF OK 00-1A\nTM STAT 24-B0\nMT OK 00-28\nHM STAT 24-A4\nMH OK 0F-32\nOM STAT 24-AB\nMO OK 60-29\nAM STAT 24-9D\nMA OK 00-15\nBM STAT 24-9E\nMB OK 00-16\nCM STAT 24-9F\nMC OK 00-17\nDM STAT 24-A0\nMD OK 00-18\nEM STAT 24-A1\nME OK 00-19\nFM STAT 24-A2\nMF OK 00-1A\nTM STAT 24-B0\nMT OK 00-28\nHM STAT 24-A4\nMH OK 0F-32\nOM STAT 24-AB\nMO OK 60-29\nAM STAT 24-9D\nMA OK 00-15\nBM STAT 24-9E\nMB OK 00-16\nCM STAT 24-9F\nMC OK 00-17\nDM STAT 24-A0\nMD OK 00-18\nEM STAT 24-A1\nME OK 00-19\nFM STAT 24-A2\nMF OK 00-1A\nTM STAT 24-B0\nMT OK 00-28\nHM STAT 24-A4\nMH OK 0F-32\nOM STAT 24-AB\nMO OK 60-29\nAM STAT 24-9D\nMA OK 00-15\nBM STAT 24-9E\nMB OK 00-16`\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":405,"y":780,"wires":[["1ac871009db4f695"]],"l":false}]

```

I don't really do Dashboard or AngularJS any more which is why I've not tried to do this with Dashboard - it only gets in the way for something like this anyway.

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/7/a7e547ace0cd784584195d98e67b9f99fc838a4b.png)

---

<div class="post-metadata">

### Author: ![KnottyCord](https://avatars.discourse-cdn.com/v4/letter/k/d9b06d/32.png) [@KnottyCord](https://discourse.nodered.org/u/KnottyCord)
#### Post date: [15 April 2023 16:21 UTC](https://discourse.nodered.org/t/show-serial-console-on-dashboard/77546/7 "2023-04-15T16:21:16Z")

</div>

Yes and no I really with I could use the node red dashboard instead 😕

---

<div class="post-metadata">

### Author: ![KnottyCord](https://avatars.discourse-cdn.com/v4/letter/k/d9b06d/32.png) [@KnottyCord](https://discourse.nodered.org/u/KnottyCord)
#### Post date: [16 April 2023 00:43 UTC](https://discourse.nodered.org/t/show-serial-console-on-dashboard/77546/8 "2023-04-16T00:43:17Z")

</div>

So here is an updated version!

```auto
[{"id":"0773f926c1f479a5","type":"serial in","z":"6a21517c893f1583","name":"Serial In Falderon","serial":"2ac8eeb90b72612a","x":140,"y":120,"wires":[["051c89fe2f295323"]]},{"id":"d1bc4fc482255c5d","type":"change","z":"6a21517c893f1583","name":"","rules":[{"t":"set","p":"serialData","pt":"msg","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":430,"y":120,"wires":[["ddea61c87396056f"]]},{"id":"03818037f1bf42ba","type":"template","z":"6a21517c893f1583","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"[{{mytimes}}] {{serialData}}","output":"str","x":620,"y":180,"wires":[["4e98cb2525520eeb"]]},{"id":"ddea61c87396056f","type":"simpletime","z":"6a21517c893f1583","name":"","mydate":false,"myymd":false,"myyear":false,"mymonth":false,"mymonthn":false,"mydom":false,"mydoy":false,"myday":false,"myhourpm":false,"myhour":false,"mytime":false,"mytimes":true,"myminute":false,"myminutes":false,"mysecond":false,"mymillis":false,"myepoch":false,"myrawdate":false,"mypm":false,"x":630,"y":120,"wires":[["03818037f1bf42ba"]]},{"id":"051c89fe2f295323","type":"file","z":"6a21517c893f1583","name":"","filename":"/home/pi/Desktop/falderonLogs.log","filenameType":"str","appendNewline":false,"createDir":false,"overwriteFile":"false","encoding":"none","x":200,"y":180,"wires":[["0b1bae241cdb2b5a"]]},{"id":"0b1bae241cdb2b5a","type":"tail","z":"6a21517c893f1583","name":"","filetype":"text","split":"\\n\\r","filename":"","inputs":1,"x":430,"y":180,"wires":[["d1bc4fc482255c5d"]]},{"id":"892ecd2f84e7db4c","type":"ui_template","z":"6a21517c893f1583","group":"0f87a8358549afa3","name":"Serial Terminal V2","order":3,"width":0,"height":0,"format":"<style>\n #myText {\n height: 500px;\n overflow-y: scroll;\n background-color: #1a1a1a;\n color: #ffffff;\n font-size: 12px;\n font-family: monospace;\n white-space: pre-wrap;\n }\n</style>\n\n<div id=\"container\">\n<div id=\"myText\">{{msg.payload}}</div>\n</div>\n\n<script>\n var container = document.getElementById(\"container\");\n container.scrollTop = container.scrollHeight;\n\n // Whenever new data is added to the container, scroll to the bottom\n container.addEventListener(\"DOMNodeInserted\", function () {\n container.scrollTop = container.scrollHeight;\n });\n</script>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":870,"y":120,"wires":[["b2eeea2f9ea805c4"]]},{"id":"b2eeea2f9ea805c4","type":"debug","z":"6a21517c893f1583","name":"debug 1","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":1060,"y":120,"wires":[]},{"id":"4e98cb2525520eeb","type":"function","z":"6a21517c893f1583","name":"Message Stacker","func":"var messages = flow.get('messages') || '';\nmessages += msg.payload;\nflow.set('messages', messages);\nmsg.payload = messages;\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":810,"y":180,"wires":[["892ecd2f84e7db4c"]]},{"id":"2ac8eeb90b72612a","type":"serial-port","serialport":"/dev/ttyUSB0","serialbaud":"115200","databits":"8","parity":"none","stopbits":"1","waitfor":"","dtr":"none","rts":"none","cts":"none","dsr":"none","newline":"\\n","bin":"false","out":"char","addchar":"","responsetimeout":"10000"},{"id":"0f87a8358549afa3","type":"ui_group","name":"Serial Terminal V2","tab":"48d05d927832262e","order":2,"disp":true,"width":"6","collapse":false,"className":""},{"id":"48d05d927832262e","type":"ui_tab","name":"Dashboard","icon":"dashboard","order":2,"disabled":false,"hidden":false}]

```

It work excacly like I want! But but! after a certain amount the raspberry pi begomes very laggy! Is there a way to make it not go that slow. it's only text lol

[fixed by moderator]

---

<div class="post-metadata">

### Author: ![rko](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/rko/32/45807_2.png) [@rko](https://discourse.nodered.org/u/rko)
#### Post date: [16 April 2023 06:46 UTC](https://discourse.nodered.org/t/show-serial-console-on-dashboard/77546/9 "2023-04-16T06:46:49Z")

</div>

Can you post your flow as preformatted text please? Look for the `</>` button.

Edit: Did not check your flow but I believe you always send the complete data to the dashboard. That's one of the reasons why you should give uibuilder a chance.

---

<div class="post-metadata">

### Author: ![KnottyCord](https://avatars.discourse-cdn.com/v4/letter/k/d9b06d/32.png) [@KnottyCord](https://discourse.nodered.org/u/KnottyCord)
#### Post date: [16 April 2023 21:09 UTC](https://discourse.nodered.org/t/show-serial-console-on-dashboard/77546/10 "2023-04-16T21:09:51Z")

</div>

With uibuilder is there way to integrate that to the current dashboard that I have. And yes I'm sending the hole data over again. But I just want to add to the current data.

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [16 April 2023 21:48 UTC](https://discourse.nodered.org/t/show-serial-console-on-dashboard/77546/11 "2023-04-16T21:48:27Z")

</div>

Yes, you can include a uibuilder page into Dashboard using an iframe.

---

<div class="post-metadata">

### Author: ![KnottyCord](https://avatars.discourse-cdn.com/v4/letter/k/d9b06d/32.png) [@KnottyCord](https://discourse.nodered.org/u/KnottyCord)
#### Post date: [21 April 2023 18:54 UTC](https://discourse.nodered.org/t/show-serial-console-on-dashboard/77546/12 "2023-04-21T18:54:54Z")

</div>

Can you show me an example on how to do it?

---

<div class="post-metadata">

### Author: ![KnottyCord](https://avatars.discourse-cdn.com/v4/letter/k/d9b06d/32.png) [@KnottyCord](https://discourse.nodered.org/u/KnottyCord)
#### Post date: [21 April 2023 19:51 UTC](https://discourse.nodered.org/t/show-serial-console-on-dashboard/77546/13 "2023-04-21T19:51:45Z")

</div>

I have this but does not seem to show anything

```auto
[{"id":"0773f926c1f479a5","type":"serial in","z":"6a21517c893f1583","name":"Serial In Falderon","serial":"2ac8eeb90b72612a","x":140,"y":120,"wires":[["051c89fe2f295323","33e16c271294dd61"]]},{"id":"33e16c271294dd61","type":"uibuilder","z":"6a21517c893f1583","name":"","topic":"","url":"serial_terminal","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"reload":false,"sourceFolder":"src","deployedVersion":"6.4.0","showMsgUib":false,"credentials":{},"x":450,"y":420,"wires":[[],[]]},{"id":"2ac8eeb90b72612a","type":"serial-port","serialport":"/dev/ttyUSB0","serialbaud":"115200","databits":"8","parity":"none","stopbits":"1","waitfor":"","dtr":"none","rts":"none","cts":"none","dsr":"none","newline":"\\n","bin":"false","out":"char","addchar":"","responsetimeout":"10000"}]

```

---

<div class="post-metadata">

### Author: ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [21 April 2023 19:53 UTC](https://discourse.nodered.org/t/show-serial-console-on-dashboard/77546/14 "2023-04-21T19:53:44Z")

</div>

I can't see what you have put into your front-end code if you only share the node. Also, we can't help you with the data when you share the serial node, we need example data.

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [21 May 2023 19:54 UTC](https://discourse.nodered.org/t/show-serial-console-on-dashboard/77546/15 "2023-05-21T19:54:39Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
