After reading the new dashboard topic I decided to try out the uibuilder to see what all the fuss was about. After loading a dozen examples I got none of them to work, not a single one. So I have decided to see if someone will hand hold me through getting at least one of them to work. Let's pick the one called uib_svg but if some one wants me to try something else I'm game.
Running a Pi4 with Raspbian and the latest node red. Did a complete wipe of the sd card and started fresh. Did the update/upgrade command before installing node red so I'm fairly confident everything is at the latest levels.
After installing uib_svg by doing the copy and import method I get a single black triangle in the middle of a white page. Nothing else. I copied all the files inside node red, the html, js, and css files and when that didn't work I copied them into the actual files inside the uib_svg folder on the pi.
Please be kind as I am obviously a complete noob in this.
Thanks
I have barebone examples that work with uibuilder.
2 versions; vanilla javascript and vuejs
Note that these are only the index(html/js) files to receive something on the page (and console) you need to add an inject node to uibuilder and click it.
So I can get the page up, one more question do you have a very simple example of passing data? Or maybe explain a little further on your comment? I did hook up a inject node to send a string "example" but nothing visually changes. Also. I get
"[uibuilder:uibgetfile] Admin API. File does not exist '/home/pi/.node-red/uibuilder/uibuilder/undefined/undefined'. url=uibuilder"
as a debug when I looked in the editor.
Thanks
One other thing. I went into index.js and changed the payload from "send from uibuilder" to "from uibuilder" and it had no effect. When I click the button on the web page it still sends "send from uibuilder"
[EDIT] I even stopped and restarted node red, no effect
[EDIT] OK, now the payload message seems to have changed
Which examples? And what errors did you get?
Have you tried the examples in the library? They all should work, I update them as uibuilder is updated. What about the new external template example, did you try that?
Link? Which one is that?
That tells me that you have left the URL for your example uibuilder node set to uibuilder which is the default. But undefined/undefined should be impossible.
Did you deploy your node before trying to edit a file?
If you edit your front-end files, you have to reload the front-end page. On the Edit page, try turning on the auto-reload:
I got all my examples from the forum doing a search for uibuilder. Can't recall all the different flows I tried to load now.
Still getting this message in the debug.
I have checked the auto-reload and that didn't seem to help but as I said I'm now getting the messages from the page but when I set an inject node to the uibuilder node I don't see any changes on the page, I am thinking it's supposed to change the text on the button but unsure.
I have gone into the pi and deleted all the example files then loaded the example @bakman2 provided and that is the one I'm currently playing with and it is the only one left on the pi. Think I got all your questions. Any thoughts on where my inject message goes?
Having tried uibuilder once, seeing it how powerful it can be but same time how complex the stuff comes if the luck of knowledge steps in, -- reading the topics like this one -- , I found that there should be walk through of creating something practical with uibuilder. Community created, supported and communicated via forum, with leader directed , based on real data, widely available but good enough to be reference of basic situations of any build. The "Hello World" is just not good enough.
This community here is best I ever seen, so I can't see any reason why not. I see @TotallyInformation not only good in creating useful things. Why not take a leadership of such educational route.
I'd like to second @hotNipi and the walk through. It's hard to write documentation I know, I've tried it and mine stunk so to those who can write it, you have my admiration. But for the most part I have found it frustrating as a lot of the documentation says "go change this" and I have no idea where "go" is. I'd like to learn and most of the time I feel I'm burdening the forum with such low level questions but I truly would like to expand my knowledge and without some help I don't think I will get there. Documentation can be really drudge work but for me and those like me it is a life saver.
The point of uibuilder is ultimate freedom with a communication layer to/from node-red, which immediately creates a problem if you want to provide examples.
It requires thorough knowledge of node-red, javascript/vuejs (where applicable), html, object/arrays and communication concepts. If you have that, a "hello world" is sufficient to get started, if you don't, starting with uibuilder as a startingpoint is far from ideal imho. Nevertheless, simple examples have never hurt any project for sure.
SO..... If I may ask @bakman2 , when I put an inject node on the uibuilder node and inject "example", where should I see that?
You first need to specify an endpoint url in the uibuilder node. then point your browser to the same ip/path.
I can see the page, and I see the message back from the page in your example, but I don't see where the inject node info winds up. Looking at the .js file it seems to me the msg.payload from the inject node should come up in the button text?
Please share both your flow and a listing of /home/pi/.node-red/uibuilder/uibuilder I think you have deleted something you shouldn't have.
You didn't answer whether you had tried the built-in examples from the library or the external template example?
?? Not sure what you mean. A simple uibuilder example is
inject -> uibuilder ---> msg debug
|
+-> msg debug
Add a new uibuilder node to your flow. Open the editor panel, change the URL to test. Click Done and then deploy. Reopen the editor panel and click on the button to open the page - should get a very boring page.
Now look at the templates section and load a more interesting template. Click done and deploy. Reload your page and it should different.
Now add an inject node and check that the msg has reached your page.
Now add a debug node to the top output of the uibuilder node. If you chose the VueJS template (and assuming you followed the instructions to install VueJS and bootstrap-vue), you should have a page with some inputs. If you use those, you should see messages in Node-RED.
OK, I'll create something - But I want suggestions about what what you think something practical is please.
If you find anything like that in the uibuilder documentation, please do let me know directly. I'm happy to correct it but it takes feedback from the community which, to be brutally honest, is very rare. As the developer, I am too close to it and so I don't always see what might be missing or wrong or badly structured. Only other people can realistically see that.
There are, of course, simple examples built into the examples library - does anyone use them?
[{"id":"43d21d586cfa370c","type":"tab","label":"Flow 5","disabled":false,"info":""},{"id":"e480e0590af03f62","type":"uibuilder","z":"43d21d586cfa370c","name":"ui test","topic":"","url":"uibuilder","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"useSecurity":false,"sessionLength":432000,"tokenAutoExtend":false,"reload":true,"sourceFolder":"src","credentials":{},"x":410,"y":200,"wires":[["4ca364b74d71042f"],["010bfc67300c08ec"]]},{"id":"f148a57c8a9bd55a","type":"inject","z":"43d21d586cfa370c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"next","payload":"example","payloadType":"str","x":200,"y":200,"wires":[["e480e0590af03f62","8f1c65acc5745118"]]},{"id":"4ca364b74d71042f","type":"debug","z":"43d21d586cfa370c","name":"1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":570,"y":180,"wires":[]},{"id":"010bfc67300c08ec","type":"debug","z":"43d21d586cfa370c","name":"2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":570,"y":240,"wires":[]},{"id":"8f1c65acc5745118","type":"debug","z":"43d21d586cfa370c","name":"3","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":460,"y":80,"wires":[]}]
I went into the forum and did a search for uibuilder and about 10 or so flows came up. That's where I got the flows. Haven't tried any of the examples from the import nodes screen. Didn't know there was any in there.
Using the @bakman2 example in this thread he said to put an inject node on the uibuilder node to send a message to the page.
Just went into the examples and there was one labeled "simple" which I did load, and although the page did come up there was no "quote" on the page. However, I'd like to slog through the current flow and see if I can get the inject to work.
[EDIT] What I was really wanting to see was info going to the page and info coming back to node red. The example @bakman2 provided seemed to me exactly what I was looking for. The "simple" example doesn't show any info going back and forth.
Even without deploying your imported code, I couldn't get the error you did. Though I did get something not terribly different:
I will fix that so that you cannot try to edit anything until you have deployed for the first time.
Please use my walkthrough above and see what you get.
OK, I think that the web site it used has gone away. So much for "practical" examples!
Use the VueJS & Bootstrap-vue template.
Loaded the vue example and see info going to the page but what I really would like to see is an example of a page with a button or whatever that I can send info to the page and info back to node red so I can dissect what is happening and hopefully be able to recreate that into something useful for me.
[{"id":"43d21d586cfa370c","type":"tab","label":"Flow 5","disabled":false,"info":""},{"id":"e480e0590af03f62","type":"uibuilder","z":"43d21d586cfa370c","name":"ui test","topic":"","url":"uibuilder","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"useSecurity":false,"sessionLength":432000,"tokenAutoExtend":false,"reload":true,"sourceFolder":"src","x":400,"y":200,"wires":[["4ca364b74d71042f"],["010bfc67300c08ec"]]},{"id":"f148a57c8a9bd55a","type":"inject","z":"43d21d586cfa370c","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"next","payload":"example","payloadType":"str","x":200,"y":200,"wires":[["e480e0590af03f62","8f1c65acc5745118"]]},{"id":"4ca364b74d71042f","type":"debug","z":"43d21d586cfa370c","name":"1","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":570,"y":180,"wires":[]},{"id":"010bfc67300c08ec","type":"debug","z":"43d21d586cfa370c","name":"2","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":570,"y":240,"wires":[]},{"id":"8f1c65acc5745118","type":"debug","z":"43d21d586cfa370c","name":"3","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":390,"y":140,"wires":[]}]
This is the flow I'm playing with and can't see where the inject node info goes.
That is EXACTLY what the Vue example page does. Click the button and, assuming that you have connected an output debug node, you will see the data coming back from your front-end. That was the whole purpose of that template - indeed, for quite a while, that was the default template but quite a few people complained that it was too complex.
