If I set a ui-text node to word wrap, and I set it size to 1x5 (i.e. multiple lines deep, or height), and I separate lines via HTML breaks, i.e. "<br>" as the line delimiter, I get:
1
2
When I expect:
1
2
3
4
5
The ui-text node never shows more than 3 lines and even when it shows 3 lines, it does it... goofy. The size of the ui-text node is 5x1 it should show at least 5 lines if not more. What gives?
Try inspecting the styles in your browsers dev tools.
Like for line height. Try adjusting the value.
Once you have identified what is causing the odd spacing? You can add a template node with css style override.
Ps, let us know what you find - It may be something we decide to adjust in the sec code for everyone.
Yes... will do.
So, here is a test flow... that sends 1 to 16 lines to a ui-text node. The ui-text mode is multiline enabled, and is of sufficient size it should display at least 5 or more lines, if not all 16, but only 3 lines are shown at any point.
[{"id":"b5598539f9389c7c","type":"ui-text","z":"f7a5dc98a4cc9ed4","group":"775749b22b3f40de","order":3,"width":4,"height":1,"name":"Log","label":"Log","format":"{{msg.payload}}","layout":"row-left","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":true,"className":"","value":"log","valueType":"msg","x":1430,"y":1020,"wires":[]},{"id":"2fbbccf2ee843682","type":"inject","z":"f7a5dc98a4cc9ed4","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":1020,"y":1020,"wires":[["b4e8fa2911d79543"]]},{"id":"b4e8fa2911d79543","type":"ring-buffer","z":"f7a5dc98a4cc9ed4","name":"","capacity":16,"order":"old-to-new","sendOnlyIfFull":false,"pushAfterClear":false,"extra":false,"perTopic":false,"x":1160,"y":1020,"wires":[["7ea3e96a377348b1"]]},{"id":"7ea3e96a377348b1","type":"function","z":"f7a5dc98a4cc9ed4","name":"Format","func":"msg.log = msg.payload.join('<br>')\n\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1300,"y":1020,"wires":[["b5598539f9389c7c"]]},{"id":"775749b22b3f40de","type":"ui-group","name":"Service Monitor","page":"a129af50497c821b","width":11,"height":"3","order":3,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"a129af50497c821b","type":"ui-page","name":"Dachshund Digital","ui":"b9d115efa0ea05a2","path":"/Casitas","icon":"home","layout":"grid","theme":"eae0f4a4353a3ec9","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":2,"className":"","visible":true,"disabled":false},{"id":"b9d115efa0ea05a2","type":"ui-base","name":"Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true,"allowInstall":false},{"id":"eae0f4a4353a3ec9","type":"ui-theme","name":"Dark","colors":{"surface":"#008080","primary":"#008080","bgPage":"#000000","groupBg":"#000000","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"1ccfc8c342167350","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.29.0","node-red-contrib-ring-buffer":"0.10.0"}}]
As for can see below the ui-text box is of sufficient size...
And...
The lines are using "<br>" as a line delimiter as well. Per my understanding, expectation, this behavior cannot be what is intended when multiline feature is enabled and the given text box is sufficient size to display many lines
What is the full name of the ring-buffer node? Doing a search, I do not see that in the palette manager.
Is that a Home assistant node? If so you should ask for help on that forum.
Sure...
https://flows.nodered.org/node/node-red-contrib-ring-buffer
You could create the same scenario just join an array of strings delimited by HTML paragraph breaks.
Seeing how that node hasn’t been updated in 7 years and the author hasn’t been active in GitHub for over 5 years, I would suggest not using that node.
The ring buffer is working fine, not the format of the text is fine as a string delimited by <br> per line. It is only the ui-text node that is formatting the text wrong. Remove the ring buffer and you will see the same result. I included the ring buffer node to illustrate what was being done to need the text to be in a multi-line format.
This is why I noted... "You could create the same scenario just join an array of strings delimited by HTML paragraph breaks."
Can you post a simple flow to illustrate the isue without that contib node?
OK... this is a bit odder... now it is working... but all I did was update the flow I provided before. I resized the text box grid.. and now the multiline is working? The original example the ui-text box was 5x5. More than I needed for the text lines.'
I happen to resize node grid to 4x5 (should have been 5x5)... only because I was creating a new flow to illustrate, not just cutting it out of my original flow. And the new created flow is working.
Oh and as I noted before the ring buffer is not irrelevant to the seemly odd behavior of the ui-text object. In my original flow I have resized the ui-text box many times as I have updated the UI page. And the ui-text box consistently would only show 2 or 3 lines no matter what the size on the dashboard page, or dashboard page editor. But now... not only the correct size but the correct behavior is working. You can see above the proof that the ui-text node was not working as expected. But now it is, see below.
Correct expected behavior now (using ring buffer)...
Without ring buffer...
The ring buffer provides for a scrolling effect to mimic a typical updating log, without have to maintain an array or such and move or shift the array contents.
For reference the flow with and without the ring buffer use...
[{"id":"3d486c3056ca38c5","type":"tab","label":"Flow 3","disabled":false,"info":"","env":[]},{"id":"e74bcbe5790124db","type":"ui-text","z":"3d486c3056ca38c5","group":"aedfbbe36dd08916","order":4,"width":4,"height":"5","name":"Log","label":"Log","format":"{{msg.payload}}","layout":"row-left","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":true,"className":"","value":"log","valueType":"msg","x":870,"y":440,"wires":[]},{"id":"281da8da2575d2c0","type":"inject","z":"3d486c3056ca38c5","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":440,"y":400,"wires":[["628054566c6b18e1"]]},{"id":"628054566c6b18e1","type":"ring-buffer","z":"3d486c3056ca38c5","name":"","capacity":16,"order":"old-to-new","sendOnlyIfFull":false,"pushAfterClear":false,"extra":false,"perTopic":false,"x":580,"y":400,"wires":[["5753100c90a64c26"]]},{"id":"5753100c90a64c26","type":"function","z":"3d486c3056ca38c5","name":"Format","func":"msg.log = msg.payload.join('<br>')\n\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":740,"y":440,"wires":[["e74bcbe5790124db"]]},{"id":"62eacb6b5beab28e","type":"inject","z":"3d486c3056ca38c5","name":"Test","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"['Test','Test','Test','Test','Test','Test','Test']","payloadType":"jsonata","x":590,"y":480,"wires":[["5753100c90a64c26"]]},{"id":"aedfbbe36dd08916","type":"ui-group","name":"Example","page":"a129af50497c821b","width":6,"height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"a129af50497c821b","type":"ui-page","name":"Dachshund Digital","ui":"b9d115efa0ea05a2","path":"/Casitas","icon":"home","layout":"grid","theme":"eae0f4a4353a3ec9","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":2,"className":"","visible":true,"disabled":false},{"id":"b9d115efa0ea05a2","type":"ui-base","name":"Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true,"allowInstall":false},{"id":"eae0f4a4353a3ec9","type":"ui-theme","name":"Dark","colors":{"surface":"#008080","primary":"#008080","bgPage":"#000000","groupBg":"#000000","groupOutline":"#cccccc"},"sizes":{"density":"default","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"81570c28d7179432","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.29.0","node-red-contrib-ring-buffer":"0.10.0"}}]
Maybe the actual frame size of the ui-text node was being displayed one way, but interpreted during flow execution another way?
I did notice one issue, which I think is by design, the ui-text node auto-centers the text vertically. This breaks the log scrolling effect until the maximum lines are populated, then it seems to scroll as desired. So I guess I am back to using a ui-template like I did in Dashboard 1. Or I can seed the ring buffer with blank lines.
Oh... side note... "Dachshund Digital" an inside joke, I have dachshunds... so I named my part time (most retired) IT consulting firm, "Dachshund Digital".
Yup... resizing the ui-text node screws it up... I just resized it again... in the original flow... and it is back to the 3 line behavior yet again. In the editor view it shows 4x6. But in the actual node configuration it shows 1x1. Some interaction between the layout editor and returning to flow editor is doing it. And yes, I am selecting the 'updated' merge changes each time.
Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.
The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy