Don't tell me!..................... node-red-fd-svg node
I shouldn't make too much advertisement about that. As you can see it is purely experimental stuff.
So for people reading about this: there is no planning when this will become available.
You know that great expectations result in great disappointments 
3 Likes
Is there a way of inserting line breaks in the FD text view node?
Possibly allowing the input to be HTML/Markdown coded?
Currently, being a string input, words are split making reading a little more difficult.
[{"id":"ec451e0100348867","type":"inject","z":"1543d308b342690a","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"Tonight will be largely dry, clearer and cold, with wintry showers in Scotland largely easing.","payloadType":"str","x":565,"y":1790,"wires":[["786492446d842498"]]},{"id":"786492446d842498","type":"fd-text-view","z":"1543d308b342690a","fd_container":"2fa703121bdc84d2","fd_cols":"2","fd_rows":"2","fd_array":false,"fd_array_max":10,"fd_output_topic":"","fd_loopback":false,"name":"","title":"Text View","popup_info":"","text":"","editable":false,"wrap":true,"autoscroll":false,"x":760,"y":1790,"wires":[[]]},{"id":"2fa703121bdc84d2","type":"flexdash container","name":"Examples grid","kind":"StdGrid","fd_children":",dc6f6a921f8e0373,a4623324bfd1fd22,6149f97eab3c8c6b,786492446d842498","title":"Examples","tab":"6dfcd673f5649409","min_cols":"1","max_cols":"20","unicast":"disallow","parent":"","solid":false,"cols":"1","rows":"1"},{"id":"6dfcd673f5649409","type":"flexdash tab","name":"Examples","icon":"mdi-view-dashboard","title":"Example flows","fd_children":",2fa703121bdc84d2","fd":"e8f5aea52ab49500"}]
1 Like
I recommend you try the markdown node. Warning: it's a very hacky/simplified markdown implementation. I need to do another round of looking for a decent implementation that isn't huge.
The text view is really geared towards fixed-width log files and similar stuff, hence the terminal-like wrapping.
Let me know if you need more!
OMG! the markdown node was hiding in plain sight!
One question pls, the text is being generated in a function node, and is passed into the markdown node as a string via msg payload. I'm not sure how to start a new line.
Your comments say;
- paragraphs separated by an empty line
How do you add a new line within a string?
I've tried adding 2 trailing spaces, the escape sequence /n & /r, and also the HTML tags <br> & <p> but can't get it to break into a new line.
I'm probably missing something obvious (again!)
1 Like
Function node input:
return { payload: `
# Testing markdown
This is one paragraph with many many many many words
that goes on for ever and ever and ever.
This is a second paragraph.
Trying again
`}
As you may notice, "there's room for improvement"...
- the paragraphs should have a little bit of space between them
- the whole thing should be top-aligned and not vertically centered
- would be nice to have a "dense/spacious" toggle
I got the extra blank line by putting a unicode non-breaking space on its own line (if you select carefully you'll see that there's an extra char in the middle blank line before the "trying again".
Hope this works for you for now.
BTW, the escape for a newline is \n.
1 Like
Thanks Thorsten. First time I've encountered template literals (except for pasting code in the forum), so it's been a learning step for me 
If anyone else is equally unfamiliar with template literals, a little googling tells me that variables can also be inserted like this example;
let temp = 26
let humidity = 38
return { payload: `
The temperature is ${temp}°C, and the humidity is ${humidity}% \n
But not quite yet, wait till June!
`
}
1 Like
Could you also add that the Title style attribute is not consistent with other widgets.
The FD markdown widget appears to apply the style font-weight-bold to the Title, whereas other widgets don't.
1 Like
New release day! This is an exciting release but it doesn't really add a whole lot of fixes or new features. It contains completely rewritten flow-editor templates for components, tabs, and dashboard that allow reordering of child elements in the flow editor. What this means is that I'm ready to turn off editing in FlexDash itself! I haven't done that so it's still available in case I messed something up. There's a lot of new stuff under the hood so I'm curious how many bumps we're going to run into 
I tested what I could but really appreciate some help testing the configuration of grids, tabs, and the dashboard in the flow editor!
21 Jan 23:19:39 - [info] Node-RED FlexDash plugin version 0.4.142
21 Jan 23:19:41 - [info] Node-RED FlexDash version 0.4.142
21 Jan 23:19:41 - [info] Node-RED FD Core Widgets version 0.4.63
21 Jan 23:19:43 - [info] FlexDash UI version 0.4.88
Fixes:
- TimelinePlot: emit event even if
labelsis null - Markdown: add spacing between paragraphs, fix bold title
- Dashboard: delay showing progress bar a fraction of a second
New Grid/Panel contents sorter:
New tab/dashboard contents corter:
4 Likes
Just before I update, I've noticed your startup log in your last post...
Your startup shows Core Widgets at v0.4.63
But my install shows v0.4.64 already, and I haven't updated yet, so I assume that you are still using the older version.
22 Jan 09:42:24 - [info] Node-RED FlexDash plugin version 0.4.134
22 Jan 09:42:26 - [info] Node-RED FlexDash version 0.4.134
22 Jan 09:42:26 - [info] Node-RED FD Core Widgets version 0.4.64
22 Jan 09:42:32 - [info] FlexDash UI version 0.4.84
After updating, tried the layout feature - very nice , and mostly everything remains working OK.
The paragraph spacing has reduced the amount of text that I can now display in the markdown node, so I'll need to sort that (space is a premium!!)
I thought that \n would just give a new line, not a new paragraph with spacing?
1 Like
What do you consider huge Thorsten?
Out of the more popular and supported parsers, marked seems a good bet in both size and popularity.
Ordered by popularity
- marked 48 kB MINIFIED
- markdown-it 97.2 kB MINIFIED
- remarkable 46.4 kB MINIFIED
- showdown 74.2 kB MINIFIED
- commonmark 72.9 kB MINIFIED
1 Like
Oh, and if you do use marked (or markdown-it) then I would be tempted to add mermaid support for an extra touch of awesomeness 
After install on a clean node-red instance:
Oh - seems from the docs that you are supposed to only install core widgets, not flexdash itself? You might want to make that a bit more prominent. I'll start again but I think that error needs looking at, I suspect lots of people will assume, as I did, that the node-red-flexdash module would be the main one and automatically install it first.
And then it isn't said in the corewidgets readme that you have to restart node-red after installation, only in the main docs - I really think that needs a user notification on install. Following the instructions in the readme, then gives you this error of course:
After restarting node-red, I got these errors in the log:
Welcome to Node-RED
===================
22 Jan 12:51:24 - [info] Node-RED version: v3.0.2
22 Jan 12:51:24 - [info] Node.js version: v16.14.0
22 Jan 12:51:24 - [info] Windows_NT 10.0.19045 x64 LE
22 Jan 12:51:25 - [info] Loading palette nodes
22 Jan 12:51:26 - [warn] [@flexdash/node-red-fd-testnodes] Node module cannot be loaded on this version. Requires: ^2.0.0
22 Jan 12:51:26 - [info] Node-RED FlexDash plugin version 0.4.142
22 Jan 12:51:26 - [info] Node-RED Vue version 0.1.10
22 Jan 12:51:26 - [info] Creating Vue template for 'flexdash dashboard' from C:\src\nr3\data\node_modules\@flexdash\node-red-flexdash\flexdash-dashboard.vue
22 Jan 12:51:26 - [info] Node-RED FlexDash version 0.4.142
22 Jan 12:51:26 - [info] Node-RED FD Core Widgets version 0.4.64
22 Jan 12:51:26 - [info] Creating Vue template for 'flexdash container' from C:\src\nr3\data\node_modules\@flexdash\node-red-flexdash\flexdash-container.vue
22 Jan 12:51:26 - [info] Creating Vue template for 'flexdash tab' from C:\src\nr3\data\node_modules\@flexdash\node-red-flexdash\flexdash-tab.vue
22 Jan 12:51:27 - [info] Creating Vue template for 'flexdash custom' from C:\src\nr3\data\node_modules\@flexdash\node-red-flexdash\flexdash-custom.vue
22 Jan 12:51:28 - [info] Vue 'fd-container-config' from C:\src\nr3\data\node_modules\@flexdash\node-red-flexdash\components\fd-container-config.vue
22 Jan 12:51:28 - [info] Vue 'fd-fmt-node-label' from C:\src\nr3\data\node_modules\@flexdash\node-red-flexdash\components\fd-fmt-node-label.vue
22 Jan 12:51:28 - [info] Vue 'fd-general-tab' from C:\src\nr3\data\node_modules\@flexdash\node-red-flexdash\components\fd-general-tab.vue
22 Jan 12:51:28 - [info] Vue 'fd-grid-sorter-item' from C:\src\nr3\data\node_modules\@flexdash\node-red-flexdash\components\fd-grid-sorter-item.vue
22 Jan 12:51:28 - [info] Vue 'fd-grid-sorter' from C:\src\nr3\data\node_modules\@flexdash\node-red-flexdash\components\fd-grid-sorter.vue
22 Jan 12:51:28 - [info] Vue 'fd-list-sorter' from C:\src\nr3\data\node_modules\@flexdash\node-red-flexdash\components\fd-list-sorter.vue
22 Jan 12:51:28 - [error] Error creating Vue template for flexdash dashboard:
TypeError: Cannot read properties of undefined (reading 'exports')
at setNodeTypeConfig (C:\src\nr3\data\node_modules\node-red-vue\node-red-vue.js:116:52)
at _createVueTemplate (C:\src\nr3\data\node_modules\node-red-vue\node-red-vue.js:155:9)
22 Jan 12:51:28 - [info] FlexDash UI version 0.4.88
22 Jan 12:51:28 - [error] Error creating Vue template for flexdash container:
TypeError: Cannot read properties of undefined (reading 'exports')
at setNodeTypeConfig (C:\src\nr3\data\node_modules\node-red-vue\node-red-vue.js:116:52)
at _createVueTemplate (C:\src\nr3\data\node_modules\node-red-vue\node-red-vue.js:155:9)
22 Jan 12:51:28 - [error] Error creating Vue template for flexdash tab:
TypeError: Cannot read properties of undefined (reading 'exports')
at setNodeTypeConfig (C:\src\nr3\data\node_modules\node-red-vue\node-red-vue.js:116:52)
at _createVueTemplate (C:\src\nr3\data\node_modules\node-red-vue\node-red-vue.js:155:9)
22 Jan 12:51:28 - [error] Error creating Vue template for flexdash custom:
TypeError: Cannot read properties of undefined (reading 'exports')
at setNodeTypeConfig (C:\src\nr3\data\node_modules\node-red-vue\node-red-vue.js:116:52)
at _createVueTemplate (C:\src\nr3\data\node_modules\node-red-vue\node-red-vue.js:155:9)
22 Jan 12:51:28 - [info] Settings file : C:\src\nr3\data\settings.js
22 Jan 12:51:28 - [info] Context store : 'default' [module=memory]
22 Jan 12:51:28 - [info] User directory : C:\src\nr3\data
22 Jan 12:51:28 - [warn] Projects disabled : editorTheme.projects.enabled=false
22 Jan 12:51:28 - [info] Flows file : C:\src\nr3\data\flows.json
After the restart and reload of the Editor, I tried the hello world example and loaded Maybe ignore this one since this instance is running on port 1883!http://localhost:1880/flexdash and got this:
One final attempt, I imported a different example (time plot raw) and got this error:
And really my final attempt for now. Went back to a fresh instance of node-red and installed corewidgets, restarted node-red and reloaded the Editor (since the nodes don't appear automatically). Tried the hello world example again and got this:
Log:
Welcome to Node-RED
===================
22 Jan 13:09:08 - [info] Node-RED version: v3.0.2
22 Jan 13:09:08 - [info] Node.js version: v16.14.0
22 Jan 13:09:08 - [info] Windows_NT 10.0.19045 x64 LE
22 Jan 13:09:09 - [info] Loading palette nodes
22 Jan 13:09:09 - [info] Node-RED FlexDash plugin version 0.4.142
22 Jan 13:09:09 - [info] Node-RED Vue version 0.1.10
22 Jan 13:09:10 - [info] Creating Vue template for 'flexdash dashboard' from C:\src\nr3\data\node_modules\@flexdash\node-red-flexdash\flexdash-dashboard.vue
22 Jan 13:09:10 - [info] Node-RED FlexDash version 0.4.142
22 Jan 13:09:10 - [info] Node-RED FD Core Widgets version 0.4.64
22 Jan 13:09:10 - [info] Creating Vue template for 'flexdash container' from C:\src\nr3\data\node_modules\@flexdash\node-red-flexdash\flexdash-container.vue
22 Jan 13:09:10 - [info] Creating Vue template for 'flexdash tab' from C:\src\nr3\data\node_modules\@flexdash\node-red-flexdash\flexdash-tab.vue
22 Jan 13:09:10 - [info] Creating Vue template for 'flexdash custom' from C:\src\nr3\data\node_modules\@flexdash\node-red-flexdash\flexdash-custom.vue
22 Jan 13:09:11 - [info] Vue 'fd-container-config' from C:\src\nr3\data\node_modules\@flexdash\node-red-flexdash\components\fd-container-config.vue
22 Jan 13:09:11 - [info] Vue 'fd-fmt-node-label' from C:\src\nr3\data\node_modules\@flexdash\node-red-flexdash\components\fd-fmt-node-label.vue
22 Jan 13:09:11 - [info] Vue 'fd-general-tab' from C:\src\nr3\data\node_modules\@flexdash\node-red-flexdash\components\fd-general-tab.vue
22 Jan 13:09:11 - [info] Vue 'fd-grid-sorter-item' from C:\src\nr3\data\node_modules\@flexdash\node-red-flexdash\components\fd-grid-sorter-item.vue
22 Jan 13:09:11 - [info] Vue 'fd-grid-sorter' from C:\src\nr3\data\node_modules\@flexdash\node-red-flexdash\components\fd-grid-sorter.vue
22 Jan 13:09:11 - [info] Vue 'fd-list-sorter' from C:\src\nr3\data\node_modules\@flexdash\node-red-flexdash\components\fd-list-sorter.vue
22 Jan 13:09:11 - [error] Error creating Vue template for flexdash dashboard:
TypeError: Cannot read properties of undefined (reading 'exports')
at setNodeTypeConfig (C:\src\nr3\data\node_modules\node-red-vue\node-red-vue.js:116:52)
at _createVueTemplate (C:\src\nr3\data\node_modules\node-red-vue\node-red-vue.js:155:9)
22 Jan 13:09:11 - [info] FlexDash UI version 0.4.88
22 Jan 13:09:11 - [error] Error creating Vue template for flexdash container:
TypeError: Cannot read properties of undefined (reading 'exports')
at setNodeTypeConfig (C:\src\nr3\data\node_modules\node-red-vue\node-red-vue.js:116:52)
at _createVueTemplate (C:\src\nr3\data\node_modules\node-red-vue\node-red-vue.js:155:9)
22 Jan 13:09:11 - [error] Error creating Vue template for flexdash tab:
TypeError: Cannot read properties of undefined (reading 'exports')
at setNodeTypeConfig (C:\src\nr3\data\node_modules\node-red-vue\node-red-vue.js:116:52)
at _createVueTemplate (C:\src\nr3\data\node_modules\node-red-vue\node-red-vue.js:155:9)
22 Jan 13:09:11 - [error] Error creating Vue template for flexdash custom:
TypeError: Cannot read properties of undefined (reading 'exports')
at setNodeTypeConfig (C:\src\nr3\data\node_modules\node-red-vue\node-red-vue.js:116:52)
at _createVueTemplate (C:\src\nr3\data\node_modules\node-red-vue\node-red-vue.js:155:9)
22 Jan 13:09:11 - [info] Settings file : C:\src\nr3\data\settings.js
22 Jan 13:09:11 - [info] Context store : 'default' [module=memory]
22 Jan 13:09:11 - [info] User directory : C:\src\nr3\data
22 Jan 13:09:11 - [warn] Projects disabled : editorTheme.projects.enabled=false
22 Jan 13:09:11 - [info] Flows file : C:\src\nr3\data\flows.json
22 Jan 13:09:11 - [warn]
---------------------------------------------------------------------
Your flow credentials file is encrypted using a system-generated key.
If the system-generated key is lost for any reason, your credentials
file will not be recoverable, you will have to delete it and re-enter
your credentials.
You should set your own key using the 'credentialSecret' option in
your settings file. Node-RED will then re-encrypt your credentials
file using your chosen key the next time you deploy a change.
---------------------------------------------------------------------
22 Jan 13:09:11 - [warn] Encrypted credentials not found
22 Jan 13:09:11 - [info] Server now running at http://127.0.0.1:1883/
22 Jan 13:09:11 - [info] Starting flows
22 Jan 13:09:11 - [info] Started flows
22 Jan 13:09:12 - [info] Upgrade request for /comms got
22 Jan 13:09:39 - [info] Upgrade request for /comms got
GET /_vue/registry { start: '0', end: '-1' }
GET /_vue/component { name: 'flexdash dashboard' }
GET /_vue/component { name: 'flexdash container' }
GET /_vue/component { name: 'flexdash tab' }
GET /_vue/component { name: 'flexdash custom' }
GET /_vue/component { name: 'fd-container-config' }
GET /_vue/component { name: 'fd-general-tab' }
GET /_vue/component { name: 'fd-fmt-node-label' }
GET /_vue/component { name: 'fd-grid-sorter-item' }
GET /_vue/component { name: 'fd-list-sorter' }
GET /_vue/component { name: 'fd-grid-sorter' }
1 Like
Just a side-note. For markdown support in uibuilder, I left the library external - so if the library has been loaded, it will work, if not, the input is ignored. I used the markdown-it library since it seems to have the widest support, best support for the CommonMark spec and plenty of plugins to extend the capabilities.
By leaving the load external to uibuilder, it keeps the main client load minimal for those who don't want it.
In addition, it is worth looking at the use of DOMPurify. I also allow the use of this as an external load - if it is present, all generated HTML, including from Markdown, is passed through it for safety.
... hmmm then drags in a whole copy of d3 - even the minified version of just the mermaid part is 900k... so don't be tempted.
Not really, but there's Allow node modules to have node modules as dependencies · Issue #569 · node-red/node-red · GitHub, which I call a bug, but evidently isn't considered a bug by the powers that be. Bottom line is that if you install package A using the palette manager and it depends on package B then you're out of luck and have to restart NR to get a proper npm install to run. The only alternative is to explicitly install A and B (for FlexDash that would now be 4 packages). Not sure what to do...
The issue you're hitting has to do with me forgetting to use the proper path.join in one place, which causes issues on Windows. Getting my window-10 laptop powered up now to figure out how to install NR and test a fix...
Thanks for checking out FlexDash and posting the complete error logs!
Update: issue fixed, if you run npm up (presumably in the .node-red dir) it should pull in node-red-vue 0.1.11 and that fixes the path issue. At least it did for me. Sorry for all the hassle.
Yes, I've hit that issue a few times over the years. More of a node.js issue I think rather than specifically node-red. I once spent far too much time trying many different workarounds. That was when I thought that VueJS was going to be necessary in order to achieve everything I wanted in uibuilder. Thankfully, that is no longer the case.
OK, I actually reset my "vanilla" NR instance so I'll need to find time to reinstall. Just working on some simplifications of uibuilder's no-code options at the moment.
Do you think the spacing is excessive? I have a small test:
return { payload: `
# Testing markdown
This is one paragraph with many many many many words
that goes on for ever and ever and ever.
This is a second paragraph.
Trying again
- and a bullet
- second bullet
Tada!
`}
The result is (in a 4-row 2-columns) markdown widget:
I'm not sure what you mean by "I thought that \n would just give a new line". My understanding is that there is a difference between markdown and what you use here in the forum. In the forum a paragraph must be on a single line, which wraps in the editing panel. If you hit 'enter' you get a new line in the output without space. In markdown that concept doesn't exist and paragraphs extend across lines.
I can't understand the benefits of using markdown at all. From average user perspective it takes to have knowledge of both - markdown and html. And maybe also the underlying codebase. I see it just as shortcut to get things going on early phase but definitely not as solution for widget base.
Markdown is fantastic for the likes of low code dashboards where a user may not be up to speed with HTML.
From a "reading" POV, raw markdown is much clearer than HTML and from a writing POV, it is far far easier.
1 Like
