Please add a realtime Map ui Item for node-red-dashboard

[Mannshoch]

It would be nice if we could see our Roomba on the Map.

See also: https://github.com/koalazak/rest980#realtime-map-experimental

[Mannshoch]

Ping @yuchangyuan

[yuchangyuan]

Sorry for not response.

I am not javascript developer, and have not enough time to work on this project. Real time map is an useful feature I also want to have, so I will leave this open, and maybe some day I will add this function, but I don't think I will finish it in near future.

If you can write code and have enough time and interest on this, you can do it yourself(fork & add function), and this is how FOSS works.

[Mannshoch]

Hello @yuchangyuan I found some code on the nodered Forum. Below the a little bit modified Flow. May you could create a nice node that setup some basics for the chart node.

[{"id":"3c135b07.119c04","type":"link in","z":"8e19ac56.c71dc","name":"Takt","links":["ddd3bf.9d16944"],"x":165,"y":740,"wires":[["27d4e78.5dbe518","82bd568f.ac0638"]]},{"id":"82bd568f.ac0638","type":"function","z":"8e19ac56.c71dc","name":"modify chart options","func":"let gridcolors = 'rgba(255, 160, 0, 0.3)'\nmsg.ui_control = {\n    options: {\n        legend: {\n            display: false\n        },\n        tooltips: {\n            enabled: false\n        },\n        scales: {\n            xAxes: [{\n                type: 'linear',\n                id: 'custom-x-axis',\n                position:'bottom',\n                padding:100,\n                gridLines:{\n                    color:gridcolors,\n                    zeroLineColor:'rgba(123, 113, 113, 0.75)',\n                    tickMarkLength:7,\n                    drawTicks:false\n                },\n                ticks: {\n                    fontColor:\"#ccc\",\n                    max: 600,\n                    min: -10,\n                    stepSize: 50\n                   \n                }\n            }],\n            yAxes: [{\n                id: 'custom-y-axis',\n                \n                gridLines:{\n                    color:gridcolors,\n                    zeroLineColor:'red',\n                    tickMarkLength:5,\n                    drawTicks:false\n                },\n                ticks: {\n                    fontColor:\"#ccc\",\n                    max: 300,\n                    min: -650,\n                    stepSize: 50\n                }\n            }]\n       }\n    }\n}\ndelete msg.payload\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":420,"y":760,"wires":[["38072b72.56e0a4"]]},{"id":"27d4e78.5dbe518","type":"function","z":"8e19ac56.c71dc","name":"data collection","func":"var data = flow.get('xyC') || [];\ndata.push({x:global.get(\"X\"),y:global.get(\"Y\")});\nflow.set(\"xyC\", data);\n// array.length\n// array.shift()\n\n\n\nmsg.payload = [{\n    \"series\": [\"A\"],\n    \"xAxisID\": 'custom-x-axis',\n    \"yAxisID\": 'custom-y-axis',\n    \"data\": [data],\n    \"labels\": [\"\"]\n}]\n\nnode.status({text: \"{x:\" + global.get(\"X\") + \",y:\" + global.get(\"Y\") +\" }\"});\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":440,"y":700,"wires":[["38072b72.56e0a4"]]},{"id":"38072b72.56e0a4","type":"ui_chart","z":"8e19ac56.c71dc","name":"","group":"c7a27394.057878","order":5,"width":"20","height":"19","label":"","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"-30","ymax":"30","removeOlder":"24","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#00b3ff","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":650,"y":740,"wires":[[]]},{"id":"c7a27394.057878","type":"ui_group","name":"CHART","tab":"54e197d8.7f7fe8","order":2,"disp":false,"width":"20","collapse":false},{"id":"54e197d8.7f7fe8","type":"ui_tab","name":"Home","icon":"dashboard","order":1,"disabled":false,"hidden":false}]