FlexDash: towards a new dashboard for Node-Red

@tve As a non-programmer, I don't fully understand how FlexDash works, but what is the future format of FlexDash likely to be?
Will it be continued to be hosted by you, possible as a paid-for service? or is it going to be something that we would self-host (or both).

1 Like

Thanks so much! Appreciated!
I am having fun, the drudgery will start soon trying to clean everything up and fixing all the little issues that will come up...

It's all on github & MIT licensed, so "do as you please". I'm not looking to make money with any of this, way too difficult :couch_and_lamp:.

WRT hosting, it's just a bunch of static files that need to go on some web site. Using the stuff I host makes it easy to try FlexDash out, especially while it changes all the time. The alternative is to use a web server you may have or simply drop the stuff into the static file area of Node-RED.

2 Likes

Thanks Thorsten for your reply, and especially all of the work that you have done developing FlexDash.
It's a great project :+1:

1 Like

Ooops, I'm getting dangerously close to falling behind on the daily entertainment update! :fearful:

No new functionality, instead I updated the README into a bit of a user guide, trying to capture some of the thinking underlying FlexDash.
Note that github has a well-hidden table of contents for markdown docs:
image
If you find stuff that is not clear lemme know so I can improve it.

1 Like

Hi Thorsten,
To be honest, I have no clue where you get all the time to build this stuff. Mind blowing ...

You won't be surpised that the readme section "Write a custom widget" immediately got my attention :wink:. Two questions about your readme and the example widget code:

  1. Have I understood correctly that a custom widget is only client side (vue) at the moment?
  2. About the requirement to pre-process and bundle the widget. Does this mean that it will never be possible to implement UI nodes like we currently have? Or did I misinterpreted this mechanism? Never used bundling ...

Bart

What limits the number of datapoints displayed in a TimePlot widget?
I'm sending data every 5 seconds in the format below, so the number of datapoints quickly grows;

[1623965852.409,98,46]

In the node-RED dashboard chart, it's possible to limit the datapoints by either number of points, or time period.

Right now everything is client side. The only thing on the Node-RED side is what's in the npm package, i.e. the in/out nodes.

UI nodes like you have today are not excluded, but so far I don't really know how they would look. I need to make the dynamic loading happen first and then someone will have to come with an action plan...

BTW, I hope you're keeping an open mind about how all this works and will try the current design before insisting on UI nodes in NR... :wink:

Haha, looks like I didn't document that. Right now the comment in the code says
// prune the data when it reaches 1/2 the number of pixels we got in width

I've been sending full chart data arrays from the database every minute, so this didn't come up. I would put the current solution down as "good enough for now" and revisit later. Something I haven't tackled and want to is to fetch data on-demand with zooming and panning. I don't know how that will look like, other than that I've seen a uPlot demo with it, but I do know that it interacts with any "max time range" or "max datapoints" input.

BTW, do you see the max datapoints as a way to control what's shown or as a way to keep the performance in check?

Edit: I updated the last paragraph of the time-plot widget help text to:

Each data message may be either an array of data points or a single data point. If an array is provided then it replaces the entire dataset being shown. If a single point is provided it is appended to the current dataset and an old data point may be rotated out.
(Currently w/2 datapoints are kept where w is the width of the widget in pixels, this will be revisited.)
Note that this "row-wise" structure gets transposed to the columnar structure expected by uPlot.

That depends upon the data that is being displayed, and whether the chart is intended to be viewed on a small screen (phone) or monitor.
But as you have said below, it's easy to work out either option by a simple calculation.

So do you calculate: I'm sending a data point every 5 seconds and I want to see the last 10 minutes so lemme enter '240' into max-datapoints? Instead of entering '10' into a hypothetical minutes-to-keep input?

I always used the max-points number in the std dashboard's chart widget to limit the damage 'cause much beyond 1k everything grinds to a halt...

Just edited my last post (sorry, I was distracted while typing!!!!)

Hmm I don't hope I give the impression that I don't like your setup, because I am a big fan of your work. And I certainly don't have problems to start with a new technology, since I was not really a big fan of AngularJs...
But until now the standard was UI nodes, so - to support this community - I started developing a series of UI nodes. And I have spend a "tremendous" amount of my free time on this (incl. support, documentation, ...).
I could try to convert once the client AngularJs part of my nodes to e.g. Vue, but I simply don't have the free time to rewrite my nodes from scratch (which I think I need to do when the server side config screen is dropped). And after the extension period I cannot use the AngularJs framework anymore, which means I can put all my developments in the garbage bin. Which would result me simply having wasted my free time the last years :thinking:
But if UI nodes is not possible, or you don't like it, or the majority of the community doesn't like, so be it ...
Then it is simple case closed for me. No hard feelings!
Anyway keep up your good work!!

1 Like

Just curious if you have considered supporting streaming video? As example @kevinGodell has developed great nodes for presentation of mp4 video. Currently they are for the traditional dashboard and I have of course no idea how much work it would require to make them compatible with FlexDash. Thats one part but you also have "standard" mjpeg streaming from webservers via http that is in common use. So all-in-all, support for streaming video

Ah, thanks for providing some details. I believe that what you describe is different from what I imagined. If you look at the TimePlotRaw widget it really has 2 inputs: options and data. The options are a JSON data structure that describes the series to plot, the axes, etc. The data is just the raw data.
So something needs to send this widget a well-formed options JSON. I wrote a TimePlot (no "Raw") widget that uses the FlexDash input configuration to set some of the options: labels, axes min/max, some colors, etc. Internally it constructs the options JSON and passes it to a TimePlotRaw widget. I could have just as well written a TimePlotNode, i.e., a Node-RED node, that presents the same kind of configuration of labels, axes, etc in NR and then outputs the JSON that can be sent to a FlexDash TimePlotRaw widget.

So if you look at one of your nodes, do you generate angular html on-the-fly as the user changes settings, or do the settings just translate into a message that you send to the front-end angular code? If it's the latter, then that's really not that different from the TimePlot stuff... Maybe you can point me at a sample UI node of yours to look at?

I haven't really :laughing: from FlexDash's point of view it's just another widget, I believe. I don't have much experience with video so I'm probably not the best person to implement such stuff...

Morning Thorsten,
Thank you for at least having a look at my concern!!!!
I have started a separate discussion, because I don't want to pollute this one with your nice periodical updates...

Hi Walter,
When we ever would have to migrate our UI nodes to Flexdash, then we will of course assist Kevin with that. Because I assume Thorsten will not become a hard core video stream expert... No offense Thorsten, but just thinking out loud :wink:
Of course if it is possible to migrate all our UI nodes to Flexdash. But we will hopefully find a solution in that other discussion that I have started. To be continued there ...

1 Like

Is all well Thorsten? - it's suddenly gone very quiet..

Haha, yes & no! Deer discovered our orchard, so I had to take some emergency measures to try and protect everything. That took out a bunch of days, plus some other emergencies... I prepared a release and am testing it today to see whether it's usable before I announce it. Then I have to get back into the flow of things...

1 Like

That's good to hear :smiley:

I put together a v0.2.2 release of FlexDash :tada:
As usual, it can be run from https://tve.github.io/flexdash
The git repo is also up-to-date.
I did clean up quite a bit since v0.1 and added the panel widget mentioned a week ago. Please let me know if you bump into issues.

Quick heads-up that FlexDash seems to accumulate memory over time, so don't let it sit there overnight or your machine may have run out of memory by morning...