FlexDash: towards a new dashboard for Node-Red

Share Your Projects
62

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
63

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?

64

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?

65

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?

66

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:

    <script>
      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
      }
    </script>

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

2 Likes
67

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

68

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
69

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