Alternative of current ui nodes in the FlexDash dashboard

General
81

Hi @PizzaProgram,
Thanks for the links! But that is not the problem, because I have already published lots of other nodes. And the node already works fine, because I use it every day. But I am not going to publish it ever on npm, because I don't have time to give support (which will be certainly required for Android notifications issues).

1 Like
82

@tve,
I have been searching a bit on Discourse, and found some discussion that might give you some ideas:

  1. Here is the original announcement of my ui-web-push node, where you can see the discussion of how I solved my ui node's dependency of the web-push node. So the problem was here that the web-push nodes had a config node, and I needed the same config node.

  2. Here is somebody who had a similar question.

  3. Here is explained how I have shared code between my msg-speed and msg-size nodes.

Not sure if my approach from 1 is exactly what you need. Because my problem was that the config nodes where inside somebody else his git repo. But in your case you could put all kind of 'common' stuff into a separate npm package, and you could have all your repos (node-red-flexdash, node-red-fd-corewidgets, ...) depend on that npm package. Of course you need to make sure that your config node is only registered once, because otherwise Node-RED will start complaining (see 1).

Indeed it might again be better to start a separate discussion about this, to get some more response.

83

Quick update... I took a step back and wrote a tiny app to test the run-time linking of external widgets into FlexDash so I know how I can support pre-built Node-RED modules with UI widgets. During that process, the first Vuetify 3 beta got released so I'm now porting FlexDash to that (and Vue 3). So far so good, everything is lining up nicely, it's just going to take a few days to get back into a running state...

In the end, I believe the Node-RED integration will have the following features/options:

  • fd-custom node where widget source code can be typed into an editor (similar to ui_template)
  • NR node with flexdash subdir containing .vue files with simple widgets
  • NR node with flexdash subdir containing .vue files plus more stuff for more complex widgets that have dependencies on additional libraries
  • hot-module-reload and debugger for the last two cases, possibly also for the first case (fd-custom node)
  • auto-generation of NR config UI for widget params, can be overridden where desired
  • auto-generation of NR node code from boilerplate, can be edited at will

And then there's the whole config saving, which needs massaging to get to the point where one can export/import flows that contain FD widgets and keep the layout intact.

The thing that concerns me a little is that NR makes it quite cumbersome to provide a UI to manage all this. For example, it would be nice to take a fd-custom node and press a button to produce an NR node from it, i.e., auto-generate all the files needed. Similarly, it would be nice to be able to see error messages when something goes wrong and to be able to control the hot-module-reload. Maybe someday someone other than me can write a sidebar UI or something like that...

NB: I bumped into another interesting option while researching, which is to support plain Web Components. The current FlexDash widgets are Vue components with a few extra conventions, for example to provide help text and to declare an output. Vue components are Web components with extra capabilities and support, e.g. for reactivity. It would be pretty easy to wrap std Web components to pull them into FlexDash where the wrapper would provide the extra info/metadata. I don't know what that would really enable but it's a thought...

4 Likes
84

Just been playing with Svelte again and, having recently written a couple of nice web components and starting to experiment with configuration-led interfaces, I wanted a way to dynamically display both Svelte and web components. Turned out to be surprisingly easy. Svelte natively supports dynamic components in the UI. But to get native and custom web component tags dynamically displayed required just a small Svelte component "borrowed" from the Svelte site and tweaked to allow dynamic passing of attributes.

I spent quite some time trying to see if web components alone would be sufficient for creating new dashboards but the truth is - they aren't. They are far too low level. Great for simple things like my syntax-highlight component and the html-loader component. But once you start getting into dynamic interfaces and nested components - forget it, life is too short! I played briefly with web component build tools such as LegoJS but honestly, it wasn't worth it. By the time you've got to that, you may as well use Svelte or VueJS.

3 Likes