From 5ad5ec5057ceff36129772b6ff1af7fd96347295 Mon Sep 17 00:00:00 2001 From: Mike Blackstock Date: Thu, 24 Dec 2020 17:02:42 -0800 Subject: [PATCH] update README --- README.md | 41 ++++++++++++++++++++++++++++++++++++++++- 1 file changed, 40 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index ac7c533..98bdb0b 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,41 @@ # node-red-contrib-data-view -Node-RED node to preview data in the flow editor +Node-RED node to preview data in the flow editor with a simple line chart inside the Node-RED flow editor. This node was inspired by the simple image output node `node-red-contrib-image-output` + +Currently the node expects the input `msg.payload` to contain a number. The node will then create a line chart in the flow editor under the node displaying the value in time. + +This node is a work in progress. Over time, expect support for addition chart options, types and shapes of data supplied based on feedback. + +## Installation +Either use the Editor - Menu - Manage Palette - Install option, or run the following npm command in your Node-RED user directory (typically `~/.node-red`): +``` +npm i node-red-contrib-data-view +``` + +## Node usage +This node can be used to view simple line charts inside the Node-RED flow editor. The following example demonstrates how to inject numbers into the node to generate charts, how to clear a chart, and test node error handling when a non-numeric payload is used in msg.payload. + +``` +[{"id":"2cd7059b.70ec6a","type":"data-view","z":"de60a83e.dce718","name":"wide chart","width":"400","height":"160","points":"100","active":true,"passthru":false,"outputs":0,"x":550,"y":120,"wires":[]},{"id":"1459af05.cfcc01","type":"inject","z":"de60a83e.dce718","name":"trigger data","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":150,"y":120,"wires":[["93544758.228ec8"]]},{"id":"93544758.228ec8","type":"function","z":"de60a83e.dce718","name":"generate values","func":"msg.payload = Math.floor(Math.random() * 100)-50;\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":360,"y":120,"wires":[["2cd7059b.70ec6a","e2c1381f.9dad28","47a657d1.c696f8"]]},{"id":"8841bc1f.0fee1","type":"debug","z":"de60a83e.dce718","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":730,"y":340,"wires":[]},{"id":"a0e15f78.4871c","type":"inject","z":"de60a83e.dce718","name":"clear chart","props":[{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"test","x":160,"y":160,"wires":[["2cd7059b.70ec6a"]]},{"id":"4de026cb.33c388","type":"inject","z":"de60a83e.dce718","name":"send bad data","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"strings can't be graphes","payloadType":"str","x":150,"y":200,"wires":[["2cd7059b.70ec6a"]]},{"id":"e2c1381f.9dad28","type":"data-view","z":"de60a83e.dce718","name":"pass through","width":"300","height":"160","points":"50","active":true,"passthru":true,"outputs":1,"x":550,"y":340,"wires":[["8841bc1f.0fee1"]]},{"id":"47a657d1.c696f8","type":"data-view","z":"de60a83e.dce718","name":"","width":200,"height":160,"active":true,"passthru":false,"outputs":0,"x":320,"y":340,"wires":[]}] +``` + +This example flow is also available via the *'Import'* menu in the Node-RED flow editor. + +## Node configuration +### Height +The height (in pixels) of the chart. + +### Width +The width (in pixels) of the chart. + +### Line points +The number of points to display in the chart before they are dropped. The client side code maintains a circular buffer for each node. + +### Allow data passthrough +When selected this adds an output wire to the node in order to pass the original message through to a following node. + +This performs better than forking the wires, however it does remove the enable/disable button. + + + + +