node-red-dashboard 2.0 now available

[Nicholas O'Leary]

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

[Steven Daglish]

Thanks for the great work guys.

Just updated from the pre-release version and so far everything looks great.

Can't see any obvious issues but will let you know if I find anything.

I need to play around with the dashboard editor a bit more as that looks interesting.

Steven

[Walter Kraembring]

Thanks!

Upgrade worked fine (uninstalled ui and then installed dashboard), no problems but I have a very simple dashboard

The only thing that isn't working for me is that only the "light" theme is used, even if the "dark" theme is selected

For me it was different: it all started with light. Once I selected to dark it certainly switched to dark but the reverse to light is not possible anymore

Using node-red 0.14.3

Best regards, Walter 

[JR01]

Yaaahhhhiiii !

Thanks Nick, also upgraded to pre-release 2 days ago. Smooth and Good !

http://iotplay.blogspot.co.za/2016/07/using-new-node-red-ui-dashboard.html

[Walter Kraembring]

I'm also not getting a difference when I change to dark theme. 

After a reboot, I have now also the same behavior 

[Paul Reed]

All good here, just had to sort out the groups and labels and the transition went smoothly, and without issue. The dark scheme also a nice addition.

Paul

[Peter Scargill]

All looking good to me - this is what I had hoped UI would become - if I may, most of it is trivial to use - for some (including me) that TEMPLATE isn't - all good until you try to do something different with it...  A suggestion - could be you guys - could be some other place - a good selection of examples with different I/O including variables would go a long way to realising the potential of that node.

[Brad Hopper]

Sadly for me this just isn't working well.

I have two node-red rpi's - a rev2 and a Zero. Been working more with the Zero since that's my intended deployment form.

However, I originally deployed (uninstall contrib-ui then install -dashboard) on the rpi2, and as soon as that finished, I rebooted the machine and it wouldn't come back up. I couldn't get into it via SSH, just locked out. Since that deploy it's just been a doorstop. I don't think it's bricked but for some reason can't get back into ethernet or wireless to communicate. Haven't lugged out the hdmi cables to plug into tv etc since I don't have a wired keyboard...

Anyway also did a deploy to the Zero, which had not yet been deployed the old contrib-ui. Tried multiple times to npm i node-red-dashboard then reboot but the nodes just wouldn't show up. Finally, I think I had to update to 14.5 first then do sudo npm i -g to get it to show up. Then the machine is very flaky to connect to the web console. It just seems to hang over and over at different points during painting the canvas area. I think there's some relationship with the wireless because the board previously connected very well from my bench and I could do whatever tasks, but with the latest upgrade and dashboard deploy the connection is very flaky. If I bring the whole thing closer to the router it will connect but it seems to be running slower than before despite iwconfig showing very high quality and 85% signal.

During brief times of being up, I tried to place a chart node, which I was able to configure correctly and deploy, but immediately after deploy the system would lose connectivity. After reboot I get back to the canvas but there's no dashboard node in the flow any more. Same with a slider widget. Just seems to be more unstable now and haven't yet seen a successful chart or ui element show up, as I can't get the /ui to paint without a lost connection.

Just sort of stuck now. Is there any way to troubleshoot? Any logs to look into? node-red-log doesn't show anything (I previously, on the rpi2, changed the logging level but never saw a difference in detail of the logs). TOP seems to show the machine isn't working very hard.

[Phil Grant]

Hi,

Just removed UI and installed dashboard but no nodes appear on the left side and all ui nodes are dotted red.  I get the following when I start node red

Welcome to Node-RED
===================
30 Jul 23:47:43 - [info] Node-RED version: v0.13.3
30 Jul 23:47:43 - [info] Node.js  version: v0.10.29
30 Jul 23:47:43 - [info] Linux 4.1.18-v7+ arm LE
30 Jul 23:47:43 - [info] Loading palette nodes
pi : TTY=unknown ; PWD=/ ; USER=root ; COMMAND=/usr/bin/python -u /usr/lib/node_modules/node-red/nodes/core/hardware/nrgpio.py info
pam_unix(sudo:session): session opened for user root by (uid=0)
pam_unix(sudo:session): session closed for user root
30 Jul 23:47:49 - [info] Dashboard up and running
30 Jul 23:47:55 - [warn] ------------------------------------------
30 Jul 23:47:55 - [warn] Failed to register 1 node type
30 Jul 23:47:55 - [warn] Run with -v for details
30 Jul 23:47:55 - [warn] ------------------------------------------
30 Jul 23:47:55 - [info] Settings file  : /home/pi/.node-red/settings.js
30 Jul 23:47:55 - [info] User directory : /home/pi/.node-red
30 Jul 23:47:55 - [info] Flows file : /home/pi/.node-red/flows_raspberrypi.json
30 Jul 23:47:55 - [info] Server now running at http://127.0.0.1:1880/
30 Jul 23:47:55 - [info] Waiting for missing types to be registered:
30 Jul 23:47:55 - [info]  - ui_tab
30 Jul 23:47:55 - [info]  - ui_chart
30 Jul 23:47:55 - [info]  - ui_text
30 Jul 23:47:55 - [info]  - ui_button
30 Jul 23:47:55 - [info]  - ui_link
30 Jul 23:47:55 - [info]  - ui_switch
30 Jul 23:47:55 - [info]  - ui_gauge

Any suggestions?

Thanks.

[Paul Reed]

Isn't the requisite for node-red-dashboard to be running v0.14.x?

Paul

[Phil Grant]

Cheers,

I'll update Node Red then.

[Phil Grant]

Worked after update thanks but the test items on a dropdown don't appear, the options are there and they populate a text box OK but they are not visible in the dropdown list?

On Monday, 25 July 2016 23:19:15 UTC+1, Nick O'Leary wrote:

[Mike Bell]

Nick,

Node-red-dashboard has been working brilliantly for me, and the dark theme is nicely readable and elegant. I really appreciate the effort that went into this, but I would love to see some options for customizing a few of the nodes I use most:

Gauge (ui_gauge) - The standard (gauge) and donut forms of this node use a color range from green for low values to red for high ones. I would like to be able to reverse this for situations where high is "good" and low is "bad." 

Text output (ui_text) - Control over font style, size, and color would help in harmonizing text displays with other visual elements in the dashboard.

Notification (ui_toast) - This node would be much more useful if one could change the location,  duration, and appearance of the notification. It might also be nice to have the option of keeping the alert on screen until dismissed by the user.

Presently, these node properties can't be configured in the editor, but I assume that at least some of these changes could be hard-coded by someone familiar with the modules (and more skilled in javascript/angular/html than I am). Perhaps, at the risk of encouraging a flock of non-standard variants, the development team could provide some notes on where to find the parameters or bits of codes that would have to be changed.

Thanks again for the excellent work.

Mike

[n. Di]

Thank you this is a great help to visualize my JSON sensor data!

I have some suggestions too:

1.) Could you add a field to enter the unit for y-axis on the graph chart
2.) Maybe it is possible to select the position of the charts?

[Matt]

This is great! My laziness towards teaching myself html/css has finally paid off, I was able to throw together a site for my home monitoring stuff within a few minutes.

I don't find any of the built in gauge variants very useful, they're a bit "cutesy" for me (e.g. the animated level). It would be nice to have a plain bar graph style.

My only other request would be to be able to set the fundamental scale of the grid. Possibly an addition when more theming options are more fleshed out?

I did run into a couple of odd scenarios where the hierarchy seemed to get messed up (groups assigned to one tab but appearing in another) but I will have to try to recreate the issue in a systematic way.

Matt

[n. Di]

May I ask which size of the dashboard you have used to fit this that perfectly on the mobile screen ?
I have troubles finding the right size for the screen. And how did you exactly manage to get two sensors signals into on graph? On the graph description it says to use a different msg.topic, but I got my JSON string from Bluemix and the topic is pre defined there.

[JR01]

The default size, then the graphs I did 3x3, 2 graphs on - use 2 flows, from in my case MQTT queues, where I use a function to set the topic name, one 'Outside Temp'; other one 'Inside Temp', then, connect both the flows to the Chart node.

[n. Di]

Thank you. How does your function node for setting the topic names look like? I tryed this also but somehow i cannot manage to display them both.

[Paul Reed]

n .Di

Try the attached example.

Paul

[{"id":"14533ec9.ef3501","type":"function","z":"6844b02f.2f6e5","name":"Create 2 values","func":"ValueToLine1 = Math.round(Math.random()*10*100)/100;\nValueToLine2 = Math.round(Math.random()*10*100)/100;\n\nline1 = { topic: 'line1', payload: ValueToLine1 };\nline2 = { topic: 'line2', payload: ValueToLine2 };\n  \nreturn [line1, line2];","outputs":"2","noerr":0,"x":302.8571319580078,"y":984.7143335342407,"wires":[["c67830d2.27318"],["c67830d2.27318"]]},{"id":"45bddc94.58aa04","type":"inject","z":"6844b02f.2f6e5","name":"","topic":"","payload":"","payloadType":"date","repeat":"5","crontab":"","once":false,"x":111.85713195800781,"y":984.7143335342407,"wires":[["14533ec9.ef3501"]]},{"id":"c67830d2.27318","type":"ui_chart","z":"6844b02f.2f6e5","group":"25555de.b146da2","order":2,"width":"","height":"","label":"","name":"multi chart","interpolate":"cardinal","nodata":"No Data","ymin":"","ymax":"","removeOlder":1,"removeOlderUnit":"60","x":522.8571319580078,"y":984.7143335342407,"wires":[[],[]]},{"id":"25555de.b146da2","type":"ui_group","z":"","name":"Examples","tab":"6548f53a.48923c","order":1,"disp":true,"width":"6"},{"id":"6548f53a.48923c","type":"ui_tab","z":"6844b02f.2f6e5","name":"Test","icon":"school","order":2}]

[n. Di]

Ahh thank you very much, now it is working for me :)

[Paul Reed]

n .Di

You've probably already noticed, that unfortunately there's no Legend at the moment, so it's hard to discriminate between the two chart topics...

Paul 

[Tony Neal]

re Bluemix

I used node-red-contrib-admin in my package.json and then installed node-red-dashboard through the front end.... working well.

Great stuff Dave and Nick!

[n. Di]

Yes true. I just wanted to try it out, hoping for a legend and possibility to add units to the y-axis in future.

[Julian Knight]

None of my switch nodes had their labels set after the update and most were set to a custom icon instead of default though I don't think that I had changed anything. The switch names were correct but the labels blank.

The same was true of my text nodes & the gauges.

Most of my content was all squeezed onto a single tab after I tried the auto-group link. The original tabs were retained but with nothing in them.

I have 3 template outputs on a single tab, each in their own group. Each template outputs a UL list containing weather from different services and they all have vertical overflows (e.g. a vertical scroll bar). This using W10/Chrome with default zoom. The template is:

<UL>

    <li>Description: {{msg.payload.Description}}</li>

    <li>Today's Forecast: {{msg.payload.Todays_Forecast}}</li>

    <br />

    <li>Temperature: {{msg.payload.Temperature}}&deg;C</li>

    <li>Feels Like: {{msg.payload.Feels_Like}}&deg;C</li>

    <li>Dew Point: {{msg.payload.Dew_Point}}&deg;C</li>

    <li>Heat Index: {{msg.payload.Heat_Index}}</li>

    <br />

    <li>Humidity: {{msg.payload.Humidity}}%</li>

    <br />

    <li>Cloud Cover: {{msg.payload.Cloud_Cover}}%</li>

    <br />

    <li>Precipitation: {{msg.payload.Precipitation}}</li>

    <li>Precipitation Probability: {{msg.payload.Precip_Prob}}%</li>

    <li>Precipitation Type: {{msg.payload.Precip_Type}}</li>

    <br />

    <li>Pressure: {{msg.payload.Pressure}}mb</li>

    <li>Pressure Sealevel: {{msg.payload.Pressure_Sealevel}}mb</li>

    <br />

    <li>Wind Speed: {{msg.payload.Wind_Speed}}mph</li>

    <li>Wind Bearing: {{msg.payload.Wind_Bearing}}&deg;</li>

    <br />

    <li>Updated: {{msg.payload.timestamp}}</li>

</UL>

This template also overflows:

<div layout="row" layout-align="space-between center" 

        id="{{dev.topic}}"

        ng-repeat="dev in devTracker track by dev.topic"

        ng-class="$dev.containerClass ? 'rpt-container' : 'rpt-container1'">

    <p flex >{{dev.topic}}</p>

    <ng-md-icon icon="wb_sunny" size="32"

        title="Last Updated {{dev.lastUpdate}}"

        ></ng-md-icon>

</div>

 

<script>

// | orderBy:'topic'

//ng-style="{fill:(dev.payload==='Offline')?'red':'black'}" 

;(function(scope) {

    scope.devTracker = {}

    scope.$watch('msg', function(newVal, oldVal) {

        //console.dir(oldVal)

        //console.dir(newVal)

        // Wrap in try because first execution may be initial when msg is empty

        //try {

            //console.log('here %s, %s', newVal.topic, newVal.payload)

            var t = newVal.topic.split('/')

            newVal.topic = t[t.length - 1]

            

            newVal.lastUpdate = new Date()

            

            //newVal.containerClass = ! scope.devTracker[newVal.topic].containerClass

            //console.log( "Container Class: %s", newVal.containerClass)

            

            scope.devTracker[newVal.topic] = newVal

            

            if ( 'count' in scope.devTracker[newVal.topic] ) {

                scope.devTracker[newVal.topic].count += 1

            } else {

                scope.devTracker[newVal.topic].count = 1

            }

            

        //} catch (e) {

            // Nothing to do

        //}

        console.dir(scope.devTracker)

    })

})(scope)

</script>

<style>

    .rpt-container {

        opacity:1.0;

    }

    .rpt-container {

        opacity:0.1;

    }

    .rpt-container.ng-add {

        opacity:1;

        background-color:red;

    }

    .rpt-container.ng-remove {

        opacity:0.8;

        background-color:blue;

    }

    .rpt-container.ng-enter {

        -webkit-transition:20s linear all;

        -moz-transition:20s linear all;

        -o-transition:20s linear all;

        transition:20s linear all;

        opacity:1;

    }

    /* The ng-enter-active and ng-move-active are where the transition destination properties 

        are set so that the animation knows what to animate.

    */

    .rpt-container.ng-enter.ng-enter-active {

        opacity:0.1;

    }

</style>

Even this overflows:

<p>The numbers correspond to the numbers written on the plugs.</p>

<p>The number/letter combinations correspond to the labels on the white remote controls. The letter is for the slider beneath the buttons. <br>

Note: the un-numbered pair of buttons on the remote turns off/on the 3 lights in the hall and landing.</p>

<p>The name tells you where the plug is and/or what is normally plugged into it.</p>

Unfortunately, things are even worse on IE11. Although the weather panels don't overflow, the help panel above is totally messed up with text overwriting itself & the first template example sees and overflow and the icons on the wrong side overlapping the text. MS Edge is somewhere in-between, the weather panels don't overflow but everything else does, layout overall is close to Chrome's. Firefox is the same as Edge.

Also the following overflows as well and it didn't used to:

[{"id":"2f7d7fb7.9ae8d","type":"inject","z":"68da610e.9725a","name":"inject narrow","topic":"","payload":"<img src=\"http://i.giphy.com/FQaQtdbLnk676.gif\">","payloadType":"str","repeat":"","crontab":"","once":false,"x":341,"y":2930,"wires":[["3d2054da.c2dfac"]]},{"id":"3d2054da.c2dfac","type":"ui_template","z":"68da610e.9725a","group":"2d0a3989.1ab9e6","name":"Dynamic Inject Test","order":1,"width":"","height":"","format":"<div ng-bind-html=\"msg.payload\"></div>","storeOutMessages":true,"fwdInMessages":true,"x":559.3958129882812,"y":2921.33349609375,"wires":[[]]},{"id":"2d0a3989.1ab9e6","type":"ui_group","z":"68da610e.9725a","name":"Default","tab":"b5bad9f8.8a5918","disp":true,"width":"12"},{"id":"b5bad9f8.8a5918","type":"ui_tab","z":"68da610e.9725a","name":"Dynamic Injection Test","icon":"dashboard"}]

Pics:

Chrome: 

IE11: 

It would be really useful on large monitors in particular, if double-clicking on an item in the Tabs list were to edit it, trying to move across and hit the small target of the edit button can be a challenge :-)

The tab list is fixed height so on my 27" monitor, I still don't get to see a longer list which was slightly frustrating as I was trying to move things around between tabs.

[Julian Knight]

Sorry, all of that came across negatively and I didn't mean it to. The new UI is going to be great, just some teething problems.

On Wednesday, 10 August 2016 19:56:46 UTC+1, Julian Knight wrote:

None of my switch nodes had their labels set after the update and most were set to a custom icon instead of default though I don't think that I had changed anything. The switch names were correct but the labels blank.

...

[Venkateshwar Rao]

Hey There,

How did you get that " Time since last change" ? - I want to use that to see when one of my doors was last used.

Thanks

~ Ven