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.
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.
So I made some changes, but I can only get one message too show up and not all of them.
https://pastebin.com/H9HDiYYc
Let me know any changes that I can do to show the data with a scroll bar
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.
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.
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.
Just 7 nodes of which 3 would be replaced by your serial-in node. Is that the kind of thing you were thinking of?
[{"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.
1 Like
Yes and no I really with I could use the node red dashboard instead 
So here is an updated version!
[{"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]
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.
1 Like
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.
Yes, you can include a uibuilder page into Dashboard using an iframe.
Can you show me an example on how to do it?
I have this but does not seem to show anything
[{"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"}]
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.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
