How to put formatted Text on Dashboard

Dashboard
1

I want to write INSTRUCTIONS for what things mean when indicators are showing.

Of course the text node is the one of choice.

I am just slightly put off because it is so small with the input part.
It will be a fairly extensive bit of text.

Is this the best way?

P.S.
The text needs to be formatted also.
So I need lines to be shown as they are supposed to be.
eg:

LED #     Event
7       Machine health / Reboot / IP Events
6       Flow error / NTP error / Alarms
5       MQTT comms failure
4       Tablet power status
3       S5 power status
2       HTC power status  **  Now used for S21
1       TEST LED  (TimePi CPU load indicator)  Plant watering status indicator
0       Heart beat
2

use a markdown node to convert markdown to html then display that via a template node.

then you can use tables and bold, itaclics, code - exactily like you do in this forum

basics

*italic text* == italic text

**bold text** == bold text

`inline code` == inline code


multiline code

markdown

```
msg.payload = "hello"
return msg
```

rendered

msg.payload = "hello"
return msg

table

markdown

| LED # |  Event |
| - | - |
|7| Machine health / Reboot / IP Events|
|6| Flow error / NTP error / Alarms|

rendered

LED # Event
7 Machine health / Reboot / IP Events
6 Flow error / NTP error / Alarms
1 Like
3

Thanks, but I may need a bit more of an example of the text.....

And.... Sorry.... in what node do I make this text? function?

Ok, sorry...

markdown.

Can't find it. Not standard - yes?
If yes: There are quite a few flavours of it. Which one?

4

How do you generate this text right now?

If it is hard coded table, then just update the hardcoded code to include markdown formatting.

If the text is generated "somewhere", then modify that to include formatting.

correct.

should have been more explicit - "install/use a markdown node from the library - one that converts markdown strings to HTML"

5

the text is just a table to tell me what LED means what.

Which markdown node did you use?
When I look - as said: There are quite a few flavours of it.

Now it is just text that I have in a comment node.
But that is little good if an LED comes on and I can't remember what it means.
Then I have to load the editor and open the comment node to find out what means what.

So I want to put that in/on a table on the dashboard so I can see it from a web point of view.

6

I downloaded and installed one, but it doesn't allow text input.

Could you - please - tell me which one you used?

As soon as I put a new line in the text, the function node throws an error at me for the structure.

So I don't know how to construct the multiple lines.

7

I havent used any.

But i know that node-red-node-markdown (node) - Node-RED will take any makdown from msg.payload and return the rendered HTML - which you can use to populate a ui-template.

1 Like
8

Again: thanks.

Could you maybe post an example of the code.

A basic 3 line bit of text.

An inject, function (for the message) the markdown node and the output node.
The ui-template node.... Is that the one that displays the message?

P.S.
That is the node I chose, so that's good.

9

It really was as easy as I said.

msg.payload --> markdown node --> template.

You didnt even need to modify the markdown node or the template.

flow

image
image967Ă—728 65.4 KB

[{"id":"f4977a3a93b687b9","type":"inject","z":"6e46a349d744ceaa","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":150,"y":360,"wires":[["21f6e9c54ce6aa06"]]},{"id":"21f6e9c54ce6aa06","type":"template","z":"6e46a349d744ceaa","name":"some static markdown","field":"payload","fieldType":"msg","format":"text","syntax":"mustache","template":"| LED # |  Event |\n| :- | :- |\n|7|Machine health / Reboot / IP Events|\n|6|Flow error / NTP error / Alarms|\n|5|MQTT comms failure|\n|4|Tablet power status|\n|3|S5 power status|\n|2|HTC power status  **  Now used for S21|\n|1|TEST LED  (TimePi CPU load indicator)  Plant watering status indicator|\n|0|Heart beat|","output":"str","x":340,"y":360,"wires":[["84296c512740e13d","5802bb7dc4a27a67"]]},{"id":"84296c512740e13d","type":"markdown","z":"6e46a349d744ceaa","name":"","x":190,"y":420,"wires":[["aa45155ecf920aca","3d32e9fdcc21eb1e"]]},{"id":"aa45155ecf920aca","type":"debug","z":"6e46a349d744ceaa","name":"rendered","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":380,"y":480,"wires":[]},{"id":"3d32e9fdcc21eb1e","type":"ui_template","z":"6e46a349d744ceaa","group":"da0a88142730741b","name":"Table","order":8,"width":"12","height":"9","format":"<div ng-bind-html=\"msg.payload\"></div>\n\n<style>\n    table {\n        border-collapse: collapse;\n        font-family: Tahoma, Geneva, sans-serif;\n    }\n    table td {\n        padding: 15px;\n    }\n    table thead td {\n        background-color: #54585d;\n        color: #ffffff;\n        font-weight: bold;\n        font-size: 13px;\n        border: 1px solid #54585d;\n    }\n    table tbody td {\n        color: #636363;\n        border: 1px solid #dddfe1;\n    }\n    table tbody tr {\n        background-color: #f9fafb;\n    }\n    table tbody tr:nth-child(odd) {\n        background-color: #ffffff;\n    }\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":370,"y":420,"wires":[[]]},{"id":"5802bb7dc4a27a67","type":"debug","z":"6e46a349d744ceaa","name":"raw markdown","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":580,"y":360,"wires":[]},{"id":"86d6a8cfac496b83","type":"template","z":"6e46a349d744ceaa","name":"some static markdown","field":"payload","fieldType":"msg","format":"text","syntax":"mustache","template":"```\nLED #     Event\n7         Machine health / Reboot / IP Events\n6         Flow error / NTP error / Alarms\n5         MQTT comms failure\n4         Tablet power status\n3         S5 power status\n2         HTC power status  **  Now used for S21\n1         TEST LED  (TimePi CPU load indicator)  Plant watering status indicator\n0         Heart beat\n```","output":"str","x":340,"y":560,"wires":[["c73cff3238ccf17e","606c745dbf2e396f"]]},{"id":"c73cff3238ccf17e","type":"markdown","z":"6e46a349d744ceaa","name":"","x":190,"y":620,"wires":[["76d5060bd3760614","56daaafe09cb47f3"]]},{"id":"76d5060bd3760614","type":"ui_template","z":"6e46a349d744ceaa","group":"da0a88142730741b","name":"code block","order":8,"width":"12","height":"5","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":390,"y":620,"wires":[[]]},{"id":"0d736e43bb17f23a","type":"inject","z":"6e46a349d744ceaa","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"true","payloadType":"bool","x":170,"y":560,"wires":[["86d6a8cfac496b83"]]},{"id":"606c745dbf2e396f","type":"debug","z":"6e46a349d744ceaa","name":"raw markdown","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":560,"y":560,"wires":[]},{"id":"56daaafe09cb47f3","type":"debug","z":"6e46a349d744ceaa","name":"rendered","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","statusVal":"","statusType":"auto","x":380,"y":680,"wires":[]},{"id":"da0a88142730741b","type":"ui_group","name":"Default","tab":"c32ef9de44166c12","order":1,"disp":true,"width":"12","collapse":false,"className":""},{"id":"c32ef9de44166c12","type":"ui_tab","name":"Markdown Demo","icon":"dashboard","disabled":false,"hidden":false}]

output

image
image698Ă—832 18.5 KB

2 Likes
10

What was killing me was I didn't think to use the template node to construct the initial message.

I'll post this now and reply when I get the Ah ha! moment.

11

Thanks.

Alas I will admit there is a bit more trickery in there than I understand.
No problems.

I'll sit and try to learn what it all means.
(The ui-template node code.)

12

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