Node-RED Dashboard 2.0.2 published

1,006 views
Skip to first unread message

Nicholas O'Leary

unread,
Sep 9, 2016, 5:08:14 PM9/9/16
to Node-RED Mailing List, Node-RED UI
We've just published Dashboard 2.0.2.

This contains a number of fixes, including the root cause of the 'ghost nodes' and 'unable to deploy' issues.

It also contains a number of useful enhancements; a new ui_control widget to dynamic change tabs, better time formatting options for the chart axis and dynamic enabling/disabling of widgets to name just a few.


Nick

Dave C-J

unread,
Sep 9, 2016, 5:35:52 PM9/9/16
to node...@googlegroups.com
We also added in (at the last minute) some "standard" colour class names into the css themes
These are
    nr-dashboard-error   - a red
    nr-dashboard-warning  - a yellow
    nr-dashboard-ok   - a green
    nr-dashboard-color   - a colour based on the main colour of the theme (so a blue-ish)
    nr-dashboard-dim   - sets opacity to 50% - so acts as a "dim" modifier to any of the above

These all work nicely with the text widget - eg to make an indicator
Inline images 2
<i class="fa fa-lightbulb-o fa-2x nr-dashboard-ok"></i>   

Toshi Bass

unread,
Sep 10, 2016, 2:07:25 AM9/10/16
to Node-RED
Thanks for your work on Dashboard 2.0.2

First impression

ui_control widget is Great

Hate the change to dark theme  (no widget borders)    Why?


 

Nicholas O'Leary

unread,
Sep 10, 2016, 2:23:34 AM9/10/16
to Node-RED

Toshi,

In the previous version, the light theme didn't have borders and the dark theme did. We got feedback that users didn't like the fact they were different in that regard. So we decided to make them consistent.

We'll enable themes to be customised in the near future at which point you'll be able to set them how you want.

You should be able to restore the borders by adding a template node with some custom css... Will dig out what exactly is needed later today.

Nick


--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+u...@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.
Visit this group at https://groups.google.com/group/node-red.
For more options, visit https://groups.google.com/d/optout.

Toshi Bass

unread,
Sep 10, 2016, 3:23:58 AM9/10/16
to Node-RED
ok I will check back later re: "template node with some custom css"

Personally I would prefer each node to be in its own group with the ability to drag and drop the group into position on a grid on the tab


 [{"id":"fb2aea1d.4a8ad8","type":"ui_gauge","z":"b3674429.a21f68","name":"","group":"50a04e13.db702","order":0,"width":"3","height":"3","gtype":"gage","title":"Gauge","label":"units","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"x":316,"y":1505,"wires":[]},{"id":"1d6d1dc3.bbf762","type":"ui_template","z":"b3674429.a21f68","group":"71f29e40.d5984","name":"Toggle Button","order":14,"width":"2","height":"1","format":"<!DOCTYPE html>\n\n<style type=\"text/css\">\n:focus {\noutline: 0;\n}\n.noselect {\n  user-select: none;\n}\nmd-button45{\n    display: block;\n    background-color:#2e466e;\n\tmargin: 0px 0px -5px 0px; \n\twidth: 85px; \n\t//height: 34px;\n    line-height: 30px;\t\t\n    border: 2px solid #666666;\n    border-radius:30px;\n    -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;\n    border-radius: 30px;\n    box-shadow: 0px 15px 0px rgba(0,0,0,0.08) inset;\n    cursor:pointer;\n    color:#ffffff;\n    font-family:Arial;\n    font-size:10px;\n    text-align:center;\t\n}\nmd-button45:hover {\n\tbackground:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #415989), color-stop(1, #2e466e));\n\tbackground:-moz-linear-gradient(top, #415989 5%, #2e466e 100%);\n\tbackground:-webkit-linear-gradient(top, #415989 5%, #2e466e 100%);\n\tbackground:-o-linear-gradient(top, #415989 5%, #2e466e 100%);\n\tbackground:-ms-linear-gradient(top, #415989 5%, #2e466e 100%);\n\tbackground:linear-gradient(to bottom, #415989 5%, #2e466e 100%);\n\tfilter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#415989', endColorstr='#2e466e',GradientType=0);\n\tbackground-color:#415989;\n}\nmd-button45:active {\n\tposition:relative;\n\ttop:1px;\n}\n\n//    move to md-button code for text color\n//    ng-style=\"{color: msg.payload=='1' ?'green':'red'}\" \n</style>\n<md-button45 class=\"noselect\"\nng-style=\"{color: (msg.payload=='1' ?'black':'white') , background: (msg.payload=='1' ?'orange':'default' ) }\"\n    ng-click=\"msg.payload = (msg.payload=='0' ? '1' : '0'); send(msg)\"\n>\n{{msg.payload == '0' ? 'Power Off' : 'Power On'}}\n</md-button45>","storeOutMessages":true,"fwdInMessages":true,"x":346,"y":1628,"wires":[["3e6829e6.f828a6"]]},{"id":"61044815.e9e628","type":"ui_slider","z":"b3674429.a21f68","name":"","label":"slider","group":"29173074.207a5","order":0,"width":"6","height":"1","passthru":true,"topic":"","min":0,"max":10,"x":315,"y":1587,"wires":[[]]},{"id":"3e6829e6.f828a6","type":"ui_template","z":"b3674429.a21f68","group":"a2791e89.31f14","name":"LED 1 red","order":8,"width":"1","height":"1","format":"<!DOCTYPE html>\n\n<style>\n:focus {\noutline: 0;\n}\nmd-led1{\n    display: block;\n\tborder-radius:80px;\n\tborder:2px solid #666666;\n\twidth: 16px; \n\theight:16px;\n\tmargin: 5px 0px 0px 5px; \t\n\tbackground: -webkit-radial-gradient(#FF6666, Red);\n    text-align:center;\t\n }\n\n</style>\n<p style=\"font-size:50%;text-align:center;margin: -2px;\">Relay</p>\n<md-led1\n    ng-style=\"{background: msg.payload=='1' ?'default':'transparent'}\"\n    ng-click=\"msg.payload = (msg.payload=='0' ? '1' : '0'); send(msg) \"\n>\n{{msg.payload == '0' ? '' : ''}}\n</md-led1>","storeOutMessages":true,"fwdInMessages":true,"x":515,"y":1628,"wires":[[]]},{"id":"2afd54d3.a5157c","type":"ui_dropdown","z":"b3674429.a21f68","name":"","label":"","group":"e181176a.e57228","order":0,"width":0,"height":0,"options":[{"label":"","value":""}],"payload":"","topic":"","x":322,"y":1547,"wires":[[]]},{"id":"50a04e13.db702","type":"ui_group","z":"","name":"Group 1","tab":"10fc2042.22208","order":1,"disp":false,"width":"3"},{"id":"71f29e40.d5984","type":"ui_group","z":"","name":"Group 4","tab":"10fc2042.22208","order":4,"disp":false,"width":"2"},{"id":"29173074.207a5","type":"ui_group","z":"","name":"Group 3","tab":"10fc2042.22208","order":3,"disp":false,"width":"6"},{"id":"a2791e89.31f14","type":"ui_group","z":"","name":"Group 5","tab":"10fc2042.22208","order":5,"disp":false,"width":"1"},{"id":"e181176a.e57228","type":"ui_group","z":"","name":"Group 2","tab":"10fc2042.22208","order":2,"disp":false,"width":"4"},{"id":"10fc2042.22208","type":"ui_tab","z":"b3674429.a21f68","name":"this","icon":"dashboard"}]

Nicholas O'Leary

unread,
Sep 10, 2016, 3:37:38 PM9/10/16
to Node-RED Mailing List
This template node will restore the widget border in the dark theme:

[{"id":"ca2ef327.c472e","type":"ui_template","z":"befbf4ca.b49be8","group":"e329266c.b46138","name":"","order":0,"width":"1","height":"1","format":"<style>\n    .nr-dashboard-theme-dark ui-card-panel {\n \tbackground-color: #222;\n \toutline: 1px solid #4F4F4F;\n  }\n</style>","storeOutMessages":true,"fwdInMessages":true,"x":380,"y":340,"wires":[[]]},{"id":"e329266c.b46138","type":"ui_group","name":"Group 4","tab":"b584fd63.ebd67","order":4,"disp":true,"width":6},{"id":"b584fd63.ebd67","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1}]

Nick

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.

Giovanni Castania

unread,
Sep 10, 2016, 5:57:28 PM9/10/16
to Node-RED, node-red-...@googlegroups.com

I'd like to report a bug in the dark theme; if you have scrolling page (e.g. on a mobile phone, but you can simulate on PC browser just shrinking the window)when you scroll down the backgroun will be white instead of dark grey:




Dave C-J

unread,
Sep 10, 2016, 6:39:09 PM9/10/16
to node...@googlegroups.com
Hi,
thanks

Roger Hill

unread,
Sep 10, 2016, 8:35:09 PM9/10/16
to Node-RED, node-red-...@googlegroups.com
Hi Nick

Is the cant deploy bug fixed in  2.0.2?
With 2.0.2 installed and the flows file modified by you to remove the Ghost flows, a click on deploy does nothing... deploy button stays red.

Thanks, Roger...

Peter Scargill

unread,
Sep 11, 2016, 1:09:34 PM9/11/16
to Node-RED UI, node...@googlegroups.com
Just a quick comment to be sure.. assuming you already have the original installed - what is the exact procedure for updating?

Pete.

Dave C-J

unread,
Sep 11, 2016, 1:20:21 PM9/11/16
to node...@googlegroups.com
assuming you had it installed "normally" - ie not globally.... ie in your user dir (usually ~/.node-red )

    cd ~/.node-red
    npm i node-red-dashboard

then stop and restart node-red

Toshi Bass

unread,
Sep 11, 2016, 3:15:17 PM9/11/16
to Node-RED

just to confirm the template node to restore the widget border in the dark theme works great thanks.

Mike Bell

unread,
Sep 11, 2016, 10:33:20 PM9/11/16
to Node-RED, node-red-...@googlegroups.com
Nick,

This sounds great, though I haven't had time to experiment. Your use of the msg.enabled property to disable (and presumably enable) widgets makes me wonder if there is a way to get the inject, interval, or other nodes to set this property, or generally properties other than the payload. Obviously, a change node would do the job, but at the expense of an additional node. If this is not currently possible, is it worth thinking about in the future?

Mike

Dave C-J

unread,
Sep 12, 2016, 2:09:14 AM9/12/16
to node...@googlegroups.com

That is what the change node is for :-). The whole idea of nodes is they do identifiable pieces of function that you build up. Not every node should have to do everything.

Mike Bell

unread,
Sep 12, 2016, 12:33:59 PM9/12/16
to Node-RED
Dave,

I totally understand and applaud modularity as a design principle. I was not suggesting that you over-extend the functionality of any particular node. The discussion I was hoping to have concerns the general approach to message properties. As I understand the history of node-RED, the topic property was given special treatment in recognition of the relationship between NR and MQTT. Now, the enabled property will play a special role in dashboard nodes. Properties other than the payload are used by core nodes (switch, trigger, template, and others) and several contributed nodes, such as moment. I am certainly not alone in having user-defined properties (called things like now and control) in many of my flows. It would be great to have easy ways to access and manipulate these properties, consistently across all the nodes. If you have already had this conversation and decided that the change node is all that is needed, I will defer to your judgement.

Regards,
Mike

Cory Guynn

unread,
Sep 12, 2016, 7:29:40 PM9/12/16
to Node-RED, node-red-...@googlegroups.com
+1

Jéan Roux

unread,
Sep 13, 2016, 11:20:06 AM9/13/16
to Node-RED
Re white instead of dark grey problem, same problem with me.

Dave C-J

unread,
Sep 13, 2016, 12:19:29 PM9/13/16
to node...@googlegroups.com

Yes, still already fixed in master.

Andrew

unread,
Sep 13, 2016, 2:35:03 PM9/13/16
to Node-RED
Even when the core Node RED developers are away at a conference they are still active here.

I take my hat off to you guys and your total professionalism.

Andrew

Cory Guynn

unread,
Sep 13, 2016, 3:11:08 PM9/13/16
to node...@googlegroups.com

+1 ;)  these guys rock


--
http://nodered.org

Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to a topic in the Google Groups "Node-RED" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/node-red/fWIocFSBY_0/unsubscribe.
To unsubscribe from this group and all its topics, send an email to node-red+u...@googlegroups.com.
To post to this group, send an email to node...@googlegroups.com.

Julian Knight

unread,
Sep 13, 2016, 5:13:40 PM9/13/16
to Node-RED
Gotta love conference season!

And mobile/agile working :-)

Aidan

unread,
Sep 25, 2016, 9:42:50 PM9/25/16
to Node-RED
Hi all,
Anyone else having this issue with dashboard 2.0.2. There is a bug which when the sidebar is out it covers the bottom half of the page. See screenshot.

Installed on ubuntu
Node-RED version: v0.14.6
Node.js  version: v4.5.0
Linux 3.13.0-96-generic x64 LE






Dave C-J

unread,
Sep 26, 2016, 2:20:37 AM9/26/16
to node...@googlegroups.com

Yes, a fix is in master branch. Not yet on npm.

Aidan

unread,
Sep 27, 2016, 7:10:28 AM9/27/16
to Node-RED
Ok thanks Dave

Larry Roy

unread,
Sep 28, 2016, 5:02:54 PM9/28/16
to Node-RED
Version 2.0.3 from GitHub still exhibits this issue... just tried it on Safari and Chrome.

Larry

Nicholas O'Leary

unread,
Sep 28, 2016, 5:05:05 PM9/28/16
to Node-RED Mailing List
Hi Larry,

the interleaved messages on this group makes it hard to know what 'this issue' is referring to... could you be a bit more explicit?

We've not yet pushed any fixes for the memory issues of the Chart node - still investigating.

Nick

--
http://nodered.org
 
Join us on Slack to continue the conversation: http://nodered.org/slack
---
You received this message because you are subscribed to the Google Groups "Node-RED" group.
To unsubscribe from this group and stop receiving emails from it, send an email to node-red+unsubscribe@googlegroups.com.
To post to this group, send email to node...@googlegroups.com.

Larry Roy

unread,
Sep 29, 2016, 9:55:21 PM9/29/16
to Node-RED
Whoops...sorry.

"this issue" = "There is a bug which when the sidebar is out it covers the bottom half of the page. See screenshot."

Larry Roy

unread,
Sep 29, 2016, 9:55:44 PM9/29/16
to Node-RED
Whoops...sorry.

"this issue" = "There is a bug which when the sidebar is out it covers the bottom half of the page. See screenshot."

Reply all
Reply to author
Forward
0 new messages