Default Blank Template

[oli8600]

Hello together :)

First of all, I would like to say that I have not been in the world of IT for very long, so if I am explaining something wrong or missing something, please let me know.

I was looking for an alternative to create a dashboard that I can program myself and not use the NodeRed dashboard as usual. I am interested in learning.

When I discovered node-red-contrib-uibuilder I was really excited and wanted to start using it right away. I started with this video: https://www.youtube.com/watch?v=IVWR_3cx05A&t=253s

But I have something here that confuses me. If I do it exactly like in the video, just create a uibuilder node, an inject node and 2 debug nodes, then specify the URL in the uibuilder node and deploy, my uibuilder blank template doesn't look like in the video. These input options are missing.

I have attached the images.

Could you maybe give me a hint what I could do to fix this?

If there is any other information needed, please let me know.

Cheers Oli

Software	Version
Node.JS	NA
npm	NA
Node-RED	v3.0.2 running in Docker
uibuilder node	6.3.0
uibuilderFE
OS	Ubuntu 20.4 Server
Browser	Chrome / Firefox latest

How is Node-RED installed? Where is uibuilder installed?

NodeRed is running on docker container pulled from dockerhub using Latest tag on Port 1884, this is my NodeRed docker run -it -d \ -p 1884:1880 \ -v $PWD/data:/data \ --name=nodered_uib \ --restart=always \ nodered/node-red:latest

This is the Screen from the tutorial:

This is my Screen:

This is my Flow:

This is the directory on the server:

[oli8600]

Update: I've try the same on my local machine, installation according this: https://nodered.org/docs/getting-started/windows#running-on-windows

But also with the same flow, the same screen.

[oli8600]

Ok i found the mistake.:) My default index.js and index.html didn't contain the right code to display the buttons and fields and also no scripts to handle it. I replaced the code in both files according this and now it works.:) https://github.com/TotallyInformation/node-red-contrib-uibuilder/tree/main/templates/esm-blank-client/src

[TotallyInformation]

Welcome to the world of uibuilder. 😁 Very glad you are trying it out.

I note that you are still on v6.1 so you may wish to upgrade to v6.3. I'm trying to keep the delivery pace a bit faster but smaller because there is a lot of innovation happening in uibuilder right now. Indeed, I'm already working on v6.4.

In regard to your issue. I'm glad you managed to work it out yourself. You may notice that the default "blank" template actually uses the IIFE version of the client. This is because most people find it the easiest to work with if they are adding their own custom code to their page. There is an ESM template as well for getting started with the ESM version of the client but of course, that needs you to get your head around how JavaScript ES Modules work. It is good if you are going straight for that approach though as it will eventually be the future for browser JavaScript I'm sure. However, most of the examples I will upload will use the IIFE version and will need a small amount of mental gymnastics to translate. I'm usually around on the Node-RED forum though so please do ask questions on there. I'll usually be able to respond faster on the forum than I can here on GitHub.

[oli8600]

Hello Julian Thank you very much for your feedback. :) Yes, everything is still very new for me but very exciting. I will take the new version right away, thanks for the info. :)

Since I want to make a dashboard for my startup, for my campers, I tried to make the example of a gauge.

https://github.com/hellocomet/vue-svg-gauge https://flows.nodered.org/flow/c2f32e484041ae76d829fba42224fddd/in/0lcTy2t3b0HW

Since my NodeRed is running in a container with Docker I have to look somehow, how I have to install all the needed programs, like node.js or Vue and what else belongs to it, that everything runs and also that they are available in the container of NodeRed. :) But let's see, maybe I'll manage that one day:) At the moment it doesn't work.

It only looks like that

Greetings Oli

[TotallyInformation]

Probably better to have a conversation like this in the Node-RED forum rather than here - but here we go.

Since my NodeRed is running in a container with Docker I have to look somehow, how I have to install all the needed programs, like node.js or Vue and what else belongs to it, that everything runs and also that they are available in the container of NodeRed.

The docker version of node-red uses an attached data folder. That folder contains all of the changing files including your flows, and the uibuilder files. So as long as node-red is working and you can deploy a flow, uibuilder should "just work".

The easiest way to USE other libraries is to reference them from the Internet. But to use them locally, you can simply us uibuilder's library manager. That example flow is a bit long in the tooth now but it will still work. All you need to know is to install Vue v2 and not the default (the Vue project moved onto v3 as their default). To do that, use the library manager and install vue@2.

You may note that the html file in that example loads the gauge library from https://unpkg.com/vue-svg-gauge which is one of the Internet locations I alluded to above. jsdelivr is another one and I prefer that these days as it seems to perform better. But either should work. You could load Vue v2 from them as well if you didn't want to install it locally.

The image you shared has an important clue. The {{....}} shows you that the Vue library has not loaded correctly.

Whenever you get problems with your front-end code, the first thing to do is fire up the browser's DevTools. They have a console which will show you errors. They also have a Network tab that will show you if something couldn't be found and so couldn't be loaded (look for lines with a code in the 400 range).

Feel free to ask more questions, but lets do it over in the Node-RED forum where it is a bit easier to have a conversation and also it leaves a history so that others can benefit in the future.

-- Julian.