Mustache syntax in Dashboard-2

[jbudd]

I have just started to look again at the flowfuse dashboard.

It seems that mustache syntax is not supported - at least not in the gauge widget?

So how can I replicate the old (Angular?) dashboard settings like {{value | number:2}} or {{msg.label}}?

[joepavitt]

For msg.label your best option is the "change" node just before the gauge, set msg.label to msg.payload

For the rounding, also a change node, but using JSONata's $round function (docs).

It's something we definitely need to improve the usability of, as I'm not a fan of JSONata syntax, but it's something that we haven’t found a reasonable solution for yet

[jbudd]

Hi @joepavitt, I think you are suggesting that the gauge node pays attention to the value of msg.label.

If the widget "Label" field has a value "Battery" or "{label}" that value is displayed verbatim.
But if I leave it blank and give msg.label a name, nothing is displayed. In fact the space it previously occupied is collapsed so that the widget height is reduced.

A composite image to show what I'm talking about:

So how to use msg.label?

And while that pic is on screen, what's going on with the vast empty space above and below the gauge (and below the label)?

This gauge is size auto, it's in a group whose size is 2x1 [sic], there are no other widgets in the group.

Apologies if these questions have been covered before, I've not been following Dashboard 2 in the forum for a while.

[joepavitt]

@jbudd

I think you are suggesting that the gauge node pays attention to the value of msg.label.

Sorry, mis-understood on my part. The label is not currently formattable, only plain text is supported via input of the text field. We're working our way through dynamic properties as we speak, and gauge is in that list which would enable support for msg.ui_update.label injections.

@jbudd

And while that pic is on screen, what's going on with the vast empty space above and below the gauge (and below the label)?

What version of Dashboard do you have here? We put in a lot of fixes for gauge sizing around 1.7.0 (ish), so i would be expecting it to be tighter around the content of the gauge. Previously, we set a minimum height (as a height of 1 makes the gauge render incredibly small). As such, it's advised to set a gauge height of at least 3 (in the more recent releases)

[joepavitt]

@jbudd

Apologies if these questions have been covered before, I've not been following Dashboard 2 in the forum for a while.

Ask as many questions as you need to, not on you to keep up to date with forum traffic. It's on us to make sure documentation and UX is clear enough that you don't need to ask questions!

[jbudd]

@joepavitt

What version of Dashboard do you have here?

I just updated from 1.11 to 1.12 on NR 4, I don't see any difference in the gauge.

@joepavitt

As such, it's advised to set a gauge height of at least 3 (in the more recent releases)

Well this is rather perplexing. If I change the gauge size from auto to 2x3 (which looks distinctly tall and thin in the config)

then the group suddenly becomes almost square.

Does that imply that widget size auto is not working properly?

I have looked at the discussion you linked above and see that dynamic properties are work in progress.
When implemented, won't the (eg) label field collapsing when it has no value result in jittery dashboards as properties change between a value and blank?

[joepavitt]

@jbudd

Does that imply that widget size auto is not working properly?

Not really. With auto, it will auto fill the width, and I think (from memory) I then have a minimum height defined. Because the width is narrower than that min-height in this case, it renders centrally. A smarter way of doing auto would be to always stay square (or 2 x 1 for the cause of half gauge).

@jbudd

When implemented, won't the (eg) label field collapsing when it has no value result in jittery dashboards as properties change between a value and blank?

Yes, which is why I hadn't included it from the get-go, but it's been requested by the community more than once, so it's difficult to ignore.

@jbudd

If I change the gauge size from auto to 2x3 (which looks distinctly tall and thin in the config)

Sizing in D2.0 is a bit tricky. We introduced the new concept of "Layouts", and the most popular (and responsive) is "Grid", which judges width as a number of columns on a page, translating to %, rather than fixed px width. As such, on a narrower screen, 2-wide is narrower than 2-wide on a wider screen, which leads to this 2x2 not being a square.

We do also have plans to "overhaul" sizing in D2.0: Overhaul group and widget sizing options · Issue #835 · FlowFuse/node-red-dashboard · GitHub

[jbudd]

@joepavitt

With auto, it will auto fill the width, and I think (from memory) I then have a minimum height defined. Because the width is narrower than that min-height in this case, it renders centrally. A smarter way of doing auto would be to always stay square (or 2 x 1 for the cause of half gauge).

OK but the extra top padding introduced by that minimum height seems to be inserted between the label and the gauge, as if the minimum height is applied to the actual gauge not the widget as a whole. (See left hand of picture a couple of posts above).

Since I often find myself struggling to fit everything I want on a single page, I'd say the best "auto" setting is one that fills the width and has only enough extra pixels height to make the widget a integer number of "units" tall (so that widgets in different groups naturally horizontally align). That is based on dashboard 1's layout though so no doubt out of date.

[TotallyInformation]

@jbudd

I'd say the best

This is the issue with pre-defined layouts - there a LOT of differing needs out there. No pre-defined layout set can hope to deal with them all.