Discussion about a new Dashboard

Node-RED has two web servers internally. One for the admin tasks including the editor and one for user-facing tasks including Dashboard.

Up to now, uibuilder has used the user-facing one to deliver the UI. However, you now have the option to create a separate web server. All of them use the same instance of ExpressJS so they aren't really "separate" servers.

The 2 native Node-RED ones use the same port. If you choose to use a custom server for uibuilder, it uses a separate port. This is helpful if you do want to use NGINX/Caddy/Apache/etc as a reverse proxy as it means that you can overlay different settings such as authentication to uibuilder than to Node-RED itself.

This comparison must have been created by React dev. Learning curve easier for React than Angular? There is no way this is true with all those strange quirks of React and its own js-xml like language. Angular only adds two parenthesis to bind data to the HTML, rest is mostly like pure HTML/JS/CSS which is much easier for newbies. (being webdev for *teen years I haven't seen anything uglier than React my whole programmer life)

Anyway, as for the new dashboard, with current one I struggled to modify UI via node template when I wanted to add a clock in the top bar or some additional info like battery level - so no separate widget but base layout change - would be good to allow such action with the new approach.

Maybe a neat idea for transition period and for abandoned UI nodes would be to add a wrapper widget that you can place in the new dashboard and attach the old UI node to it? A bit similar to iframe node showing Grafana widgets? With such wrapper node backward compatibility won't be such a burden for the new dashboard.

The dashboard at the moment is almost perfect for my use case. There are a couple of minor bugs and issue, but nothing I can't ignore or work around.

The only thing I would love to see would be to have 2 or more dashboards, each using the same control nodes but is laid out differently. One I can format for a mobile device and one for a touch screen. At the moment it's very difficult to try and split controls into groups so that they "flow" properly on both devices and it doesn't quite work..

2 Likes

I take this opportunity to enter the discussion opened by @dceejay for which I can only thank for everything he has done and is doing, even at the level of technical support.

You have by now listed many pain points that the node-red dashboard suffers from.
Advance that I am not a computer scientist, I am an electrical engineer and I deal with the design and development of industrial systems, building automation and home automation and as operator interfaces we usually use a SCADA.
I certainly can't argue that the dashboard took a lot of work and I also thank @BartButenaers .

Node-red has now reached an enviable maturity from the point of view of software robustness ... but as someone mentioned ... the dashboard must not weigh down the server and / or decrease its reliability.

The current dashboard, honestly, I do not mind at all, on the contrary I would say that as a development speed it is the fastest and most functional.

I'll take stock of my experiences a bit:

-The node-red dashboard honestly, I don't mind at all, on the contrary I would say that as a development speed it is the fastest and most functional. Unfortunately I don't use it for work, but if I have to do some fine-tuning on the PID adjustments of the controllers, I develop one on the fly if I don't have a SCADA or UI available.

-The unified-red as a dashboard, as an approach I really like. First, the node-red link is moved to "http: // myip: 1880 / admin", which leaves the classic link opening the unified-red UI home page. Second, it has user management with user levels. There is the management of alarms with acquisition, and history (and here we understand why the database is required), for a basic use or from the operator panel it is excellent. Trends seem powerful (I need to go deeper into whether they archive on DB or not). Dark / light mode management from interface and basic color change (almost nonsense, but the eyes thank you). A powerful graphical scheduler. Multipage management. For sure I skipped something, however, it is not yet so stable (maybe it's my configuration), there is no multilingual management, I can't leave half the software in Italian .. and half in English, especially on the UI. I know it is and stupid ... but at least the logo that is editable (there of course it will be the choice of the developer, who I have already asked for support).

-I haven't tried the ui builder, not because I didn't want to, but because I lack some basics, I honestly don't know where to start and at least to understand how it works I should follow a step-by-step project (maybe I missed some info and I apologize).

Node-red covers many different areas and the basic dashboard has far exceeded all these needs thanks to its flexibility and simplicity. Dashboard 2, if I can afford it, must have the same basic qualities, flexibility, ease of use, stability. And if you are able to overcome the limits of the current dashboard with the requests that many require, even better.

As always, I make myself available in case I can help in the development.

PS. An image library (maybe svg) to be able to develop even something on a graphic level. It would not be bad (to be used later with the svg node or other developed ad hoc).

I thank everyone for the space they dedicate ...

4 Likes

Best thing to do is jump in. There isn't much to learn about uibuilder itself but it helps if you know a tiny bit about writing web pages. There are some excellent VueJS tutorials around and if you aren't sure of yourself, I recommend that you start with them and use the native VueJS cli because it lets you follow along with the tutorial without having to worrry about Node-RED and uibuilder.

Once you have spent an hour on a tutorial, the concepts should be a little more familiar. Then just install uibuilder onto Node-RED and import one or two of the examples and have a look at the front-end code, it is really short and hopefully pretty logically laid out.

That's it. uibuilder gives you a communications interface between Node-RED and your front end for minimal boilerplate code. It then supports you for installation of any front-end libraries you might want. And it lets you edit front-end code right from the Node-RED editor if you like (but you don't have to, I do most of my coding in VScode and only use the editor for quick changes).

3 Likes

Thank'you very much for the support.

1 Like

I really like the idea of using custom elements. I made a website a couple years back that consisted of nothing but custom elements. It is a pretty nice way to encapsulate functionality. If we did go the route of using something based on custom elements, the new dashboard could define a base class that included required functionality and we could define our own class that inherited from that.

I would prefer not to support old browsers (TBD on what defines old).

Get rid of the var and only use let and const.

Setup a good linter configuration to make things easy for somebody to contribute code that is formatted to an agreed upon style.

No jquery. My favorite flavor is vanilla for most things code related.

These were just my opinions and certainly not demands. Thanks for the current node-red-dashboard, I appreciate the years of hard work that went into it.

2 Likes

As @BartButenaers wrote, GitHub - cinhcet/node-red-contrib-component-dashboard: Flexible dashboard for Node-RED based on web-components implements most of that

  • One node = one widget = one web component
  • Most web components are implemented using vanilla JS, no frameworks (with some exceptions which use lit element)
  • CSS variables for theming
  • there are two main ways how widgets and nodes communicate, one is via web sockets and the other via ajax calls, enabling widgets to request data when they need it (which is very useful for long lists etc.)
  • There is a widget which lays out the components automatically
  • Each node can store the state of the widget and replay it if a new client connects (optional)
  • Widgets can either be configured via HTML or by the node sending configuration options to the widget

I think I still maintain it :slight_smile: It just currently does what I need, so there were no updates....

I think from a concept point-of-view, component-dashboard could be a successor for the dashboard. For it to happen, however, there are a few things to be taken into account:

  • There is a bundling step necessary
  • Currently, the dashboard is created by editing an HTML file, i.e. it is not really beginner friendly. For it to have an editor as the current dashboard, one needs to create a widget that programmatically instanciates the components, which is certainly doable, but nothing I am personally interested in, since I think creating the dashboard with HTML is faster, more versatile etc etc
  • The biggest issue, in my opinion: One would think that one can use whatever JS/CSS framework within web-components to create widgets, enabling for example to have the template node of the old dashboard as a new web-component. However, in practice, it turns out that web-components still have a few quirks (especially with respect to CSS) that makes using some existing frameworks that have been written without web-components in my difficult.
2 Likes

Without a doubt, standards-based web components are an important future technology. The trick here is making sure that we don't disenfranchise people who are stuck with dated devices with older browsers. For example, if we use standards that are too modern, people trying to reuse older mobile devices for IoT displays might not be able to.

There are some interesting reference sites for web components though that folk considering this thread might like to read:

3 Likes

Nice references. I guess these two (mentioned by Andrei Tatar) deserves to be on the list:

Svelte : https://svelte.dev/

Lit : https://lit.dev/

1 Like

I am probably not the right audience for this thread, but I felt the need to contribute regardless...

I fall in the category of users with very basic knowledge (aka noobs), with a very sketchy understanding, at best, of anything code related, who are satisfied with the way the dashboard and its collection of nodes work at the moment. It might have a few weaknesses, but is stable and easy to pick up and very intuitive as it follows the NR philosophy, it is adequate for a lot of scenarios.

Like it or hate it, the dashboard is the feature that attracts a lot of people (perhaps even the majority?) to node-red. I would even dare saying that nodered = dashboard for most. It might not be a priority for all the understandable reasons highlighted in this thread, but yet it is probably the most popular feature, judging by the number of posts related to the subject on this forum (over 30% of the overall number at a glance).

It also makes a fantastic PR tool for the node-red project. I certainly would never have looked at Node-Red if it wasn't for the dashboard. Additionally, using it encourages people to explore the wider node-red environment and gradually build up the confidence required to eventually produce pretty complex apps. So yes, there should be a project owned Dashboard IMHO.

The word "easy" used frequently in relation to some dashboard alternatives mentioned in this thread always seems a bit strange to me to be honest, especially in the context of a low-code, flow based programming model. I tried some of them and was lost pretty quickly (empty gaze, rapidly blurring vision, irritation, increased pulse rate... :slight_smile: ) Something is only easy if you know how to do it, or if the product guides you in an intuitive fashion through various steps or processes. The learning curve and time required to acquire the knowledge needed to be able to simply jump in and try whatever is the flavour of the moment is completely underestimated by a lot of people who are in the fortunate position of being able to code.
I am not saying these alternatives are bad, just not as "easy" as some make them up to be, so mostly out of reach for users like me.

For me, the current approach - UI widgets / some minimal layout tooling - is the right way to do it . I am completely agnostic/ignorant on the technical front, what matters to me is the functionality and ease of getting something up and running quickly with a few drag and drops and parameter configurations, without having to spend a lot of time researching one or the other development framework to able to get a message sent at the click of a button. It would be a shame if this was to get lost along the way.

For now, it's very reassuring to know that the feature will not disappear anytime soon and I hope it remains a standard integrated feature in the future.

16 Likes

What is wrong with Angular 12 ?

It is smaller, leaner and more responsive. More mobile friendly.

Apparently using ng-Upgrade and the Angular CLI one can run the legacy AngularJS app alongside your new Angular 12 replacement.

Migration can then be done in a stepwise manner. New component based widgets can be developed and added in parallel to the translation of existing widgets.

There are a ton of examples out there, after all it must be a well trodden path and ngUpgrade is now in a feature complete state and they will continue publishing security and bug fixes until December 31st, 2022.

I for one would dedicate time and effort as best I could to such an approach.

2 Likes

Hi @ozpos,

For me absolutely nothing is wrong with Angular!

But at the time being, one of the main reasons that I started with Node-RED was the fact that the same programming language (i.e. Javascript) is being used all over the place: in function nodes, in template nodes, in custom non-ui nodes, in custom ui-nodes, in the flow editor, in the core ...
Don't understand me wrong: I am certainly not a fan of Javascript. And Typescript has lots of advantages compared to Javascript. I don't want to start an off-topic discussion about that here !!!

But I personally really hope that this project will keep using one programming language. Whether it is Typescript or Javascript, that doesn't matter to me. But a single programming language. And for Node-RED that currently is Javascript. Although recently the flow debugger has been developed in Typescript, which unfortunately makes my statements a bit weaker :roll_eyes:

Imho that is currently an advantage of Node-RED that allows hobbyists like me to contribute to Node-RED, without having to learn too much different technologies in our very limited spare time after a hard day at our daily job. It really lowers the threshold to start contributing ...

Bart

7 Likes

I've been a bit absent from the NR forum for a few months due to life happening... I did spend quite some time working on FlexDash earlier this year. I believe it ticks many of the boxes that people have been putting forth in this thread. It uses Vue and Vuetify and stays pretty close to simple HTML/CSS stuff and overall it's not a lot of code. I intend to come back to it soon 'cause I need more of it... In the meantime, I have a couple of comments on this thread about what I learned

The current dashboard has a fundamental limitation, which is the one-to-one correspondence between a node in NR and a widget on the screen. This is coupled with the "fundamental benefit" in the eyes of many (but not all), that one can drag a node into the NR editor and something appears in the dashboard. In FlexDash one drags a widget into the dashboard and then sends it messages, which has a different set of benefits, such as being able to deal with the layout stuff easily and being able to create arrays of widgets programmatically. I don't know how many people that claim they must have the current model have even experimented with the alternate model... I do believe that it would be possible to add "widget nodes in NR" to a FlexDash type of model, I do not believe the reverse is nearly as easy.

When I built FlexDash I wanted to make it easy for others to try it out and give feedback. As a result on can use FlexDash without even installing one thing in NR. I also did spend quite some time with documentation and getting started help. However, in total, I don't think more than one or two people have tried it. Maybe that's just because it's not attractive. I wonder, however, whether it's possible for any 3rd party dashboard to get any level of attention. I don't know what the solution might be.

WRT to being "tied to a framework" I believe that's actually a great thing. The current dashboard is very tied to NR's editor and there's a ton of custom code to implement basic machinery. That makes it very difficult to get into and contribute and it makes it very difficult to evolve it forward. There's basically zero documentation on how it works, it's "here's a big pile of code, figure it out". I'm not saying that to be negative and I'm sure it was the best way to do things at the time. But when you build on a framework you also inherit documentation, tutorials, and a wealth of distributed know-how on how the beast works overall. Sure, each app adds additional abstractions, but there's at least some initial understanding of how stuff is structured and functions.

Let me be more concrete. Do you imagine building a dashboard or any modern web app that doesn't use a reactive model (as in the way react, vue, svelte are at the core)? I hope not. Do you believe it makes any sense to invest another way to implement reactivity in a javascript web app? I hope not. Doesn't that mean you should use one of these existing frameworks and leverage all the know-how that comes with it?

The next step is that if one uses Vue.js, for example, that doesn't mean one has to use Vuetify or Bootstrap. I do use Vuetify in FlexDash because it saved me a ton of time. I think it could make sense to slowly reimplement stuff from scratch, i.e.plain HTML and CSS, but that has to be thought through carefully. A lot of FlexDash's widgets don't use Vuetify, and that's great, but for those that do I'm really happy I didn't have to spend the time reimplementing tree selectors or multiple-select drop-down lists or figure out weird low-level stuff like how to properly size fonts so it works everywhere.

Let me be more concrete again. Suppose FlexDash didn't use Vuetify. It would still need title bars, panes, menus, drop-down lists, buttons, icons, scrollbars, fonts, text styles, yadda yadda. So wouldn't that mean I'd just be implementing a custom framework? That would have the dubious benefit that no-one else in the world uses it or knows how it works? And that most likely would have only the slimmest documentation? In which world is this really better?

Something I really like about FlexDash is that it's actually developed to be completely independent of NR and can in fact be used without NR (although I haven't spent time developing the pieces one would use for that). What this means is that there is actually a an API that defines the interface between NR and FlexDash. It would not take a whole lot of time to write a React-based version of FlexDash (assuming one knows React, which I don't). It has other benefits, which is that one can develop UI widgets very interactively with a standard Vue IDE set-up without needing to deal with NR nodes. But ultimately it seems to me that this type of decoupling is what would allow new dashboards to evolve over time without having to jettison everything. (I'm not claiming FlexDash has the right API or that I've properly documented it, this area still needs more thought and work.)

Please don't misunderstand me. I'm not trying to say FlexDash is it. I'm talking about it 'cause I learned a lot while developing it. I still have a pile of open questions and unsolved issues and am looking forward to diving back in.

6 Likes

Something else I wanted to comment on is the whole debate over being able to create a UI widget in the NR editor. I'm trying to understand why a lot of folks are so insistent on that. I believe one reason for that is that this is the way it is. That's an unchangeable fact :-). But I believe some people also find it more intuitive (than what? not sure...). What is it exactly that is more intuitive?

Is it that there is some node in the editor that says "I'm showing the value coming in to me in a chart"? In the editor you don't really see where that chart is, yes there are property sheets that "tell you" but unless you bring up another browser window with the UI you don't see where the chart ends up or how it looks. So is it that link that says "this value is shown in a chart"?

Or is it that the UI node gets configured in a property panel in the NR editor? As opposed to switching to a different browser tab to see the dashboard and configure it there? Is that somehow too cumbersome? What if clicking "edit" on the node brought up that dashboard tab? Or overlaid the dashboard on the NR editor with the node highlighted and ready to configure?

Or am I missing something completely?

3 Likes

Hi, How does the memory footprint compare with NR Dashboard ?

Will it run OK on a Pi Zero for instance ?

Sorry for the late response. From what I gather Typescript is not mandatory and plain JS will also work.

2 Likes

Some of the ui nodes also have to do some things in the back end.

For example, one of my ui nodes for playing live mp4 video also adds an express route to host hls.js files. I debated on whether the user should have to supply their own hls.js lib, or make a 2nd node just for hosting it, or include it behind the scenes. Ultimately, I chose just to add it without burdening the end user from having to take the extra step of adding the dependency.

Another example is the handling of messages received from other nodes, which could be changing how the front end is rendered or its display of data. For mine, that would include the changing or unloading of the video playlists.

From my point of view, most users simply want to drop a node onto the editor and see it working on the dashboard with minimal configuration.

2 Likes

Ah, good point. There's nothing preventing the existence of nodes to pre-process data or messing with express routes. One could argue whether separating them from the actual display nodes helps or hinders, it probably depends on use-case.

Hmm, then the current dashboard miserably fails in my experience :laughing:. My experience is that I add a UI node, then mess with property sheets for it to show up in the right place, then mess with more property sheets for a long time for it to look right and show what I want. The whole thing requiring me to redeploy a hundred times and switch between the NR tab and the dashboard an equal number of times.

I much rather add the widget directly to the dashboard, link it with the sender in NR, and then interactively configure it without all this redeploying and constant switching back and forth. I must be weird...

Ah, I remember another "ease of use" feature that Bart brought up this spring: it would be good for UI widgets to be packaged with NR nodes so if someone downloads and installs a pack with new nodes they automatically get the UI nodes that go with them. As opposed to, say, having to somehow download another archive with the UI widgets.

Hi @tve - welcome back !
Not sure what you mean re packaging.... Ui nodes can be installed just the same way non-ui nodes are - and can be bundled into a meta package if required or not... For simplicity we do bundles the core set into a single dashboard install - but anything extra can be bundled as the author wishes. (unless I'm missing the point - usual for a Friday afternoon)

1 Like