Node Red Dashboard

As regular readers and fans of node-red will know, I’ve been a fan of node-red-contrib-ui for some time – I wrote about adding security to it some time ago and until Imperihome came to my attention I was developing pages based on this. But, sadly the fellow developing it ran out of time I guess. One day he was working hard on it – the next – nothing.

Some time ago I became aware that the Node-Red guys were developing this and today they announced that Node-Red-Dashboard was available on NPN.

If you have node-red-contrib-ui on your Node-Red installation – and are not using it – simple uninstall.

I stopped Node-Red, in a terminal went to my .node-red directory and..

npm remove node-red-contrib-ui

npm install node-red-dashboard

That simple really, at least it was for me – unless you’ve heavily invested in the former there is no point in keeping it any more as development has stopped. So – what’s new – well, it is early days, if you don’t like simple light or dark – well, that’s unfortunate because right now you have two theme options – but that’s a start and the gauge and graphs shown above right took seconds to set up with this simple set of nodes – a couple of injectors firing out 2 numbers – and the gauge and graph nodes – that’s it.

Dashboard looks remarkably similar to node-red-contrib-ui and time will tell how compatible it is but the gauge alone has been markedly improved and is lovely – you can control size, there are four different types of gauge – it really is easier to try it out than to discuss. There is now a simple dashboard on the right of the Node-Red web page to allow you to re-arrange items by drag and drop – this is a great improvement.

You’ll be making simple pages of imagery in no time – as for actually making worthwhile dashboards – well I suspect that will be down to how good the documentation is.

Let us know your experiences with this.

Post navigation

25 thoughts on “Node Red Dashboard”

On March 8th, the author of node-red-contrib-ui posted this in Google Group:

Hi guys,

Sorry for being inactive (both development and group) for the past few weeks. I have a lot of personal issues that I need to take care of and a full time job that leaves me no free time.
Dave C from Node-Red contacted me about making this project a part of Node-RED. I have agreed and will soon be in the process of transitioning the project.

This is the successor to the node-red-contrib-ui project started by Andrei Tatar which we've brought under the main node-red project to develop it further.

node-red-dashboard provides the same functionality as contrib-ui, but we've also taken this opportunity to make some breaking changes. This means it is not a 100% seamless upgrade between the two. If you have an existing dashboard with contrib-ui, you should upgrade with care.

Some quick notes on migrating:

1. backup your flow file so you can roll back to contrib-ui if needed. We've tested a set of basic migrations, but there may well be edge cases we didn't think of.

2. node-red-contrib-ui and node-red-dashboard provide the same set of node types. This means you cannot have both installed at the same time. Make sure you uninstall contrib-ui before installing dashboard.

3. When you first open a contrib-ui flow under dashboard, your nodes may have errors against them. This will be because they are missing a 'group' node. In the new dashboard sidebar (see below), you'll get a notification that not all nodes are in groups, with a button to try to auto-fix it... clicking that should create a default tab and the missing groups for you.

4. If you used the Template node to create a custom theme for the dashboard you'll soon discover we've changed the css classnames of all the elements to make them uniform and consistent.

The main new feature of this version is the addition of the dashboard sidebar in the editor. This gives you a tree view of your tabs/groups/widgets, within which you can drag items around to move/reorder them between tabs or groups. It is also where you now add custom links to the dashboard's menu, rather than add them as nodes in the workspace. We've removed the ability to set a different theme per tab - now you set a dashboard-wide theme via the sidebar and we provide a default dark and light theme. We will make it easier to create custom themes in the future - so you don't have to resort to a Template node injecting css.

The early feedback we've had from a few beta testers has been very positive - but as ever, we want to know what you think.

AH!! I was wondering about re-ordering - completely missed the dashboard - that is bloody marvellous. AND we have two themes already - no doubt it won't be long before we see more options - this is what UI should have been. I can see lots of development coming on. As before, "template" will no doubt prove the more challenging node - "Angular" is not that easy to get to grips with unless you put the time into it - but the possibilities of course are endless. Andrei had the ability to use your own graphics and I 'm not seeing that in here yet. But this really is very good.

In the PI directory you should find a .node-red directory - that's a hidden directory - of course your installation might be different in which case I can't help as I don't know where it is - but always using my installation script, the relevant directory is /home/pi/.node-red

"~" means your currend direcory is your Home Directory
type 'pwd' to find where are you
type 'cd' to go to your home directory
type 'cat /etc/passwd' to check all home dirs for all existing users
type 'ls' to find all files in your directory
type 'ls -a' to find all files in your directory including hidden

and finally type 'mc' to start midnight commander and see all you need in file system

I'm not arguing Keith - but the solution - get onto the node-red google group - the two big players in there are the people who are putting this together - talk to them - put your case - you may be surprised how helpful they can be.

In your travels on all of this have you found anywhere a Widget for Node-Red that i can place a scrolling text box on the screen ? What i want (as well as the standard controls etc) is a status style window that i can pump text out to when in testing mode (something i can send "Hi I am Alive and Doing this now" from each of my devices.

I have not Craig but as I said to Keith earlier - Node-Red Google Group - ask - you might just trigger the guys off - after all they are putting this together for people like us -and I am completely sure they are open to great ideas.

Hi
Love the dashboard app.
I am trying to place some indicator lights on the dashboard, currently I'm using text Running and Stopped to indicate a pumps status but would prefer to replace with a lamp. Am I missing something?
Thanks for all the effort
David

I'm confused why something as important as showing a status indicator is missing from the Dashboard. Yes, there are LEDs on the actual device...but I want to see some state information in the Dashboard.

Someone might have built something on https://flows.nodered.org/ but yeah there's no nice flashy indicator node built into the dashboard. You can however include pretty much whatever markup you like in a dashboard template node. Here's what I use for an on/off light bulb indicator next to a light switch:

Your email address will not be published. Required fields are marked *

Comment

Name *

Email *

Website

Notify me of followup comments via e-mail. You can also subscribe without commenting.

Select an image for your comment (GIF, PNG, JPG, JPEG):

Welcome

Hi - I'm Pete and this is my technology blog. It is BIG. Use the search box below or check out the archives and other links below - be sure to SHARE what you like using the social media buttons.

Please register or log in - the top menu changes a lot when you are part of the party... and once in, don't forget to tick the box so you will get email follow-ups to comments.

I am tied to no organisation - I do this for the joy of learning. Maintaining a blog of this size takes a lot of work and I hope you find my contributions useful - if you want to help fund my gadget habit or buy me a coffee - here is a link.

Disclaimer: Because I have no idea of your level of technical skill or the requirements of your country laws in terms of electricity supply etc., I accept no responsibility for any damage caused through following advice in these pages. When dealing with mains voltages you should satisfy yourself that whatever you are doing is safe and if unsure, seek advice from someone who is sure.

Notice: I'm always happy to offer advice on stuff I've written - and indeed take advice. If I can help in any way just let me know but PLEASE don't ask me how to program in C/PASCAL/NODE/etc. There are many resources out there - if you want to program and can't - there's always Google.

Newsletter

The blog will send you occasional emails containing links to recent posts. No ads and your email will not be given to third parties. There's an un-subscribe link on each email. Invalid names will be deleted.

Links

EE Times | Electronic Engineering TimesEE Times connects the global electronics community through news, analysis, education, and peer-to-peer discussion around technology, business, products and design