# Sigh sorry another basic question

**URL:** <https://discourse.nodered.org/t/sigh-sorry-another-basic-question/63831>\
**Category:** General\
**Tags:** uibuilder\
**Created:** [12 June 2022 22:05 UTC](https://discourse.nodered.org/t/sigh-sorry-another-basic-question/63831 "2022-06-12T22:05:35Z")\
**Posts on this page:** 6\
**Page:** 2

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [14 June 2022 21:14 UTC](https://discourse.nodered.org/t/sigh-sorry-another-basic-question/63831/21 "2022-06-14T21:14:58Z")

</div>

> [@davec1001](#):
>
> I am very grateful for your time.

De nada, every little helps improve the tool.

> [@davec1001](#):
>
> adoption from others

I certainly would be sad to have spent all these hundreds of hours if it didn't help people 🙂

---

<div class="post-metadata">

**Author:** ![davec1001](https://avatars.discourse-cdn.com/v4/letter/d/f08c70/32.png) [@davec1001](https://discourse.nodered.org/u/davec1001)\
**Post date:** [14 June 2022 21:32 UTC](https://discourse.nodered.org/t/sigh-sorry-another-basic-question/63831/22 "2022-06-14T21:32:48Z")

</div>

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.

```auto
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

```

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [14 June 2022 21:46 UTC](https://discourse.nodered.org/t/sigh-sorry-another-basic-question/63831/23 "2022-06-14T21:46:45Z")

</div>

Oh, lordy! 😀

Brand CSS file is in the libs folder, you've got it set to the root.

```auto
<link type="text/css" rel="stylesheet" href="../uibuilder/vendor/@totallyinformation/web-components/libs/uib-brand.css" media="all">

```

The [socket.io](http://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](http://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:

```auto
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:

```auto
<!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>&lt;simple-container</code> and <code>&lt;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">&deg;</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">&deg;</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.

---

<div class="post-metadata">

**Author:** ![davec1001](https://avatars.discourse-cdn.com/v4/letter/d/f08c70/32.png) [@davec1001](https://discourse.nodered.org/u/davec1001)\
**Post date:** [15 June 2022 08:29 UTC](https://discourse.nodered.org/t/sigh-sorry-another-basic-question/63831/24 "2022-06-15T08:29:43Z")

</div>

> [@TotallyInformation](#):
>
> Oh, lordy! 😀
> 
> Brand CSS file is in the libs folder, you've got it set to the root.

Brilliant...  
That fixed all except the [socket.io](http://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!! 😊)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [15 June 2022 08:32 UTC](https://discourse.nodered.org/t/sigh-sorry-another-basic-question/63831/25 "2022-06-15T08:32:20Z")

</div>

> [@davec1001](#):
>
> that typo for the css in the index.html was from your post above!!

😉 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:

```auto
{
    "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"
                }
            ]
        }
    ]
}

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [29 June 2022 08:33 UTC](https://discourse.nodered.org/t/sigh-sorry-another-basic-question/63831/26 "2022-06-29T08:33:02Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.

[Previous page](https://discourse.nodered.org/t/sigh-sorry-another-basic-question/63831.md?page=1)