FlexDash: towards a new dashboard for Node-Red

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...

I run my Raspberry Pi 4B w/ NodeRED in Kiosk Mode.... So the Dashboard is definitely sitting there running all of the time.

We'll have to apply a solution a solution of sorts for that scenario if FlexDash is to be adopted.

1 Like

I have dynamic loading of new/custom widgets working and now I'm wondering how to expose it... Fundamentally, FlexDash needs to get the contents of a .vue file, i.e., just a long string that comes from somewhere... But where?

I believe there are at least two use-cases:

  1. I just wrote a really cool widget and I want to publish it, how can I do that and how can someone else download it and use it?
  2. I have an idea for a really cool widget, how can I do edit-test iterations conveniently and quickly?

The first use-case is pretty easy to solve 'cause all it involves is downloading a .vue file (or a transpiled .js file) from some URL, whether over the internet or locally from NR.

The tricky use-case is the second one. Is there a convenient place to edit such a file? Or does every user have a different notion of what's convenient? And after editing, what tells FlexDash to load the new version? Thoughts?

Hi Thorsten,
Could it be that people currently use a Template node for this kind of experiments? If so, the vue file could be edited in the Monaco editor of a Template node. So the Vue stuff could be stored in Node-RED. And the user injects a message to tell Flexdash that the Vue file has been changed.
But then of course it is completely integrated into Node-RED. And I assume you are looking for a setup that can function on its own?

OK, so editing in NR... What are the options?

  1. There could be a FlexDash-Widget node that you put into some flow, it has an editor box like the UI template node, when you deploy it updates FlexDash? The node itself has no input and probably no output either, unless the output is used to connect to a FlexDash-Out node (but I really don't want to send the widget code over the websocket, so this is a bit artificial).

  2. There could be a general FlexDash node to edit widgets that provides an editor box with a widget selector, so you can select which widget you want to edit.

Is there another option?

Another week, another release, v0.2.4... I fixed the main memory leak, so now things don't blow up anymore :fireworks: There are still some minor leaks adding a handful of MB/day depending on chart refresh rates.

I spent most of my effort on improving the way FlexDash can be loaded/started. It's now possible to host a single small HTML file that sets up some configuration options and then loads FlexDash proper from anywhere. The HTML file contains a couple of options:

      flexdash_options = {
        // dashboard title, shows up in top-nav and in browser window title
        title: 'MyDash',

        // theme, default is light, alternative is dark
        theme: 'dark',

        // primary data connection, pick one of sio or ws
        sio: 'https://localhost:1880/io/flexdash', // socket.io
        //ws: 'wss://core2.voneicken.com:1880/io/flexdash', // websocket

This is also where info about loading custom widget would be placed... As described in the updated README, there are now a slew of options for loading FlexDash:

  • Point your browser at https://tve.github.io/flexdash and use the HTTP or HTTPS demo, you can then interactively establish a data connection. This is great to try things out.
  • Point your browser at the demo and use a query string to tell FlexDash how to establish a data connection. If you bookmark the URL with query string this is a workable solution, but it doesn't look pretty in the address bar.
  • Copy the start.html template to your own web server (for example, Node-RED's static pages) and edit the flexdash_options.
    This lets the browser load the hosted FlexDash files, but allows you to customize FlexDash (title and theme) and pre-define the data connection.
  • Download the (not yet available...) FlexDash bundle and host it on your own web server. This way you're independent of the hosted files. You can customize FlexDash by editing index.html at the top level.
  • Clone the FlexDash repo, custommize to your heart's content, run npm run build and host the resulting dist directory wherever you want to.

Loading custom widgets shows signs of working, but is not yet supported... Gotta leave something for the next release...


Some time ago I had created a node that offered some configuration, but my node didn't really worked with input/output messages. The feedback I got from the community was that I had to create a (right) sidebar panel in the flow editor, instead of putting my configuration on the config screen of a normal node. And they were right, so I created a (right) sidebar panel in the flow editor. Because I realized at that moment that I had developed a node, only to have a config screen where users could enter the configuration data. But indeed it wasn't really a full blown node, that handled messages...

Could that perhaps be a better solution for your use case, if you don't have an input or output? Regardless of the extra work involved of course...

Yikes, thanks for the heads-up, that sounds like even more work... I think I'll pick the option where the node outputs a message to feed into a flexdash-out node :crazy_face:

1 Like

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