So here is Node-RED-Dashboard 2.16.0: Milestone Release
- Add Dashboard Layout tool - Major contribution - Thanks @KazuhiroItoh - PR #482
- Add ui.isDark() returns true/false if overall theme is dark or light, so the widget could switch appropriately. (can already use getTheme() to get actual colors if needs be.)
- Make spacer transparent so background is really the background.
- Fix text_input to only send duplicates if enter key hit multiple times and not on loss of focus. Issue #513
- Fix color-picker to not emit on tab change, and fix background overlay. Issue #514
- Fix IE11 loading issue #515 (reversion)
- Improve embedded node-red dashboard full path resolve - Issue #517
- Let ui-form input be full width on IE11 - Issue #524
The main thing is the layout editor contribution from @KazuhiroItoh at Hitachi - Many thanks for that.
It is an initial release so the functionality is limited. but some quick notes to get you started.
The [layout] button is currently ONLY at the tab level within the Dashboard sidebar. IE you are only editing the layout of one tab at a time.
Once you open that you should see your existing page represented as a series of blocks - They are not meant to be 1:1 . From here you can move widgets around within a group - and drag between groups as you want.
A zoomed in version show several icons....
The lock/unlock symbol (eg on Gauge6 below) is the same as auto sizing mode - and will try to fit the available width. If you click the unlock symbol it will lock and then allow you to resize the widget. If you drag the size control (arrow bottom right of each locked widget) then you can change the size of the widget. Clicking the lock symbol will unlock it and revert to auto sizeing. If the widths are all locked then the group width can't be shrunk below the total width (but can be increased of course).
You can drag widgets around and the spacers will be automatically inserted - giving a result like
As usual feedback and comments appreciated.
(and don't forget to flush browser caches etc to ensure you get latest code where it's needed)