node-red-dashboard icon indicating copy to clipboard operation
node-red-dashboard copied to clipboard
verified publisher icon FlowFuse

Misalignment of 3/4 and half gauges

Open gayanSandamal opened this issue 1 year ago • 2 comments

Current Behavior

Currently the titles height of Gauges (3/4 or half) are not equal even the in the same row. Therefore the gauges are misaligned as shown in the screenshot

Screenshot 2024-09-06 at 14 23 06

Expected Behavior

Gauges with height and width should be aligned correctly

Steps To Reproduce

This flow helps 

[{"id":"6d060dd1c3059464","type":"group","z":"80a7b66be7ea4735","name":"complex shit","style":{"label":true},"nodes":["0626ffef5d6bf418","d0ca81828e137474","6d663d3cf724dadf","7a87c5bb9cbc56fe","758cfc8c6c43ceae","1680625b482c1812","e293f89b53d34a32","0aad743f2b0aecd6","fb6d0fbab3d6cdf3","129e5f0eb26a7e88","248027b35e6440bb","16cd7adb4babb63c","4144977cf520f76e","8ce63824c08ba841","b2a19ac87746e5d3","c804eac5a1026143","c54cb4be9dabf770","bf636fa56256938f","85401062f38fcc62","f4a210873bc80d63","433044fb1e2ec703","a35fdec460aba662","0d96f3151a444f42","b2fbdd2f4859eb40","01b81504c262877b","4b32beadcf910769","c593f20a289c5aa6","44a23d419cbd2ddc","df9f7f9b5d204111","69b497d3c4a10547","e42d3fcb7b20271b","3b661095c3d34125","d0f3236b17c69f9b","3f9a8287e4e18122"],"x":134,"y":2499,"w":732,"h":862},{"id":"0626ffef5d6bf418","type":"inject","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"dynamic","props":[{"p":"ui_update.suffix","v":"s","vt":"str"},{"p":"ui_update.prefix","v":"p","vt":"str"},{"p":"ui_update.gtype","v":"gauge-half","vt":"str"},{"p":"ui_update.icon","v":"null","vt":"json"},{"p":"ui_update.units","v":"t","vt":"str"},{"p":"ui_update.gstyle","v":"needle","vt":"str"},{"p":"ui_update.title","v":"speed 'O","vt":"str"},{"p":"ui_update.min","v":"2","vt":"num"},{"p":"ui_update.max","v":"7","vt":"num"},{"p":"ui_update.label","v":"label","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":240,"y":2760,"wires":[["c593f20a289c5aa6","44a23d419cbd2ddc","df9f7f9b5d204111","69b497d3c4a10547"]]},{"id":"d0ca81828e137474","type":"inject","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"(\t    $minimum := 1;\t    $maximum := 10;\t    $round(($random() * ($maximum-$minimum)) + $minimum, 0)\t)","payloadType":"jsonata","x":230,"y":3080,"wires":[["c593f20a289c5aa6","3b661095c3d34125"]]},{"id":"6d663d3cf724dadf","type":"inject","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"","props":[{"p":"ui_control.label","v":"fault","vt":"str"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"fault","x":230,"y":3200,"wires":[["c593f20a289c5aa6"]]},{"id":"7a87c5bb9cbc56fe","type":"inject","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"","props":[{"p":"ui_control.label","v":"normal","vt":"str"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"normal","x":230,"y":3160,"wires":[["c593f20a289c5aa6"]]},{"id":"758cfc8c6c43ceae","type":"ui-gauge","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"","group":"5c9407416fba1d1c","order":12,"width":"1","height":"3","gtype":"gauge-half","gstyle":"needle","title":"hg6 1x3","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#ea5353"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":580,"y":3320,"wires":[]},{"id":"1680625b482c1812","type":"inject","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"10","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"10","payloadType":"num","x":250,"y":2660,"wires":[["44a23d419cbd2ddc"]]},{"id":"e293f89b53d34a32","type":"ui-gauge","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"","group":"5c9407416fba1d1c","order":7,"width":"1","height":"2","gtype":"gauge-34","gstyle":"needle","title":"b-full 1x2","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#ea5353"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#5cd65c"}],"min":0,"max":"10","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":580,"y":2660,"wires":[]},{"id":"0aad743f2b0aecd6","type":"ui-gauge","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"","group":"5c9407416fba1d1c","order":3,"width":"1","height":"2","gtype":"gauge-34","gstyle":"needle","title":"wl-full 1x2","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#ea5353"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":770,"y":2660,"wires":[]},{"id":"fb6d0fbab3d6cdf3","type":"ui-gauge","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"","group":"5c9407416fba1d1c","order":4,"width":"1","height":"1","gtype":"gauge-34","gstyle":"needle","title":"wl-full 1x1","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#ea5353"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":590,"y":2720,"wires":[]},{"id":"129e5f0eb26a7e88","type":"inject","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"0","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":250,"y":2600,"wires":[["df9f7f9b5d204111"]]},{"id":"248027b35e6440bb","type":"ui-gauge","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"","group":"5c9407416fba1d1c","order":9,"width":"1","height":"2","gtype":"gauge-34","gstyle":"needle","title":"b-mt 1x2","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#ea5353"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#5cd65c"}],"min":0,"max":"10","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":580,"y":2600,"wires":[]},{"id":"16cd7adb4babb63c","type":"ui-gauge","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"","group":"5c9407416fba1d1c","order":8,"width":"1","height":"2","gtype":"gauge-34","gstyle":"needle","title":"wl-mt 1x2","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#ea5353"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":760,"y":2600,"wires":[]},{"id":"4144977cf520f76e","type":"ui-gauge","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"","group":"5c9407416fba1d1c","order":5,"width":"1","height":"1","gtype":"gauge-34","gstyle":"needle","title":"wl-mt 1x1","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#ea5353"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":760,"y":2560,"wires":[]},{"id":"8ce63824c08ba841","type":"ui-gauge","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"","group":"5c9407416fba1d1c","order":21,"width":"2","height":"2","gtype":"gauge-34","gstyle":"needle","title":"wl1 2x2","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#ea5353"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":580,"y":2780,"wires":[]},{"id":"b2a19ac87746e5d3","type":"ui-gauge","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"","group":"5c9407416fba1d1c","order":19,"width":"6","height":"1","gtype":"gauge-34","gstyle":"needle","title":"wl2 6x1","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#ea5353"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":580,"y":2820,"wires":[]},{"id":"c804eac5a1026143","type":"ui-gauge","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"","group":"5c9407416fba1d1c","order":17,"width":"1","height":"5","gtype":"gauge-34","gstyle":"needle","title":"wl3 1x5","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"},{"from":"1","color":"#ffc800"},{"from":"2","color":"#ea5353"}],"min":0,"max":"3","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":580,"y":2860,"wires":[]},{"id":"c54cb4be9dabf770","type":"ui-gauge","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"","group":"5c9407416fba1d1c","order":15,"width":"3","height":"2","gtype":"gauge-34","gstyle":"needle","title":"wl4 3x2","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":580,"y":2900,"wires":[]},{"id":"bf636fa56256938f","type":"ui-gauge","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"","group":"5c9407416fba1d1c","order":13,"width":"2","height":"3","gtype":"gauge-34","gstyle":"needle","title":"wl5 2x3","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#050505"},{"from":"10","color":"#11ee2a"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":580,"y":2940,"wires":[]},{"id":"85401062f38fcc62","type":"ui-gauge","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"","group":"5c9407416fba1d1c","order":10,"width":"1","height":"3","gtype":"gauge-34","gstyle":"needle","title":"wl6 1x3","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"7","color":"#ea5353"},{"from":"4","color":"#ffc800"},{"from":"0","color":"#5cd65c"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":580,"y":2980,"wires":[]},{"id":"f4a210873bc80d63","type":"ui-gauge","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"","group":"5c9407416fba1d1c","order":6,"width":"1","height":"1","gtype":"gauge-34","gstyle":"needle","title":"wl 1x1","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#5cd65c"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#ea5353"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":570,"y":3020,"wires":[]},{"id":"433044fb1e2ec703","type":"ui-gauge","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"","group":"5c9407416fba1d1c","order":2,"width":"2","height":"2","gtype":"gauge-34","gstyle":"needle","title":"b1 2x2","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#ea5353"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#5cd65c"}],"min":0,"max":"10","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":590,"y":3080,"wires":[]},{"id":"a35fdec460aba662","type":"ui-gauge","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"","group":"5c9407416fba1d1c","order":20,"width":"6","height":"1","gtype":"gauge-34","gstyle":"needle","title":"b2 6x1","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#ea5353"},{"from":"4","color":"#ffc800"},{"from":"7","color":"#5cd65c"}],"min":0,"max":"10","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":590,"y":3120,"wires":[]},{"id":"0d96f3151a444f42","type":"ui-gauge","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"","group":"5c9407416fba1d1c","order":18,"width":"1","height":"5","gtype":"gauge-34","gstyle":"needle","title":"b3 1x5","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#ea5353"},{"from":"1","color":"#ffc800"},{"from":"2","color":"#5cd65c"}],"min":0,"max":"3","sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":590,"y":3160,"wires":[]},{"id":"b2fbdd2f4859eb40","type":"ui-gauge","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"","group":"5c9407416fba1d1c","order":16,"width":"3","height":"2","gtype":"gauge-34","gstyle":"needle","title":"b4 3x2","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#f89696"},{"from":"1","color":"#333333"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":590,"y":3200,"wires":[]},{"id":"01b81504c262877b","type":"ui-gauge","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"","group":"5c9407416fba1d1c","order":14,"width":"2","height":"3","gtype":"gauge-34","gstyle":"needle","title":"b5 2x3","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"0","color":"#373434"},{"from":"10","color":"#5cd65c"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":590,"y":3240,"wires":[]},{"id":"4b32beadcf910769","type":"ui-gauge","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"","group":"5c9407416fba1d1c","order":11,"width":"1","height":"3","gtype":"gauge-34","gstyle":"needle","title":"b6 1x3","units":"units","icon":"","prefix":"","suffix":"","segments":[{"from":"10","color":"#5cd65c"},{"from":"0","color":"#ea5353"}],"min":0,"max":10,"sizeThickness":16,"sizeGap":4,"sizeKeyThickness":8,"styleRounded":true,"styleGlow":false,"className":"","x":590,"y":3280,"wires":[]},{"id":"c593f20a289c5aa6","type":"junction","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","x":380,"y":3160,"wires":[["e42d3fcb7b20271b","758cfc8c6c43ceae"]]},{"id":"44a23d419cbd2ddc","type":"junction","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","x":380,"y":2660,"wires":[["e293f89b53d34a32","0aad743f2b0aecd6","fb6d0fbab3d6cdf3","3f9a8287e4e18122"]]},{"id":"df9f7f9b5d204111","type":"junction","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","x":380,"y":2600,"wires":[["248027b35e6440bb","16cd7adb4babb63c","4144977cf520f76e"]]},{"id":"69b497d3c4a10547","type":"junction","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","x":440,"y":2860,"wires":[["8ce63824c08ba841","b2a19ac87746e5d3","c804eac5a1026143","c54cb4be9dabf770","bf636fa56256938f","85401062f38fcc62","f4a210873bc80d63"]]},{"id":"e42d3fcb7b20271b","type":"junction","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","x":460,"y":3160,"wires":[["433044fb1e2ec703","a35fdec460aba662","0d96f3151a444f42","b2fbdd2f4859eb40","01b81504c262877b","4b32beadcf910769"]]},{"id":"3b661095c3d34125","type":"junction","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","x":380,"y":3080,"wires":[["69b497d3c4a10547"]]},{"id":"d0f3236b17c69f9b","type":"inject","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"5","payloadType":"num","x":250,"y":2540,"wires":[["df9f7f9b5d204111"]]},{"id":"3f9a8287e4e18122","type":"ui-text-input","z":"80a7b66be7ea4735","g":"6d060dd1c3059464","group":"5c9407416fba1d1c","name":"","label":"text","order":1,"width":0,"height":0,"topic":"topic","topicType":"msg","mode":"text","tooltip":"","delay":300,"passthru":true,"sendOnDelay":false,"sendOnBlur":true,"sendOnEnter":true,"className":"","clearable":false,"sendOnClear":false,"icon":"","iconPosition":"left","iconInnerPosition":"inside","x":750,"y":2700,"wires":[[]]},{"id":"5c9407416fba1d1c","type":"ui-group","name":"PR-1123-clone","page":"868aaffa6da2e1cf","width":"6","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"868aaffa6da2e1cf","type":"ui-page","name":"PR-1123","ui":"a171c8195c1b8e57","path":"/page14","icon":"home","layout":"grid","theme":"0d92c765bfad87e6","order":2,"className":"","visible":"true","disabled":"false"},{"id":"a171c8195c1b8e57","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-control","ui-chart","ui-form","ui-file-input","ui-button","ui-button-group","ui-dropdown","ui-slider","ui-switch","ui-text","ui-table","ui-markdown","ui-notification","ui-template","ui-gauge","ui-number-input"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"icon","titleBarStyle":"fixed"},{"id":"0d92c765bfad87e6","type":"ui-theme","name":"Default","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}}]

Environment

  • Dashboard version: 1.15.0
  • Node-RED version: 4.0.2
  • Node.js version: 20
  • npm version:
  • Platform/OS:
  • Browser: Chrome and all

Have you provided an initial effort estimate for this issue?

I have provided an initial effort estimate

gayanSandamal avatar Sep 06 '24 10:09 gayanSandamal

Gayan and I spoke a lot over last week about alignment issues.

I asked Gayan to raise this and one suggestion I had was could we take advantage of subgrid to more attain uniform alignment?

Here is an really good 14m video that explains it far better than I can: https://www.youtube.com/watch?v=Yl8hg2FG20Q

Steve-Mcl avatar Sep 07 '24 20:09 Steve-Mcl

Gayan and I spoke a lot over last week about alignment issues.

I asked Gayan to raise this and one suggestion I had was could we take advantage of subgrid to more attain uniform alignment?

Here is an really good 14m video that explains it far better than I can: https://www.youtube.com/watch?v=Yl8hg2FG20Q

Hey Steve,

Thanks a lot for the suggestion and for sharing the video! I watched it, and it looks really promising. I think using subgrid could definitely help. I’ll experiment more with it and see how it improves things.

gayanSandamal avatar Sep 09 '24 11:09 gayanSandamal