multiple instances on ui

[vikingsraven]

HI, as per forum post, thanks for creating this

Win10 node-red 2.1.0 npm version 6.14.15 node version 14.17.6

each time flow is deployed a new instance appears on the ui page, doesn't contain anything but the instance is put into the first one underneath it, But doesn't show chart info. Also occasionally the left hand values don't appear, neither does the chart plot , but on refresh of page it shows chart in first instance. used Brave and chrome to have a check and its the same in both

[Christian-Me]

Thank you for the first issue First question as it happened before and I could not figure it out. It happened on my side too (and others) and suddenly disappeared. which version of the dashboard do you use? (I just checked and I use 2.30) Before I upgrade I like to check. The placement of groups and widgets is "normally" dandled by the dashboard.

The other problem is related to autoscale the Y axes on the default scale. Currently work on that

[Christian-Me]

Perhaps you like to test the "speedtest" example [{"id":"efaf64859ad96c94","type":"group","z":"db39bbbe01b608ed","name":"speedtest","style":{"label":true},"nodes":["e499e1043df483fb","d721826a44bd4883","6ac7b25bc84b8156","a93cc4c027d3dcb5","74415b2ee31979cd","52d5dfd0e14f1040","6906ea9cb698ed10","8adedbe57e5d2578","a5bd5983128459cd","b81013e994aa666c","685918eccce614b7","3fa2eb0b3f3648c0"],"x":14,"y":399,"w":1112,"h":222},{"id":"e499e1043df483fb","type":"ui_slider","z":"db39bbbe01b608ed","g":"efaf64859ad96c94","name":"","label":"Speed msg/sec","tooltip":"","group":"5053dc5d780ac32f","order":2,"width":0,"height":0,"passthru":true,"outs":"end","topic":"speed","topicType":"str","min":0,"max":"200","step":"10","x":340,"y":440,"wires":[["d721826a44bd4883"]]},{"id":"d721826a44bd4883","type":"function","z":"db39bbbe01b608ed","g":"efaf64859ad96c94","name":"timer","func":"var settings = context.get(\"settings\") || {speed:10,run:false,counter:0}\ncontext.set(\"settings\",settings);\n\nif (msg.topic!==undefined) settings[msg.topic] = msg.payload;\nif (settings.timer) clearInterval(settings.timer)\nif(settings.run) {\n settings.timer=setInterval(() => {\n settings.counter++;\n node.send({payload:settings.counter,timestamp:Date.now()})\n },1000/settings.speed);\n\n}","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":530,"y":460,"wires":[["6906ea9cb698ed10"]]},{"id":"6ac7b25bc84b8156","type":"ui_switch","z":"db39bbbe01b608ed","g":"efaf64859ad96c94","name":"","label":"Run","tooltip":"","group":"5053dc5d780ac32f","order":1,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"run","topicType":"str","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"x":310,"y":500,"wires":[["d721826a44bd4883"]]},{"id":"a93cc4c027d3dcb5","type":"debug","z":"db39bbbe01b608ed","g":"efaf64859ad96c94","name":"","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":850,"y":520,"wires":[]},{"id":"74415b2ee31979cd","type":"inject","z":"db39bbbe01b608ed","g":"efaf64859ad96c94","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"speed","payload":"10","payloadType":"num","x":180,"y":440,"wires":[["e499e1043df483fb"]]},{"id":"52d5dfd0e14f1040","type":"ui_uplot-charts","z":"db39bbbe01b608ed","g":"efaf64859ad96c94","group":"e6be242af5f773d3","order":4,"width":"18","height":"12","name":"","title":"uPlot speedtest","series":[{"topic":"sin","label":"sin","scale":"sin","stroke":"rgba(31,119,180,1.00)","width":1,"dash":[],"path":"linear","fill":"rgba(31,119,180,0.30)","spanGaps":true,"show":true,"forward":false}],"scales":[{"id":"sin","name":"Sin","auto":false,"min":-1,"max":1}],"axes":[{"label":"SInus","scale":"sin","stroke":"rgba(127,127,127,0.80)","side":0,"grid":{"stroke":"rgba(127,127,127,0.80)","width":1,"dash":[1,5],"show":true},"ticks":{"stroke":"rgba(127,127,127,0.80)","width":2,"dash":[],"show":true}}],"axesX":{"space":40,"incrs":[1,5,10,15,30,60,300,600,900,1800,3600,86400,2419200,31536000],"values":[[31536000,"{YYYY}","","","","","","",1],[2419200,"{MMM}","\n{YYYY}","","","","","",1],[86400,"{DD}.{MM}","\n{YYYY}","","","","","",1],[3600,"{H}","\n{DD}.{MM}.{YY}","","\n{DD}.{MM}","","","",1],[60,"{H}:{mm}","\n{DD}.{MM}.{YY}","","\n{DD}.{MM}","","","",1],[1,"{ss}s","\n{DD}.{MM}.{YY} {H}:{mm}","","\n{DD}.{MM} {H}:{mm}","","\n{H}:{mm}","",1],[0.001,"{ss}.{fff}s","\n{DD}.{MM}.{YY} {H}:{mm}","","\n{DD}.{MM} {H}:{mm}","","\n{H}:{mm}","",1]]},"plugins":[{"plugin":"keepZoomLevelPlugin","enabled":true,"panWithData":true,"defaultZoom":40,"defaultZoomPeriod":1},{"plugin":"wheelPanZoomPlugin","enabled":true,"factor":0.75},{"plugin":"touchZoomPlugin","enabled":false}],"dataPlugins":[{"plugin":"limitColumns","enabled":true,"columns":360,"limitColumnsEvery":1,"limitColumnsPeriods":0,"applyTo":""},{"plugin":"limitTime","enabled":true,"last":1,"period":60,"limitTimeEvery":1,"limitTimePeriods":3600,"checkEvery":1,"applyTo":""}],"dataStore":{"context":"node","store":"memory"},"debugServer":true,"debugClient":true,"spaceForTitle":"50","spaceForLegend":"50","x":1030,"y":440,"wires":[[]]},{"id":"6906ea9cb698ed10","type":"function","z":"db39bbbe01b608ed","g":"efaf64859ad96c94","name":"sin(x)","func":"msg.topic = \"sin\"\nmsg.payload = Math.sin(msg.payload * 0.01745 )\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":700,"y":460,"wires":[["a93cc4c027d3dcb5","a5bd5983128459cd"]]},{"id":"8adedbe57e5d2578","type":"ui_chart","z":"db39bbbe01b608ed","g":"efaf64859ad96c94","name":"","group":"24fc69b5f111f444","order":5,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"mm:ss.SSS","interpolate":"linear","nodata":"","dot":true,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"360","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":1010,"y":500,"wires":[[]]},{"id":"a5bd5983128459cd","type":"switch","z":"db39bbbe01b608ed","g":"efaf64859ad96c94","name":"","property":"speedDestination","propertyType":"flow","rules":[{"t":"eq","v":"1","vt":"num"},{"t":"eq","v":"2","vt":"num"},{"t":"eq","v":"3","vt":"num"}],"checkall":"true","repair":false,"outputs":3,"x":850,"y":460,"wires":[["52d5dfd0e14f1040"],["8adedbe57e5d2578"],["52d5dfd0e14f1040","8adedbe57e5d2578"]]},{"id":"b81013e994aa666c","type":"ui_dropdown","z":"db39bbbe01b608ed","g":"efaf64859ad96c94","name":"","label":"Destination","tooltip":"","place":"Select option","group":"5053dc5d780ac32f","order":3,"width":0,"height":0,"passthru":true,"multiple":false,"options":[{"label":"uPlot","value":1,"type":"num"},{"label":"chart","value":2,"type":"num"},{"label":"both","value":"3","type":"str"}],"payload":"","topic":"speedDest","topicType":"str","x":330,"y":580,"wires":[["685918eccce614b7"]]},{"id":"685918eccce614b7","type":"change","z":"db39bbbe01b608ed","g":"efaf64859ad96c94","name":"","rules":[{"t":"set","p":"speedDestination","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":600,"y":580,"wires":[[]]},{"id":"3fa2eb0b3f3648c0","type":"inject","z":"db39bbbe01b608ed","g":"efaf64859ad96c94","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"speedDestination","payload":"1","payloadType":"num","x":150,"y":580,"wires":[["b81013e994aa666c"]]},{"id":"5053dc5d780ac32f","type":"ui_group","name":"Speed Test settings","tab":"2a3e5faf927e1808","order":1,"disp":true,"width":"18","collapse":false},{"id":"e6be242af5f773d3","type":"ui_group","name":"uPlot","tab":"2a3e5faf927e1808","order":2,"disp":true,"width":"18","collapse":true},{"id":"24fc69b5f111f444","type":"ui_group","name":"Chart","tab":"2a3e5faf927e1808","order":3,"disp":true,"width":"18","collapse":true},{"id":"2a3e5faf927e1808","type":"ui_tab","name":"uPlot Speedtest","icon":"dashboard","order":3,"disabled":false,"hidden":false}]

[vikingsraven]

HI Christian , thanks for the quick reply! Ok I'm using Dashboard 3.04 , its telling me there's and update ill do that now then try it an finish this message ok now 3.1.0 , sorry no change same thing. Really like the cubic spline , nice one.

Just tried the speed test, uplot not showing up is that another node plugin? fast though nice!

[vikingsraven]

layout is showing it to the right

[Christian-Me]

Perhaps there is a change from the old 2.3 dashboard i'm using to 3.x ... Will have to look into that later. Do you see any errors in the browser log (client) or node-red (server). It looks like a server side related bug as the group don't show up at all - but you never know.

Really like the cubic spline , nice one.

jep, this is the best implementation I ever seen. not these nasty overshoots like the chart node show. (but the credits go to uPlot)

[vikingsraven]

ok running the high speed test, the uplot screen doesnt show up, even by itself, so i deleted the one in the group box and put a new node back in, made sure it was in the correct ui group and voila its now running. i Disable the switch function and took the payload straight from the sin function to botht the chart and the uplot.

i fed the sin topic to the one i had on my screen before this and it was reading ok if i redeploy the code i get another instance of uplot appearing on both pages, ( my test page now has 16 instance of it lol) Im not a software engineer so i cant assist more than testing for you.

[vikingsraven]

got this from the node red session on the command line

28 Oct 11:26:14 - [info] Server now running at http://127.0.0.1:1880/ 28 Oct 11:26:14 - [info] Starting flows 28 Oct 11:26:14 - [info] [ui_uplot-charts:52d5dfd0e14f1040] data storage initialized context:"node" property:"52d5dfd0e14f1040" store:"memory" setLogger ok 28 Oct 11:26:14 - [info] [ui_uplot-charts:52d5dfd0e14f1040] remappedRows to [sin] TypeError: Cannot read property 'memory' of undefined at new uPlotUINode (C:\Users\usernamehere\node_modules\node-red-contrib-ui-uplot-charts\ui-uplot-charts.js:269:230) at Object.createNode (C:\Users\usernamehere\AppData\Roaming\npm\node_modules\node-red\node_modules\@node-red\runtime\lib\flows\util.js:87:27) at Flow.start (C:\Users\usernamehere\AppData\Roaming\npm\node_modules\node-red\node_modules\@node-red\runtime\lib\flows\Flow.js:206:48) at start (C:\Users\usernamehere\AppData\Roaming\npm\node_modules\node-red\node_modules\@node-red\runtime\lib\flows\index.js:371:33) 28 Oct 11:26:14 - [info] Started flows 28 Oct 11:27:06 - [info] Stopping flows 28 Oct 11:27:06 - [info] Stopped flows 28 Oct 11:27:06 - [info] Starting flows 28 Oct 11:27:06 - [info] [ui_uplot-charts:52d5dfd0e14f1040] data storage initialized context:"node" property:"52d5dfd0e14f1040" store:"memory" setLogger ok

[Christian-Me]

That help me a lot ... funny your screenshot shows the how the chart node lags behind on higher updates. In my test environment node-red (node.js) is the limiting factor not able to pump out significant more than 150 msg/s.

Now I know where the problem with the example flows origin:

28 Oct 11:26:14 - [info] [ui_uplot-charts:52d5dfd0e14f1040] remappedRows to [sin] TypeError: Cannot read property 'memory' of undefined at new uPlotUINode (C:\Users\usernamehere\node_modules\node-red-contrib-ui-uplot-charts\ui-uplot-charts.js:269:230) at Object.createNode (C:\Users\usernamehere\AppData\Roaming\npm\node_modules\node-red\node_modules@node-red\runtime\lib\flows\util.js:87:27) at Flow.start (C:\Users\usernamehere\AppData\Roaming\npm\node_modules\node-red\node_modules@node-red\runtime\lib\flows\Flow.js:206:48) at start (C:\Users\usernamehere\AppData\Roaming\npm\node_modules\node-red\node_modules@node-red\runtime\lib\flows\index.js:371:33)

my settings.js is likely different than yours

     /** Context Storage
      * The following property can be used to enable context storage. The configuration
      * provided here will enable file-based context that flushes to disk every 30 seconds.
      * Refer to the documentation for further options: https://nodered.org/docs/api/context/
      */
     contextStorage: {
        default: "memory",
         memory: {
             module:"memory"
         },
         file: {
             module:"localfilesystem"
         },
     },

[vikingsraven]

Yeah mines set as the default! ah i may have helped awesome :)

[Christian-Me]

OK ... no contextStorage definition should be working with Version 0.0.4 - I hope

[vikingsraven]

npm WARN node-red-contrib-ui-uplot-charts@0.0.3 requires a peer of node-red-dashboard@>2.15.0 but none is installed. You must install peer dependencies yourself.

not a biggy but just for your info

[Christian-Me]

Hmmm that originates from the prototype node I used for all my dashboard nodes

https://github.com/node-red/node-red-ui-nodes/blob/master/node-red-node-ui-mylittleuinode/package.json

Should only pop up if you don't have the dashboard installed (or a version older than 2.15) npm: an ongoing mystery - just ignore it

[Christian-Me]

anything unsolved from this issue? Are the ghost widgets gone and preparing for Halloween?

[vikingsraven]

hi sorry been , working away from home, back now so can have a look and follow up

[vikingsraven]

hi , just uploaded 0.0.6, ran the speed test script, deployed came up fine, redeployed another widget opened as before. Sorry

[vikingsraven]

HI, ok back onto this. When i have deleted the Tabs and the groups that had the uplots chart in it , i refreshed the web browser after deploying and none of the ui pages for the uplot graphs go. so i have 3 tabs that are no existent. and the Dashboard UI tabs shows

[vikingsraven]

interestingly , when i went to assign a new UI Group to the Uplot unit after removing the old Tabs i got this.

TypeError: Cannot read property 'id' of null
    at new uPlotUINode (C:\Users\MarkStillman\.node-red\node_modules\node-red-contrib-ui-uplot-charts\ui-uplot-charts.js:351:40)
    at Object.createNode (C:\Users\MarkStillman\AppData\Roaming\npm\node_modules\node-red\node_modules\@node-red\runtime\lib\flows\util.js:89:27)
    at Flow.start (C:\Users\MarkStillman\AppData\Roaming\npm\node_modules\node-red\node_modules\@node-red\runtime\lib\flows\Flow.js:206:48)
    at start (C:\Users\MarkStillman\AppData\Roaming\npm\node_modules\node-red\node_modules\@node-red\runtime\lib\flows\index.js:371:33)```

[Christian-Me]

Thank you for your feedback. Just wonder if you tried to setup a chart from scratch without using the examples. What happens after full deploy or even restart?

Think I have to setup a unmodified node red instance to check the demos before deployment. It is much easier to fix a bug if I can reproduce it. But beside this going through your posts again I came up with new ideas to look into. Thanx! Sorry for the delays.

[vikingsraven]

hi no probs. ive just pulled the staright node in this time into a project im working on. i set the size to 12 x 4 , but its appearing in screen as a full width widget. Also i have added 2 sources Solar_in and Batt_Out , when i deploy it has 4 series appear series 3 is s duplicate of series 1 and series 4 has no name, if i delete them and then deploy they come back.

see below code, the graph should appear between the 2 gauges! gaugetes.txt

[vikingsraven]

couldnt work out how to download the inspection file on brave so cut and paste it here, so nothing in noe red- before restart but showing the 6 graph ui instances on the main ui page

it apperas they all have same node id , i have copied contents of the ui panel section

on restart of node red all clear! i hope info is helpful, dont want to put too much onto you!

[vikingsraven]

reloaded added graphui , then on deploy got this

21 Feb 15:33:08 - [info] Stopping flows
21 Feb 15:33:08 - [info] Stopped flows
21 Feb 15:33:08 - [info] Starting flows
undefined undefined
ReferenceError: _node is not defined
    at checkConfig (C:\Users\MarkStillman\.node-red\node_modules\node-red-contrib-ui-uplot-charts\ui-uplot-charts.js:45:13)
    at new uPlotUINode (C:\Users\MarkStillman\.node-red\node_modules\node-red-contrib-ui-uplot-charts\ui-uplot-charts.js:344:17)
    at Object.createNode (C:\Users\MarkStillman\AppData\Roaming\npm\node_modules\node-red\node_modules\@node-red\runtime\lib\flows\util.js:89:27)
    at Flow.start (C:\Users\MarkStillman\AppData\Roaming\npm\node_modules\node-red\node_modules\@node-red\runtime\lib\flows\Flow.js:206:48)
    at start (C:\Users\MarkStillman\AppData\Roaming\npm\node_modules\node-red\node_modules\@node-red\runtime\lib\flows\index.js:371:33)
21 Feb 15:33:08 - [info] Started flows

looking at the commandline i got this earlier but missed it

21 Feb 14:48:05 - [info] [worldmap:cce85a8be52ce929] started at /worldmap
undefined memory
TypeError: Cannot read property 'id' of null
    at new uPlotUINode (C:\Users\MarkStillman\.node-red\node_modules\node-red-contrib-ui-uplot-charts\ui-uplot-charts.js:351:40)
    at Object.createNode (C:\Users\MarkStillman\AppData\Roaming\npm\node_modules\node-red\node_modules\@node-red\runtime\lib\flows\util.js:89:27)
    at Flow.start (C:\Users\MarkStillman\AppData\Roaming\npm\node_modules\node-red\node_modules\@node-red\runtime\lib\flows\Flow.js:206:48)
    at start (C:\Users\MarkStillman\AppData\Roaming\npm\node_modules\node-red\node_modules\@node-red\runtime\lib\flows\index.js:371:33)
undefined memory
21 Feb 14:48:05 - [info] Started flows

[vikingsraven]

bit more , i just started looking at the ui-plot-charts.js. Im no coder in JavaScript but do some python. i went n and put a console.log("killingplot") in line 686 to see if it was calling the $scope.uPlot.destroy(). well its getting into that part of the code fine on a redeploy, but it looks like uPlot.destroy() isn't doing anything! from the uPlot.js

    function destroy() {
        FEAT_CURSOR && sync.unsub(self);
        FEAT_CURSOR && cursorPlots.delete(self);
        mouseListeners.clear();
        off(dppxchange, win, syncPxRatio);
        root.remove();
        fire("destroy");
    }

    self.destroy = destroy;

cant see any bugs on the github pages for it an no documentation either.

[Christian-Me]

undefined memory TypeError: Cannot read property 'id' of null at new uPlotUINode (C:\Users\MarkStillman.node-red\node_modules\node-red-contrib-ui-uplot-charts\ui-uplot-charts.js:351:40) at Object.createNode (C:\Users\MarkStillman\AppData\Roaming\npm\node_modules\node-red\node_modules\@node-red\runtime\lib\flows\util.js:89:27) at Flow.start (C:\Users\MarkStillman\AppData\Roaming\npm\node_modules\node-red\node_modules\@node-red\runtime\lib\flows\Flow.js:206:48) at start (C:\Users\MarkStillman\AppData\Roaming\npm\node_modules\node-red\node_modules\@node-red\runtime\lib\flows\index.js:371:33) undefined memory

This tells me that the the storage / context store is not configured correctly (and the error is not catched) I thought I solved the issue in the last update (on github)... Have to look into it - when I find some time.