Locking the widgets and UI

Dashboard
1

Im developing an application on my laptop, and it's resolution 1920x1080. I can line them up and make it all pretty.

Then I would like to export the flows, and place them into a different PC but it's resolution is different (unknown) so the widgets are now shuffled around.

How do i lock the widgets and the UI in place when developing so when I transfer it to the PC the widgets don't move?

2

Which dashboard are you using (the original, now deprecated, node-red-dashboard or the newer @flowfuse/node-red-dashboard)?

3

I have no idea which dashboard I'm using.

image
image762Ă—626 16.5 KB

Does this have any information on it?

4

Yes, that is the older, depreciated, unsupported Dashboard.

image
image1178Ă—434 31.4 KB

5

Silly question here:
So the my dashboard is 3.6.6 as per the screenshot.
But I'm finding a lot of information about Dashboard v2.0 like here:

Isn't v3.6.6 newer than v2.0?

If I have v3.6.6 now, how do I update to the latest dashboard? Will the flows developed in my old project still work? TIA

6

node-red-dashboard is not the same application as @flowfuse/node-red-dashboard.
node-red-dashboard has been around a long time and made it to V3.6 before being retired due to aging tech in the stack
@flowfuse/node-red-dashboard is comparatively speaking still a baby and only made it to V1.2

Folk refer to is as "Dashboard 2" as it is a successor.

Yes, it is confusing, yes I wish it were called something else.

Maybe we need to just bump @flowfuse/node-red-dashboard up to V4 to remove all doubts!

1 Like
7

You will find that the Original Dashboard is 'ahead' of Dashboard 2 in revisions because they are different nodes that integrate well with Node-RED.

'Dashboard' (node-red-dashboard) is deprecated as it uses 'older technology'.

If you look in Manage Palette and input Dashboard, you should see '@flowfuse/node-red-dashboard', this is known as Dashboard 2 amongst us as it is the second development of Dashboard, but developed by FlowFuse.

There is also UIBUILDER which is another alternative that can be used as a Dashboard and uses HTML, Javascript and CSS to display a User Interface.

HTH

Posted at same time as @Steve-Mcl !

1 Like
8

You can have node-red dashboard and dashboard2 installed together and they will both work.
The original dashboard pages are at :1880/ui and any dashboard 2 pages at :1880/dashboard.

Absolutely. And change the colour of widgets in the editor so we can tell at a glance what we are looking at. Maybe a final release for node-red-dashboard to change the colour to blue-grey.

Original dashboard: I don't think you can.
Dashboard 2: I don't think you can.
At least, not using the default page layout of "grid" but there are alternatives, described here: https://dashboard.flowfuse.com/layouts/types/grid.html

9

If I go to the command prompt and type in node-red I start the old node-red dashboard.

image
image770Ă—619 15.9 KB
See picture. This is after I installed the flowfuse/node-red-dashboard.

The node-red editor (localhost:1880) remains the same right?

10

Yes.
image

Once you have a working DB2 dashboard you will also see a notification for that:

image
image1574Ă—277 32.2 KB

Oops, I forgot to redact my username :grinning_face_with_smiling_eyes:

11

You have installed the flowfuse dashboard but have not added any widgets that make up that dashboard.

See Getting Started | Node-RED Dashboard 2.0 for docs and links to video tutorials for Dashboard 2.0 (@flowfuse/node-red-dashboard)

12

Note though, that using the flowfuse dashboard will not necessarily help to get to what you want, but you will be using a dashboard that is still being maintained.

13

Mudwalker kindly mentioned UIBUILDER. Just to note that you can have UIBUILDER installed along side either/both of the Dashboard packages.

UIBUILDER lets you build any custom web UI's. It allows multiple separate instances (unlike the Dashboards) and supports both Single-Page Apps (like the Dashboards) and multi-page apps as well. It also supports but does not require a front-end framework (Dashboard 1 requires AngularJS v1, Dashboard 2 requires VueJS v3 along with Vuetify).

A comprehensive comparison between UIBUILDER and Dashboard 2 is available in the documentation here:

Notably, the included CSS styling (which you can of course amend or ignore) provides some sensible break points for desktop vs mobile browsers. There are examples of building layouts similar to D2 available.