Datepicker and text output on page

Hi
I have a date picker at top of page which passes to a function to parse and then to an http request for a specific logfile and then output to a text box. This all works except that the text obliterates the datepicker and also has no line breaks. I would ideally like to have the datepicker locked at the top and dynamically be able to call up formatted logfile text beneath.
Any help much appreciated.
thanks

Wow you got allot going on....

post your flow and ill take a stab at it.

I use the date picker and an hour bar to get a list of videos from the file server then post them all.
Sounds like your doing something similar.

[{"id":"64a45c94.4e8ba4","type":"ui_date_picker","z":"5081acab.0242b4","name":"","label":"date","group":"d22f3c53.ae693","order":1,"width":0,"height":0,"passthru":true,"topic":"topic","topicType":"msg","x":190,"y":840,"wires":[["e5a02e27.9efd7","cf6d077b.404ab8"]]},{"id":"aa6d6371.4eca7","type":"http request","z":"5081acab.0242b4","name":"","method":"GET","ret":"txt","paytoqs":"body","url":"","tls":"","persist":false,"proxy":"","authType":"","x":590,"y":840,"wires":[["d1bff695.886c68","33feb5f3.b6b58a"]]},{"id":"cf6d077b.404ab8","type":"function","z":"5081acab.0242b4","name":"","func":"var d = new Date(msg.payload);\nvar day = d.getDate();\n\nvar year = d.getFullYear();\n\n\nvar weekday = d.toLocaleString(\"default\", { weekday: \"short\" })\nvar month = d.toLocaleString('default', { month: 'short' });\n\n\nmsg.url=\"http://10.0.0.2/\"+month+\"-\"+year+\"/\"+day+\"-\"+weekday+\".log\";\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":380,"y":840,"wires":[["8ba4e513.cf0ab8","aa6d6371.4eca7"]]},{"id":"33feb5f3.b6b58a","type":"ui_text","z":"5081acab.0242b4","group":"d22f3c53.ae693","order":3,"width":"6","height":"4","name":"","label":"text","format":"{{msg.payload}}","layout":"row-left","x":770,"y":840,"wires":[]},{"id":"d22f3c53.ae693","type":"ui_group","name":"Group 1","tab":"d80c1793.249838","order":1,"disp":true,"width":6},{"id":"d80c1793.249838","type":"ui_tab","name":"Tab 4","icon":"dashboard","order":4,"disabled":false,"hidden":false}]

Hi and thanks for response.
The logfiles come from another PC on my home network and are simply short lines of info with line feeds between. As I said it works except for lack of line feeds and also that the text occupies the whole screen, overwriting the datepicker and not just the lower section.
thanks
John

can you share a log file that i can use for formatting?

If it contains sensitive info can you just make a fake one with the first 10 lines or so?

The log file is plain text I assume, remember that html will ignore \n newline. unless the text is wrapped in a <pre> text\ntext</pre>. or you could replace line breaks with <br>

Here is a small section of log at 10.xx.xx.xx/Apr-2021/16-Fri.log
05:02:31 Gates are closed
05:58:56 Heat water (timer) ON
05:58:56 Boiler FIRE ON
05:58:56 Boiler Overun FIRE ON
05:59:07 Hot Water STAT ON
06:34:26 Master Bedroom PIR
07:00:00 system disarmed automatically
07:00:01 Alarm state IDLE
07:00:01 Time stamp 16-04-2021 @ 07:00:01
07:00:01 security OFF
07:30:00 Activate gates
07:30:21 Gates are open
07:55:29 Upper landing PIR
07:55:44 Hall PIR
07:55:45 Upper landing PIR
07:55:48 Front door UNlocked

Note: I created the same setup your using but had to change the location for the log file to self hosting.

msg.url="http://127.0.0.1:1880/"+month+"-"+year+"/"+day+"-"+weekday+".log";

The issue: you have somting that looks like this.
001htm

and you want it to look like this.
002htm

A Solution: use node-red-node-ui-list / node-red-node-ui-list (node) - Node-RED

[{"id":"cf6d077b.404ab8","type":"function","z":"66478148.75ea08","name":"","func":"var d = new Date(msg.payload);\nvar day = d.getDate();\n\nvar year = d.getFullYear();\n\n\nvar weekday = d.toLocaleString(\"default\", { weekday: \"short\" })\nvar month = d.toLocaleString('default', { month: 'short' });\n\n\nmsg.url=\"http://127.0.0.1:1880/\"+month+\"-\"+year+\"/\"+day+\"-\"+weekday+\".log\";\nreturn msg;\n","outputs":1,"noerr":0,"initialize":"","finalize":"","x":560,"y":200,"wires":[["aa6d6371.4eca7"]]},{"id":"64a45c94.4e8ba4","type":"ui_date_picker","z":"66478148.75ea08","name":"","label":"date","group":"d22f3c53.ae693","order":1,"width":"6","height":"2","passthru":true,"topic":"topic","topicType":"msg","x":430,"y":200,"wires":[["cf6d077b.404ab8"]]},{"id":"6864b41d.effb24","type":"http in","z":"66478148.75ea08","name":"","url":"/Apr-2021/16-Fri.log","method":"get","upload":false,"swaggerDoc":"","x":490,"y":160,"wires":[["22a99532.e26c3a"]]},{"id":"22a99532.e26c3a","type":"file in","z":"66478148.75ea08","name":"","filename":"./Apr-2021/16-Fri.log","format":"utf8","chunk":false,"sendError":false,"encoding":"none","x":720,"y":160,"wires":[["1893730a.5a1ca5"]]},{"id":"40380c82.b41b6c","type":"http response","z":"66478148.75ea08","name":"","x":1050,"y":160,"wires":[]},{"id":"1893730a.5a1ca5","type":"change","z":"66478148.75ea08","name":"Set Headers","rules":[{"t":"set","p":"headers","pt":"msg","to":"{}","tot":"json"},{"t":"set","p":"headers.content-type","pt":"msg","to":"text/plain","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":910,"y":160,"wires":[["40380c82.b41b6c"]]},{"id":"aa6d6371.4eca7","type":"http request","z":"66478148.75ea08","name":"","method":"GET","ret":"txt","paytoqs":"body","url":"","tls":"","persist":false,"proxy":"","authType":"","x":730,"y":200,"wires":[["9d56df6d.20b8a8"]]},{"id":"3fb3b22b.a90cb6","type":"ui_list","z":"66478148.75ea08","group":"d22f3c53.ae693","name":"","order":2,"width":"6","height":"5","lineType":"one","actionType":"none","allowHTML":true,"outputs":0,"topic":"","x":1110,"y":200,"wires":[]},{"id":"9d56df6d.20b8a8","type":"split","z":"66478148.75ea08","name":"","splt":"\\n","spltType":"str","arraySplt":1,"arraySpltType":"len","stream":false,"addname":"","x":870,"y":200,"wires":[["28b2b093.41914"]]},{"id":"28b2b093.41914","type":"join","z":"66478148.75ea08","name":"","mode":"custom","build":"array","property":"payload","propertyType":"msg","key":"topic","joiner":"\\n","joinerType":"str","accumulate":false,"timeout":"","count":"","reduceRight":false,"reduceExp":"","reduceInit":"","reduceInitType":"","reduceFixup":"","x":990,"y":200,"wires":[["3fb3b22b.a90cb6"]]},{"id":"d22f3c53.ae693","type":"ui_group","name":"Group 1","tab":"d80c1793.249838","order":1,"disp":true,"width":6},{"id":"d80c1793.249838","type":"ui_tab","name":"LogFileTest","icon":"dashboard","order":4,"disabled":false,"hidden":false}]

So the issue is caused by having a list of text too long based on the size you use for the ui-text node.
There are many solutions to this. if you know how big it will be you can just set the size.

  1. Create a template node and use a scroll bar
  2. function node and use the
    to replace the /n but it will still overrun
  3. format it to use the ui-table node and create a array of objects
  4. etc etc.

I chose the quickest and easiest way in my mind to do it.

Thank you so much for taking the time. I wasn't aware if ui list but it all works great now. Next bit is to trap all the http trash when I select a file that doesn't exist. Not important though.
thanks again
John
PS fantastic forum.

1 Like

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