De nada, every little helps improve the tool.
I certainly would be sad to have spent all these hundreds of hours if it didn't help people 
1 Like
mmmmh I guess I've done something stupid sigh installing the library took way longer than before......
and then loading the uib page took ages and eventually gave these errors
I'll clear everything down and start afresh tomorrow.
192.168.1.22/:1
Refused to apply style from 'http://192.168.1.22:1780/uibuilder/vendor/@totallyinformation/web-components/uib-brand.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
uib-theme-changer.js:436
[uib-theme-changer] WARNING: It appears that you are not using uibuilder's uib-brand.css stylesheet. This component may not work as expected.
connectedCallback @ uib-theme-changer.js:436
(anonymous) @ uib-theme-changer.js:541
uibuilder.module.js:203
GET http://192.168.1.22:1780/uibuilder/vendor/@totallyinformation/web-components/uibuilder/vendor/socket.io-client/socket.io.esm.min.js net::ERR_ABORTED 404 (Not Found)
(anonymous) @ uibuilder.module.js:203
uibuilder.module.js:203
GET http://192.168.1.22:1780/uibuilder/vendor/socket.io-client/socket.io.esm.min.js net::ERR_ABORTED 404 (Not Found)
(anonymous) @ uibuilder.module.js:203
uibuilder.module.js:203
GET http://192.168.1.22:1780/uibuilder/uibuilder/vendor/socket.io-client/socket.io.esm.min.js net::ERR_ABORTED 404 (Not Found)
(anonymous) @ uibuilder.module.js:203
uibuilder.module.js:203
GET http://192.168.1.22:1780/uibuilder/vendor/uibuilder/vendor/socket.io-client/socket.io.esm.min.js net::ERR_ABORTED 404 (Not Found)
(anonymous) @ uibuilder.module.js:203
uibuilder.module.js:203
GET http://192.168.1.22:1780/uibuilder/vendor/@totallyinformation/uibuilder/vendor/socket.io-client/socket.io.esm.min.js net::ERR_ABORTED 404 (Not Found)
(anonymous) @ uibuilder.module.js:203
uibuilder.module.js:1445
⚠ warn [Uib:ioSetup:uiBuilderControl] Server version (5.0.2) not the same as the client version (5.0.3-mod)
_ctrlMsgFromServer @ uibuilder.module.js:1445
t.emit @ index.mjs:136
emitEvent @ socket.js:278
onevent @ socket.js:265
onpacket @ socket.js:235
t.emit @ index.mjs:136
ondecoded @ manager.js:200
t.emit @ index.mjs:136
add @ index.js:124
ondata @ manager.js:192
t.emit @ index.mjs:136
onPacket @ socket.js:323
t.emit @ index.mjs:136
onPacket @ transport.js:105
(anonymous) @ polling.js:118
onData @ polling.js:121
t.emit @ index.mjs:136
onLoad @ polling.js:365
e.onreadystatechange @ polling.js:301
XMLHttpRequest.send (async)
create @ polling.js:311
q @ polling.js:255
request @ polling.js:207
doPoll @ polling.js:232
poll @ polling.js:98
onData @ polling.js:128
t.emit @ index.mjs:136
onLoad @ polling.js:365
e.onreadystatechange @ polling.js:301
XMLHttpRequest.send (async)
create @ polling.js:311
q @ polling.js:255
request @ polling.js:207
doPoll @ polling.js:232
poll @ polling.js:98
doOpen @ polling.js:58
open @ transport.js:49
open @ socket.js:161
F @ socket.js:102
open @ manager.js:108
p @ manager.js:39
d @ index.js:29
_ioSetup @ uibuilder.module.js:1598
start @ uibuilder.module.js:1772
(anonymous) @ uibuilder.module.js:1809
Oh, lordy! 
Brand CSS file is in the libs folder, you've got it set to the root.
<link type="text/css" rel="stylesheet" href="../uibuilder/vendor/@totallyinformation/web-components/libs/uib-brand.css" media="all">
The socket.io client errors are a little trickier. But as it happens, the code may have loaded it anyway. Can you check your network tab? The library has about a dozen different places where it tries to load the client from and falls back to the Internet (jsdelivr CDN) so it usually loads though it may take a few attempts and that's possibly why it was slow.
If it did actually load, that is good enough for a test.
These issues WILL go away as soon as I can get the new uibuilder version out of the door since the CSS and new library are in their proper locations and the socket.io client is baked in so no longer needs loading. These are just temporary glitches.
If you are feeling adventurous tomorrow, I've pushed an update of uibuilder to GitHub tonight. That update contains all the latest fixes for the new library along with a brand new node uib-list which lets you send a msg containing an object or array of data and it will output a new list element to your front-end - no code at all!!
But you would need to the version from GitHub with:
cd ~/.node-red
npm install totallyinformation/node-red-contrib-uibuilder
Then restart node-red and reload the Editor page. Then you can greatly simplify your html page down to something like:
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8">
<title>Web Component Test: simple-container and simple-card</title>
<link type="text/css" rel="stylesheet" href="./uib-brand.css" media="all">
<script type="module" async >
import './uibuilder.esm.min.js' // Adds `uibuilder` and `$` to globals
import '../uibuilder/vendor/@totallyinformation/web-components/libs/load-all.js'
</script>
</head><body>
<uib-theme-changer></uib-theme-changer>
<h1>Demonstrating Web Components</h1>
<p>This example uses <code><simple-container</code> and <code><simple-card></code>.</p>
<p>
The container component uses a flex row layout. The card component has header and footer slots.
</p>
<simple-container>
<nav-bar></nav-bar>
<simple-card>
Hello, in a card<br>
<labelled-value id="lbl1" label="(lbl1) My Value" value="42">°</labelled-value>
<span slot="header">Some other header</span>
<span slot="footer">Some footer</span>
</simple-card>
<simple-card name="This Is a name">
Another card
<labelled-value label="My Other Value" value="Fourty Two">°</labelled-value>
</simple-card>
<simple-card id="card3" data-something="Hello">
Card #3
</simple-card>
<container-br></container-br>
<div>
<button-send id="btn1" data-something="Something interesting" class="test">(btn1) Send Me to Somewhere 😀</button-send>
</div>
<container-br></container-br>
<simple-card id="card4" data-something="Hello" variant="info">
Card #4
<span slot="footer">Variant=info/information</span>
</simple-card>
<simple-card id="card5" data-something="Hello" variant="success">
Card #5
<span slot="footer">Variant=success</span>
</simple-card>
<simple-card id="card6" data-something="Hello" variant="warn">
Card #6
<span slot="footer">Variant=warn/warning</span>
</simple-card>
<simple-card id="card7" data-something="Hello" variant="error">
Card #7
<span slot="footer">Variant=failure/error</span>
</simple-card>
<container-br></container-br>
<gauge-steel></gauge-steel>
</simple-container>
</body></html>
Or even simpler of course if you don't want/need the test components in there.
Brilliant...
That fixed all except the socket.io and as you said it has loaded it so the test is working.
I will try the updates later.
(Just in case it saves you any grief , that typo for the css in the index.html was from your post above!! 
)
1 Like
Keeping you on your toes 
As a bonus then, if you'd like to try out the config-driven UI features, try setting a msg._ui property to the following JSON:
{
"method": "add",
"parent": "#start",
"components": [
{
"type": "button",
"attributes": {
"id": "fred",
"style": "margin:1em;",
"name": "Freddy",
"data-return": "wow!",
"type": "button"
},
"properties": {
"nice": {
"lets": "have",
"a": "property"
}
},
"events": {
"click": "uibuilder.eventSend"
}
},
{
"type": "button",
"slot": "Simple Button",
"attributes": {
"class": "clsFred"
},
"events": {
"click": "uibuilder.eventSend"
}
},
{
"type": "button",
"parent": "#start",
"slot": "Ano<sub>ther</sub> <code>Button</code>",
"attributes": {
"id": "jim",
"style": "display:block;margin:1em;",
"name": "Jimmy",
"data-return": "OK",
"type": "button"
},
"events": {
"click": "window.myCallbacks.mycb"
}
},
{
"type": "ol",
"parent": "#start",
"slot": "A list",
"attributes": {
"id": "ol1",
"style": "display:block;margin:1em;border:1px solid silver;"
},
"components": [
{
"type": "li",
"slot": "A list entry"
},
{
"type": "li",
"slot": "Another list entry"
}
]
}
]
}
This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.
