New 1.4.0 Release - Node-RED Dashboard 2.0

Just a quick note to say that we've just published a new release for @flowfuse/node-red-dashboard (aka Dashboard 2.0).

You can see the full release notes here: Release v1.4.0 · FlowFuse/node-red-dashboard · GitHub

Stand Out Items:

  • Documentation & code for future support (Node-RED 4.0+) of Dashboard nodes in subflows
  • Now support import of all Dashboard 2.0 flows, without the needs to remove duplicate ui-base nodes
  • Re-wrote the ui-table node to use v-data-table, so that you get sortable columns by default.
  • Improved rendering of UI Gauges at smaller sizes
8 Likes

They still don't render well when viewed on smaller devices, for example a phone.

Laptop view of two 4x4 gauges

Phone view of the same page

Notice how much space there is above and below the actual gauge.

1 Like

Phone view of the same page

That's odd - I'd expect that to be taking up 4/6ths of the width of that, not 2/6ths?

Similarly, the gauge on the Laptop view is similar, that should be taking up more space, how big is the containing ui-group in both instances? Also, what resolution are you viewing for that mobile?

In my test environment, with a few 3x3 and 3x6 gauges, this is what I see.

What would you be expecting to be different here? I'm guessing you're expecting that the gauges are top-aligned instead? With their respective spaces, and then the white space lives below the widget? So, something like this:

If you could send me an equivalent of this view, it'd be really helpful:

, right click any of the gauges > Inspect Element. Then hover over the same element I'm hovering on here (.nrdb-layout-group--grid) and it will overlay the respective grid layout to assist with debugging.

It's all shrunk with the new version!
I can't find a setting that brings it back.

It's the same instance viewed on a laptop & on a phone. The group size is 14 x 11.

It's a Pixel 6 phone which I believe is 1080 x 2400px

Yes, but that isn't the whole issue. I would be happy if my gauges looked as good as yours!

Here goes... it's in 2 screenshots due to size.

On the gauges, you need to define the size:

I suspect you have auto, or a 6x1 gauge. The change we made (as was generally requested) was that we would stop trying to be smart about gauge sizing and just take whatever the user defines.

I do now realise though that I haven't considered auto as a size option (I've updated the default to be 3x3 iirc. I'll open an issue to make sure Gauges also support auto.

That's likely to be your issue. If you've got gauges of size 4, then on mobile they're going to be set as 4/14 of the width of the screen.

Whilst the full page auto scales down to 6/9/12 columns as per the Grid Breakpoints - if yo've got a group that's bigger than that, currently I consider the user's definition to be overruling mine, so the group itself will render within the page constraints, but still provide 14 columns for it's content.

In hindsight - this is probably something I should just override?

1 Like

Yes, you are correct, setting it to 4 x 8 does display the gauges correctly on my phone.

I'll leave that to you to decide, I'm still wrestling with the whole layout thing so can't really comment :smile:

I did add a bunch of new docs with todays release for this:

Which I'm hoping help a little

1 Like

1.4.1 is going live imminently with a fix for this so that all existing ui-gauge widgets with auto sizing work again - rtaher than needing to manually set the sizes

Update: and it's live: node-red-dashboard (node) - Node-RED

2 Likes

It works again with version 1.4.1

1 Like

Hi @joepavitt,
I have removed my local dashboard fork (with a hardcoded path to load the third-party widgets from my httpAdminRoot subpath), and installed this version. And it now works fine in combination with my httpAdminRoot setting.

Thanks a lot for the quick fix! Faster than my shadow :yum:

You and @Steve-Mcl and others in the team have made again a huge step forward with this new version. My congratulations!! Very exiting times for Node-RED geaks and freaks...

Bart

2 Likes

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.