Help with how to update form NR 1.0.3 to 4.x and all other stuff

You don't need to make any directories, uibuilder will do all that for you.

Ok, that is good.
I kind of thought it should anyway.

But I'm still stuck with the URL bit.
We seem to be tripping on each other's replies, so I'll wait for you to answer/help me with that.

Your settings should look like this:

If you get stuck, just delete the node, say yes if it asks if you want to delete the folder, deploy and then start again.

1 Like

Ah!

Stupid me.

Yeah.... Ok.

That's now clearer. URL entered. Slight complaint the directory already existed, but....

So sorry - again - how do I then access that from the GUI side of things?

Once you have entered a valid url name and clicked Done, then deployed. Re-opening the node should show this:

image

Note the yellow info box. You can click on either of the buttons that say "Open" to see the resulting page.

It will cope with that, it is just a warning.

Do you mean the web page? Shown in the last post, click one of the "Open" buttons.

Ok, I loaded the quote of the day one also.
That sort of looked nicer to get my head around.

But neither have an open button.

I seem to be missing something serious.

From that URL:

We are continually faced by great opportunities brilliantly disguised as insoluble problems.

Gee! How are they so accurate!
:rofl:

See the last screenshot I posted, there are 2 open buttons, one on the same line as the cancel & done buttons and one on the line below the URL.

1 Like

Ah, ok.

Yeah, I didn't see the forest for the trees.
Hang on.

Ok, test is maybe not the best test name as it is the fallback for uibuilder.

But despite a few restarts of NR, all I'm getting is the default message:

 This is the fallback master page for uibuilder. If you are seeing it, you have an error in your configuration.

If you have just deleted dist/index.html from your local uibuilder folder, please restart Node-RED so that the src folder is used.

If you don't have a local src/index.html, please add one. The easiest way is to choose one of the built-in templates and click the "Load & Overwrite Files" button and accept the warning.

Please see the Documentation for details on how to use uibuilder. 

I am using the quote of the day flow.

So shouldn't I see the quote of the day?

Only for the sake of making myself look even more dumb, I changed it from test to qotd (quote of the day).
Deployed and all that. AFAIK, all the needed stuff.

Pressed the open button.
Different path (from test to qotd - so that part works) but the text/display doesn't.

No real page loaded.

1 Like

You don't need to restart Node-RED for uibuilder changes. They are dynamic. You only need to deploy.

the fallback master page

You get that error if you have deleted something in the filing system that uibuilder wants.

Open the uibuilder node again and go to the "Files" tab. You should see:

image

Notice that the sub-folder is src that is the folder that, by default, serves up your files.

There should be just 3 files in there, as shown. And they should all contain some default code.

The resulting page at this point looks like this:

image

If you don't have this, delete the whole group, Deploy. Let uibuilder delete the folder (see the warning message that pops up). Then re-import, give the uibuilder a name, and re-deploy. Then you should be back to what I've shown above.

Sorry, but not quite.

This is what I see when I open the node and go where you said:

No filename. :confused:

But:
Check on the sub-folder part.

No 3 files in there

Sorry, you lost me on the meaning of delete the whole group part.

As in the node (uibuilder)?
Or the whole example flow?
And the original example flow?

This. The example flow is wrapped in a Node-RED "group".

Ok, PROGRESS!

Hang on.

(Just letting you know)
BRB :wink:

Ok, slight progress.

Now I get to see:

uibuilder Blank Template
Using the IIFE library.

Press the inject node to get a quote of the day.
No change to screen.

1 Like

OK, we are at the next stage now.

You will see 3 comment nodes which carry the names of the 3 files your uibuilder node has created for you. In older versions of uibuilder, there was no way to automatically update the default template code (you are currently seeing the results of the "Blank" template) with something more specific. I will eventually get to updating this example but it hasn't been yet.

So we now need to transfer the contents of each of the comment nodes over to the appropriate file.

Open the html comment, click in the comment text, do a ctrl-a to selected everything and then copy to the clipboard. Close that node, open the uibuilder node, go to the files tab, make sure that the html file is open, select all its text, delete it and replace with the code in your clipboard.

Then click "Save", then Done. now repeat for the other 2 files with the code in the other comment nodes.

Once completed, simply reload the web page to see something different:

Then you can click on the getQuote button to get something like this:

If you've got to this now - congratulations, you have created a fully working web application driven by data from the Internet via Node-RED!

Yes, we are getting there.

Ok, did what you said. (Spoiler, Huston, we have a problem)

So, I open the index.html file, copy the code.
Open the uibuilder node.
Click on Files.

Delete that (now worked out I may have not done that the right way.)
Ok, maybe not.

I did a ctl a and deleted it.
The node locked up.

Try 2, saw the delete button. Clicked that. Ok.
But now can't get a place to put the code.

Really sorry I am not getting this as quickly as others.

EDIT

Sorry, just to clarify:
(screen shots coming)

Deleted, re-imported and starting again.

So I get to this point.

I've deleted the existing stuff and pasted the code from the node you said.

When I move up to the DONE button, I can't click on it. I get the ban icon appear rather than the mouse.

So I seem to have missed something in how I put the code there.

SORRY

Missed the SAVE button.

All working to this point.

Well, oops.

Not quite.

Nothing is coming out the other end.

I press the get quote and I see stuff going in but nothing coming out.

Refresh the GUI page.

Still says NO QUOTE RECEIVED.

Don't I have to do anything/something with the other two nodes also?

Hey, not to worry. Take your time.

By the way, because we are keeping things nicely segmented by using different uibuilder nodes and flows for different web apps and examples, you don't have to worry about messing up. If it all goes horribly wrong, simply delete the flow, re-deploy and start again.

The only thing to think about is if you've made a load of changes to the files. If you have and you want to keep them, simply copy the whole instance folder to somewhere. Then it won't matter if you delete it.


OK, so it sounds like you might have got things in the wrong order. So delete the flow, lets start again.

When you have confirmed that you have this page:
image

  1. Go back to your flow and open the comment node that says "index.html".
  2. Copy all the text inside that node.
  3. close that node, open the uibuilder node
  4. Go to the files tab and make sure that the src folder is selected and that the index.html file is selected.
  5. Click inside the file and make sure you are at the very top-left of the file's content.
  6. Paste the contents of your clipboard.
  7. Delete everything after the FIRST </html> entry. (your cursor should be at that point already).
  8. Click Save.
  9. Reload the page.

You might get something odd looking because we don't have everything in place yet. But we should have a page that looks a bit different anyway.

Let me know when you have that.

Did you not do this part:

?

GOOD NEWS!

Got it working.

I had to also copy the .js and .css stuff as with the html and it works.

OK, ignore my other comments then. :slight_smile: