Right, next step.
Go read this:
UIBUILDER First Timers Walkthrough
And work through it carefully.
It should reinforce what you've just learned and may give some further insight into how things are working.
1 Like
Sorry.
It's the way I parse things.
Instructions like that sometimes don't get parsed.
Maybe the start part threw me. If it was on a new line I may have seen it better.
But hey, as you said: Not worth worrying about.
It now works.
No problem, you might want to train yourself to read through to the end first - I have some similar issues with the way my brain works. Not uncommon for certain types of people.
Sometimes it also helps to read from the end upwards having read things the normal way.
I shall, but alas not today.
It is 23:15 local.
I've been awake since about 05:30. COLD/BAD night's sleep.
And tomorrow I'm off to a show in the evening.
Again:
Thanks.
1 Like
Go rest! 
Hope things go well. Catch you soon.
1 Like
I've only just got up and am looking at the Walk through link you last posted.
Brain may not be up to speed yet.
Good news, not so good news.
EDIT
Sorry, I may have shot myself in the foot.
I realise I was using a test flow and not just the 3/4 nodes as described in the walk through.
But there still seems to be discontinuity there.
The documentation is a bit vague. IMO.
The getting started in 4 easy steps.
Point 4 is (to me) confusing.
I'm guessing I load the original test flow you showed me at the start.
To improve that, re-open the node's settings and change the Template drop-down to "No framework, IIFE client". Then click the "Load & Overwrite Files" button. You will get a warning that you should carefully read and if OK, click on the "OK, overwrite" button. Of course, if you don't want to overwrite things, click on the cancel button (which is the default).
So have we done anything?
When you now revisit your web page, you will see that there is a bit more to it that will help you understand how to get things done. It has a title, sub-title and a form containing one input field with a button, and one custom button.
I see two input fields and two buttons.
But then I read:
The rest is really now just testing.
Re-open the uibuilder node and click on the "Open" button.
This opens a new browser tab showing you your web page. It has a title, a couple of buttons showing ways to get data back to Node-RED and a panel that shows the latest message sent from Node-RED.
But wasn't that just done - be it explicitly or implicitly - above?
I'll stop here as the confusion level is high enough as is.
Ok, quick P.S.
The next point (2) seems to be talking about the screen shot I posted.
So either I missed something with step 1 and got/went directly to step 2 or .....
something?
It is only 4 points, hard to make it any simpler - but if you have suggestions, I'm all ears.
"Click on the Deploy button"? The thing you have to press every time you make a change to your flows?
Step 2? 3 nodes, starting with an inject connected to a uibuilder which is connected to a debug node.
Now I'm confused!
Did you get a page displayed at the end of step 4 - remember how you opened the web page in the previous work-through yesterday?
Actually, I note that I've already changed that part after step 4, it now says this:
At this point, you now have a working web app! So, re-open the uibuilder node and click on the "Open" button to view the page.
So when you go into the next section, you know you have a working example. And now you can enhance it.
Yes, you should have changed the template. When you reload the page, it should look different. If you reload the page, it should look something like this:
Yup, things have changed. 
I've used your responses to update the walkthrough, this will be in the v7 docs. Not everything will show correctly here in the forum, but it should give you an idea anyway. As you can see, I've included more images.
How to get started - 4 steps to a data-driven web app
It may look complex, but really it isn't. 
- Install node-red-contrib-uibuilder via Node-RED's "Manage palette" menu.
- Add a new flow consisting of:
inject -> uibuilder -> debugnodes connected in that order.Add debug nodes to both of the output ports of theuibuildernode and set them both to show the full msg.
Note
You can import a working example using Node-RED's import menu. Look in the examples section under uibuilder.
Don't forget to set the uibuilder node's "URL" (its name) and then Deploy before doing anything else.
- Double-click on the
uibuildernode and change it's URL touibtest. Click on the "Done" button. - Click on the Node-RED "Deploy" button.
At this point, you now have a working web app! So, re-open the uibuilder node and click on the "Open" button to view the page. This opens a new browser tab showing you your web page.
However, the page doesn't really show or do anything useful yet.
To improve this mostly blank page, re-open the node's settings again and change the Template drop-down to "No framework, IIFE client". Then click the "Load & Overwrite Files" button. You will get a warning that you should carefully read and if OK, click on the "OK, overwrite" button. Of course, if you don't want to overwrite things, click on the cancel button (which is the default).
The rest is really now just testing and getting familiar with the details of how things work.
- Either reload the page or re-open the
uibuildernode and click on the "Open" button. This shows the updated page (the template contains all the code). - In the Editor, cancel the
uibuildernode's configuration panel and click on the inject node's input button. Then check your web page again.You should now see a nicely formatted presentation of the message that the inject node sent to theuibuildernode which, in turn, passed it to your front-end client (the browser).So at this point, you know that you can communicate from Node-RED to your browser. If this isn't working, please see the troubleshooting section below. - Now check the debug panel in Node-RED.You should see several messages listed there. If you check, you will see that they all come from the second output port of the
uibuildernode.That port outputs uibuilder control messages. The messages tell you where they came from, either the server (theuibuildernode itself) or the client and what they represent ("Client Connect" for example). You will also see a bunch of other properties that tell you things about the connected client browser tab.
Tip
The top output port on a uibuilder node outputs standard messages from your client browser(s). The bottom port outputs control messages mostly generated by uibuilder itself.
Note
Remember that the Node-RED server and the browser client page run in completely separate contexts (even if they both run on the same device). The only communication between them happens because the uibuilder node talks to the uibuilder client library.
- Send information back to Node-RED from the browserNow that you have seen how Node-RED can send a message to the browser, it is time to send your own message back.The loaded template has a web FORM pre-defined. You can enter data into the form and press the "eventSend" button. Check out the debug panel in the Node-RED editor and you will see a new message there. Hover over it to see that it came out of the top port of the
uibuildernode. This is the standard message port. Messages you send from the browser appear here.Check the content of the message and you will see that it contains a msg._ui property with lots of pre-defined data. That includes the input from the form. This uses the helper functionuibuilder.eventSend(event). This function makes it extremely easy to send useful information back to Node-RED simply by attaching it to an HTML event such as a button click or input field change.
Tip
uibuilder.eventSend(event) and uibuilder.send({...}) are two of the client library's built in functions and both send information back from the browser client to the Node-RED server.
You now have a fully working UIBUILDER configuration with a web page and have seen how to send data between Node-RED, the browser, and back.
Andrew, I'm going to remove your last post, as it's a duplicated issue from Way off topic - help with VNC set up
Keep on topic pls.
This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.
