UI Template Feedback & Thoughts

Dashboard
1

Taken from UI Template - Tabbed interface for defining Component · Issue #419 · FlowFuse/node-red-dashboard · GitHub where I wanted to move the conversations into a more public forum/domain for others to see and learn from too.

Original message from @diegodamaceno

As a component creator as a profession here in Brazil, despite my little knowledge, I confess that Vue.js is proving to be a challenge. That said, I want to leave some basic suggestions for using the node.

1 - Create the possibility for a ui_template node to have several outputs as we created in the functions.
2 - Simplify the input and output methods of information in the node in order to send a message to a ui_templete node and be able to use these messages in the script or at any point within the node.
3 - Make each ui_template node in fluw a unique node so that the components do not conflict with each other.
4 - Give the possibility of fully configuring the dashboard using a ui_templete node configured for this. This configuration gives you the possibility to set background wallpapers, change colors and everything else in the group, and so on.

This project has everything it needs to be a leader when we talk about home automation in Brazil. Give us the tools and we will give you success. Thank you and I will continue trying to help. I'm already creating buttons and many other things for home automation around here.

2

1 - Create the possibility for a ui_template node to have several outputs as we created in the functions.

Sensible idea, although not one that was in Dashboard 1.0 if I recall correctly?

For now, you could have a switch node after the template, although I appreciate that'll lead to some annoying copying and pasting. I'm happy for you to open an issue/feature request on this repo detailing this further.

2 - Simplify the input and output methods of information in the node in order to send a message to a ui_templete node and be able to use these messages in the script or at any point within the node.

I'm not sure I can make them any more simpler than they already are, although I'm always open to ideas!

In our documentation you can see examples like:

// Subscribe to the incoming msg's
this.$socket.on('msg-input:' + this.id, function(msg) {
    // do stuff with the message
    alert('message received: ' + msg.payload)
})

Which can run directly inside your <script /> and will react whenever a message is received into the Template node.

Similarly, access to the latest message is also available via this.msg which will always be the latest message received by the node.

Regarding output of a message, I've seen that you're using this.send() - not sure how I could make that any simpler? Again, open to ideas.

3 - Make each ui_template node in flow a unique node so that the components do not conflict with each other.

They already are. That's the joy of using VueJS. I recommend trying out the tutorial I released last week on how to build a Custom Video Player.

That demonstrates how you can use Vue's ref="" within the <template />, then use this.$refs["<my-ref>"] in your Javascript as a replacement for document.querySelector. The ref is automatically scoped to just this instance of the template, meaning you no longer need unique identifiers for every button, etc.

4 - Give the possibility of fully configuring the dashboard using a ui_template node configured for this. This configuration gives you the possibility to set background wallpapers, change colors and everything else in the group, and so on.

We have some control over this in the ui-theme defined at each ui-page, although we do plan on extending this. You can also override any of the CSS classes in play, by adding your own CSS within the ui-template too - see Rounded Corners in Dashboard 2.0 Groups (flow) - Node-RED which shows an example of setting rounded corners on groups.

3

Although there were no multiple outputs in the old model, if this was possible in the new model it would be great, that's the idea... An option that limited the output of repeated messages would also be cool. Make only different outputs leave the node. I will try to apply everything you suggested and I greatly appreciate your help.

4

I like that idea. Multiple outputs would definitely help reduce efforts when there are multiple components sending data.

If Joe agrees to that, I'd recommend the send function signature follows the same format as the function node does.

1 Like
5

Currently I have to set up a function to divide on and off and also handle multiple sends. When or on the button it emits 3 ONs.. I have to limit it to one so it doesn't overload MQTT

a1
a1896×66 10.7 KB

6

Another very powerful thing that could be implemented is being able to access globals within the ui-template. I could query status of entities anywhere in node-red and do an interlace
wonderful among automations. Currently I have to add another function for this...
a2

7

Globals are server side so that is not so easy. Additionally, I believe it would actually encourage the use of globals which is a bad* thing. It is super easy to populate a message with the globals and pass them in to the template. I would sooner encourage people to store values in objects then you can grab that single object and pass in the relevant data in one message.

*Globals are bad: IMO, it reduces code portability & it can lead to concurrency issues.

1 Like
8

Perfect... I'll learn more about this to improve my projects.

9

Care to share in here what that is please? I have no objections to the idea

10

As a template node can have multiple components, currently, the only way to pass multiple payloads from the front end to the backend is via the single output of the template node. This leads to duplication at both ends: in client side, you have to do extra work to "tag" the message (typically setting a topic) then at server side you have to route the messages (typically via a switch or function node).

Having a numeric spinner to permit the user to set multiple outputs, the send functionality (that the function node employs) permits messages to target a specific output. Additionally, as an added bonus, this then permits the user to name the outputs (free, existing functionality) making for better comprehension.

Adapted from the docs:

var msg1 = { payload:"first out of output 1" };
var msg2 = { payload:"second out of output 1" };
var msg3 = { payload:"third out of output 1" };
var msg4 = { payload:"only message from output 2" };
send ([ [ msg1, msg2, msg3 ], msg4 ]);
11

Perfect. This would help a lot to make the flows cleaner and clearer to be understood. Don't forget that checking the possibility of not letting the incoming message pass straight to the outgoing, this greatly complicates the use of the node.

12

I identified problems when using certain icons and also when determining the background colors in the themes. Some icons work normally, but others don't. The colors in the themes don't work and I'm not able to apply simple rounding to the groups. I will list more problems and adjustments that I find.

13

Please raise issues for each of the problems on the GutHub repository, and we can tackle each one accordingly!

14

Multiple outputs on ui-template: Multiple outputs capability on ui-template · Issue #433 · FlowFuse/node-red-dashboard · GitHub

15

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.