Uninstalled "npm uninstall node-red-contrib-ui" and then did "npm install node-red-dashboard" - 404 errors - see -> https://groups.google.com/forum/#!topic/node-red/Oc35En0UrSo

I used node-red-contrib-ui which worked fine and now I wanted to change to the newer node-red-dashboard but despite updating my nodes, when I open http://localhost:1880/ui I can only see the top blue page whitout any graphs. Also on the bottom of the page it shows "The url cannot be loaded into an iframe."
What is wrong? Any ideas?
Thanks

Could to act like the switch :)

Regards

It will be better fo UI to set overflow-y to auto in .nd-dashboard-template class (file : node-red-dashboard/src/components/ui-component/templates/template.css) Line 3.

It would be handy to have a boolean 'disabled' property on the controls. Setting the disabled property would work similarly to the standard HTML disabled property, causing them to be greyed out.

I'm pretty sure this could be handled with a template block, but that gets a little complicated.

My particular desire is to be able to disable gauges and switches if the device goes offline. A one-shot timer is reset when data is received from the device, and if the timer expires, it would set the gauge and switch to a disabled state to reflect that.

When you have whitespace in dropdown item (height siez : 1), text is written on 2 lines and dropdown list is too large (even with small text inside). I made test with _ and it works fine.

Just checking pre-reqs. Slightly behing the curve
angular-material-icons 0.6.0 0.6.0 0.7.0 angular-material-icons
nvd3 1.8.1 1.8.1 1.8.3 nvd3
svg-morpheus 0.3.0 git git svg-morpheus

the svg one is now released as 1.0.4.
Any reasons not to move to start on a recent base ?

Hey guys, not sure if this is an error or not, but I just noticed it.

Under Developers heading, the folder pathway to node_modules uses a dash rather than an underscore.

• re-version package.json
• rename to node-red-dashboard
• add correct author and contributors
• update repository location url
• add keywords

I didn't find an obvious solution to this: when navigating the UI, the panel is built according to the flow but the values shown inside each widget are coming up only as soon as messages reach them (according to the wiring etc). I would find it useful some async event reacting to "someone is loading the page". Not sure if this would mess everything but think of some value coming from MQTT each hour, would be nice to have "last known good value" shown. Having that event I could save useful values and trigger sending them to the UI when the page gets loaded.

Hi again,

is it possible to format the timestamp which is displayed as hh:mm:ss in a chart? Would be nice to display dates because charts could be used to display data over more than one day.

Cheers,
Patrik

Strangely I had to manually install these 3:

[email protected] /root/.node-red/node_modules/node-red-dashboard
├── [email protected] extraneous
├── [email protected] extraneous
└── [email protected] extraneous

(I got these warnings before:
npm WARN [email protected] requires a peer of angular-messages@>=1.3 <1.6 but none was installed.
npm WARN [email protected] requires a peer of angular-mocks@>=1.3 <1.6 but none was installed.
npm WARN [email protected] requires a peer of angular-route@>=1.3 <1.6 but none was installed.
)

Suggestion: I think ui.js beforeSend should be revised:

        if (opt.forwardInputMessages && opt.node._wireCount) {
            //forward to output
            msg.payload = opt.convertBack(newValue);
            msg = opt.beforeSend(msg) || msg;
            opt.beforeSend(msg);
            opt.node.send(msg);
        }

beforeSend(msg) is called twice?
msg = opt.beforeSend(msg) || msg;
opt.beforeSend(msg);

since the default beforeSend(msg) in ui.js returns nothing (undefined) I would probably kill
msg = opt.beforeSend(msg) || msg;

ui.js handler passes two arguments to beforeSend()

   var toSend = {payload: converted};
   toSend = opt.beforeSend(toSend, msg) || toSend;

revising this could be a bit painfull as most controls could be affected...
e.g. ui_dropdown.js beforeSend(msg) takes one argument

Maybe there are some good reasons for this...

This may not be the right place to drop this issue but there is no dedicated group yet and I just want to know whether the following is something which is considered for the future or not. Is there a good place to drop contribution suggestions or feature requests?
I have implement some test cases which required me to modify some of the base elements such as ui.js, events.js, ui-component-ctrl.js, …

Some of the issues I have implement are:

• ui-controls that are private to a given client -
  I have added a post at: node-red https://groups.google.com/forum/#!topic/node-red/I6ojoN9ne4Q
• simple things like text-input -> emit data when user hits enter rather than via delay
• fill dropdown dynamically based on input node (current dropdown has no input channel; I have added one) – I have seen this request is an issue here already
• mechanism to override control type, mechanism to inject control properties

Is this something you consider for your next releases?
Would be helpful to know where node-red-dashboard is heading, I assume that there is a backlog or list of issues for next releases?
Thanks an cheers - Peter

Maybe the topic is not very well choosen, so for example:

I have a dimmer which is controlled via mqtt. The dimmer is shown as a slider on the dashboard with values from 0-100. There is a topic for setting the value and one where the current brightness is stored, like this:

The problem now is, that the value of the current brightness gets updated with a bit of lag on setting the dimmer via the dashboard. Naturally I'll get a race condition and the slider jumps from left to right. I can handle this by limiting the messages from the incoming topic.

But is it necessary to let the dashboard element output the incoming value immediately? Maybe it should be switchable that only on changing values on the dashboard element itself generate an output and an input is only used to display the value?

Maybe I've just thinking the wrong direction and you could just point me out. And also I hope you've could get what I mean ;-)

I love node-red-dashboard and hope that this project get's the attention it deserves. Meanwhile my whole home automation is running on node-red and node-red-dashboard.

Cheers,
Patrik

Before making a pull request (if needed), some quick notes:

I've installed this repository under my Node-red installation and had the following issues:

• An error at the initial page: Couldn't GET /ui/%7B%7Bmain.selectedTab.link%7D%7D
  I've solved this by modifying the partials/main.html page line from:
  iframe class="iframe" src="{{main.selectedTab.link}}"
  to
  frame class="iframe" ng-src="{{main.selectedTab.link}}"
• Gauges weren't displayed at all. Missing raphael.min.js file. The npm install command failed to find the raphael defined version in package.json, so I've installed the latest. Gauges now appear, but do not work. I've also had to change the index.html file to refer to raphel.min.js instead of raphel-min.js.

I'm migrating from the npm repository node-red-contrib-ui version, so I've alread had some ui elements defined.

EDIT: Also shouldn't the README.md file refer to instructions for installing this repository, not Adrea's Tatar repository? Otherwise many people might be confused... :)

I've been using a page with either 1 chart with 2 inputs or 2 charts with one input showing MQTT-derived data for an hour at a time (updated every 10 secs). After several hours, the pages 'snap' on both Chrome and Firefox on Win 10.

I'm using Node-RED and dashboard on Bluemix. I'm trying to use the text-input node, with the delay set to 0 in order to wait for return, however it doesn't seem to exist in what I've pulled.

The package.json for my app has: "node-red-dashboard":"2.x", and when I examine the modules it pulls on deployment, it certainly looks like it has 2.0.1, however when I examine the html and js files for the text-input node, it doesn't appear to have the code to interpret the time delay<=0 case which I can clearly see in the repository. Is it me? Or am I somehow pulling an earlier version of the code?

Hi,

May I know how to integrate this to bluemix platform please? I'm fairly new in bluemix development so it would be helpful to have a guide for that if possible.

Thank you kindly

I'm observing chart groups overlapping (screenshot below). The overlap wrapping is consistent and occurs in several browsers (Chrome/Win7, Chromium/Linux, Firefox/Win7 & Lightning/Android).

I had thought the cause was mixing automatic with explicit plot sizes (groups with explicitly sized plots would end up underneath), but further experimentation shows it's not that simple.

Here's what I'm seeing (@100% zoom):

When I zoom in, then back out to 90% I get something like this:

And at 75% but with reduced page width, the stacking looks like this:

Here's the order of my groups within the dashboard tab editor; unless specified, the plots all use auto size and all groups use default width.

• ...some other tabs...
• Outdoor Rack
  • TSI DustTrak II
  • Dylos DC1100 (6x5)
  • T300U
  • T400
  • Licor LI840A (6x4 and 6x2)
  • T200U

Edit: I forgot to specify which groups have set-size plots.

• add suitable CONTRIBUTING.md
• add this repo to the ones the CLA checker monitors

Step 22 : RUN npm install -g node-red-dashboard
---> Running in 2ff11af0851d
npm ERR! Linux 3.16.0-67-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "node-red-dashboard"
npm ERR! node v0.12.13
npm ERR! npm v2.15.0
npm ERR! code E404

npm ERR! 404 Registry returned 404 for GET on https://registry.npmjs.org/node-red-dashboard
npm ERR! 404
npm ERR! 404 'node-red-dashboard' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404
npm ERR! 404 Note that you can also install from a
npm ERR! 404 tarball, folder, http url, or git url.

npm ERR! Please include the following file with any support request:
npm ERR! /npm-debug.log
The command '/bin/sh -c npm install -g node-red-dashboard' returned a non-zero code: 1

Hi,

I am trying to install the same in Embedded version of Node-red.
I get below error. Any suggestions ?

/node_modules/node-red-dashboard/ui.js:235
to.emit('ui-controls', {
^

TypeError: Cannot read property 'emit' of undefined
at /node_modules/node-red-dashboard/ui.js:235:11
at nextTickCallbackWith0Args (node.js:420:9)
at process._tickCallback (node.js:349:13)

I created the same issue at node-red-contrib-ui

Hi,

the gauge is not resizing with the size of the card. It seems it has a fixed size.

Please make the gauge fill the available space.

Thanks.

Jochen

Just noticed that the infotip (if that's what it is called!) doesn't display in the correct location on mobile devices (OK on laptop).
If you want to see the issue, the URL is https://digitalnut.co.uk:8443/home-usage
I have 3 groups, Home Power Usage, Solar Power Generation & Diverted Power, each of which contain a gauge and 2 charts. On a laptop, the groups display side by side, but on mobile naturally are stacked vertically due to the reduced viewport.
For ease of explanation, let me number each chart 1 - 6 (1 being the topmost, 6 being bottom).
If I tap the chart (1) to see an infotip of the value, I get a balloon within chart (1) as expected, but if I tap chart (2, 3, 4, 5 or 6) the balloon still appears within chart (1), meaning I have to carefully scroll up the top of the screen to see it.
Example, I tap chart (4) which is Solar Power Generation group, and as per screenshot, the infotip appears in chart (1) which is the Home Power Usage group.

The dropdown widget is really nice !
I think it could be very useful if there was a way to dynamically set the elements of the dropdown by sending an object into the input of the dropdown. This way we could create dynamic menus by querying a database for example.

It seems to me that the package can't be installed with

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

because it's not in the npm repo

The "mode" option for a "text-input" node should provide validation in the input field for email addresses, or provide the ability to show a color picker for the "color" mode. Neither work.

It will be fine to integrate a date/time picker. I suggest to use this one : https://github.com/alenaksu/mdPickers

When I add a second group, both groups seem to appear on top of each other:

[{"id":"4dfaa44a.b2055c","type":"ui_group","z":"2216ac32.dde954","order":"1","name":"Sliders","width":"6"},{"id":"a85539f6.57aac8","type":"ui_group","z":"2216ac32.dde954","order":"1","name":"Main","width":"6"},{"id":"c127f435.3ed808","type":"ui_tab","z":"2216ac32.dde954","name":"Home","icon":"dashboard","order":"1"},{"id":"17c6ec40.e83914","type":"ui_button","z":"2216ac32.dde954","tab":"c127f435.3ed808","group":"a85539f6.57aac8","order":1,"width":3,"height":1,"name":"button","label":"label","color":"","icon":"","payload":"","topic":"","x":280,"y":100,"wires":[[]]},{"id":"6f9bce30.90643","type":"ui_text_input","z":"2216ac32.dde954","tab":"c127f435.3ed808","group":"a85539f6.57aac8","order":1,"width":6,"height":1,"name":"","mode":"text","delay":300,"label":"Name","topic":"","x":460,"y":100,"wires":[[]]},{"id":"966b5b1a.6994a8","type":"ui_slider","z":"2216ac32.dde954","tab":"c127f435.3ed808","group":"4dfaa44a.b2055c","order":1,"width":6,"height":1,"name":"slider","label":"label","topic":"","min":0,"max":10,"x":270,"y":160,"wires":[[]]}]

Hi.

Please a like to know. Do you intend to make a datepicker object?

https://material.angularjs.org/latest/demo/datepicker

Thank you.

It will be fine to have a very powerfull prahing tool like Angular-nvd3 http://krispo.github.io/angular-nvd3/

Hi.

Please consider adding a screenshot(s) of the resulting dashboard the Readme.md.
Could help people new to the project to glance and see if it fits their needs without the need to install and configure.

Thank you.

The text input widget looks a bit weird in this release when you add a label:

the template node needs fields for height and width

When there are exactly two groups in a tab once div.masonry-container gets wider than 1398 px the second group is positioned on top of the first one.

with div.masonry-container exactly 1398 px the two ui-card-panels are placed at left: 348.5 px and left: 697.5 px side by side nicely in the middle of the page.

with div.masonry-container exactly 1399 px they both get positioned at 349 px on top of each other.

node-red-dashboard was installed from branch master on 25.08.2016
node-red version is 0.14.6
Browser is Firefox 48.0

Capturing a todo list for tidy up tasks with the existing widget edit dialogs

• ui_button
  • payload should be a typedInput
  • icon/label/color spacing/sizing/order
  • Color -> Text Color
  • placeholder text shouldn't have brackets
• ui_dropdown
  • placeholder text shouldn't have brackets
  • Options ui should use editableList widget
• ui_switch
  • placeholder text shouldn't have brackets
  • On/Off value should be typedInputs
  • Value/Color/Icon spacing/sizing/order
  • Add validation to custom icon/colour fields to ensure all are filled in
• ui_slider
  • placeholder text shouldn't have brackets
  • Min/Max layout / sizing
• ui_numeric
  • placeholder text shouldn't have brackets
  • Min/Max layout / sizing
• ui_text_input
  • placeholder text shouldn't have brackets
  • Mode select should be fixed width
  • Is delay necessary?
• ui_gauge
  • placeholder text shouldn't have brackets
  • Title/Value/Label layout indication
  • Graphical representations of gauge type
  • Min/Max layout / sizing
• ui_chart
  • placeholder text shouldn't have brackets
  • Ymin/max are spinners - not used elsewhere for min/max..
  • Ymin/max sizing
  • "Time Window" - still think needs to explicitly reference X axis
  • 'No Data' - not clear what its for
    • made blank - showing prompt text the default.
• ui_template
  • Replay/Forward options not described
    • Indeed, they don't mean what they say.
      • forward = passthru,
      • replay = add any message on output to the overall stored state - so will be there on reload. (I think) which I guess mean replay state on reload but that seems to happen anyway.. ???
• General
  • Should templating (eg {{msg.topic}} be allowed to set label fields ? If so which widgets ?
  • Should the "restore" signal created by the chart on connection be more generally available ?
    • i.e. should there be an overall - ui connected event to trigger "stuff" (either via a specific node or via status node) - ie how should hidden config nodes emit events... ;-)

If i inject a message including html code like this:
<b>bold</b>
and i put these mustage tags template in the connected template node
{{{msg.payload}}}
i got an error in chrome and firefox:
Error: $parse:syntax Syntax Error.

Is there another way to display unescaped html?

Hi,

when using chart node and hovering over points a tool tip is showing the actual value and time. In some cases, when using multiple charts it happens quite frequent, the tool tip is not disappearing. You have to reload the page. Changing the Tab does not solve the problem.

Node-RED version: v0.13.4
Node.js version: v5.10.1
node-red-dashboard (current from github)
Chromium Browser

See the problem on the screenshot.

Thanks

the default inner margin on the template node is 0

which doesn't look great - I know it's the template so can be hacked as I wish - but it would be nice if the default looked basically OK to start with.

The template node's code window does not vertically size to the browser window. On my large monitor only 13 and a bit lines are actually visible though there is room for well over twice that number.

Need to have a clear guide on how to migrate from the current node-red-contrib-ui to node-red-dashboard.

Will it be possible to format the values displayed by the charts?

I can not format the incoming data as it is needed to render the chart correctly but it would be nice to allow formating the output with a value format like the gauges offer.

Furthermore will it be possible to format the data to a local value? Like 25,5 °C? I see that Angular Filters offer i18n but dont know if these are pressent in node-red/node-red-dashbaord and of course not how to use them ;-)

Thank you so much for your hard work. Many thanks!

Cheers,
pm

Noticed that groups lose their tab setting when their respective Tab node icon is updated.

If the 'Test' tab node icon is updated to say 'school' from 'github-circle', update & deploy, all of the flows contained within the 'Examples' group are orphaned from the 'Test' tab.

Now if the 'Examples' group is examined, it shows that it has changed tab from 'Test' to 'Power'

To restore things back to normal, it's necessary to revert the 'Examples' group's tab back to 'Test' from 'Power'.

Paul

I added a switch node with a debug node on it's output, whenever I click the switch in the UI you get two messages, the first seems to be the current state of the switch the second seems to be the state that it's switching to.

Example below:

[{"id":"4edda852.6fea78","type":"ui_group","z":"60f99d2f.d43864","name":"Livingroom","order":"1","disp":true,"width":"8"},{"id":"36c3f680.c00d1a","type":"ui_tab","z":"60f99d2f.d43864","name":"James' Flat","icon":"dashboard","theme":"theme-light","order":"2"},{"id":"1b1b202.cbc71e","type":"ui_switch","z":"60f99d2f.d43864","tab":"36c3f680.c00d1a","group":"4edda852.6fea78","order":1,"width":6,"height":1,"name":"","label":"switch","topic":"","style":"","onvalue":"true","onicon":"","oncolor":"","offvalue":"false","officon":"","offcolor":"","x":1170,"y":100,"wires":[["c79171f9.848a6"]]},{"id":"c79171f9.848a6","type":"debug","z":"60f99d2f.d43864","name":"Switch Debug","active":true,"console":"false","complete":"payload","x":1160,"y":140,"wires":[]}]

Hi,

the restore of the chart node does not work steady. After a little digging into the code, I found out, that not all arrays are identified as array by instanceof array (line 27):

            convert: function(value, oldValue, msg) {
                if (value instanceof Array) {
                    oldValue = value;
                } else {

Changing this to Array.isArray(value) fixed it. See pull request on the original ui nodes Pull Request

Thanks.

Jochen

My system where node-red runs and my client are set to UTC +2h Timezone.
If i hover over a chart i see that the Date Line drawn is 2 hours offset from midnight compared to the tooltip times shown when hovering over the graph. The tooltip times seem correct, when i hover over the newest datapoint in the graph the time shown is current local time.

Hi,

Node version: 0.10.29
Node-RED Dashboard version: 2.0.1
Node-Red version: 0.14.5
Running on Raspberry Pi, Raspian (Jessie)

I've got an issue with NR Dashboard (2.0.1) in that it seems to create ghost groups. When I press deploy, I get the popup telling me that

You have some unused configuration nodes. Click here to see them

And yes, it does show such a node, "Spots [unassigned]". The global one doesn't seem to affect anything, but I didn't create that one afaik.

and double-clicking it to show the config for it, shows this:

I do have created a node with the name "Spots", but it is properly configured, as shown by these two images:

Am I doing something wrong?

I've attached my flows, if that helps:
flows_central.zip

Following the instructions in the readme currently don't work because node-red-dashboard is not published on npmjs: https://www.npmjs.com/package/node-red-dashboard (404)

Is this because it's not considered ready for the general community to use? If so, maybe a note on the readme might be quite useful.

I have some objects as shown here:

If I reduce the Window width, then one object (Freezer Temperature) disappears.

In a single column, then all is well.

I have noticed this behaviour on Windows Chrome and also, iOS Safari where the Temperature graph is always hidden. I have also seen instances where, when I take the window from a 2 column width to 3 column width, the hidden object will not reappear even in a new tab.

All objects are auto sized.