🚀 [FlexDash] alpha release - a dashboard for Node-RED

Paul-Reed · 5 September 2022 21:11

Tell me when you want me to stop...

Is zero a value??

Have a look at this quick flow, it's injecting 0 into a spark line widget, and I can understand why the graph isn't displayed (because it's zero) but expected that 0.00 would be displayed as the value (it's the energy generated from a solar panel at night!)

But it remains blank, suggesting no data.

spark line

Once a value > 0 is injected, the value & chart is displayed, but the chart does not progress further if continual 0's are injected.

spark lin2e

[{"id":"c93e64cc2dfc33b7","type":"fd-spark-line","z":"1543d308b342690a","fd_container":"69c2e3f5798c3475","fd_cols":1,"fd_rows":1,"fd_array":false,"fd_array_max":10,"name":"","title":"Spark Line","popup_info":"","value":null,"color":"red","fill_color":"red","text_color":"","show_value":true,"unit":"W","x":675,"y":410,"wires":[]},{"id":"d08da3b1becf389f","type":"inject","z":"1543d308b342690a","name":"","props":[{"p":"payload"}],"repeat":"1","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"0","payloadType":"num","x":505,"y":395,"wires":[["c93e64cc2dfc33b7"]]},{"id":"a9c4fc38960b6dad","type":"inject","z":"1543d308b342690a","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"1","payloadType":"num","x":505,"y":430,"wires":[["c93e64cc2dfc33b7"]]},{"id":"69c2e3f5798c3475","type":"flexdash container","name":"Energy","kind":"StdGrid","fd_children":",43719d5359575f6b,bb113511ea8e41fd,c93e64cc2dfc33b7","title":"","tab":"fef6c0f6d48841d6","min_cols":"8","max_cols":10,"parent":"","solid":false,"cols":"1","rows":"1"},{"id":"fef6c0f6d48841d6","type":"flexdash tab","name":"Demo","icon":"mdi-home-lightning-bolt-outline","title":"","fd_children":",69c2e3f5798c3475","fd":"e8f5aea52ab49500"}]

tve · 5 September 2022 21:46

Please don't! These issues will all be found sooner or later and the sooner the better!

Paul-Reed · 7 September 2022 09:22

Hi Thorsten

Don't know if I'm misunderstanding the gauge widget (there's no help published at the moment), but I expected that if I set the min to -3000, and the max to 3000, then providing a value of zero would result in the needle being perpendicular, and midway between the min/max extremes, but it isn't, and neither are values of -2500 & 2500.

~~Also,~~ I know that you still need to complete work on the color picker, but in my example below, the purple-lighten-3 needle is not displayed..

gauge

[{"id":"4009752e0121676f","type":"inject","z":"1543d308b342690a","name":"","props":[{"p":"payload"},{"p":"min","v":"-3000","vt":"num"},{"p":"max","v":"3000","vt":"num"},{"p":"needle_color","v":"red","vt":"str"}],"repeat":"10","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"2500","payloadType":"num","x":155,"y":380,"wires":[["1644b493dde19510","986b4cf773f5145d"]]},{"id":"1644b493dde19510","type":"fd-gauge","z":"1543d308b342690a","fd_container":"69c2e3f5798c3475","fd_cols":"2","fd_rows":"2","fd_array":false,"fd_array_max":10,"name":"","title":"Gauge","popup_info":"","value":null,"unit":"","arc":90,"min":null,"max":null,"color":"green","low_color":"blue","high_color":"pink","low_threshold":null,"high_threshold":null,"base_color":"","needle_color":"white","radius":70,"stretch":false,"x":605,"y":380,"wires":[]},{"id":"96df7174e483fe4f","type":"change","z":"1543d308b342690a","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"-2500","tot":"num"},{"t":"set","p":"needle_color","pt":"msg","to":"purple-lighten-3","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":440,"y":410,"wires":[["1644b493dde19510"]]},{"id":"986b4cf773f5145d","type":"delay","z":"1543d308b342690a","name":"","pauseType":"delay","timeout":"5","timeoutUnits":"seconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":280,"y":410,"wires":[["96df7174e483fe4f"]]},{"id":"69c2e3f5798c3475","type":"flexdash container","name":"Energy","kind":"StdGrid","fd_children":",43719d5359575f6b,bb113511ea8e41fd,1644b493dde19510","title":"","tab":"fef6c0f6d48841d6","min_cols":"8","max_cols":10,"parent":"","solid":false,"cols":"1","rows":"1"},{"id":"fef6c0f6d48841d6","type":"flexdash tab","name":"Demo","icon":"mdi-home-lightning-bolt-outline","title":"","fd_children":",69c2e3f5798c3475","fd":"e8f5aea52ab49500"}]

[EDIT -] Strange, but clearing my browser cache resolved the gauge problem (except the color picker prob)

Colin · 7 September 2022 14:10

That seems to be working for me. I added an Inject 0 node and it goes to the middle, -2500 and 2500 show near the left and right ends.
The purple needle doesn't work for me either though.

Paul-Reed · 7 September 2022 15:38

Just arrived back home Colin, and cleared my chrome browser cache (I should have tried that earlier ), and now I get the same as you, and now working OK.
So just the color-picker issue, which I suspect Thorston will already be aware of.

tve · 7 September 2022 15:54

When you restart Node-RED with a new version there is no check that reloads FlexDash if it's an older version. This is perhaps what happened to you.

WRT the colors, I'm aware of it, but that doesn't mean that a reminder isn't good... The issue is that the gauge widget uses the colors in SVG and SVG doesn't know the Vuetify color names. I need to add a mapping in the Gauge widget and in some other places too. You can work around the issue by using a hex #000000 color value (sigh).

Paul-Reed · 7 September 2022 21:21

That url does not work now, somewhere a / appears to have been introduced.
http://localhost:1880/flexdash/?theme=dark

tve · 8 September 2022 00:21

The correct url has a traling /, the one without trailing / redirects to the one with, and it looks like it looses the query string. I should fix that...

Colin · 12 September 2022 08:33

Input from @Paul-Reed has pointed out an issue with the Toggle node when in loopback mode.
In the flow below clicking the inject nodes reliably switches the display between "frozen" and "unfrozen". However, if, after clicking "frozen" inject, the switch is clicked then the display changes to "unfrozen", but after that the "frozen" inject node does not set it back again. In order to make the inject node work it is necessary first to click the "unfrozen" inject (which does nothing visually) and then click the "frozen" inject.

[{"id":"97a6328b1e301ef9","type":"debug","z":"1543d308b342690a","name":"debug 16","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":520,"y":900,"wires":[]},{"id":"2acdc2196c8d8163","type":"fd-toggle","z":"1543d308b342690a","fd_container":"69c2e3f5798c3475","fd_cols":"1","fd_rows":1,"fd_array":false,"fd_array_max":10,"fd_output_topic":"","name":"toggle","title":"Chart","popup_info":"Freezes chart for 2 minutes before unfreezing","value":null,"enabled":true,"color":"","on_value":"frozen","off_value":"unfrozen","show_value":true,"loopback":true,"x":330,"y":900,"wires":[["97a6328b1e301ef9"]]},{"id":"32ad23981093d634","type":"inject","z":"1543d308b342690a","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"frozen","payloadType":"str","x":130,"y":880,"wires":[["2acdc2196c8d8163"]]},{"id":"198aed886af73c1f","type":"inject","z":"1543d308b342690a","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"unfrozen","payloadType":"str","x":140,"y":940,"wires":[["2acdc2196c8d8163"]]},{"id":"69c2e3f5798c3475","type":"flexdash container","name":"Energy","kind":"StdGrid","fd_children":",43719d5359575f6b,bb113511ea8e41fd,97e34cb72c2f36bd,2acdc2196c8d8163","title":"","tab":"fef6c0f6d48841d6","min_cols":"8","max_cols":"10","parent":"","solid":false,"cols":"1","rows":"1"},{"id":"fef6c0f6d48841d6","type":"flexdash tab","name":"Demo","icon":"mdi-home-lightning-bolt-outline","title":"","fd_children":",69c2e3f5798c3475","fd":"e8f5aea52ab49500"}]

Paul-Reed · 12 September 2022 09:00

Just to clarify how this was exposed, the flow below demonstrates a toggle that I'm using that switches itself off after 'x' minutes (so it's never accidently left on!!).
(functionality kindly described by @jbudd here )

[{"id":"82967125d2feda85","type":"trigger","z":"1543d308b342690a","name":"","op1":"","op2":"unfrozen","op1type":"nul","op2type":"str","duration":"15","extend":true,"overrideDelay":false,"units":"s","reset":"","bytopic":"all","topic":"topic","outputs":1,"x":245,"y":945,"wires":[["0c697a3a6d5f80c1","97a6328b1e301ef9"]],"l":false},{"id":"97a6328b1e301ef9","type":"debug","z":"1543d308b342690a","name":"debug 16","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":385,"y":945,"wires":[]},{"id":"2acdc2196c8d8163","type":"fd-toggle","z":"1543d308b342690a","fd_container":"69c2e3f5798c3475","fd_cols":"1","fd_rows":1,"fd_array":false,"fd_array_max":10,"fd_output_topic":"","name":"toggle","title":"Chart","popup_info":"Freezes chart for 2 minutes before unfreezing","value":null,"enabled":true,"color":"","on_value":"frozen","off_value":"unfrozen","show_value":true,"loopback":false,"x":110,"y":945,"wires":[["82967125d2feda85","0c697a3a6d5f80c1","9bdb88e77c4ebbdc"]]},{"id":"0c697a3a6d5f80c1","type":"junction","z":"1543d308b342690a","x":110,"y":990,"wires":[["2acdc2196c8d8163"]]},{"id":"9bdb88e77c4ebbdc","type":"junction","z":"1543d308b342690a","x":245,"y":915,"wires":[["97a6328b1e301ef9"]]},{"id":"69c2e3f5798c3475","type":"flexdash container","name":"Energy","kind":"StdGrid","fd_children":",43719d5359575f6b,bb113511ea8e41fd,3a60132d9af9f863,2acdc2196c8d8163","title":"","tab":"fef6c0f6d48841d6","min_cols":"8","max_cols":10,"parent":"","solid":false,"cols":"1","rows":"1"},{"id":"fef6c0f6d48841d6","type":"flexdash tab","name":"Energy","icon":"mdi-home-lightning-bolt-outline","title":"","fd_children":",69c2e3f5798c3475","fd":"e8f5aea52ab49500"}]

ALSO, we had a discussion above about iso_prefix, is the code that describes the iso data something that you have written or is an added library somewhere?
I've searched through your repo but can't find it anywhere....
(I'd like to suggest a small amendment)

tve · 12 September 2022 15:28

github.com

flexdash/flexdash/blob/v0.3/src/widgets/stat.vue#L61-L85


      
          valueUnitISO() {
            let v = this.value
            if (typeof v == 'number') {
              if (v >= 1 || v == 0) {
                let prefix = ["", "K", "M", "G", "T", "P", "E", "Z", "Y"]
                let i = 0
                while (v >= 1000 && i < prefix.length) {
                  v /= 1000
                  i++
                }
                if (prefix[i] == "" && Number.isInteger(v))  return [v.toFixed(0), this.unit]
                return [ v.toFixed(1), prefix[i] + this.unit]
              } else if (v > 0) {
                let prefix = ["m", "u", "n", "p", "f", "a", "z", "y"]
                let i = 0
                while (v < 1 && i < prefix.length) {
                  v *= 1000
                  i++
                }
                return [ v.toFixed(1), prefix[i] + this.unit]

This file has been truncated. show original

Paul-Reed · 12 September 2022 16:04

Thanks, I wasn't sure if the prefix was generated individually in relation to the specific units (ie metres, watts, joules etc), but I see it's just in relation to the size of the number and common across all units
I was going to suggest changing the K for lowercase k, because the IS for energy is measured as kWh, similarly distance is km, etc).
The capital M in MWh (and G for gigawatt) is correct.
(Also capital M in megameter (and G in gigametre) is also correct).

What do you think?

tve · 12 September 2022 16:05

Thanks for the repro! (One has to click a couple of times before the problem surfaces...)

Local loop-back seems evil I don't know what it should do.

If we take a step back, Node-RED is single user in the sense that everyone sees the same data, this includes having multiple browser windows open showing the same plots, gauges, and toggles. Now looking at the local loopback it means that if someone flips the toggle it can't just change state locally and send a message, that change has to be propagated to all open browser windows. In other words, it has to go to the Node-RED server and be broadcast from there. So loopback really needs to be a feature of the Node-RED node and not a feature of the FlexDash widget, it's literally connecting the node's output to its input without showing a wire in the flow editor. Is that what we want?

tve · 12 September 2022 16:11

From Metric (SI) Prefixes

Capitalization. SI prefixes for submultiples (smaller quantities or sub units) are formatted with all lowercase symbols while prefixes for multiples (larger quantities or whole units) use uppercase symbols with the exception of three: kilo (k), hecto (h) and deka (da).

Ergo, I have it wrong thanks for pointing it out!

Colin · 12 September 2022 16:34

Good point, I don't know how that is handled, or how it behaves, in the Switch node in node-red-dashboard. Is there the same issue with the dropdown select box? I probably won't have any time to test it this evening.

Colin · 12 September 2022 20:52

I have confirmed that the same issue exists with other input nodes. For example if you open your demo-all tab in two browser windows and change the value of the Value Sequence node in one then it does not change in the other.

tve · 12 September 2022 21:18

Yup, the question to me is what should it do?
(And perhaps: what does the std dash do?)

Paul-Reed · 12 September 2022 21:41

A dashboard is a fundamental part of node-RED, and Flexdash IMO is the main contender to survive the current ui_dashboard.
Although @tve is committing a lot of time & effort to developing Flexdash (thanks ), it would be great to see some support & input to further develop it's functionality from the senior node-RED developers.
Isn't that the strength of open source software?

tve · 13 September 2022 01:36

Thanks Paul! My assumption is that it's all going to take time. I'm very grateful that Colin and you are very active in providing feedback. It allows us to shake out a slew of issues that I either don't encounter because my use-cases are limited or that I know so well to work around that I don't even notice them anymore.

For me the next step to enable more participation is to document how to write widgets. Of course that'll open another can of worms in terms of questions and features .

Finally, the only thing that has me "worried" is the integration into Node-RED. There are perhaps half a dozen to a dozen hacks I have to use to work around bugs or missing features. It would be awesome if someone with deep knowledge of NR and the flow editor could do a code review and we could discuss. In some cases there may be a better way to do things, in others maybe this is a good time to add an official API, in others maybe the hack is "good enough".

tve · 13 September 2022 19:30

Feedback posted in github issues (please don't do that ):

Hi,

I was giving FlexDash a spin today based on the advertised handling of UI nodes in sub-flows (which, after spending most of the day getting this working in a different way with the standard dashboard, is not only not good but basically non-existent and amplified by other limitations in stock Node-RED). While our final solution does not use FlexDash, I thought it might be worthwhile to give some feedback on why.

To say this right at the start: the sub-flows worked as intended and were not the reason we decided against FlexDash. If I had been able to build all of what we need from your components, FlexDash would have been the far easier option because it would have saved us the enormous amount of effort to work around the dashboard. However, it is missing (or at least we couldn't find) some fairly crucial (for us) widgets:

Some form of number input widget (we really need that), e.g.

a slider (exists in dashboard)

a textual number input

For the latter, the text widget seemed insufficient because it requires switching into edit mode, editing the text and saving the result. The Value Sequence widget probably works for some cases, but it is tedious to use for non-small ranges of values / numbers of steps, in particular because it doesn't allow directly editing the value (I guess because one might then input a value that is not in the set?).

Some form of stateful button or button version of the drop down or a multistate switch

there is a dashboard element like this from node-red-contrib-ui-multistate-switch

Options for preventing feedback loops through UI elements

the multistate switch is a good example here again: it allows you to separately configure

whether to accept user input

whether to accept programmatic input via messages

whether to forward input from messages to its output

never

always

if it changes the state of the switch

This is very handy for cases where we want neither a bunch of global (/flow etc.) state tracking nor to use many UI elements for each side of this information plus setting it.

For the existing widgets, minor useful improvements would be

colour overrides (this seems to be a planned feature?)

a linewrap option for the (non-markdown) text output instead of overflowing to a scroll bar

Regardless, FlexDash looks quite good for a framework in alpha, so best of luck and I sincerely hope that I'd choose differently in 2 or 3 years time.

Re: some form of number input widget

That would be easy to add... Colin also asked about a text field input widget. I don't mind letting users input directly into the value sequence but I don't know what to do if the value is not in the sequence, it opens a can of worms...

Re: Some form of stateful button or button version of the drop down or a multistate switch

Did the dropdown-button not fit the bill? Also, I have a button-bar in GitHub - flexdash/node-red-fd-testnodes: Node-RED nodes to test out FlexDash integration, which I'm still tweaking:

Re: Options for preventing feedback loops through UI elements

Sorry, I don't understand. The FlexDah widgets don't output anything unless the user takes action. (There's a loopback option in some widgets, which isn't right, see discussion in a couple of previous posts.)

Re: colour overrides (this seems to be a planned feature?)

Can you be more specific?

Re: a linewrap option for the (non-markdown) text output instead of overflowing to a scroll bar

Makes sense, should be easy to add.

Hey, thanks for the feedback! If you had posted here as you went along many of these things could have been fixed or worked around, but that's OK, FD is still in alpha and not for everyone
. I still very much appreciate that you took the time to write the feedback! .

Topic		Replies	Views
FlexDash: towards a new dashboard for Node-Red Share Your Projects	67	10005	28 July 2021
FlexDash, quo vadis? Dashboard flexdash	3	302	6 November 2023
Flexdash dashboard conflict? Can I use both at the same time? Thanks in advance Dashboard flexdash	4	202	3 January 2023
FlexDash Socket.io General dashboard	10	434	20 August 2022
FlexDash: per-browser data Dashboard flexdash	2	223	29 December 2022

🚀 [FlexDash] alpha release - a dashboard for Node-RED

Related Topics