After some research, looks like the ws: wss: isn't needed anyway. I'll change it for the next release.
However, I still can't work out why that was blocking you since other things were working.
After some research, looks like the ws: wss: isn't needed anyway. I'll change it for the next release.
However, I still can't work out why that was blocking you since other things were working.
Do those sort of files get cached? The browser may then regard them as local?
Honestly not sure.
My Cookies are cleared on every shutdown of my Browser. I keep getting the
UIBUILDER has been updated to version 7.6.1 message come up on restart and re-login. Is it me?
It isn't the cookies, it is local storage, you are clearing that as well. You might want to put in an exception for UIBUILDER. ![]()
Clearing local storage every time is generally not such a good idea, nor indeed clearing cookies. At least for sites you trust. For example, by clearing local storage every time, you will also be resetting the Node-RED Editor as well I think.
After years of selecting 'Delete on Browser close', it has suddenly started working!! I need to revisit Settings as I did have Trusted Sites... (Firefox/Waterfox)
A question regarding loading *.js files into a uibuilder web page.
I have found that if I have the file loaded in the HTML script section (along with index.js) and format the file as
const <function name> = function (<parameters>) {
... code ...
}
()
I can have the function in and working. This seems a bit cludgy, is there a better way to load external *.js files?
Hi,
I´m using UiBuilder 7.5 on different Node-Red instances.
In index.js I use for example at the end uibuilder.send({ topic: 'ui/ready' }); - just to trigger a function, that immediately loads values when a client is connected to the dashboard.
Now I tried 7.6 and uibuilder.send({ topic: 'ui/ready' }); remains dead.
Another example:
uibuilder.onChange('msg', function (msg) {
if (!msg.payload || !Array.isArray(msg.payload)) return;
function fillTable(targetId, data) { ...
Question: is uibuilder.xxx not longer supported @ 7.6?
my html starts with:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="../uibuilder/images/node-blue.ico">
<title>Webserver Auswertung</title>
<meta name="description" content="Node-RED UIBUILDER">
<link type="text/css" rel="stylesheet" href="./index.css" media="all">
<script defer src="./chart.js"></script>
<script defer src="../uibuilder/uibuilder.iife.min.js"></script>
<script defer src="./index.js"></script>
</head>
<body>
I tried to compare uibuilder.iife.min.js but there's too much code for me, so I´m asking here ![]()
Well, that is the "traditional" JavaScript way. Arguably, the better way is to switch to loading index.js as a module (ES Module) and then importing the uibuilder library into it. This is the more modern approach and you will see if in the new Markweb as well as the ESM template.
If you want to stick with the older method, you could think about wrapping your code in an IIFE. But honestly, it is generally not worth it.
No, nothing has changed in that sense. I try to avoid breaking changes anyway but if there are any, then the major version number changes and it would have been v8 instead of v7.x
Both uibuilder.send and onChange work exactly as before.
Check your browser dev tools console for errors as well as the Node-RED log.
Anything like that would have been highlighted in the changelog.
ok ![]()
I tried also the new feature:
All HTML custom elements and reactive attributes also now support nested object paths. e.g. <uib-var topic="myvar.myprop"> or <div uib-var="myvar.myprop.subprop">. This allows you to directly bind to nested properties of reactive variables without needing to replace the entire variable.
<uib-var topic="Home.P"></uib-var> Watt
<uib-var topic="Home.P"> Watt
<uib-var topic="Home" property="P"></uib-var> Watt
1st: shows nothing
2nd: shows nothing
3rd: shows whole object
...
ok this works:
<span uib-var="msg.payload.P"></span>
Oops! There is a typo there!
The topic attribute only accepts a topic string by its very nature. Only the variable attribute can accept a sub-property.
So this will work:
<div><uib-var variable="msg.payload.P"></uib-var> Watt</div>
BUT, of course, every msg received by your clients will change the entry.
So you should use a uibuilder.onChange('msg', (msg) => {...}) function to set another uibuilder managed variable:
uibuilder.onTopic('Home', (msg) => {
uibuilder.set('myVar', msg.payload)
})
and then in your HTML:
<div><uib-var variable="myVar.P" data-after=" Watt">--</uib-var></div>
Is there a write-up on how to do this. All the ESM labelled templates still use the iife library?
Not at all - though I do need to do a small update to their repo's, that is just for the latest favicon release. They use the .esm.min.js version of the library imported in the index.js file which is, itself loaded as a module. I deliberately compile most of the front-end libraries to both IIFE and ESM versions for this reason. The only exception being the new markweb client library which is only currently delivered as an ESM library. But that library hasn't been compiled yet either and is only provided in its raw format. Markweb is after all, only in its first release ![]()
ESM is the future of JavaScript so we can expect the defaults to go that way eventually. However, it can be slightly more complex to use in some cases due to its native isolation. Something which is both a benefit and, occasionally, a bit of a pain.
OK, so I loaded index.js as a module
<script defer src="../uibuilder/uibuilder.iife.min.js"></script>
<script type="module" async src="./index.js"></script>
and then imported the uibuilder library
import * as uibuilder from "../uibuilder/uibuilder.iife.min.js"
and I get these error messages
Uncaught TypeError: Cannot read properties of undefined (reading 'replace')
Uncaught NotSupportedError: Failed to execute 'define' on 'CustomElementRegistry': the name "uib-var" has already been used with this registry
uibuilder.module.mjs:4254 Uncaught NotSupportedError: Failed to execute 'define' on 'CustomElementRegistry': the name "uib-var" has already been used with this registry
uibuilder.module.mjs:2710 ⚠ warn [Uib:ioSetup:uiBuilderControl] Server version (7.6.1) not the same as the client version (7.6.0-src)
so, fairly obviously, I have not got this right. Would you explain what I need to do to get this working? Yours Hopefully
But that means you've loaded 2 different versions of the client library. Take out the IIFE one. Leave the ESM one in you index.js
If in doubt, add a new instance of the uibuilder node, give it a random url. Deploy and then change the Template to "Simple ES Module Template (external). This will overwrite any existing code (hence using a separate instance of the uibuilder node) and will have exactly what you need to be using the ESM version of the uibuilder client.
Alternatively, you can see that template here:
Thank you, thank you. That worked.
For anyone following this, to make it simple;
In the idex.html file the relevant bit of the <header> is
<!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
<!-- OPTIONAL: Put your custom code here -->
<script type="module" async src="./index.js"></script> /* Your custom code + Imports uibuilder */
<!-- #endregion -->
and at the top of index.js
import { uibuilder } from '../uibuilder/uibuilder.esm.min.js'
A few more questions (sorry)
I couldn't get the ESM template to load. Any ideas?
uibuilder:adminapi:POST:replaceTemplate] Replace template error. Failed to copy template from 'totallyinformation/uib-template-test' to '/home/pi/.node-red/uibuilder/ESM-Test'. url=ESM-Test, cmd=replaceTemplate, ERR=could not find commit hash for HEAD [UibFs:replaceTemplate]. url=ESM-Test. ext-simple-esmundefined
So I went straight to github. I noticed in the index.js file there that it had a cryptic comment. I couldn't see anything that looked relevant in the html file. I am intrigued?
// See import map in index.html for import shortcuts
Finally, the javascript index file has .mjs as a file extension, does this make any difference? and do I have to do anything special to load additional *.js (.mjs) files into my index.js file?
P.S. Hope the weather is as good down there as it is up here, have a great Sunday.
Sometimes it fails for people if they don't have git installed, I'd check that first.
You can look that up yourself, I think I took it out at some point. Import maps simplify the naming of imports,
For modern JavaScript, you have the option to use different extensions that help you know whether a file is using ESM or some other scheme. /mjs tells the browser or node.js that the file uses ESM specifically. I started trying to be explicit since we are in the middle of a time period where JavaScript use is slowly transitioning to ESM for both the browser an dnode.js. Node-RED itself is also in that transition period, at present some things work as ESM but not everything.
In terms of the browser, you can use both .js and .mjs if the file will be loaded as an ESM.
Ha, actually, you are "down", we are "up"! And yes, as it happens, the weather has been great in the UK for a while now thanks. In fact, I published a video the other day of photo's from our garden - I've just started playing with DaVinci Resolve and the great weather prompted me to go into the garden, I was also trying out a new tripod and remote shutter release for the camera.4
Well unless you are in the North of Scotland, I am pretty sure I am definately 'up'.
Good looking garden. Your plants seem to be a bit more foreward than ours. Here the bluebells are just coming into flower.
Oops, thought you were in Oz! ![]()
Wow, quite a way's behind us then I think.
Thanks. Well, I didn't show the lawn which is in a horrid state just now. Between the Badger digging holes, the winter moss and some very large Dandelions that have sprung from nowhere, it needs a lot of work. Done some aeration, a feed and some lawn weedkiller but still need to scarify and reseed some areas.