Node-RED でヒートマップ表示ができる node-red-contrib-ui-heatmap ノードを試してみたメモ

Node-RED でヒートマップ表示ができる node-red-contrib-ui-heatmap ノードを試してみたメモです。

インストール

念のため dashboard ノードが使える状態で、node-red-contrib-ui-heatmap こちらのノードを、メニュー > パレットの管理 > パレット > ノードの追加からインストールします。

ダッシュボードの項目に組み込まれます。

[{"id":"6a8727a5.223ca8","type":"function","z":"26f02588.92575a","name":"Generate random matrix","func":"// Generate some random data\n// See https://www.patrick-wied.at/static/heatmapjs/example-minimal-config.html\nvar len = 200;\n\nmsg.payload = [];\n\nwhile (len--) {\n  var value = Math.floor(Math.random()*100);\n  msg.payload.push(value);\n}\n\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":530,"y":180,"wires":[["db0b55cb.5f3168"]]},{"id":"54117352.9d64ec","type":"inject","z":"26f02588.92575a","name":"Show heatmap","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":300,"y":180,"wires":[["6a8727a5.223ca8"]]},{"id":"db0b55cb.5f3168","type":"ui_heat_map","z":"26f02588.92575a","group":"2eaf8ba8.ac6064","order":1,"width":6,"height":4,"name":"","rows":"20","columns":"10","minMax":false,"minimumValue":0,"maximumValue":0,"backgroundType":"color","backgroundColor":"#ffffff","radius":"30","opacity":"0.6","blur":"0.85","showValues":false,"gridType":"none","valuesDecimals":0,"showLegend":false,"legendType":"none","legendDecimals":0,"legendCount":2,"x":750,"y":180,"wires":[]},{"id":"2eaf8ba8.ac6064","type":"ui_group","z":"","name":"Heat Map","tab":"966e91ae.19615","order":1,"disp":false,"width":6,"collapse":false},{"id":"966e91ae.19615","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

ノードの説明ページにあるサンプルフローが分かりやすいです。