Visual Layout Editor

[rcarmo]

Description

One to the unappreciated (and somewhat obscure) features of the current solution is the integration with the main Node-RED environment and the ability to do a baseline visual layout without fully leaving the flow editor. The widget grid and sizing system is a bit clunky (the emphasis on units rather than percentages/free resizable elements, etc.), but it works pretty well for multiple scenarios (like the example below):

Have you provided an initial effort estimate for this issue?

I am no FlowForge team member

[joepavitt]

Just thinking through this (out loud) a little.

We have a new set of events that we could add a widget-layout event too, or something along those lines.

The ideal (end goal) UX would be as follows:

1. Enable "edit" mode (maybe via a shortcut, or option in the UI, or via config on the page in Node-RED, the latter feels clunky?)
2. All groups & widgets then allow for dragging & dropping (for ordering) & corner/side grabbing for resizing.
3. Upon re-ordering and/or resizing, the widget-layout event send a message back to Node-RED for the config to be updated (i.e. the options int he editor now reflect the new layout already).

The challenge is that how to re handle the nature of re-deploying? The NR editor would have changes not deployed, but that are actually reflected in the UI/Dashboard, because we've created those values locally in the client.

[bartbutenaers]

@joepavitt,
Perhaps you might also find some useful ideas in Flexdash about this, like this demo from Thorsten to create a layout via the config screen...
Bart

[joepavitt]

Thanks for sharing @bartbutenaers - exactly what I had in mind.

[Hyperlooper]

First off, let me say thank you for this amazing project. I am blown away at the progress.

I wanted to put my hat in the ring to say that a visual layout editor would definitely be a feature I would miss if it were absent. For context, here's an example of a dashboard I am working on in dashboard 1.0 that is being used on a television kiosk. Would this layout be possible in 2.0 without a visual layout editor? (I'm asking out of ignorance, I don't currently understand how I would accomplish this layout sans the visual editor).

https://imgur.com/kEBqdgz

As an aside, I did a pretty deep survey of a ton of self-hosted 'dashboard' tools recently, and I concluded that node-red and dashboard 2.0 really fills and under-served niche here, especially if there's enough flexibility for layout and theming. There's really nothing else out there quite like it, and certainly nothing you can self-host.

[joepavitt]

HI @Hyperlooper - happy to help, although can I get you to post into https://discourse.nodered.org/tag/dashboard-2 please? Want to keep the GitHub issues focussed on features, etc. rather than assisting particular use cases and projects.

I do have answers, and can help, just want to make sure others can see it too, and the forums are a better place for that. A topic with "Achieving this layout in Dashboard 2.0" would be appropriate, with your screenshot included.

[rcarmo]

HI! I would like to see some kind of statement regarding a visual editor as welll. I rely on the old one for quickly laying out things, so it's quite an important feature that applies to multiple layouts.

[joepavitt]

It's definitely in the plans, but not in the very short term just yet as we have other priorities: https://github.com/orgs/FlowFuse/projects/15

[SuperNinja73]

another idea for the layout editor: the current Dashboard v1 !

[joepavitt]

Have an option to use https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage in order to enable layout editing directly in a Dashboard session