Node-Red ui interface

[Andrei Tătar]

Hello,

I've started working on a set of nodes that help create an UI interface for node-red flows.

The basic idea is that you can use some nodes (button, text, switch, slider, numeric input, show toast) on the flow that will be used to construct the UI from. These controls can be grouped in groups (that display as cards) that are grouped on different tabs.

From a technical perspective, I'm using socket.io for message exchange and angular + angular material for the front end part.

Would you find this useful?

Any suggestions?

Would you like the UI to be served on a different port or on the same port as the node-red instance and a different path (/ui)?

What other node types would you find useful?

Here's a quick demo of how the interface will look. It is responsive.

Thanks

[Julian Knight]

Interesting! And potentially very useful.

I personally wouldn't want to use another port as it is already rather too easy to burn through port numbers when using Node.JS microservices. But certainly a separate path which should be configurable at least at NR startup.

I have some examples on Flows and in github (user TotallyInformation) that show a range of form elements that would be useful to have available. Elements such as text areas (plain text and rich text - or at least github markdown) and sliders are always welcome in addition to numeric and date/time inputs.

Further really useful extensions might be simple charts giving an easy way to create nice dashboards. Here is a rather fussy example of a dashboard showing temperature, humidity, light and air pressure from my house for example: http://emoncms.org/dashboard/view?id=23514 it needn't be that complex but a way to show such data would be really useful especially if it were lightweight enough to all be run from a Pi.

I really look forward to seeing how this develops, let us know when there is something to test.

[Walter Kraembring]

Hello, agree, this would be very interesting! I have some questions (maybe I did not fully understand the capability of your implementation)

As per today, I have made a webpage (html) that I use as UI for my Node-RED home automation, running it on a couple of Lenovo 10" tablets. To enable dynamic updates I use websockets (both ways, when system components are changing status or a user hits a button on the UI).

- will your nodes support the same, i.e. websockets or is socket.io doing the same?

Useful nodes, well here I am maybe out on deep water but from a UI perspective, it has to have elements to allow a user to hit a button for on/off (button needs also to change outlook depending on state), a data field to enter text or a value to be sent to the system (Node-RED), a node supporting scrolling marquees so RSS-feeds or other information easily could be presented in the UI. Basically what I have in my current html web page, see below

  

[Walter Kraembring]

The lines above and below the table with buttons are scrolling marquees, at the very bottom is a small log showing the 3 latest events. So a node for showing selected log events as well as a node for showing messages in the debug tab would maybe also make sense 

[Andrei Tătar]

Yes, UI will comunicate with nodes in real time via socket.io.

Clicking a button will immediately generate a message in node-red and a message that changes the slider value in node-red will immediately update the UI.

The UI will keep the current state (slider value/if switch is on/off, etc.).

Also, deploying a new flow with modified UI nodes will immediately update the UI on the client without a need to hit refresh page.

I think I'll have something that can be tested next week. I still have a busy time at work.

Charts are a nice thing to have but I need to think how will we store the values, how much values should be stored, etc. Anyway, it's not a priority right now.

[Julian Knight]

Yes, that's similar to what I did. I only used raw ws/wss with a helper library for auto-reconnect. But certainly Socket.IO is better when traversing WAN's as it is a lot more robust when going through proxies and firewalls.

You might also want to look at my web debug example flow - that also uses ws/wss to enable complex JSON to be easily viewed in a web page. Much easier than fighting with the debug panel.

I agree that an on/off button with styling for both conditions would be really good too. I think the UI toolkit I used exposes those a toggle sliders, Checkboxes are the same control of course so all 3 are valid and common on/off representations.

[Andrei Tătar]

Hello,

Here is a first pre-alpha version:

https://github.com/andrei-tatar/node-red-contrib-ui

There is no NPM package yet. I'll wait to get things a bit stable.

It needs some more work but it's a place to start from.

Let me know what you think and if you run into any issues.

Andrei

[Walter Kraembring]

Dear Andrei,

I have started trying to install according to your guide but only runned into problems with the very last step, 'bower install'

I get the following EACCES error, see below

I am logged on as user pi and have tried

bower install

sudo bower install (not accepted)

bower install --allow root

sudo -s then bower install (not accepted)

Any hints is appreciated

Best regards, Walter

pi@raspberrypi ~/.node-red/node_modules/node-red-contrib-ui $ bower install

bower cached        git://github.com/angular/bower-material.git#0.11.4

bower validate      0.11.4 against git://github.com/angular/bower-material.git#~0.11.4

bower cached        git://github.com/klarsys/angular-material-icons.git#0.6.0

bower validate      0.6.0 against git://github.com/klarsys/angular-material-icons.git#~0.6.0

bower cached        git://github.com/angular/bower-angular.git#1.4.7

bower validate      1.4.7 against git://github.com/angular/bower-angular.git#>1.3.x

bower cached        git://github.com/angular/bower-angular.git#1.4.7

bower validate      1.4.7 against git://github.com/angular/bower-angular.git#^1.3.0 || >1.4.0-beta.0

bower cached        git://github.com/angular/bower-angular-animate.git#1.4.7

bower validate      1.4.7 against git://github.com/angular/bower-angular-animate.git#^1.3.0 || >1.4.0-beta.0

bower cached        git://github.com/angular/bower-angular-aria.git#1.4.7

bower validate      1.4.7 against git://github.com/angular/bower-angular-aria.git#^1.3.15 || >1.4.0-beta.0

bower EACCES        EACCES, mkdir '/home/pi/.node-red/node_modules/node-red-contrib-ui/src/public/vendor'

Stack trace:

Error: EACCES, mkdir '/home/pi/.node-red/node_modules/node-red-contrib-ui/src/public/vendor'

Console trace:

Error

    at StandardRenderer.error (/usr/local/lib/node_modules/bower/lib/renderers/StandardRenderer.js:82:37)

    at Logger.<anonymous> (/usr/local/lib/node_modules/bower/bin/bower:110:22)

    at Logger.emit (events.js:95:17)

    at Logger.emit (/usr/local/lib/node_modules/bower/node_modules/bower-logger/lib/Logger.js:29:39)

    at /usr/local/lib/node_modules/bower/lib/commands/index.js:48:20

    at _rejected (/usr/local/lib/node_modules/bower/node_modules/q/q.js:844:24)

    at /usr/local/lib/node_modules/bower/node_modules/q/q.js:870:30

    at Promise.when (/usr/local/lib/node_modules/bower/node_modules/q/q.js:1122:31)

    at Promise.promise.promiseDispatch (/usr/local/lib/node_modules/bower/node_modules/q/q.js:788:41)

    at /usr/local/lib/node_modules/bower/node_modules/q/q.js:604:44

System info:

Bower version: 1.6.5

Node version: 0.10.36

OS: Linux 3.18.7+ arm

[Andrei Tătar]

It seems bower doesn't have permissions to create the "vendor" folder.

Try creating it yourself before "bower install" with: 

mkdir /home/pi/.node-red/node_modules/node-red-contrib-ui/src/public/vendor

See if any of this helps:

http://stackoverflow.com/questions/22257726/eacces-error-with-bower-install

[Andrei Tătar]

Walter,

I replaced bower dependencies with npm dependencies and also published a npm package with the ui nodes.

You should be able to now install using:

npm install node-red-contrib-ui

Let me know if it works for you.

Thanks

[Walter Kraembring]

Dear Andrei,

Just solved it a few minutes ago by changing the access rights:

sudo chmod u=rwx,g=rwx,o=rwx /home/pi/.node-red/node_modules/node-red-contrib-ui -R

[Andrei Tătar]

Great news! Let me know what you think about it.

[Walter Kraembring]

Hello Andrei,

It works fine from functional point of view and the response is fast. The ui page is created automatically and I now wonder how those controls could be freely organized in a custom page. It would be great if those controls could be possible to insert anywhere in a page layout. In your sample they seem to be positioned in fix places?

Best regards,

Walter

 

[Artem Pastukhov]

This is absolutely great!
I miss this feature since i see node-red for the first time.
However i have some ideas to improve. I will make an issue on your github repo/

пятница, 6 ноября 2015 г., 17:47:43 UTC+3 пользователь Andrei Tătar написал:

[Andrei Tătar]

Thanks for the feedback!

@Walter: I'm not really sure what you mean. The controls are grouped in groups (that display as cards) and each group is displayed on a tab page (currently only one tab called "Home"). This allows for a responsive design that works great on all devices mobile/tablet/PC.

@Artem: we can also discuss ideas here. I think it reaches more interested people.

Currently there is no way to specify the order of a control in a group and the order of a group in the page.

I could add an order field on each control for the order in the group and maybe make a mean of the orders in that group to decide the order of the group on the tab page. What do you think?

Also, what other controls would you find useful?

[Artem Pastukhov]

Ok, It's possible to add an config node to be able configure path instead hardcoded /ui,  change header text and left menu items?

Second idea: make it (semi)dynamicaly. Create a node that accept JSON on input and build controls on it base, for example:

{ "buttons":[{'id':"button1","name":"button1","group":"group1"},{'id':"button2","name":"button2","group":"group2"}],"sliders":[...]...}

I also see a bug: the names of the nodes are changing when dragged from flows list to tab.

среда, 11 ноября 2015 г., 11:17:57 UTC+3 пользователь Andrei Tătar написал:

[Andrei Tătar]

 It's possible to add an config node to be able configure path instead hardcoded /ui

I don't think it's easily possible to configure the path in a config node because once you register a middleware in express you can't unregister it. Also, what happens when you have multiple config nodes? I guess it would be possible to add a config.json file that contains the path and can be user edited.

... change header text and left menu items?

The group header text can be changed by setting a different text on the group property for each element. The left menu items can't be changed right now but I was thinking that the group property value could be composed like 'group header:tab header'. So if there is a 'tab header' present, a new tab is created with that header on the left menu. What do you think?

Create a node that accept JSON on input and build controls on it base, for example:

This would be possible but then how do you interact with the generated controls? How do you receive messages from them and send them new values?

I also see a bug: the names of the nodes are changing when dragged from flows list to tab.

I'll fix this shortly.

[Artem Pastukhov]

But "http in" node do it easy.

Multiple config nodes handle multiple paths.

The node send or accept an payload with {"id":"button1","value":value}

среда, 11 ноября 2015 г., 11:54:47 UTC+3 пользователь Andrei Tătar написал:

[Andrei Tătar]

http-in removes the middleware by enumerating the app._router.stack and searching for a set path. It seems like a hack to me. I also don't really see an advantage to changing the path during runtime. It seems better off like a property in config.json.

I had an initial version in which the entire UI was described in XML but this is not very user friendly as a user has to remember the syntax, words, check documentation, etc. It would be more prone to errors and failure.

I think it would also get harder to maintain as you have multiple controls aggregated in one node that can send and receive messages for multiple UI controls with different ids, etc.

[Artem Pastukhov]

Andrei, i have the next great idea :)

Make UI node inherit socket and path from http-in and then pass output to http out?

'http in'->function, that fill the list of widgets and ui node options->'ui node' with optinos->'http out'

An UI node can have an option to choose the websocket address to communicate.

[Walter Kraembring]

Dear Andrei,

@Walter: I'm not really sure what you mean

Well, I see have the groups are organized so that is ok. I have the following suggestions:

- it is hard to see that there is a ui_button (maybe add a line around it)

- I would like to organize where in the page the various groups are placed

- I would like to have a page without the left column (just groups)

- I would like to be able to set the name of the page (currently named Home

- I would like to be able to set the colours for on and off states (currently is red)

- I would like to be able to assign icons to each control (different for on/off states)

- I would like to have a page wide text field control with a scrolling marquee showing various information

Another problem needed to be solved is maybe best visualized in the picture below. I have as example the lights in my garage/carport that is controlled by many functions (scheduled,, sunstate, presence, car approaching etc etc. How can I update the state of your controls? I see that the switch also has an input and I think this could be an idea, to allow other Node-RED events to update the state of your controls.

 

[Andrei Tătar]

@Artem: Not possible. There are many different paths under /ui that need to be handled. http-in only handles that one specific path (/ui) nothing else (/ui/socket.io, etc.).

I added the path in config.json. I think this is configurable enough.

[Andrei Tătar]

- it is hard to see that there is a ui_button (maybe add a line around it)

This is the "angular material" style. I'll try making it a bit more visible.

 

- I would like to organize where in the page the various groups are placed

How?

 

- I would like to have a page without the left column (just groups)

The left group hides on smaller screens. I'll make it hidden by default.

 

- I would like to be able to set the name of the page (currently named Home

You can. Make sure you have the latest version (1.0.4) and check the config.json.

 

- I would like to be able to set the colours for on and off states (currently is red)

It will be possible in the future to change the app style/theme/colors but not per component. Meaning all switches will look the same across the app.

 

- I would like to be able to assign icons to each control (different for on/off states)

By control, do you mean switch? Not every control has an "on/off" state. This would be possible. Does this list of icons contains what you would like? (https://klarsys.github.io/angular-material-icons/)

 

- I would like to have a page wide text field control with a scrolling marquee showing various information

More details? Maybe a sketch...

 

Another problem needed to be solved is maybe best visualized in the picture below. I have as example the lights in my garage/carport that is controlled by many functions (scheduled,, sunstate, presence, car approaching etc etc. How can I update the state of your controls? I see that the switch also has an input and I think this could be an idea, to allow other Node-RED events to update the state of your controls.

 

It is possible to update the switch state from node-red. It just needs a "boolean" as a payload on the input (true/false). It's what it also outputs.

You can test with the sketch below (changing a switch state, will update the rest):

 

[{"id":"1a2771f1.e5d88e","type":"ui_switch","z":"7ea3897a.815c78","label":"Switch 1","group":"","x":198,"y":56,"wires":[["9999966.f666668","fcf08b1c.030f78"]]},{"id":"9999966.f666668","type":"ui_switch","z":"7ea3897a.815c78","label":"Switch 2","group":"","x":200,"y":106,"wires":[["fcf08b1c.030f78","1a2771f1.e5d88e"]]},{"id":"fcf08b1c.030f78","type":"ui_switch","z":"7ea3897a.815c78","label":"Switch 3","group":"","x":201,"y":160,"wires":[["9999966.f666668","1a2771f1.e5d88e"]]}]

[Artem Pastukhov]

Yep. I miss node 'http-folder' wit that we can map file system folder to url path.

четверг, 12 ноября 2015 г., 15:00:20 UTC+3 пользователь Andrei Tătar написал:

[Artem Pastukhov]

I have made some example. Please look at http://flows.nodered.org/flow/bf9814b4c6bffda3c675

пятница, 6 ноября 2015 г., 17:47:43 UTC+3 пользователь Andrei Tătar написал:

[Artem Pastukhov]

четверг, 12 ноября 2015 г., 15:45:42 UTC+3 пользователь Artem Pastukhov написал:

[Walter Kraembring]

- it is hard to see that there is a ui_button (maybe add a line around it)

This is the "angular material" style. I'll try making it a bit more visible.

 

- I would like to organize where in the page the various groups are placed

How?

Drag & Drop ?

 

- I would like to have a page without the left column (just groups)

The left group hides on smaller screens. I'll make it hidden by default.

 

- I would like to be able to set the name of the page (currently named Home

You can. Make sure you have the latest version (1.0.4) and check the config.json.

 

- I would like to be able to set the colours for on and off states (currently is red)

It will be possible in the future to change the app style/theme/colors but not per component. Meaning all switches will look the same across the app.

 

- I would like to be able to assign icons to each control (different for on/off states)

By control, do you mean switch? Not every control has an "on/off" state. This would be possible. Does this list of icons contains what you would like? (https://klarsys.github.io/angular-material-icons/)

That is a nice library (maybe wish if they could be in colors as well like lamp ON = yellow, lamp OFF = black)

 

- I would like to have a page wide text field control with a scrolling marquee showing various information

More details? Maybe a sketch...

I will make a sample sketch

 

Another problem needed to be solved is maybe best visualized in the picture below. I have as example the lights in my garage/carport that is controlled by many functions (scheduled,, sunstate, presence, car approaching etc etc. How can I update the state of your controls? I see that the switch also has an input and I think this could be an idea, to allow other Node-RED events to update the state of your controls.

 

It is possible to update the switch state from node-red. It just needs a "boolean" as a payload on the input (true/false). It's what it also outputs.

OK, understand, then also other button and slides should have such inputs for synchronization purposes

[Walter Kraembring]

- I would like to organize where in the page the various groups are placed

How?

Drag & Drop ? Like when you move apps on an iPhone

If easier it could also be ok with hardcoded positions in the config.json (once page is configured I do not think you would change positions of groups so frequently)

[Andrei Tătar]

- I would like to organize where in the page the various groups are placed

How?

Drag & Drop ?

The problem is that the UI is designed to be responsive so the groups reorganize them self on the screen so that it makes sense both for a small screen (mobile phone) and a large screen (like a laptop). So currently the groups are order from left to right, from top to the bottom of the screen. If the screen is narrow, less groups will be on one row but there will be more rows. On a mobile phone there will be one group per row. The best I can do is specify an order for each group.

   

- I would like to be able to assign icons to each control (different for on/off states)

By control, do you mean switch? Not every control has an "on/off" state. This would be possible. Does this list of icons contains what you would like? (https://klarsys.github.io/angular-material-icons/)

That is a nice library (maybe wish if they could be in colors as well like lamp ON = yellow, lamp OFF = black)

Those icons can have different colors.

I will change the switch node so that it has 2 modes ("normal" and "icon"). When in "icon" mode, you'll be able to configure the icon that replaces the switch on the UI.

 

It is possible to update the switch state from node-red. It just needs a "boolean" as a payload on the input (true/false). It's what it also outputs.

OK, understand, then also other button and slides should have such inputs for synchronization purposes

All controls that have a state have also an output and an input: slider, numeric, switch 

[Walter Kraembring]

- I would like to organize where in the page the various groups are placed

How?

Drag & Drop ?

The problem is that the UI is designed to be responsive so the groups reorganize them self on the screen so that it makes sense both for a small screen (mobile phone) and a large screen (like a laptop). So currently the groups are order from left to right, from top to the bottom of the screen. If the screen is narrow, less groups will be on one row but there will be more rows. On a mobile phone there will be one group per row. The best I can do is specify an order for each group.

I think this will be fine!

   

- I would like to be able to assign icons to each control (different for on/off states)

By control, do you mean switch? Not every control has an "on/off" state. This would be possible. Does this list of icons contains what you would like? (https://klarsys.github.io/angular-material-icons/)

That is a nice library (maybe wish if they could be in colors as well like lamp ON = yellow, lamp OFF = black)

Those icons can have different colors.

I will change the switch node so that it has 2 modes ("normal" and "icon"). When in "icon" mode, you'll be able to configure the icon that replaces the switch on the UI.

Fine!

 

It is possible to update the switch state from node-red. It just needs a "boolean" as a payload on the input (true/false). It's what it also outputs.

OK, understand, then also other button and slides should have such inputs for synchronization purposes

All controls that have a state have also an output and an input: slider, numeric, switch

Could you also add that to the input button? In this way you can trigger the button with false/true message.payload and the button will forward this to it's output for further actions? 

[Walter Kraembring]

Could you also add that to the input button?

I mean the ui_button node 

[Walter Kraembring]

- I would like to have a page wide text field control with a scrolling marquee showing various information

More details? Maybe a sketch...

I will make a sample sketch

 

Attached is a picture of what I mean (and how I would prefer the page layout)

On top you have your heading with the name of the page and below is a control with page wide text field from a "not yet invented" scrolling marquee node. The text is scrolling at a certain speed and direction left or right, both configurable as well as the font size. Since it should be a node, it should be possible to add more than one to a page if needed

[Artem Pastukhov]

Andrei, what about tabs to group groups?

To be clear, i have z-wave home automation and most of devices have several controls. Motion sensors have also temperature and light meters, dimmer have slider and on/off control.

I've joined all the controls of single device to group. But i have also multiple rooms and want place my devices to corresponding room tab.

[Emil Oberg]

First of all: Nicely done!

The music part of the screenshot, with 4 different buttons, that's not something you've implemented/released yet?

E

[Andrei Tătar]

Could you also add that to the input button? In this way you can trigger the button with false/true message.payload and the button will forward this to it's output for further actions? 

I don't see any advantage in doing this. You can connect other outputs to that input you want to trigger. Adding an input to a button would make it seem you can change something on the UI by sending it a message. I would however update the other nodes (that have an input and an output) to forward the message from the input not only to the UI but also to the output (thing that it doesn't do now).

[Andrei Tătar]

Attached is a picture of what I mean (and how I would prefer the page layout)

On top you have your heading with the name of the page and below is a control with page wide text field from a "not yet invented" scrolling marquee node. The text is scrolling at a certain speed and direction left or right, both configurable as well as the font size. Since it should be a node, it should be possible to add more than one to a page if needed

I will make a similar control once I get more important things done. This seems nice to have but it's not a high priority.

[Andrei Tătar]

On Friday, 13 November 2015 11:33:38 UTC+2, Artem Pastukhov wrote:

Andrei, what about tabs to group groups?

To be clear, i have z-wave home automation and most of devices have several controls. Motion sensors have also temperature and light meters, dimmer have slider and on/off control.

I've joined all the controls of single device to group. But i have also multiple rooms and want place my devices to corresponding room tab.

The UI supports multiple tabs but there is no way yet of defining them. I was thinking of making the group field a composed one and contain both the group header and a tab header separated by semi-colon or some other char. 

So if you add a button node that has the group field set to "Status;Living" it will be added in the Status group on the Living tab.

What do you guys think?

[Andrei Tătar]

On Friday, 13 November 2015 15:14:51 UTC+2, Emil Oberg wrote:

First of all: Nicely done!

Thanks!

 

The music part of the screenshot, with 4 different buttons, that's not something you've implemented/released yet?

Not yet but there will definitely be a component that will have multiple configurable icon buttons that can be configured to look like that. We all need a way of controlling our MPD servers from our home automation page...

[Walter Kraembring]

I don't see any advantage in doing this. You can connect other outputs to that input you want to trigger. Adding an input to a button would make it seem you can change something on the UI by sending it a message

Well, it really depends on what type of button you have (maybe I have misunderstood the function of your button). If the button is just single state button (you press it, it sends the message) or if it is dual state (you press it, it stays pressed until you press it again). My understanding was that the button had dual state, like the switch, but if this is not the case it is more a button to be used to inject a message and every time you press it, it injects again the same message. In this case I agree, otherwise not.

[Andrei Tătar]

Yes, a button has no state. You press it and it sends a message with the node id. 

[Julian Knight]

Hi Andrei,

I'm afraid I can't get this working. I'm using NR v0.12.0 and Node.js v0.10.28 on a Pi2.

I'm running in embedded mode with my admin UI on /red and I'm using port 8081. If I try to access /ui, I get the error "Cannot GET /ui/" - if I use /red/ui I get a blank screen with a browser console error:

ReferenceError: io is not defined

    at WebEvents.connect (events.js:8)

    at new MainController (main.js:34)

    at Object.e [as invoke] (angular.min.js:39)

    at P.instance (angular.min.js:80)

    at K (angular.min.js:61)

    at g (angular.min.js:54)

    at angular.min.js:53

    at angular.min.js:20

    at n.$eval (angular.min.js:133)

    at n.$apply (angular.min.js:133)

Looking at the errors further, it is clear that the app cannot load /red/ui/socket.io/socket.io.js

Everything else loads OK so I guess there is a configuration issue somewhere in the app.

I tried installing socket.io in the root of my app to see if that would fix it but it didn't. I suspect it may be because your app code is a folder level beneath your node_modules?

I've hacked a workaround by hard coding the path being passed to socket.io on line 74 of ui.js as "/red/ui/socket.io"

You might also want to head off some possible odd future bugs by running jshint as I noticed some missing semi-colons.

[Julian Knight]

Also, the "Edit flows" link in the menu assumes the admin ui is on "/" which as we've already seen may not be so. You need to pick the location up from the NR settings.

Overall though I like it, it will be very useful indeed to people wanting to use NR but who are not familiar with HTML to create their own interfaces.

Couple of additional thoughts:

• I know that Material Design is meant to be flat but I think the button is just TOO flat, it isn't at all clear that there is a button present - poor UI design.
• It would be great if there were some additional configuration options on the nodes. Such as being able to define the return values for the switch so that the output could be fed directly into a controller (e.g. "On"/"Off" or "on"/"off", etc.)
• It would also be really helpful to expose the msg.topic in the nodes. By default pass-through nodes should pass the topic through but it is really helpful to be able to put your own topic in. Again, because this is widely used by things such as MQTT, it would enable the output to be sent directly to an MQTT node.
• A slight issue with the nodes that take a template. You can't include an HTML encoded or unicode symbol e.g. &deg; or &#x2122;)

Still, it all looks very promising.

On Sunday, 15 November 2015 18:10:26 UTC, Julian Knight wrote:

Hi Andrei,

....

[Julian Knight]

Another thing. The nodes that take input and produce output (number, slider, switch) don't trigger output when a new input is provided, only when the user changes something. That seems inconsistent to me and personally I would much prefer to get output on any change so that automated and manual inputs produce the same output. 

Also, because, as I mentioned before, there is no msg.topic, debugging may be hard, especially when chaining things together since any debug output can't identify the source (it would mean having to put a single debug node for every output).

[Julian Knight]

That seems workable.

[Julian Knight]

Sorry, another useful tweak:

You should be able to over-ride the label and group from an input msg. That way for example, you could connect a range of input MQTT messages (each has a topic) to a range of output messages without having to set up each separately. This should be possible since groups and elements appear dynamically. They would disappear of course on a page reload but that's OK.

Some more variables made available to the template would be great too. Perhaps just exposing the msg variable so that we could do something like:

Temperature: {{msg.payload.temperature}}, From: {{msg.topic}}

on a text output node for example.

In addition, being able to set the "value" element from a specific msg variable would also save some additional processing. Let's say that the temperature was on the payload as in the example above. In this case, the "value" input field in the node would be set to "msg.payload.temperature"

[Walter Kraembring]

It is possible to update the switch state from node-red. It just needs a "boolean" as a payload on the input (true/false). It's what it also outputs.

 

It would be great if there were some additional configuration options on the nodes. Such as being able to define the return values for the switch so that the output could be fed directly into a controller (e.g. "On"/"Off" or "on"/"off", etc.)

Also for the input it would be advisable to have this configuration option. As for example, the inject node cannot provide a bool, so in this case you would have to add a function node in between just for the conversion purpose. 

[Andrei Tătar]

A lot of great feedback! Thanks!

It's getting harder to track all the things in this single topic.

I created a new group dedicated to the UI plugin (https://groups.google.com/forum/#!forum/node-red-contrib-ui). Could you please open individual topics for each of the suggestions so we can discuss them individually?

Thanks!

[Julian Knight]

I put all of my suggestions into the issues log on github

[Andrei Tătar]

Yes, I saw that. I'll respond there.

[Andrei Tătar]

Version 1.1.10 was released.

It has a lot of new things, including a chart control (you can only add data for now, but it will include an option to remove data older than a specified limit).

Let me know what you think.

[Nathanaël Lécaudé]

Thanks, this is brilliant !

[|\|370]

Interesting approach!

On Monday, November 9, 2015 at 4:15:30 PM UTC-3, Andrei Tătar wrote:

Hello,

Here is a first pre-alpha version:

https://github.com/andrei-tatar/node-red-contrib-ui

There is no NPM package yet. I'll wait to get things a bit stable.

It needs some more work but it's a place to start from.

Let me know what you think and if you run into any issues.

Andrei

[Nathanaël Lécaudé]

node-red-contrib-ui gets physical !! https://www.youtube.com/watch?v=JW7KYqLPzKk