New home dashboard using uibuilder and bootstrap-vue

Share Your Projects
21

Thanks for your reply. I was thinking that some references where required based on earlier comments.

uibuilder takes the modules that you've listed in the settings.js file and creates URL's for them

Of course, the browser is throwing all those errors, for all the libraries referenced. That was the reason I tried to install them manually. I already tried without doing anything manually and didn't work:

uibuilder
uibuilder759×756 227 KB

Being a docker install wouldn't be relevant as it's using an external volume for the home folder. I can see all the configuration files and modules being committed there.
If you have any advice on how to try solve this it would be great.

The default node doesn't have any problem though. Could be that I created a different folder under uibuilder root for your example?

# tree uibuilder
uibuilder
├── common
├── dashboard
│   ├── dist
│   └── src
│       ├── index.css
│       ├── index.html
│       ├── index.js
│       ├── manifest.json
│       └── uibuilder.appcache
└── uibuilder
    ├── dist
    └── src
        ├── index.css
        ├── index.html
        ├── index.js
        ├── manifest.json
        └── uibuilder.appcache
22

Could be that I created a different folder under uibuilder root for your example?

By the looks of it....

If you just drop the uibuilder node in the editor, configure it, deploy, all directories and required files should be there.

23

But... I have to deploy the default node and then modify it?
Meaning that you can only deploy one dashboard?

24

This is the key. Configure = specify a folder. Thus no, you can deploy as many as you want.

25

No you can deploy more. Each endpoint, the one you define in the uibuilder node gets its own folder, directly. This folder is located as <node red user dir>/uibuilder/<name of endpoint>/. If you have the default folder on mac/linux, this user dir is the .node-red under the user home directory. I wouldn't know the path on windows honestly. Inside that folder you put the files. Although you can use subfolders, you won't be able to edit those subfolders from the editor inside the node at the moment.

26

uibuilder configures everything on first run. That happens the first time you deploy after adding a uibuilder node to a flow. You can change any of the settings in that node before deploying as custom nodes deploy in two sections. The first is common to ALL instances of the node type (this is hidden from you and you don't generally need to think about it) and the second is specific to the instance (which is what you configure in the editor).

This is no different to any other node.

To find out where everything exists and how it maps to URLs, deploy a uibuilder node and then open it in the editor and click on the "Advanced Information" link. This should open a web page that tells you everything you need to know.

27

I think that the problem can be that I first dropped a node, unmodified, and then dropped a second one in the same flow before deploying.
I'll delete all and restart again.

28

I will check whether that creates a problem. It shouldn't.

29

I've conducted some tests. After removing all the uibuilder nodes and published, I drop one node. Then enter and change "uibuilder" url for "dashboard". Then I publish. I can see a new folder "dashboard is created. Then I use the node tool to modify the contents pages with the ones in your github repo. ctrl-c, ctrl-v. Then I publish and if I access the page throws the same errors.

So I remove the node and publish. The folder still exists. I remove the uibuilder module and stop the server. I then delete the entire uibuilder folder from home. Start and reinstall:

-----------------------------------------------------------
2019-08-26T21:51:50.245Z Install : node-red-contrib-uibuilder 2.0.1

2019-08-26T21:51:26.517Z npm install --no-audit --no-update-notifier --save --save-prefix="~" --production node-red-contrib-uibuilder@2.0.1
2019-08-26T21:51:59.359Z [out] 
2019-08-26T21:51:59.359Z [out] > bootstrap-vue@2.0.0-rc.28 postinstall /data/node_modules/bootstrap-vue
2019-08-26T21:51:59.359Z [out] > opencollective || exit 0
2019-08-26T21:51:59.359Z [out] 
2019-08-26T21:51:59.482Z [out] 
2019-08-26T21:51:59.482Z [out] > node-red-contrib-uibuilder@2.0.1 postinstall /data/node_modules/node-red-contrib-uibuilder
2019-08-26T21:51:59.482Z [out] > node ./bin/postinstall
2019-08-26T21:51:59.482Z [out] 
2019-08-26T21:51:59.539Z [out] 
2019-08-26T21:51:59.539Z [out]   NOTE that you can ignore warnings from bootstrap about missing jQuery.
2019-08-26T21:51:59.539Z [out]        Unless you are using bootstrap directly, bootstrap-vue takes care of everything.
2019-08-26T21:51:59.539Z [out] 
2019-08-26T21:52:00.403Z [err] npm
2019-08-26T21:52:00.403Z [err]  
2019-08-26T21:52:00.403Z [err] WARN
2019-08-26T21:52:00.403Z [err]  bootstrap@4.3.1 requires a peer of jquery@1.9.1 - 3 but none is installed. You must install peer dependencies yourself.
2019-08-26T21:52:00.403Z [err] npm
2019-08-26T21:52:00.403Z [err]  
2019-08-26T21:52:00.403Z [err] WARN
2019-08-26T21:52:00.403Z [err]  home_automation@0.0.1 No repository field.
2019-08-26T21:52:00.403Z [err] npm
2019-08-26T21:52:00.403Z [err]  
2019-08-26T21:52:00.403Z [err] WARN
2019-08-26T21:52:00.403Z [err]  home_automation@0.0.1 No license field.
2019-08-26T21:52:00.404Z [err] npm
2019-08-26T21:52:00.405Z [err]  
2019-08-26T21:52:00.405Z [err] WARN
2019-08-26T21:52:00.405Z [err]  
2019-08-26T21:52:00.405Z [err] optional
2019-08-26T21:52:00.405Z [err]  SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules/fsevents):
2019-08-26T21:52:00.405Z [err] npm
2019-08-26T21:52:00.405Z [err]  
2019-08-26T21:52:00.405Z [err] WARN
2019-08-26T21:52:00.405Z [err]  
2019-08-26T21:52:00.405Z [err] notsup
2019-08-26T21:52:00.405Z [err]  SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
2019-08-26T21:52:00.405Z [err] 
2019-08-26T21:52:00.406Z [out] + node-red-contrib-uibuilder@2.0.1
2019-08-26T21:52:00.406Z [out] added 24 packages from 31 contributors in 33.552s
2019-08-26T21:52:00.414Z rc=0

26 Aug 21:51:26 - [info] Installing module: node-red-contrib-uibuilder, version: 2.0.1
26 Aug 21:52:00 - [info] Installed module: node-red-contrib-uibuilder
26 Aug 21:52:00 - [info] +-----------------------------------------------------
26 Aug 21:52:00 - [info] | uibuilder initialised:
26 Aug 21:52:00 - [info] |   root folder: /data/uibuilder
26 Aug 21:52:00 - [info] |   version . .: 2.0.1
26 Aug 21:52:00 - [info] |   packages . : vue,bootstrap,bootstrap-vue,socket.io
26 Aug 21:52:00 - [info] +-----------------------------------------------------
26 Aug 21:52:00 - [info] Added node types:
26 Aug 21:52:00 - [info]  - node-red-contrib-uibuilder:uibuilder

The uibuilder folder appears again. I reboot the server.

Welcome to Node-RED

26 Aug 21:58:56 - [info] Node-RED version: v0.20.7
26 Aug 21:58:56 - [info] Node.js  version: v10.16.0

26 Aug 21:58:56 - [info] Loading palette nodes
26 Aug 21:58:58 - [warn] rpi-gpio : Raspberry Pi specific node set inactive
26 Aug 21:58:58 - [warn] rpi-gpio : Cannot find Pi RPi.GPIO python library
26 Aug 21:58:59 - [info] Dashboard version 2.16.1 started at /ui

26 Aug 21:58:59 - [info] | uibuilder initialised:
26 Aug 21:58:59 - [info] |   root folder: /data/uibuilder
26 Aug 21:58:59 - [info] |   version . .: 2.0.1
26 Aug 21:58:59 - [info] |   packages . : vue,bootstrap,bootstrap-vue,socket.io
26 Aug 21:58:59 - [info] +-----------------------------------------------------
26 Aug 21:58:59 - [info] Settings file  : /data/settings.js
26 Aug 21:58:59 - [info] Context store  : 'default' [module=memory]
26 Aug 21:58:59 - [info] User directory : /data
26 Aug 21:58:59 - [warn] Projects disabled : editorTheme.projects.enabled=false
26 Aug 21:58:59 - [info] Flows file     : /data/flows.json
26 Aug 21:58:59 - [info] Server now running at http://127.0.0.1:1880/
26 Aug 21:58:59 - [warn]
---------------------------------------------------------------------
Your flow credentials file is encrypted using a system-generated key.

If the system-generated key is lost for any reason, your credentials
file will not be recoverable, you will have to delete it and re-enter
your credentials.

You should set your own key using the 'credentialSecret' option in
your settings file. Node-RED will then re-encrypt your credentials
file using your chosen key the next time you deploy a change.
---------------------------------------------------------------------
26 Aug 21:58:59 - [info] Starting flows

(Please note node.js version number)

I drop the node and edit, changing again the name to dashboard. Then deploy without modifying the files. The folder appears.
If I navigate to the url, I get the welcome page without problems. All seems right.
Then I modify the files with your examples. Then I navigate and again I get a ugly, static unstyled page, and errors in the console.

http://192.168.50.201:1881/vendor/bootstrap-vue/dist/bootstrap-vue.js
Cannot GET /vendor/bootstrap-vue/dist/bootstrap-vue.js

The sample in your repo is operative, isn't it? The default welcome page indicates that also uses vue and bootstrap-vue. Then shouldn't be any problem.

30

Differences in index.html...
Default:

<link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.css" />
...
<!-- These MUST be in the right order. Note no leading / -->
<!-- REQUIRED: Socket.IO is loaded only once for all instances
                 Without this, you don't get a websocket connection -->
<script src="../uibuilder/vendor/socket.io/socket.io.js"></script>

<!-- --- Vendor Libraries - Load in the right order --- -->
<script src="../uibuilder/vendor/vue/dist/vue.js"></script> <!-- dev version with component compiler -->
<!-- <script src="../uibuilder/vendor/vue/dist/vue.min.js"></script>   prod version with component compiler -->
<!-- <script src="../uibuilder/vendor/vue/dist/vue.runtime.min.js"></script>   prod version without component compiler -->
<script src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.js"></script>

<!-- REQUIRED: Sets up Socket listeners and the msg object -->
<!-- <script src="./uibuilderfe.js"></script>   //dev version -->
<script src="./uibuilderfe.min.js"></script> <!--    //prod version -->
<!-- OPTIONAL: You probably want this. Put your custom code here -->
<script src="./index.js"></script>

Vs home-control-app

<link type="text/css" rel="stylesheet" href="./vendor/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="./vendor/bootstrap-vue/dist/bootstrap-vue.css" />
...
<!-- These MUST be in the right order. -->
<script src="/uibuilder/socket.io/socket.io.js"></script>
<script src="./uibuilderfe.min.js"></script>
<!-- --- Vendor Libraries - Load in the right order --- -->
<script src="https://cdn.jsdelivr.net/npm/lodash@4/lodash.min.js"></script>
<script src="./vendor/vue/dist/vue.js"></script>
<script src="https://unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="./vendor/bootstrap-vue/dist/bootstrap-vue.js"></script>
<!-- <script src="./vendor/bootstrap-vue/dist/bootstrap-vue.min.js"></script> -->
<!-- --- Custom code goes in here --- -->
<script src="./index.js"></script>

If I incorporate the differences for the related libraries, I get something. The dashboard seems there, but empty.

dashboard
dashboard.jpg931×218 22 KB

Is this the appareance should have?
Still, the node in node-red shows "node initialised" and don't show any connection.

31

You did see the notes about the differences between v1 and v2 didn't you? And that the examples hadn't yet been updated to v2?

If you follow the instructions regarding the conversion between v1 and v2, you will find that they work.

I needed to get v2 out, the examples will be updated when I return from family hols.

32

I'm new to node-red. So I didn't know about a v2 change. I was concerned about having a bigger problem. Don't worry, and enjoy the holidays and the family.

PS. Is there a link to these v1->v2 migration notes, apart from the changelog? Perhaps I can help you with a pr if I understand them.

33

Uibuilder v2 Breaking Changes
Uibuilder v2 URI Paths
These links can be found in section 2.5 of the Readme of Uibuilder: Additional documentation in the WIKI. This information can also be found in the changelog.
It is not a step by step migration guide, but it allows you to work through your v1 code and see what has to be changed to get it working. An alternative would be to keep using uibuilder with the last v1 version to see it in work.

1 Like
34

That would be very welcome indeed.

Also, feel free to update the WIKI directly.

35

Can somebody help me please. I am not programmer. Don't know how to create buttons to control my lights from HomeAssistant connected to node-red

36

Please take a look at node-red-dashboard instead.
For ui-builder you need (some) programming experience.

1 Like
37

Dashboard has fixed design, uibuilder you can do what ether you want

38

the key there being you have to do whatever you want... so you are going to have to learn to program... If you aren't a programmer then the default dashboard is there to do the hard work.

7 Likes
39

Sure, but you state:

Don't know how to create buttons to control my lights from HomeAssistant connected to node-red

This is almost trivial to do with node-red-dashboard, with ui-builder not so much.
And you still have freedom with node-red-dashboard.

40

I can't help you with the HomeAssistant part since I don't use that.

In general, to create a button, you can use the capabilities of the bootstrap-vue library. You should look at the documentation for that library as it gives a lot of information about how to use it. Doubtless there are also other tutorials on the internet.

The default template includes a button example. Press the button and you should see the data come back to Node-RED where you can do whatever further processing you like.

If you are having further issues with uibuilder though, could you please start a different thread as this one is about something different - thanks.