Node-RED

Question Regarding uibuilder

General
#1

I have been practicing programming uibuilder with vue & bootstrapVue. I have worked up a database manipulation program following an excellent tutorial and I can get data through the network with a vue method using async and fetch().

However, what I actually want to do is get the data from Node-red. I have achieved this by sending a msg to Node-red with uibuilder.send and updating vue data properties when the return msg is identified by uibuilder.onChange in the mounted section of the vue app.

The question is; is there any other way of getting a msg object into the vue app other than through the onChange event in mounted? I have looked at the exposed methods and apart from uibuilder.send have not been able to get anything out of them when used in the vue methods or watch sections.

I would point out that I am pretty new at Javascript & vue so I am probably missing something that is obvious. If so, if someone would point me in the direction of an explanation I would be most grateful.

#2

Urm, what else would you want?

This exactly mirrors what happens in a Node-RED node and that is deliberate so that the processing is very familiar.

I am looking at some additional helper methods that would let you directly update a Vue data variable given a specific incoming msg.topic or via some pre-defined data schema in the send msg. However, I haven't yet managed to get the code stable and I needed to get v3 live so I pulled it from v3.0.0.

All that will do however is make it easier to directly update a Vue variable based on crafting a specifically formatted msg from Node-RED. It slightly simplifies your front-end code but will not offer anything you cannot already do using a simple onchange function (that also has the advantage that it isn't Vue specific and so can be used with other frameworks, one of the key design principles of uibuilder).

To be clear, the uibuilder.onchange('msg', function(msg){}) function is triggered every time Node-RED sends a msg to the uibuilder node. Consider it equivalent to using a function node in Node-RED except that it has no output only an input. It is in the mounted section of the Vue app to ensure that it doesn't start working before Vue has set up its responsive variable handling.

If you can identify something that would make life simpler for beginners, please let me know. I'm always open to new ideas.

#3

I think I was trying to be too vue and not enough Node-red. What I was trying to do was run a method in the mounted section - send a msg back to Node-red to trigger the sending of a msg with the required data - and get the resultant msg in the method (the problem I was having is that there is no async way I could think of doing this ).

The idea was to reduce the possible number of targets for a returned msg. As you say, the easiest and obvious way is to update the vue properties in the onChange

I am not sure about making things simpler for beginners but one thing may help (well me anyway) and that is some examples of the usage of the uibulder methods. send and onChange are well documented in the examples but I could not find any using the other methods. (particularly uibulder.msg as I have not been able to get this to work, so obviously have a wrong idea of how it DOES work)

#4

If you look in the unminimised version of uibuilderfe.js, you will see some example usage. Also there may be some examples in the docs folder.

In that specific example, uibuilder.msg is just a helper in case you ever need to retrieve the last inbound msg. In reality I am not sure you ever would need that when working with Vue as it is best to set a Vue data variable from the onchange function. Then you can just focus on using the vue variable. It might be useful for people not using Vue though.

#5

My main problem with uibuilder methods was a misunderstanding of what properties are involved .The problem with uibuilder.msg was that on my system there is ~100 millisecond delay between sending a msg to a Node-red function and getting an answer back. I have followed your advice and just worked with onChange and a Vue data variable.

On use of uibuilder & Vue by beginners, I have tried the Load Vue components without a build step (modern browsers only) and have found the alternative using http-vue-loader to be much easier and straight-forward. Trying to sort out how to get a scoped style section in a .js file was one step too many. Also, most examples I have found use a .vue file.

#6

Can't say I'm surprised. That documentation was as much a note to myself so that I don't forget it. In the future, I think it will become the standard. Once browsers catch up and Vue moves forward.

For myself, I always try to see if you can just load the component in a script tag first. If you can, it is by far the best approach. If that isn't possible, http-vue-loader is the second choice.

Glad you are moving forward anyway.

#7

Errm. Just updated to uibuilder 3.0.1, is there un update somewhere. I finally realised (remembered something you said elsewhere) that I had to add bootstrap & bootstrap-vue to the libraries

#8

you should be fine - what version were you using before?

#9

3.0.0. Everything worked in 3.0.1 once I loaded the bootstrap libraries

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

The OpenJS Foundation | Terms of Use | Privacy Policy | OpenJS Foundation Bylaws | Trademark Policy | Trademark List | Cookie Policy