Node Red Dashboard

Peter Scargillnode-red, node-red-dashboard25 Comments on Node Red Dashboard

node-red-dashboardAs 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

node-red-dashboard[8]node-red-dashboard[6]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.

node-red-dashboard

Let us know your experiences with this.

25 thoughts on “Node Red Dashboard”

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

  2. Hi,
    I, like David, want some indicator LEDs/Lights in the Dashboard.

    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.

    Thanks,
    Kurt

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

  4. Node Red Dashboard does not work on the Node-RED version prior to 0.14. It’s always a good idea to keep your Jessie updated.
    sudo apt-get update
    sudo apt-get upgrade -y

    1. Given recent improvements in Node-Red it is always as well to keep it up to date – having said that – something has happened in the last month with NPM and Node-Red as my script is not always working. Weekend job is to find out why, meanwhile if anyone cares to take a look at https://bitbucket.org/snippets/scargill/KqgAe/latest-script-september-5-2016-read-the

      Lines 288 to 298 inclusive and tell me why some folk might have difficulty installing node and Node-red with the script – that would save me some work this weekend.

  5. Hi
    How do i stop node red ? tried to install without stopping ! now no UI or dashboard?

    1. I’ve had a few requests like this recently – guys – you need to go to the Node-Red site and READ THEIR DOCS. This is not a Node-Red training site.

  6. Hey Pete,

    Have you had any luck updating switch states in the UI when another interface changes the state of the device the switch is controlling?

    Seems to me they need a second null output so we can update the switch at will.

    thanks for your thoughts.

  8. Peter,

    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.

    Craig

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

  9. Well, I’m going to be the first to moan… Gone are radio buttons. ?
    I’ve got several contrib-ui pages that use them.

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

  11. When I type cd / home it shows the change of directory ie..
    pi@atticPI:/home $
    when i type cd /home/pi
    although it has changed directory it shows as…
    pi@atticPI:~ $
    Anyway back to the linux books

    1. “~” 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

  12. Pete
    I have the same structure are yours.
    I can cd /home/pi/.node-red
    but not
    cd /home/pi……. why?
    anyway I think I’m up and running now.
    thanks

  13. Linux is tough!
    I have been trying to drill down to node-red to start the uninstall. I do an “ls” and see the pi directory but it won’t let me change to it?

    pi@atticPI:~ $
    pi@atticPI:~ $ cd /home
    pi@atticPI:/home $ ls
    pi
    pi@atticPI:/home $ cd /pi
    -bash: cd: /pi: No such file or directory

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

      1. And yes, Linux can be tough – but having looked at the alternatives and support etc…..right now Debian seems a good option.

        OH HANG ABOUT… you did cd /pi

        a leading slash like that indicates you want to go right back to the bottom – there is of course no /pi directory – there’s likely a /home/pi directory.

        Easiest….. cd /home/pi/.node-red

  14. The Dashboard tab in node-red makes arranging the UI easy.

    The light and dark themes are a nice touch.

    The developer promises even more features. Looks pretty as it is.

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

  15. And this note yesterday in the Google Group:

    Hi,

    I’ve just hit publish on node-red-dashboard. It is now live on npm.

    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.

    Nick

    There is some documentation in the GitHub repository – https://github.com/node-red/node-red-dashboard

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

    Andrei

Comments are closed.