Hi,
I have Node-RED installed on a Rasperry Pi with a Flowfuse agent running on it. I am trying to set up a stand-alone web server by using the uibuilder node. I want to show a value of a variable that changes frequently. However, I am only able to show the name of the variable and not the actual value. I tried to install vue, however it seems to be still not working. I am not sure if something fails during the installlaton or what happens. The same flow works on a local instance on my computer. These error messages are shown:
I don't use Flowfuse I'm afraid so I may not be able to help if the issue stems from that.
For uibuilder itself, those errors show that your reference to the VueJS library is not correct. The best place to start is with one of the built-in example flows as those will definitely run unless there is a local configuration issue. Once you have an example flow working, you can begin to amend it to your needs.
By the way, if you are using uibuilder v6.6, you don't need Vue to be able to show a dynamic variable. Instead you can use <uib-var variable="myvar"></uib-var> and change the variable using the set command - e.g. send a msg to uibuilder containing this:
{
"_uib": {
"command": "set",
"prop": "myvar",
"value": "my value"
}
}
Or you can do it in front-end code with:
uibuilder.onChange('msg', (msg) => {
uibuilder.set('myvar', msg.payload) // or whatever data you want
}
1 Like
Julian,
what if myVar is a JSON? How can I display single elements from: <uib-var variable="myvar"></uib-var> ?
Thanks for your reply. I talked to Flowfuse support and they did not think it stems from Flowfuse. By any change, do you have a simple example flow of displaying and chaning af variable, for example with ?
I knew someone would ask that! 
Quite simple - use a second managed variable set to the appropriate property of the first.
uib.set('mycomplexvar', {fred:32, jim:42})
uib.set('jimsAge', uib.get('mycomplexvar').jim)
Obviously not perfect since updating jim's age in mycomplexvar (uib.set('mycomplexvar.jim', 52)) does not directly update the jimsAge variable.
This was the 1st release of this component though and I am certainly open to ideas for improving it.
Do you mean getting Vue working or using <uib-var>?
For Vue, look in Node-RED's import library under Examples and uibuilder and import the "Templates" example flow. This has a whole flow tab showing examples for each of uibuilder's templates. There are several VueJS related templates both for Vue v2 and Vue v3.
For uib-var, here are some examples:
[{"id":"60a8489436d0ee43","type":"debug","z":"ff1a7711.244f48","name":"uib Std Output","active":false,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"","statusType":"counter","x":865,"y":2980,"wires":[],"l":false},{"id":"ff050c4347776e67","type":"uibuilder","z":"ff1a7711.244f48","name":"","topic":"","url":"uib-var-test","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"reload":true,"sourceFolder":"src","deployedVersion":"6.6.0","showMsgUib":true,"title":"","descr":"","x":700,"y":3020,"wires":[["60a8489436d0ee43"],["86ffc76eb5838f6c"]]},{"id":"86ffc76eb5838f6c","type":"debug","z":"ff1a7711.244f48","name":"uib Control Output","active":false,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"","statusType":"counter","x":865,"y":3040,"wires":[],"l":false},{"id":"b9605e7d0a662387","type":"link in","z":"ff1a7711.244f48","name":"uib in","links":["6a4c985e0fc73c31","5c5965ac4682fc53"],"x":565,"y":3020,"wires":[["ff050c4347776e67"]]},{"id":"6a4c985e0fc73c31","type":"link out","z":"ff1a7711.244f48","name":"uib ctrls out","mode":"link","links":["b9605e7d0a662387"],"x":865,"y":3260,"wires":[]},{"id":"ab72b1d0039a5cb3","type":"inject","z":"ff1a7711.244f48","name":"","props":[],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":385,"y":3120,"wires":[["7c499ac47dc01640"]],"l":false},{"id":"e33a29855f036e79","type":"uib-element","z":"ff1a7711.244f48","name":"","topic":"","elementtype":"html","parent":"#more","parentSource":"","parentSourceType":"str","elementid":"md001","elementId":"","elementIdSourceType":"str","heading":"","headingSourceType":"str","headingLevel":"h2","data":"payload","dataSourceType":"msg","position":"last","positionSourceType":"str","passthrough":false,"confData":{},"x":680,"y":3120,"wires":[["5c5965ac4682fc53"]]},{"id":"7c499ac47dc01640","type":"template","z":"ff1a7711.244f48","name":"","field":"payload","fieldType":"msg","format":"html","syntax":"mustache","template":"<p>\n UIBUILDER Version: <uib-var variable=\"version\"></uib-var>\n<p></p>\n Random # from Node-RED: <uib-var variable=\"myrandom\">(No Value)</uib-var>\n</p>","output":"str","x":480,"y":3120,"wires":[["e33a29855f036e79"]]},{"id":"2d07723a33514785","type":"inject","z":"ff1a7711.244f48","name":"SET myrandom var","props":[{"p":"_uib","v":"{\t \"command\":\"set\",\t \"prop\":\"myrandom\",\t \"value\":$formatInteger($random() * 100, \"0\")\t}","vt":"jsonata"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":690,"y":3340,"wires":[["6a4c985e0fc73c31"]]},{"id":"5c5965ac4682fc53","type":"link out","z":"ff1a7711.244f48","name":"uib ctrls out","mode":"link","links":["b9605e7d0a662387"],"x":865,"y":3120,"wires":[]},{"id":"29f2d5712c08232b","type":"uib-tag","z":"ff1a7711.244f48","name":"","topic":"","tag":"uib-var","parent":"#more","parentSource":"","parentSourceType":"str","elementId":"uibvar03","elementIdSourceType":"str","position":"last","positionSourceType":"str","slotSourceProp":"Default value","slotSourcePropType":"str","attribsSource":"{\"variable\":\"myvar3\"}","attribsSourceType":"json","slotPropMarkdown":false,"x":670,"y":3180,"wires":[["5c5965ac4682fc53"]]},{"id":"130704c99e375d77","type":"inject","z":"ff1a7711.244f48","name":"Blank myvar3","props":[{"p":"_uib","v":"{\"command\":\"set\",\"prop\":\"myvar3\",\"value\":\"\"}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":710,"y":3260,"wires":[["6a4c985e0fc73c31"]]},{"id":"0e7d0e2fdb0cc462","type":"inject","z":"ff1a7711.244f48","name":"Random myvar3","props":[{"p":"_uib","v":"{\t \"command\":\"set\",\t \"prop\":\"myvar3\",\t \"value\":$formatInteger($random() * 100, \"0\")\t}","vt":"jsonata"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":700,"y":3300,"wires":[["6a4c985e0fc73c31"]]},{"id":"eeb24d2935b76147","type":"inject","z":"ff1a7711.244f48","name":"","props":[],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":515,"y":3180,"wires":[["29f2d5712c08232b"]],"l":false},{"id":"a29c18dfe4a6926b","type":"comment","z":"ff1a7711.244f48","name":"Dynamic add HTML with 2 shown vars","info":"","x":1070,"y":3120,"wires":[]},{"id":"bebda3baf75a1209","type":"comment","z":"ff1a7711.244f48","name":"Add single shown vars dynamically","info":"","x":1060,"y":3180,"wires":[]},{"id":"f2591948e1dea11e","type":"comment","z":"ff1a7711.244f48","name":"Blank 3rd var","info":"","x":990,"y":3260,"wires":[]},{"id":"22c52f9ce8e9ea37","type":"comment","z":"ff1a7711.244f48","name":"Set 3rd var to random number","info":"","x":1040,"y":3300,"wires":[]},{"id":"5f237a9ee055b71d","type":"comment","z":"ff1a7711.244f48","name":"Set 2nd var to random number","info":"","x":1040,"y":3340,"wires":[]}]
The next release of uibuilder (v6.7) will have uib-var examples available.
I have objects with 10-20 fields.... Maybe I should manage them in JS (with uibuilder.onChange) to properly unpack and not use the html syntax.
That is certainly the most flexible way. I will continue to try and think up some better ways to manage deep object changes but it isn't easy and even things like Vue can have difficulties and they are much larger frameworks.
If you think of something that might help in this area, do let me know. Maybe something about javascript object proxies.
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
