Layout Editor Issue

Hello,

I have seen versions of this issue on the forum but the solutions posted are not fixing the issue for me.

I'm experiencing an issue where the Layout Editor becomes unresponsive. If I click and drag an object it highlights text instead of moving. If I click the "Lock/Unlock" icon it locks/unlocks but it does not allow me to resize the object (no arrows in bottom right corner). This has occurred a few times in the past but a simple browser refresh used to fix the problem. Now since updating to Node-RED v3.0.0 it seems to occur much more frequently, not sure if it's related. If I access the editor using Chromium on the Pi the layout editor works fine. So it seems to be an issue with Chrome on the PC.

Here are a list of Dashboard nodes I'm using:
node-red-dashboard v3.1.7
node-red-contrib-ui-artless-gauge v0.3.11
node-red-contrib-ui-digital-display v1.0.3
node-red-contrib-ui-media v1.2.0
node-red-contrib-ui-multistate-switch v1.2.3

Here is more information about my setup:
Node-RED running on a Raspberry Pi 4 (RPI OS Bullseye)
Accessing editor and dashboard from PC (Windows 10)
Node-RED v3.0.0
Node.js v16.16.0
Chrome v103.0.5060.134

Here is what I've tried to fix the issue:

  1. Browser refresh
  2. Stop and Start Node-RED
  3. Stop Node-RED and reboot Pi
  4. Reboot PC accessing the editor
  5. Use "delete browser history" to delete cookies, and cached images, then rebooted Pi and PC
  6. Deleted configuration nodes called "spacer" that were automatically made then repeated step 5

None of these fixed my issue. While I'm interested in a way to fix it, I'm also interested in why it is happening much more frequently all of a sudden. As far as I know I'm not doing anything different from what I've done in the past and I've been using Node-RED for over two years now. My Chrome browser is managed by my organization so I have little control over it but I'm not aware of a recent update.

You are not alone. I too have been plagued by this problem of spacers. Sorry I can't be of more help, as it appears to be very intermittent.

However, I can verify that my system did NOT have these installed when the issue last happened.
node-red-contrib-ui-artless-gauge v0.3.11
node-red-contrib-ui-digital-display v1.0.3
node-red-contrib-ui-media v1.2.0
node-red-contrib-ui-multistate-switch v1.2.3
So I doubt they are in any way related.

Without seeing the layout you are trying to create or you have there is no clue. One is for sure - the widgets, contributed or dashboard default ones can't affect the layout editor runtime.

I will export the current program I'm working on but this issue has happened with all different kinds of layouts. The strange thing to me is that since I have been using Node-RED I almost always run it on a Raspberry Pi and access the editor and dashboard from my PC. However only within the last month or two has this issue been happening frequently.

The only solution I have found (only tried once), was to copy the nodes, delete the project, create a new project, then paste the nodes back in.

I was surprised when I learned that accessing the editor from Chromium on the Pi worked fine. Not sure what is causing the issue to happen in Chrome on the PC.

[{"id":"263dc6d8de50a8eb","type":"tab","label":"Tab 1","disabled":false,"info":"Dashboard Examples","env":[]},{"id":"340186b266deffd5","type":"tab","label":"Tab 2","disabled":false,"info":"Final Product Demo","env":[]},{"id":"4f7ddb733af042e6","type":"tab","label":"Tab 3","disabled":false,"info":"ADS Demo","env":[]},{"id":"41d8122fb9167edb","type":"tab","label":"Flow 2","disabled":false,"info":"","env":[]},{"id":"846e4ef7bc87dcb8","type":"ui_base","theme":{"name":"theme-dark","lightTheme":{"default":"#0094CE","baseColor":"#0094CE","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":true,"reset":false},"darkTheme":{"default":"#097479","baseColor":"#0081b6","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":true,"reset":false},"customTheme":{"name":"Untitled Theme 1","default":"#4B7930","baseColor":"#0081b6","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","reset":false},"themeState":{"base-color":{"default":"#097479","value":"#097479","edited":true},"page-titlebar-backgroundColor":{"value":"#0081b6","edited":false},"page-backgroundColor":{"value":"#111111","edited":true},"page-sidebar-backgroundColor":{"value":"#333333","edited":true},"group-textColor":{"value":"#0eb8c0","edited":true},"group-borderColor":{"value":"#555555","edited":true},"group-backgroundColor":{"value":"#333333","edited":true},"widget-textColor":{"value":"#eeeeee","edited":true},"widget-backgroundColor":{"value":"#0081b6","edited":false},"widget-borderColor":{"value":"#333333","edited":true},"base-font":{"value":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"}},"angularTheme":{"primary":"indigo","accents":"blue","warn":"red","background":"grey","palette":"light"}},"site":{"name":"Node-RED Dashboard","hideToolbar":"false","allowSwipe":"false","lockMenu":"false","allowTempTheme":"true","dateFormat":"DD/MM/YYYY","sizes":{"sx":48,"sy":48,"gx":6,"gy":6,"cx":6,"cy":6,"px":0,"py":0}}},{"id":"5fd67b7e8ac7a0c7","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1,"disabled":false,"hidden":false},{"id":"ddb3b9b1695974bd","type":"ui_group","name":"Group 1","tab":"5fd67b7e8ac7a0c7","order":1,"disp":true,"width":6},{"id":"7daf81e3700e65c3","type":"ui_group","name":"Group 2","tab":"5fd67b7e8ac7a0c7","order":2,"disp":true,"width":6},{"id":"26370cbdfcb879ee","type":"ui_group","name":"Group 3","tab":"5fd67b7e8ac7a0c7","order":3,"disp":true,"width":"6","collapse":false,"className":""},{"id":"adac42990fd2dab1","type":"ui_group","name":"Group 4","tab":"5fd67b7e8ac7a0c7","order":4,"disp":true,"width":6},{"id":"e6dd877acd1125d5","type":"ui_tab","name":"Tab 2","icon":"dashboard","order":3},{"id":"b522d1330cf211c5","type":"ui_group","name":"Room Temperatures","tab":"e6dd877acd1125d5","order":1,"disp":true,"width":"20","collapse":false,"className":""},{"id":"2011da4e59608a03","type":"ui_group","name":"Test Request ID","tab":"e6dd877acd1125d5","order":2,"disp":true,"width":8,"collapse":false,"className":""},{"id":"2efa4a1cedf846b9","type":"ui_group","name":"Coil Temperatures","tab":"e6dd877acd1125d5","order":3,"disp":true,"width":"8","collapse":false,"className":""},{"id":"415c5f9a04bbcac7","type":"ui_group","name":"Unit Controls","tab":"e6dd877acd1125d5","order":5,"disp":true,"width":8,"collapse":false,"className":""},{"id":"fc261688174d6915","type":"ui_group","name":"Unit Temperatures","tab":"e6dd877acd1125d5","order":4,"disp":true,"width":"20","collapse":false,"className":""},{"id":"663e0a1556d65f2f","type":"ui_group","name":"Group 6","tab":"e6dd877acd1125d5","order":6,"disp":false,"width":"8","collapse":false,"className":""},{"id":"ee345e71ae18222d","type":"ui_tab","name":"Tab 3","icon":"dashboard","order":2},{"id":"c7ebf0fc0c529e3c","type":"ui_group","name":"Group 2","tab":"ee345e71ae18222d","order":2,"disp":false,"width":"8","collapse":false,"className":""},{"id":"72ef3cd99c50d5e0","type":"ui_group","name":"Group 1","tab":"ee345e71ae18222d","order":1,"disp":false,"width":"8","collapse":false,"className":""},{"id":"d34d2cfb9e58a434","type":"ui_spacer","z":"263dc6d8de50a8eb","name":"spacer","group":"7daf81e3700e65c3","order":3,"width":2,"height":1},{"id":"7c6b9c221d7c8ea1","type":"ui_spacer","z":"263dc6d8de50a8eb","name":"spacer","group":"7daf81e3700e65c3","order":4,"width":2,"height":1},{"id":"4879c189c669c84f","type":"ui_spacer","z":"263dc6d8de50a8eb","name":"spacer","group":"7daf81e3700e65c3","order":5,"width":2,"height":1},{"id":"e8529973dd044ce3","type":"ui_spacer","z":"263dc6d8de50a8eb","name":"spacer","group":"7daf81e3700e65c3","order":6,"width":2,"height":1},{"id":"9805ae3ca2e1cb49","type":"ui_spacer","z":"263dc6d8de50a8eb","name":"spacer","group":"26370cbdfcb879ee","order":3,"width":2,"height":1},{"id":"1865ab4436e5fe0c","type":"ui_spacer","z":"263dc6d8de50a8eb","name":"spacer","group":"26370cbdfcb879ee","order":4,"width":2,"height":1},{"id":"b5e80d1df32099bc","type":"ui_spacer","z":"263dc6d8de50a8eb","name":"spacer","group":"26370cbdfcb879ee","order":5,"width":2,"height":1},{"id":"c81ca0c76253c955","type":"ui_spacer","z":"263dc6d8de50a8eb","name":"spacer","group":"26370cbdfcb879ee","order":6,"width":2,"height":1},{"id":"068d354094e97b4c","type":"ui_spacer","z":"263dc6d8de50a8eb","name":"spacer","group":"adac42990fd2dab1","order":3,"width":2,"height":1},{"id":"176ac90ccb68def7","type":"ui_spacer","z":"263dc6d8de50a8eb","name":"spacer","group":"adac42990fd2dab1","order":5,"width":2,"height":1},{"id":"8fbe2991f104a0e1","type":"ui_spacer","z":"263dc6d8de50a8eb","name":"spacer","group":"adac42990fd2dab1","order":6,"width":2,"height":1},{"id":"e0e0a00991ecb2e4","type":"ui_spacer","z":"263dc6d8de50a8eb","name":"spacer","group":"adac42990fd2dab1","order":7,"width":2,"height":1},{"id":"8a494810bf6bb018","type":"ui_spacer","z":"263dc6d8de50a8eb","name":"spacer","group":"adac42990fd2dab1","order":8,"width":2,"height":1},{"id":"53c16d21a697b569","type":"ui_spacer","z":"41d8122fb9167edb","name":"spacer","group":"72ef3cd99c50d5e0","order":4,"width":2,"height":1},{"id":"bab4c8da2799deb9","type":"ui_spacer","z":"41d8122fb9167edb","name":"spacer","group":"c7ebf0fc0c529e3c","order":6,"width":1,"height":1},{"id":"fd38def8e0ae797f","type":"ui_spacer","z":"41d8122fb9167edb","name":"spacer","group":"c7ebf0fc0c529e3c","order":7,"width":2,"height":1},{"id":"bafac4333becb579","type":"ui_spacer","z":"41d8122fb9167edb","name":"spacer","group":"c7ebf0fc0c529e3c","order":13,"width":4,"height":1},{"id":"fca678ae26db19e9","type":"ui_switch","z":"263dc6d8de50a8eb","name":"","label":"switch","tooltip":"","group":"adac42990fd2dab1","order":1,"width":3,"height":1,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"1","onvalueType":"str","onicon":"","oncolor":"","offvalue":"stop","offvalueType":"str","officon":"","offcolor":"","animate":false,"className":"","x":230,"y":220,"wires":[["1da719653f857318","f4cda137cf4ec150"]]},{"id":"1da719653f857318","type":"ui_led","z":"263dc6d8de50a8eb","order":2,"group":"adac42990fd2dab1","width":1,"height":1,"label":"","labelPlacement":"left","labelAlignment":"left","colorForValue":[{"color":"#ff0000","value":"stop","valueType":"str"},{"color":"#008000","value":"1","valueType":"str"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":true,"name":"","x":370,"y":200,"wires":[]},{"id":"30241272a457a808","type":"ui_button","z":"263dc6d8de50a8eb","name":"","group":"ddb3b9b1695974bd","order":2,"width":3,"height":1,"passthru":false,"label":"Start","tooltip":"","color":"","bgcolor":"green","className":"","icon":"","payload":"1","payloadType":"str","topic":"topic","topicType":"msg","x":230,"y":60,"wires":[["3138f6965f3a5c58"]]},{"id":"3138f6965f3a5c58","type":"trigger","z":"263dc6d8de50a8eb","name":"","op1":"1","op2":"0","op1type":"str","op2type":"str","duration":"-1","extend":false,"overrideDelay":false,"units":"s","reset":"stop","bytopic":"all","topic":"topic","outputs":1,"x":400,"y":80,"wires":[["819cb7734b6626d2"]]},{"id":"819cb7734b6626d2","type":"random","z":"263dc6d8de50a8eb","name":"","low":1,"high":10,"inte":"true","property":"payload","x":560,"y":80,"wires":[["4cd8e1ca3c16ce04"]]},{"id":"4cd8e1ca3c16ce04","type":"ui_chart","z":"263dc6d8de50a8eb","name":"","group":"ddb3b9b1695974bd","order":1,"width":0,"height":0,"label":"chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"0","ymax":"10","removeOlder":"10","removeOlderPoints":"","removeOlderUnit":"1","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":690,"y":80,"wires":[[]]},{"id":"87bc4cb07c295e95","type":"ui_button","z":"263dc6d8de50a8eb","name":"","group":"ddb3b9b1695974bd","order":3,"width":3,"height":1,"passthru":false,"label":"Stop","tooltip":"","color":"","bgcolor":"red","className":"","icon":"","payload":"stop","payloadType":"str","topic":"topic","topicType":"msg","x":230,"y":100,"wires":[["3138f6965f3a5c58"]]},{"id":"75fda9c5b8b4882a","type":"ui_slider","z":"263dc6d8de50a8eb","name":"","label":"slider","tooltip":"","group":"7daf81e3700e65c3","order":1,"width":0,"height":0,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":"100","step":"0.1","className":"","x":950,"y":80,"wires":[["43f5e2cbf05344cd"]]},{"id":"43f5e2cbf05344cd","type":"ui_artlessgauge","z":"263dc6d8de50a8eb","group":"7daf81e3700e65c3","order":2,"width":4,"height":4,"name":"","icon":"fa-tint","label":"","unit":"%RH","layout":"radial","decimals":"1","differential":false,"minmax":false,"colorTrack":"#555555","style":"","colorFromTheme":true,"property":"payload","secondary":"secondary","inline":true,"animate":true,"sectors":[{"val":0,"col":"#ff9900","t":"min","dot":0},{"val":100,"col":"#ff9900","t":"max","dot":0}],"lineWidth":"7","bgcolorFromTheme":true,"diffCenter":"","x":1140,"y":60,"wires":[]},{"id":"3084b841d7f6f010","type":"ui_text_input","z":"263dc6d8de50a8eb","name":"","label":"Value","tooltip":"","group":"26370cbdfcb879ee","order":1,"width":0,"height":0,"passthru":true,"mode":"number","delay":"0","topic":"topic","sendOnBlur":true,"className":"","topicType":"msg","x":950,"y":140,"wires":[["033e7fd0ecaa5858"]]},{"id":"033e7fd0ecaa5858","type":"ui_gauge","z":"263dc6d8de50a8eb","name":"","group":"26370cbdfcb879ee","order":2,"width":4,"height":4,"gtype":"wave","title":"Flow Meter","label":" FPM","format":"{{value}}","min":0,"max":"100","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","className":"","x":1110,"y":140,"wires":[]},{"id":"24a86619680bd73d","type":"ui_gauge","z":"263dc6d8de50a8eb","name":"","group":"adac42990fd2dab1","order":4,"width":4,"height":4,"gtype":"donut","title":"","label":"Value Add","format":"{{value}}","min":0,"max":10,"colors":["#ca3838","#e6e600","#00ae00"],"seg1":"","seg2":"","className":"","x":690,"y":240,"wires":[]},{"id":"f4cda137cf4ec150","type":"trigger","z":"263dc6d8de50a8eb","name":"","op1":"1","op2":"0","op1type":"str","op2type":"str","duration":"-1","extend":false,"overrideDelay":false,"units":"s","reset":"stop","bytopic":"all","topic":"topic","outputs":1,"x":400,"y":240,"wires":[["cca8b8713c832e73"]]},{"id":"cca8b8713c832e73","type":"random","z":"263dc6d8de50a8eb","name":"","low":1,"high":10,"inte":"true","property":"payload","x":560,"y":240,"wires":[["24a86619680bd73d"]]},{"id":"02b87834b4e190a1","type":"ui_media","z":"263dc6d8de50a8eb","group":"663e0a1556d65f2f","name":"","width":4,"height":2,"order":2,"category":"logo","file":"JCI_logo_color_RGB_Mar2019.png","layout":"adjust","showcontrols":false,"loop":false,"onstart":false,"scope":"local","tooltip":"","x":950,"y":220,"wires":[[]]},{"id":"adba45cb5a380450","type":"inject","z":"340186b266deffd5","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":210,"y":240,"wires":[["bda206a3fdf2d4b3","249ef83a9f16c503","63a3f433c9c255b8","84701b314a8627d4","a07e981e903c34cd","bb67e3ed8c4a2992","fd1f938b1edda857","2ca150dd9ca203c0","31e34e006dd6c44c"]]},{"id":"1e236fc958603a07","type":"ui_digital_display","z":"340186b266deffd5","name":"","group":"2011da4e59608a03","order":2,"width":6,"height":3,"digits":"4","decimals":"0","x":580,"y":100,"wires":[]},{"id":"bda206a3fdf2d4b3","type":"random","z":"340186b266deffd5","name":"","low":"6817","high":"6817","inte":"true","property":"payload","x":400,"y":100,"wires":[["1e236fc958603a07"]]},{"id":"249ef83a9f16c503","type":"random","z":"340186b266deffd5","name":"","low":"67","high":"70.0","inte":"false","property":"payload","x":400,"y":140,"wires":[["dce446fa18f9fa35"]]},{"id":"7652c0cb0bdaa3fd","type":"ui_text","z":"340186b266deffd5","group":"2efa4a1cedf846b9","order":1,"width":4,"height":1,"name":"","label":"Condenser Coil 1","format":"{{msg.payload | number:2}}","layout":"col-center","className":"","x":590,"y":300,"wires":[]},{"id":"cf2c2d4f8cfcf66c","type":"ui_text","z":"340186b266deffd5","group":"2efa4a1cedf846b9","order":3,"width":4,"height":1,"name":"","label":"Condenser Coil 2","format":"{{msg.payload | number:2}}","layout":"col-center","className":"","x":590,"y":340,"wires":[]},{"id":"63a3f433c9c255b8","type":"random","z":"340186b266deffd5","name":"","low":"81.2","high":"81.4","inte":"false","property":"payload","x":400,"y":300,"wires":[["7652c0cb0bdaa3fd"]]},{"id":"84701b314a8627d4","type":"random","z":"340186b266deffd5","name":"","low":"83.6","high":"83.9","inte":"false","property":"payload","x":400,"y":340,"wires":[["cf2c2d4f8cfcf66c"]]},{"id":"746954570539e057","type":"ui_text","z":"340186b266deffd5","group":"2efa4a1cedf846b9","order":2,"width":4,"height":1,"name":"","label":"Evaperator Coil 1","format":"{{msg.payload | number:2}}","layout":"col-center","className":"","x":590,"y":380,"wires":[]},{"id":"31bf22cefa01bcd7","type":"ui_text","z":"340186b266deffd5","group":"2efa4a1cedf846b9","order":4,"width":4,"height":1,"name":"","label":"Evaperator Coil 2","format":"{{msg.payload | number:2}}","layout":"col-center","className":"","x":590,"y":420,"wires":[]},{"id":"a07e981e903c34cd","type":"random","z":"340186b266deffd5","name":"","low":"81.9","high":"82","inte":"false","property":"payload","x":400,"y":380,"wires":[["746954570539e057"]]},{"id":"bb67e3ed8c4a2992","type":"random","z":"340186b266deffd5","name":"","low":"81.2","high":"81.4","inte":"false","property":"payload","x":400,"y":420,"wires":[["31bf22cefa01bcd7"]]},{"id":"389f4213d218308b","type":"ui_switch","z":"340186b266deffd5","name":"","label":"ID Fan","tooltip":"","group":"415c5f9a04bbcac7","order":5,"width":3,"height":1,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"","x":970,"y":100,"wires":[["57af6f036626bd7e"]]},{"id":"569f27801e9285ac","type":"ui_switch","z":"340186b266deffd5","name":"","label":"Comp. 1","tooltip":"","group":"415c5f9a04bbcac7","order":9,"width":3,"height":1,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"","x":980,"y":140,"wires":[["c90a54db34a24716"]]},{"id":"d4488fbe6ee08d84","type":"ui_switch","z":"340186b266deffd5","name":"","label":"Comp. 2","tooltip":"","group":"415c5f9a04bbcac7","order":13,"width":3,"height":1,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"","x":980,"y":180,"wires":[["f2b82940086c2624"]]},{"id":"4190f7954f856051","type":"ui_switch","z":"340186b266deffd5","name":"","label":"Ctrl Pwr","tooltip":"","group":"415c5f9a04bbcac7","order":11,"width":3,"height":1,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"","x":980,"y":220,"wires":[["0fbd2b0d83e9af25"]]},{"id":"57af6f036626bd7e","type":"ui_led","z":"340186b266deffd5","order":6,"group":"415c5f9a04bbcac7","width":1,"height":1,"label":"","labelPlacement":"left","labelAlignment":"left","colorForValue":[{"color":"#008000","value":"true","valueType":"bool"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":true,"name":"id","x":1130,"y":100,"wires":[]},{"id":"c90a54db34a24716","type":"ui_led","z":"340186b266deffd5","order":10,"group":"415c5f9a04bbcac7","width":1,"height":1,"label":"","labelPlacement":"left","labelAlignment":"left","colorForValue":[{"color":"#008000","value":"true","valueType":"bool"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":true,"name":"c1","x":1130,"y":140,"wires":[]},{"id":"f2b82940086c2624","type":"ui_led","z":"340186b266deffd5","order":14,"group":"415c5f9a04bbcac7","width":1,"height":1,"label":"","labelPlacement":"left","labelAlignment":"left","colorForValue":[{"color":"#008000","value":"true","valueType":"bool"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":true,"name":"c2","x":1130,"y":180,"wires":[]},{"id":"0fbd2b0d83e9af25","type":"ui_led","z":"340186b266deffd5","order":12,"group":"415c5f9a04bbcac7","width":1,"height":1,"label":"","labelPlacement":"left","labelAlignment":"left","colorForValue":[{"color":"#008000","value":"true","valueType":"bool"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":true,"name":"cp","x":1130,"y":220,"wires":[]},{"id":"6f4c4a6d01ee6d5c","type":"ui_switch","z":"340186b266deffd5","name":"","label":"OD Fan 1","tooltip":"","group":"415c5f9a04bbcac7","order":3,"width":3,"height":1,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"","x":980,"y":260,"wires":[["3556319370d04cfc"]]},{"id":"b71e0981de6a4926","type":"ui_switch","z":"340186b266deffd5","name":"","label":"OD Fan 2","tooltip":"","group":"415c5f9a04bbcac7","order":7,"width":3,"height":1,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"","x":980,"y":300,"wires":[["26d70bcfe4309c7d"]]},{"id":"a49bc588c9306eea","type":"ui_switch","z":"340186b266deffd5","name":"","label":"Source 1","tooltip":"","group":"415c5f9a04bbcac7","order":1,"width":3,"height":1,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"true","onvalueType":"bool","onicon":"","oncolor":"","offvalue":"false","offvalueType":"bool","officon":"","offcolor":"","animate":false,"className":"","x":980,"y":340,"wires":[["c863c6ec1bd89d27"]]},{"id":"3556319370d04cfc","type":"ui_led","z":"340186b266deffd5","order":4,"group":"415c5f9a04bbcac7","width":1,"height":1,"label":"","labelPlacement":"left","labelAlignment":"left","colorForValue":[{"color":"#008000","value":"true","valueType":"bool"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":true,"name":"od1","x":1130,"y":260,"wires":[]},{"id":"26d70bcfe4309c7d","type":"ui_led","z":"340186b266deffd5","order":8,"group":"415c5f9a04bbcac7","width":1,"height":1,"label":"","labelPlacement":"left","labelAlignment":"left","colorForValue":[{"color":"#008000","value":"true","valueType":"bool"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":true,"name":"od2","x":1130,"y":300,"wires":[]},{"id":"c863c6ec1bd89d27","type":"ui_led","z":"340186b266deffd5","order":2,"group":"415c5f9a04bbcac7","width":1,"height":1,"label":"","labelPlacement":"left","labelAlignment":"left","colorForValue":[{"color":"#008000","value":"true","valueType":"bool"}],"allowColorForValueInMessage":false,"shape":"circle","showGlow":true,"name":"","x":1130,"y":340,"wires":[]},{"id":"97107d2aca17d48c","type":"ui_chart","z":"340186b266deffd5","name":"","group":"fc261688174d6915","order":1,"width":20,"height":6,"label":"","chartType":"line","legend":"true","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"40","ymax":"80","removeOlder":"30","removeOlderPoints":"","removeOlderUnit":"1","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1eb321","#f00000","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":730,"y":240,"wires":[[]]},{"id":"fd1f938b1edda857","type":"random","z":"340186b266deffd5","name":"","low":"55","high":"58","inte":"false","property":"payload","x":400,"y":220,"wires":[["21dea83c31629c63"]]},{"id":"2ca150dd9ca203c0","type":"random","z":"340186b266deffd5","name":"","low":"65","high":"68","inte":"false","property":"payload","x":400,"y":180,"wires":[["69d8bf51e497e9bf"]]},{"id":"dce446fa18f9fa35","type":"change","z":"340186b266deffd5","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"Zone 1","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":570,"y":140,"wires":[["32773050e749a239"]]},{"id":"69d8bf51e497e9bf","type":"change","z":"340186b266deffd5","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"Zone 2","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":570,"y":180,"wires":[["32773050e749a239"]]},{"id":"32773050e749a239","type":"ui_chart","z":"340186b266deffd5","name":"","group":"b522d1330cf211c5","order":1,"width":20,"height":6,"label":"","chartType":"line","legend":"true","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"40","ymax":"80","removeOlder":"30","removeOlderPoints":"","removeOlderUnit":"1","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#0081b6","#ff7f0e","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":730,"y":160,"wires":[[]]},{"id":"21dea83c31629c63","type":"change","z":"340186b266deffd5","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"Supply","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":570,"y":220,"wires":[["97107d2aca17d48c"]]},{"id":"c5710755dc88937f","type":"change","z":"340186b266deffd5","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"Return","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":570,"y":260,"wires":[["97107d2aca17d48c"]]},{"id":"31e34e006dd6c44c","type":"random","z":"340186b266deffd5","name":"","low":"68","high":"69","inte":"false","property":"payload","x":400,"y":260,"wires":[["c5710755dc88937f"]]},{"id":"0ab329ab5def41d1","type":"ui_button","z":"4f7ddb733af042e6","name":"","group":"c7ebf0fc0c529e3c","order":3,"width":1,"height":1,"passthru":false,"label":"","tooltip":"","color":"","bgcolor":"gray","className":"","icon":"fa-minus","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":270,"y":240,"wires":[[]]},{"id":"2f0e675851738c51","type":"ui_button","z":"4f7ddb733af042e6","name":"","group":"c7ebf0fc0c529e3c","order":4,"width":1,"height":1,"passthru":false,"label":"","tooltip":"","color":"","bgcolor":"gray","className":"","icon":"fa-plus","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":270,"y":280,"wires":[[]]},{"id":"885336f27c31ae74","type":"ui_button","z":"4f7ddb733af042e6","name":"","group":"c7ebf0fc0c529e3c","order":10,"width":4,"height":1,"passthru":false,"label":"<font size=5>Full Close","tooltip":"","color":"","bgcolor":"red","className":"","icon":"mi-close_fullscreen","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":330,"y":160,"wires":[[]]},{"id":"272ead9c1c374121","type":"ui_button","z":"4f7ddb733af042e6","name":"","group":"c7ebf0fc0c529e3c","order":8,"width":8,"height":1,"passthru":false,"label":"<font size=5>Full Open","tooltip":"","color":"","bgcolor":"green","className":"","icon":"mi-open_in_full","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":330,"y":200,"wires":[[]]},{"id":"71497706bc8cc4c7","type":"ui_multistate_switch","z":"4f7ddb733af042e6","name":"size","group":"c7ebf0fc0c529e3c","order":11,"width":4,"height":1,"label":"","stateField":"payload","enableField":"enable","passthroughField":"passthrough","inputMsgField":"inputmsg","rounded":false,"useThemeColors":true,"hideSelectedLabel":false,"multilineLabel":false,"passThrough":"never","inputMsg":"all","userInput":"enabled_show","options":[{"label":"<font size=5>1","value":"option_0","valueType":"str","color":"#009933"},{"label":"<font size=5>1/2","value":"option_1","valueType":"str","color":"#999999"},{"label":"<font size=5>1/4","value":"option_2","valueType":"str","color":"#ff6666"},{"label":"<font size=5>1/8","value":"option_3","valueType":"str","color":"#009999"}],"topic":"","x":270,"y":320,"wires":[[]]},{"id":"5372618f022f5e1d","type":"ui_media","z":"4f7ddb733af042e6","group":"72ef3cd99c50d5e0","name":"","width":3,"height":2,"order":2,"category":"logo","file":"JCI_logo_color_RGB_Mar2019.png","layout":"center","showcontrols":false,"loop":false,"onstart":false,"scope":"local","tooltip":"","x":570,"y":140,"wires":[[]]},{"id":"dc267838ebf49b7b","type":"ui_text","z":"4f7ddb733af042e6","group":"72ef3cd99c50d5e0","order":1,"width":5,"height":2,"name":"","label":"","format":"<font size=8>HS: 12","layout":"row-left","className":"title","x":570,"y":100,"wires":[]},{"id":"edcebd8545734708","type":"ui_multistate_switch","z":"4f7ddb733af042e6","name":"speed","group":"c7ebf0fc0c529e3c","order":14,"width":4,"height":1,"label":"","stateField":"payload","enableField":"enable","passthroughField":"passthrough","inputMsgField":"inputmsg","rounded":false,"useThemeColors":true,"hideSelectedLabel":false,"multilineLabel":false,"passThrough":"never","inputMsg":"all","userInput":"enabled_show","options":[{"label":"<font size=5>Low","value":"option_0","valueType":"str","color":"#009933"},{"label":"<font size=5>High","value":"option_1","valueType":"str","color":"#999999"}],"topic":"","x":270,"y":380,"wires":[[]]},{"id":"94e6f223137be188","type":"ui_chart","z":"4f7ddb733af042e6","name":"","group":"72ef3cd99c50d5e0","order":5,"width":0,"height":0,"label":"","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"0","ymax":"5","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"60","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":990,"y":280,"wires":[[]]},{"id":"ed864e6fe7d6a079","type":"inject","z":"4f7ddb733af042e6","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":710,"y":280,"wires":[["9ae49f490ffcb9a9"]]},{"id":"9ae49f490ffcb9a9","type":"random","z":"4f7ddb733af042e6","name":"","low":"2","high":"2.5","inte":"false","property":"payload","x":860,"y":280,"wires":[["94e6f223137be188"]]},{"id":"11cf413d210df219","type":"ui_digital_display","z":"4f7ddb733af042e6","name":"","group":"c7ebf0fc0c529e3c","order":2,"width":6,"height":3,"digits":"4","decimals":1,"x":1020,"y":340,"wires":[]},{"id":"11a364df038546e6","type":"inject","z":"4f7ddb733af042e6","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"85.2","payloadType":"num","x":870,"y":340,"wires":[["11cf413d210df219"]]},{"id":"39ce217b7a5ac5d9","type":"ui_text","z":"4f7ddb733af042e6","group":"c7ebf0fc0c529e3c","order":9,"width":4,"height":1,"name":"","label":"<font size=4>Step Size","format":"{{msg.payload}}","layout":"row-center","className":"","x":470,"y":320,"wires":[]},{"id":"5b519251082b1158","type":"ui_text","z":"4f7ddb733af042e6","group":"c7ebf0fc0c529e3c","order":12,"width":4,"height":1,"name":"","label":"<font size=4>Speed","format":"{{msg.payload}}","layout":"row-center","className":"","x":460,"y":380,"wires":[]},{"id":"a6763a912208d28e","type":"ui_text","z":"4f7ddb733af042e6","group":"c7ebf0fc0c529e3c","order":1,"width":8,"height":1,"name":"","label":"","format":"<font size =6>Shutter Position %","layout":"row-center","className":"","x":570,"y":60,"wires":[]},{"id":"204a63fd71f1a0f4","type":"ui_dropdown","z":"4f7ddb733af042e6","name":"","label":"","tooltip":"","place":"Select option","group":"72ef3cd99c50d5e0","order":3,"width":6,"height":1,"passthru":true,"multiple":false,"options":[{"label":"Rise Rate (°F)","value":"0","type":"str"},{"label":"Unit Static (\"WC)","value":"1","type":"str"}],"payload":"","topic":"topic","topicType":"msg","className":"","x":980,"y":220,"wires":[[]]},{"id":"9b78ef2795910824","type":"ui_button","z":"4f7ddb733af042e6","name":"","group":"c7ebf0fc0c529e3c","order":5,"width":1,"height":1,"passthru":false,"label":"","tooltip":"","color":"","bgcolor":"gray","className":"","icon":"fa-cog fa-2x","payload":"","payloadType":"str","topic":"topic","topicType":"msg","x":270,"y":440,"wires":[[]]}]

What I see is this

And such things

I'm not sure what is the intention, but I'd guess that is not the right way if doing any styling of dashboard.

I'm a little embarrassed because I saw that on a forum a long time ago when I was first learning how to adjust font sizes and assumed it was ok. I now know better ways of doing this, especially since the CSS tags were introduced. But I find myself reverting to this when I'm in a hurry just to get something up and running to see what it can/will look like.

I will get rid of these and see if it solves the issue but I have ran into this problem several other times when there was no CSS styling of any kind. Just basic dashboard nodes. Also, if this was the cause, why would it cause the layout editor to freeze on Chrome but not Chromium? Just asking out of curiosity.

I do take that statement back. Seeing how the Label field can affect the layout editor - any things can happen if you do such things. I' not sure and having no time to investigate the issue can't say if does affects the layout editor in the manner you are describing but for sure - there is at least some kind of connection.

Tagging @dceejay just to inform.

I appreciate the help.

I went ahead and removed all styling that isn't intrinsic to the nodes. Then I performed all the restarts and reboots of both devices. Still having the same issue.

Then something weird happened.

I created a new project, went through the setup dialog, and was greeted with an empty "Flow 1" pane. However the dashboard layout tab was still populated with all my tabs and groups from the previous project. I refreshed the page and it cleaned the slate, but now my dashboard tab in the editor looks very different. I will post screen shots and identify what is different for me. There are things and options I see now that I've never had before. I apologize for the length this post will be.

Here I have a new tab called "Angular". I have never seen this before.
image

My "light" and "dark" theme pages never had a "Custom Profile" section before.
imageimage

My options for Custom are gone as well.
image

Also my Title is usually populated with the default "Node-RED Dashboard" but here it is blank.

At this point should I just uninstall Node-RED and re-install?

I forgot to mention that I'm still having the same layout editor issue in the new project. I added a new text node and gauge node and that is all that is on the dashboard. But the layout editor still works on Chromium on the Pi.

I'm not sure if a uninstall-reinstall of Node-RED will really make a difference since it appears to be a Chrome issue. Puzzling.

I can't advise cos I don't have any Pi and never fell into such trouble but for sure - clean install will most probably work cos that is most tested situation in any case.

If you don't have any so in production stuff running that may do the thing for you but in any other case - bringing the ready made solution over to the fresh install is also possible. Just find your best possible path.

Strangely enough, I pressed the lock both of the new widgets and then refreshed the page and now everything is working normally. The layout editor is responsive again and it no longer showed the Theme and Angular tabs at the same time. I even imported the flow I posted on this forum (with the bad css styling) and it is working fine.

This was very baffling and I don't feel comfortable marking a solution as I don't feel it will be repeatable for others. As I've seen this issue in several other posts as well, is there a plan to investigate it? Or is it small potatoes compared to other things?

I think at least the Label field affection to the layout editor is for sure the thing to investigate. other findings are kind of not that clearly defied so I doubt about the hard work anybody can put in it. You know it stands on free will ...

2 Likes

I appreciate the help!

I deleted the previous post as I wanted to word it differently to be more clear.

I completed the project listed earlier in this post and moved on to a fresh project. The new project was so early in development, the dashboard only consisted of a few basic dashboard nodes with no formatting. I experienced the same issue where the layout editor was frozen. I refreshed the page, rebooted Node-RED, rebooted Pi, rebooted PC, all had no effect just as mentioned in the post. However, I tried the weird fix that worked last time and to my surprise it worked again.

  1. Lock, Unlock, and Lock all dashboard items.
  2. Deploy
  3. Refresh IDE page

This allowed me to once again move items in the layout editor (normal functionality). No restarts needed. I'm not sure if this will help anyone else or what the cause of this bug is, but at least I seem to have stumbled upon a repeatable solution...for now :wink: