[ANNOUNCE] node-red-contrib-jsontohtml

Share Your Nodes
1

Hi folks,

I was re-installing one of my Raspberry devices, and I found some custom nodes on it that were about 95% finished. I have such nodes lying around all over the place. It it is a very bad habbit. I should reserve some time to finalize the last 5% instead of starting with something new ...

Anyway I have quickly published one of those nodes on NPM ( :champagne: :clinking_glasses:):

image

This node-red-contrib-jsontohtml node allows you transform a Javascript object to HTML, based on a specified transformation.

On the readme page you can find an example, where I inject an object (containing the statusses of various sensors):

image

Which is then transformed to HTML.
This allows me to show a popup dialog in my Node-RED dashboard very easily:

image

Have fun with it!!
Bart

2

Errr why wouldn't I just use a template node ?

3

That sounds not like a motivational contribution speech...

Do you mean to write the html manually in a template node? Or is there perhaps a standard way to convert json to html, which I'm not aware of?

4

Yes - that is exactly what the template node has been doing for the last 6 years...

[{"id":"21d27fe8.709f9","type":"inject","z":"ab9333b5.f44f6","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"name\":\"Front door\",\"status\":\"OPEN\"},{\"name\":\"Kitchen door\",\"status\":\"CLOSED\"},{\"name\":\"Bathroom window\",\"status\":\"CLOSED\"}]","payloadType":"json","x":100,"y":2080,"wires":[["2a4f2827.5def58"]]},{"id":"2a4f2827.5def58","type":"template","z":"ab9333b5.f44f6","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"Notifications: \n{{#payload}}\n<li>{{name}} - <b>{{status}}</b></li>\n{{/payload}}","output":"str","x":260,"y":2080,"wires":[["97a3b8b1.c7c538","8dcd2d7f.40e3e"]]},{"id":"97a3b8b1.c7c538","type":"debug","z":"ab9333b5.f44f6","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":450,"y":2120,"wires":[]},{"id":"8dcd2d7f.40e3e","type":"ui_toast","z":"ab9333b5.f44f6","position":"dialog","displayTime":"3","highlight":"","sendall":true,"outputs":1,"ok":"OK","cancel":"","raw":true,"topic":"","name":"","x":450,"y":2080,"wires":[[]]}]

image
image776×246 22.7 KB

image

5

OMG...
Never seen this kind of functionality before ...
I will put your example on my readme page, and explain that is the standard way to go...
Thanks for the example!

6

:slight_smile: .... w do warn folk to discuss things here before diving in and writing loads of code... ah well as long as you enjoyed yourself.

7

This must be one of my first custom nodes. Have used it since I started with Node-RED, and never have seen something similar passing by in the discussions that I follow. So it hasn't come up my mind that there was anything to discuss about it ...

Anyway I have updated the readme:

image

And added your example:

image

It now looks more like a advertising brochure for the Template node :wink:

8

:-). Stick to SVG goodness.