I am sure this is going to be easy but I just can't figure it out. I have a background jpg stored in uibuilder\common\images, but I can't get it to render on the webpage.
My index.css looks like this
/* Load the defaults from `<userDir>/node_modules/node-red-contrib-uibuilder/front-end/src/uib-brand.css` */
@import url("./uib-brand.css");
@import url("./uib-styles.css");
body {
background: url("../images/background.jpg") no-repeat center center
fixed;
background-size: cover;
}
I've also tried
background: url("./images/background.jpg") no-repeat center center
fixed;
I'm guessing I don't have the location of background.jpg right.
My index.html looks like this
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Minimal modern client example - Node-RED uibuilder</title>
<meta name="description" content="Node-RED uibuilder - Minimal modern client example">
<link rel="icon" href="./images/node-blue.ico">
<!-- Your own CSS -->
<link type="text/css" rel="stylesheet" href="./index.css" media="all">
</head>
<body class="uib">
<h1>uibuilder Minimal Modern Client Example using IIFE library</h1>
<!--<div id="container"></div>
<button onclick="fnSendToNR('A message from the sharp end!')">Send a msg back to Node-RED</button>
<button onclick="uibuilder.eventSend(event)" data-mytext="A message from the sharp end!">Or use this style</button>
<pre id="msg" class="syntax-highlight">Waiting for a message from Node-RED</pre>-->
<!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
<script src="../uibuilder/uibuilder.iife.min.js">/* REQUIRED. NB: socket.io not needed */</script>
<script src="./index.js">/* OPTIONAL: Put your custom code here */</script>
<!-- #endregion -->
</body>
</html>
The 'instance details' page of my uibuilder instance says under ' Instance Routes for auto" that
Name: Common Code
Desc: Shared FE code, same for all instances
Path: /auto/common/ (i.e. where it will be mounted)
Type: Static
Folder: /data/uibuilder/common (i.e. where it is in filesystem)
so my index.css file should read as follows:
/* Load the defaults from `<userDir>/node_modules/node-red-contrib-uibuilder/front-end/src/uib-brand.css` */
@import url("./uib-brand.css");
@import url("./uib-styles.css");
body {
background: url("./common/images/background.jpg") no-repeat center center
fixed;
background-size: cover;
}
Although on that basis I'm a little confused as to why this works in the index.html file as it has no '/common' in its address.
You only want 1 of those not both The uib-brand one is newer. I doubt that either are perfect!
Also, for consistency, you might want to use ../uibuilder/uib-brand.css - it is the same thing but on a URI that is unlikely to ever clash with anything. I've just updated the templates for the v6.1 release.
Sorry, started to reply earlier but got side-tracked by a broken boiler and my day-job!
Apologies, this is the downside of being a one-man band. As the software evolves over time, not everything ends up being totally consistent.
Just to note that uibuilder has the "uibuilder details" button that among other things, will show you all of the mounted URI's along with their matching filing system folders.
Originally (long time ago), the ~/.node-red/uibuilder/common/ folder was indeed mounted as ./ but then I realised that this can cause issues with name clashes (the ExpressJS web server will happily mount multiple filing system folders and files to the same mounted URI). So it was moved to ./common. Of course, it should really have been moved to ../uibuilder/common/ in line with other shared resources - which in fact it (eventually) was! So you can access the files either way. I'm trying to move all of the documentation and templates to use the ../uibuilder/.... URI's for consistency.
The joys of web servers! And brain-dead developers!!
The answer is that there is another copy of that file. It exists in the bowels of the uibuilder source-code.
The front-end folder is also mounted, this time to both ./ and ../uibuilder/. And you've reminded me that I need to change that reference as well.
It doesn't really matter which URI path you use, I can't see that they will ever change now that they are so widely used. But best to try to stick with consistency. So load common/shared/master resources using ../uibuilder/.... and your own custom resources using ./.....
Use the details page to see what is mounted where.
The uib-brand one is newer. I doubt that either are perfect!
