Uibuilder not communicating with the Node-RED

nerevar · 12 April 2023 10:24

Hello,

I'm afraid this is gonna be very noob question, but I'm gonna ask anyway.

It's been a while when I worked with uibuilder in the way I need the node-RED to send him messages. Last time on my home PC it worked ok. Now It doesnt work at all. I've tried several index.js files but to no avail.

Anyways, this is the basic flow where uibuilder doesn not get messages from Node-RED, not does he send any. I have no idea why..

Template: VueJS & bootstrap-vue

[{"id":"734e481e26699747","type":"inject","z":"bd746d691eb4da43","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"cnvncvbv","payload":"","payloadType":"date","x":410,"y":180,"wires":[["4f5927a48643d688","7b50fc82a9a88bc9","2a9f926d3e6adc66"]]},{"id":"4f5927a48643d688","type":"uibuilder","z":"bd746d691eb4da43","name":"","topic":"","url":"retest","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"vue","extTemplate":"","showfolder":false,"reload":false,"sourceFolder":"src","deployedVersion":"5.0.1","x":620,"y":140,"wires":[["4b996b9c5a111017"],["4b996b9c5a111017"]]},{"id":"9ce82784fbc2acdc","type":"inject","z":"bd746d691eb4da43","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"chart_data","payload":"{ \"x\": 0, \"y\": 70, \"c\":0 }","payloadType":"json","x":370,"y":140,"wires":[["4f5927a48643d688","7b50fc82a9a88bc9","2a9f926d3e6adc66"]]},{"id":"7b50fc82a9a88bc9","type":"debug","z":"bd746d691eb4da43","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":610,"y":100,"wires":[]},{"id":"4b996b9c5a111017","type":"debug","z":"bd746d691eb4da43","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":830,"y":140,"wires":[]},{"id":"2a9f926d3e6adc66","type":"uib-sender","z":"bd746d691eb4da43","url":"retest","name":"bfgbf","topic":"bvbvc","passthrough":false,"return":false,"outputs":0,"x":610,"y":200,"wires":[]}]

12 Apr 12:13:36 - [info] Node-RED version: v2.1.6
12 Apr 12:13:36 - [info] Node.js version: v14.16.1
12 Apr 12:13:36 - [info] Windows_NT 10.0.19045 x64 LE
12 Apr 12:13:37 - [info] Loading palette nodes
12 Apr 12:13:39 - [info] mDashboard version 2.19.4-beta started at /mui
12 Apr 12:13:42 - [info] Dashboard version 2.30.0 started at /ui

More info:

Messages going in

Do not appear in uibuilder:

Messages going out:

Do not appear in the Node-RED:

TotallyInformation · 12 April 2023 10:57

Hi, you haven't included the uibuilder startup in that log so I can't see what version you are using. I can see that you are using an older version of Node-RED.

You also don't need a uib-sender node if you are sending direct to the uibuilder node.

Finally, if you are using Vue, you need to share your front-end code as well because the flow on its own doesn't let me see how you are using the data. Also, if using bootstrap-vue, you need to verify that you are using Vue v2.

You should also check your browsers devtools for the page to see if there are any errors.

nerevar · 12 April 2023 11:14

Welcome to Node-RED
===================

12 Apr 13:00:47 - [info] Node-RED version: v3.0.2
12 Apr 13:00:47 - [info] Node.js  version: v14.16.1
12 Apr 13:00:47 - [info] Windows_NT 10.0.19045 x64 LE
12 Apr 13:00:48 - [info] Loading palette nodes
12 Apr 13:00:50 - [info] mDashboard version 2.19.4-beta started at /mui
12 Apr 13:00:53 - [info] Dashboard version 2.30.0 started at /ui
12 Apr 13:00:53 - [info] Settings file  : C:\Users\rtkl1\.node-red\settings.js
12 Apr 13:00:53 - [info] HTTP Static    : C:\Users\rtkl1\.node-red\node-red-static > /
12 Apr 13:00:53 - [info] Context store  : 'default' [module=memory]
12 Apr 13:00:53 - [info] User directory : \Users\rtkl1\.node-red
12 Apr 13:00:53 - [warn] Projects disabled : editorTheme.projects.enabled=false
12 Apr 13:00:53 - [warn] Flows file name not set. Generating name using hostname.
12 Apr 13:00:53 - [info] Flows file     : \Users\rtkl1\.node-red\flows_TOMISLAVK-W10.json
12 Apr 13:00:53 - [info] Server now running at http://127.0.0.1:1880/
12 Apr 13:00:53 - [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.
---------------------------------------------------------------------

12 Apr 13:00:53 - [info] +-----------------------------------------------------
12 Apr 13:00:53 - [info] | uibuilder v6.4.0 initialised
12 Apr 13:00:53 - [info] | root folder: \Users\rtkl1\.node-red\uibuilder
12 Apr 13:00:53 - [info] | Using Node-RED's webserver at:
12 Apr 13:00:53 - [info] |   http://0.0.0.0:1880/
12 Apr 13:00:53 - [info] | Installed packages:
12 Apr 13:00:53 - [info] |   apexcharts, bootstrap, bootstrap-vue, http-vue-loader
12 Apr 13:00:53 - [info] |   jquery, normalize.css, vega, vega-embed
12 Apr 13:00:53 - [info] |   vue, vue-apexcharts, vue-router
12 Apr 13:00:53 - [info] +-----------------------------------------------------
12 Apr 13:00:53 - [info] Starting flows
12 Apr 13:00:53 - [warn] Unknown context store 'default' specified. Using default store.
12 Apr 13:00:53 - [info] Started flows

It's a vanilla code from uibuilder template "VueJS & bootstrap-vue" - havent changed a bit.

apexcharts	3.35.0
bootstrap	5.1.3
bootstrap-vue	2.21.2
http-vue-loader	1.4.2
jquery	3.6.0
normalize.css	8.0.1
vega	5.22.1
vega-embed	6.20.8
vue	2.6.14
vue-apexcharts	1.6.2
vue-router	3.5.3

Error upon node-red refresh:

red.min.js?v=3.0.2:18 Uncaught Error: Cannot override existing action
    at Object.add (red.min.js?v=3.0.2:18:109171)
    at Object.success (<anonymous>:846:37)
    at c (vendor.js?v=3.0.2:2:28294)
    at Object.fireWith [as resolveWith] (vendor.js?v=3.0.2:2:29039)
    at l (vendor.js?v=3.0.2:2:79800)
    at XMLHttpRequest.<anonymous> (vendor.js?v=3.0.2:2:82254)

Error upon instance refresh:

uibuilderfe.min.js:1 [uibuilderfe:ioSetup:connect_error] SOCKET CONNECT ERROR - Namespace: /uibuilder_simple_testing, ioPath: /uibuilder/vendor/socket.io, Reason: Invalid namespace Error: Invalid namespace
    at Socket.onpacket (socket.io.js:3652:23)
    at Emitter.emit (socket.io.js:628:22)
    at socket.io.js:4486:18
(anonymous) @ uibuilderfe.min.js:1
Emitter.emit @ socket.io.js:628
onpacket @ sock.............

socket.io.js:1402          GET http://localhost:1880/uibuilder/vendor/socket.io/?EIO=4&transport=polling&t=OTrAHCL&sid=pz_HJ-lhp2mg5cItAAAa 400 (Bad Request)

^^ this is some old instance which I've properly deleted from node-red and folder but for some reason it wont get away from uibuilder.

TotallyInformation · 12 April 2023 11:49

Nice that you are now using the latest version and I can see that you've updated Node-RED as well.

Those are errors in Node-RED - from the Editor. You need to look at errors on your resulting web page. The first of those seems to be a Node-RED error.

Clearly something odd has happened. The error is suggesting that the namespace is wrong. That would normally be an incorrect uibuilder.start(...) in your custom front-end code but as you've said you don't have any, I think this will be related to something not being cleared out correctly.

If you haven't got any custom front-end code, I think I would recommend that you delete the uibuilder node, redeploy then add a new node, set the url and deploy.

Once you switch to the latest version of the Vue2/bootstrap-vue template, you will see that it no longer includes the panel that shows the latest received. With the newer templates and the new client, you can turn on/off the received msg panel. The following inject node will do that for you:

[{"id":"6f03e61c79a341f3","type":"inject","z":"3d1d77d64d7cd2b3","name":"showMsg","props":[{"p":"_uib","v":"{ \"command\": \"showMsg\" }","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":240,"y":60,"wires":[["4f5927a48643d688"]]}]

nerevar · 12 April 2023 12:14

I deleted this uibuilder node ages ago. I do have, however, over 20 nodes for testing purposes in my flows. Maybe some of them have got uibuilder.start(...) messed up?

Sure, but on my new project I like to have this panel for debugging purposes.
I'm not receiving messages on any of my instances

TotallyInformation · 12 April 2023 13:37

Shouldn't matter. All uibuilder instances are deliberately independent. So one cannot impact another.

I also have many uibuilder nodes and flows on my test system.

The error you shared:

uibuilderfe.min.js:1 [uibuilderfe:ioSetup:connect_error] SOCKET CONNECT ERROR - Namespace: /uibuilder_simple_testing, ioPath: /uibuilder/vendor/socket.io, Reason: Invalid namespace Error: Invalid namespace

Says that /uibuilder_simple_testing is an invalid namespace - but that namespace is different to the original flow you shared which was /retest. So are you sure that you had the right URL open?

You can simply add uibuilder.showMsg() to your front end js code or send the command when a client connects - either by wiring up a change node to the "client connect" control msg and feeding back to the uibuilder input or by using a cache node (similarly connected to the control output but you don't need to filter the messages).

So plenty of choice. Happy to share more code if you need it.

Right, so what errors are you getting from another of the web pages?

More importantly, what happens if you import the "templates" example and deploy it - which of those example instances work? Any of them?

nerevar · 12 April 2023 18:28

None of the templates work either.

Anyways, on my home PC everything works fine:

12 Apr 17:27:51 - [info] Node-RED version: v2.2.2
12 Apr 17:27:51 - [info] Node.js  version: v14.18.0
12 Apr 17:27:51 - [info] Windows_NT 10.0.19045 x64 LE
12 Apr 17:27:54 - [info] Loading palette nodes
12 Apr 17:27:59 - [info] mDashboard version 2.19.4-beta started at /mui
12 Apr 17:28:01 - [info] Dashboard version 3.0.4 started at /ui
12 Apr 17:28:02 - [info] Settings file  : C:\Users\Tomislav\.node-red\settings.js
12 Apr 17:28:02 - [info] Context store  : 'default' [module=memory]
12 Apr 17:28:02 - [info] User directory : \Users\Tomislav\.node-red
12 Apr 17:28:02 - [warn] Projects disabled : editorTheme.projects.enabled=false
12 Apr 17:28:02 - [warn] Flows file name not set. Generating name using hostname.
12 Apr 17:28:02 - [info] Flows file     : \Users\Tomislav\.node-red\flows_DESKTOP-QG83EJG.json
12 Apr 17:28:02 - [warn]

12 Apr 17:28:02 - [info] +-----------------------------------------------------
12 Apr 17:28:02 - [info] | uibuilder v5.0.1 initialised
12 Apr 17:28:02 - [info] | root folder: \Users\Tomislav\.node-red\uibuilder
12 Apr 17:28:02 - [info] | Using Node-RED's webserver at:
12 Apr 17:28:02 - [info] |   http://0.0.0.0:1880/
12 Apr 17:28:02 - [info] | Installed packages:
12 Apr 17:28:02 - [info] |   apexcharts, bootstrap, bootstrap-vue, http-vue-loader
12 Apr 17:28:02 - [info] |   jquery, normalize.css, vega, vega-embed
12 Apr 17:28:02 - [info] |   vue, vue-apexcharts, vue-router
12 Apr 17:28:02 - [info] +-----------------------------------------------------
12 Apr 17:28:03 - [info] Server now running at http://127.0.0.1:1880/

Guess I need to delete everything, reinstall and start a fresh flow.

Thank you for the effort.

Looks nice, right?

nerevar · 13 April 2023 07:07

Upon following this guides to uninstall node-red and nodeJS:
google groups: uninstall node-red from windows
SO: uninstall nodeJS from windows

and then installing freshly everything:

13 Apr 08:36:01 - [info]

Welcome to Node-RED
===================

13 Apr 08:36:01 - [info] Node-RED version: v3.0.2
13 Apr 08:36:01 - [info] Node.js  version: v18.16.0
13 Apr 08:36:01 - [info] Windows_NT 10.0.19045 x64 LE
13 Apr 08:36:04 - [info] Loading palette nodes
13 Apr 08:36:05 - [info] Settings file  : C:\Users\rtkl1\.node-red\settings.js
13 Apr 08:36:05 - [info] Context store  : 'default' [module=memory]
13 Apr 08:36:05 - [info] User directory : C:\Users\rtkl1\.node-red
13 Apr 08:36:05 - [warn] Projects disabled : editorTheme.projects.enabled=false
13 Apr 08:36:05 - [info] Flows file     : C:\Users\rtkl1\.node-red\flows.json
13 Apr 08:36:05 - [info] Creating new flow file
13 Apr 08:36:05 - [warn]
...
13 Apr 08:36:05 - [info] Server now running at http://127.0.0.1:1880/
13 Apr 08:36:05 - [warn] Encrypted credentials not found
13 Apr 08:36:05 - [info] Starting flows
13 Apr 08:36:05 - [info] Started flows
13 Apr 08:38:10 - [info] Installing module: node-red-contrib-uibuilder, version: 6.4.0
13 Apr 08:38:23 - [info] Installed module: node-red-contrib-uibuilder
13 Apr 08:38:28 - [info] Added node types:
13 Apr 08:38:28 - [info]  - node-red-contrib-uibuilder:uibuilder
13 Apr 08:38:28 - [info]  - node-red-contrib-uibuilder:uib-cache
13 Apr 08:38:28 - [info]  - node-red-contrib-uibuilder:uib-element
13 Apr 08:38:28 - [info]  - node-red-contrib-uibuilder:uib-update
13 Apr 08:38:28 - [info]  - node-red-contrib-uibuilder:uib-sender
13 Apr 08:38:28 - [info]  - node-red-contrib-uibuilder:uib-list
13 Apr 08:39:37 - [info] Stopping flows
13 Apr 08:39:37 - [info] Stopped flows
13 Apr 08:39:37 - [info] +-----------------------------------------------------
13 Apr 08:39:37 - [info] | uibuilder v6.4.0 initialised
13 Apr 08:39:37 - [info] | root folder: C:\Users\rtkl1\.node-red\uibuilder
13 Apr 08:39:37 - [info] | Using Node-RED's webserver at:
13 Apr 08:39:37 - [info] |   http://0.0.0.0:1880/
13 Apr 08:39:37 - [info] | Installed packages:
13 Apr 08:39:37 - [info] +-----------------------------------------------------

And then loading default uibuiilder template "Simple VueJS v2", I am already getting this error on the console:

Don't know if matters, but for every library I addded to uibuilder I got this message in the CMD terminal:

13 Apr 08:43:44 - [info] [uibuilder:UibPackages:npmInstallPackage] npm output:
 npm WARN config production Use `--omit=dev` instead.

Right, so now I've inserted files from my project and guess what. It is the same as before: no communication whatsoever. Also, I see the same error as before even though its a fresh install:

Which is.... frustrating as the folder .node-red was deleted and PC was restarted.
Here is what's inside the folder right now:

Did I had to install NodeJS additional tools (Python, build tools and Chocolatery)?

UnborN · 13 April 2023 07:35

as @TotallyInformation said you need to share the actual code (index.html, .js files) in order to investigate

what i notice is that in the error it says Namespace: /uibuilder_simple_testing that should be the url set in the uibuilder node ? but based on your folder screenshot, no folder uibuilder_simple_testing exists which means you dont have a matching node with that namespace. check in you code to see if you manually doing a uibuilder.start() with that namespace that doesnt exist.

nerevar · 13 April 2023 08:14

I did already and can't find a problem, anyways here are codes:

Code for node which produces this error:

As I said, standard template:

index.js

/* eslint-disable object-shorthand */
// @ts-nocheck

/** Example of using the IIFE build of the uibuilder client library with VueJS v2
 * Note that uibuilder.start() should no longer be needed.
 * See the docs if the client doesn't start on its own.
 */
'use strict'

// eslint-disable-next-line no-unused-vars
const app = new Vue({
    el: '#app',

    data() {
        return {
            // Add reactive data variables here
        }
    }, // --- End of data --- //

    /** Called after the Vue app has been created. A good place to put startup code */
    created: function() {

        // If msg changes - msg is updated when a standard msg is received from Node-RED over Socket.IO
        uibuilder.onChange('msg', (msg) => {
            this.lastMsg = msg

            // Workaround to show "toast" notifications.
            if (msg._uib && msg._uib.componentRef && msg._uib.componentRef === 'globalNotification') {
                this.$bvToast.toast(msg._uib.options.content, msg._uib.options)
                console.log(msg)
            }
        })

    }, // --- End of created hook --- //

}) // --- End of app definition --- //

// EOF

index.html

<!doctype html>
<html lang="en"><head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>VueJS + bootstrap-vue simple template - Node-RED uibuilder</title>
    <meta name="description" content="Node-RED uibuilder - VueJS + bootstrap-vue simple template">

    <link rel="icon" href="../uibuilder/images/node-blue.ico">

    <!-- #region Supporting CSS. -->
    <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" />
    <link type="text/css" rel="stylesheet" href="./index.css" media="all"><!-- Your own CSS -->
    <!-- #endregion -->

    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / - socket.io no longer needed -->
    <script defer src="../uibuilder/vendor/vue/dist/vue.min.js">/* prod version with component compiler */</script>
    <script defer src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.min.js">/* remove 'min.' to use dev version */</script>
    <script defer src="../uibuilder/uibuilder.iife.min.js"></script>
    <script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script>
    <!-- #endregion -->
    
</head><body>

    <div id="app" class="uib" v-cloak><!-- All UI code needs to be in here -->
        <b-container id="app_container"><!-- Wraps the bootstrap-vue formatting -->

            <h1 class="with-subtitle">uibuilder + Vue v2 + bootstrap-vue - Simple Template</h1>
            <div role="doc-subtitle">Using the uibuilder IIFE library.</div>

            <div id="more"><!-- '#more' is used as a parent for dynamic content in examples --></div>

        </b-container>
    </div>

</body></html>

~~Followed by code from my project which produces this error:~~
Solved by replacing

<script src="./uibuilderfe.min.js"></script>
with
<script defer src="../uibuilder/uibuilder.iife.min.js"></script>

index.html

<!doctype html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>freya_0.2.0a</title>
        <link rel="icon" href="./resources/viking.png">
    <!--<link rel="icon" href="./images/node-blue.ico">-->
        <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" />
        <link type="text/css" rel="stylesheet" href="./index.css" media="all">
    </head>

    <body>
        <div id="app" class="selector" v-cloak><!-- All UI code needs to be in here -->
            <Navbar></Navbar>
            <div class="sbar">
                <router-view></router-view>
            </div>

        </div>

    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
    <script src="../uibuilder/vendor/socket.io/socket.io.js">/* REQUIRED: Socket.IO is loaded only once for all instances. Without this, you don't get a websocket connection */</script>
    <!-- Vendor Libraries - Load in the right order, use minified, production versions for speed -->

    <!-- <script src="../uibuilder/vendor/vue/dist/vue.min.js">/* prod version with component compiler */</script> -->
    <script src="../uibuilder/vendor/vue/dist/vue.js">/* dev version with component compiler */</script>
    <!-- <script src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.min.js">/* prod version */</script> -->
    <script src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.js">/* dev version */</script> 
    <!-- 
    <script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
    -->
    <script src="../uibuilder/vendor/vega/build/vega.js"></script>
    <script src="../uibuilder/vendor/vega-embed/build/vega-embed.js"></script>
    <script src="../uibuilder/vendor/apexcharts/dist/apexcharts.js"></script>
    <script src="../uibuilder/vendor/vue-apexcharts/dist/vue-apexcharts.js"></script>
    <!-- 
    <script src="https://cdn.jsdelivr.net/npm/apexcharts"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue-apexcharts"></script>
    -->
    <script src="../uibuilder/vendor/http-vue-loader/src/httpVueLoader.js"></script>
    <script src="../uibuilder/vendor/vue-router/dist/vue-router.js"></script>

    <script src="./uibuilderfe.min.js">/* REQUIRED: remove 'min.' to use dev version */</script>
    <script src="./index.js">/* OPTIONAL: Put your custom code here */</script>
    <!-- #endregion -->
    </body>
</html>

index.js

/* jshint browser: true, esversion: 5, asi: true */
/*globals Vue, uibuilder */
// @ts-nocheck
/*
  Copyright (c) 2021-2022 Julian Knight (Totally Information)

  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at

  http://www.apache.org/licenses/LICENSE-2.0

  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
*/
'use strict'

/** @see https://totallyinformation.github.io/node-red-contrib-uibuilder/#/front-end-library */
const Navbar = httpVueLoader('./components/Navbar.vue');
const GlueLine = httpVueLoader('./views/GlueLine.vue');
const Overview = httpVueLoader('./views/Overview.vue');
const Settings = httpVueLoader('./views/Settings.vue');

// eslint-disable-next-line no-unused-vars
const routeDefs = [
    {
        path: '/',
        component: Overview
    },{
        path: '/glueline',
        component: GlueLine
    },{
        path: '/Settings',
        component: Settings
    }
]
const app = new Vue({

    el: '#app',
    router: new VueRouter({routes: routeDefs}),
    components: {
        'Navbar': Navbar,
        'Overview': Overview,
        'GlueLine': GlueLine,
        'Settings': Settings
    }, // --- End of components --- //

    data() { return {
        startMsg    : 'Vue has started, waiting for messages',
        feVersion   : '',
        counterBtn  : 0,
        inputText   : null,
        inputChkBox : false,
        socketConnectedState : false,
        serverTimeOffset     : '[unknown]',
        imgProps             : { width: 75, height: 75 },

        msgRecvd    : '[Nothing]',
        msgsReceived: 0,
        msgCtrl     : '[Nothing]',
        msgsControl : 0,

        msgSent     : '[Nothing]',
        msgsSent    : 0,
        msgCtrlSent : '[Nothing]',
        msgsCtrlSent: 0,

        isLoggedOn  : false,
        userId      : null,
        userPw      : null,
        inputId     : '',

    }}, // --- End of data --- //

    computed: {
        hLastRcvd: function() {
            var msgRecvd = this.msgRecvd
            if (typeof msgRecvd === 'string') return 'Last Message Received = ' + msgRecvd
            return 'Last Message Received = ' + this.syntaxHighlight(msgRecvd)
        },
        hLastSent: function() {
            var msgSent = this.msgSent
            if (typeof msgSent === 'string') return 'Last Message Sent = ' + msgSent
            return 'Last Message Sent = ' + this.syntaxHighlight(msgSent)
        },
        hLastCtrlRcvd: function() {
            var msgCtrl = this.msgCtrl
            if (typeof msgCtrl === 'string') return 'Last Control Message Received = ' + msgCtrl
            return 'Last Control Message Received = ' + this.syntaxHighlight(msgCtrl)
        },
        hLastCtrlSent: function() {
            var msgCtrlSent = this.msgCtrlSent
            if (typeof msgCtrlSent === 'string') return 'Last Control Message Sent = ' + msgCtrlSent
            return 'Last Control Message Sent = ' + this.syntaxHighlight(msgCtrlSent)
        },
    }, // --- End of computed --- //

    methods: {

// REALLY Simple method to return DOM events back to Node-RED. See the 2nd b-button on the default html
        doEvent: uibuilder.eventSend,

// return formatted HTML version of JSON object
        syntaxHighlight: function(json) {
            json = JSON.stringify(json, undefined, 4)
            json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
            json = json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
                var cls = 'number'
                if ((/^"/).test(match)) {
                    if ((/:$/).test(match)) {
                        cls = 'key'
                    } else {
                        cls = 'string'
                    }
                } else if ((/true|false/).test(match)) {
                    cls = 'boolean'
                } else if ((/null/).test(match)) {
                    cls = 'null'
                }
                return '<span class="' + cls + '">' + match + '</span>'
            })
            return json
        }, // --- End of syntaxHighlight --- //

    }, // --- End of methods --- //


// Available hooks: beforeCreate,created,beforeMount,mounted,beforeUpdate,updated,beforeDestroy,destroyed, activated,deactivated, errorCaptured

/** Called after the Vue app has been created. A good place to put startup code */
    created: function() {

        // Example of retrieving data from uibuilder
        this.feVersion = uibuilder.get('version')

        /** **REQUIRED** Start uibuilder comms with Node-RED @since v2.0.0-dev3
         * Pass the namespace and ioPath variables if hosting page is not in the instance root folder
         * e.g. If you get continual `uibuilderfe:ioSetup: SOCKET CONNECT ERROR` error messages.
         * e.g. uibuilder.start('/uib', '/uibuilder/vendor/socket.io') // change to use your paths/names
         * @param {Object=|string=} namespace Optional. Object containing ref to vueApp, Object containing settings, or String IO Namespace override. changes self.ioNamespace from the default.
         * @param {string=} ioPath Optional. changes self.ioPath from the default
         * @param {Object=} vueApp Optional. Reference to the VueJS instance. Used for Vue extensions.
         */
        uibuilder.start(this) // Single param passing vue app to allow Vue extensions to be used.

        //console.log(this)

    }, // --- End of created hook --- //

/** Called once all Vue component instances have been loaded and the virtual DOM built */
    mounted: function(){

        //console.debug('[indexjs:Vue.mounted] app mounted - setting up uibuilder watchers')

        var app = this  // Reference to `this` in case we need it for more complex functions

        // If msg changes - msg is updated when a standard msg is received from Node-RED over Socket.IO
        uibuilder.onChange('msg', function(msg){
            //console.info('[indexjs:uibuilder.onChange] msg received from Node-RED server:', msg)
            app.msgRecvd = msg
            app.msgsReceived = uibuilder.get('msgsReceived')
        })

        //#region ---- Debug info, can be removed for live use ---- //

        /** You can use the following to help trace how messages flow back and forth.
         * You can then amend this processing to suite your requirements.
         */

        // If we receive a control message from Node-RED, we can get the new data here - we pass it to a Vue variable
        uibuilder.onChange('ctrlMsg', function(msg){
            //console.info('[indexjs:uibuilder.onChange:ctrlMsg] CONTROL msg received from Node-RED server:', msg)
            app.msgCtrl = msg
            app.msgsControl = uibuilder.get('msgsCtrl')
        })

        /** You probably only need these to help you understand the order of processing
         * If a message is sent back to Node-RED, we can grab a copy here if we want to
         */
        uibuilder.onChange('sentMsg', function(msg){
            //console.info('[indexjs:uibuilder.onChange:sentMsg] msg sent to Node-RED server:', msg)
            app.msgSent = msg
            app.msgsSent = uibuilder.get('msgsSent')
        })

        /** If we send a control message to Node-RED, we can get a copy of it here */
        uibuilder.onChange('sentCtrlMsg', function(msg){
            //console.info('[indexjs:uibuilder.onChange:sentCtrlMsg] Control message sent to Node-RED server:', msg)
            app.msgCtrlSent = msg
            app.msgsCtrlSent = uibuilder.get('msgsSentCtrl')
        })

        /** If Socket.IO connects/disconnects, we get true/false here */
        uibuilder.onChange('ioConnected', function(connected){
            //console.info('[indexjs:uibuilder.onChange:ioConnected] Socket.IO Connection Status Changed to:', connected)
            app.socketConnectedState = connected
        })
        /** If Server Time Offset changes */
        uibuilder.onChange('serverTimeOffset', function(serverTimeOffset){
            //console.info('[indexjs:uibuilder.onChange:serverTimeOffset] Offset of time between the browser and the server has changed to:', serverTimeOffset)
            app.serverTimeOffset = serverTimeOffset
        })

        /** If user is logged on/off */
        uibuilder.onChange('isAuthorised', function(isAuthorised){
            //console.info('[indexjs:uibuilder.onChange:isAuthorised] isAuthorised changed. User logged on?:', isAuthorised)
            //console.log('authData: ', uibuilder.get('authData'))
            //console.log('authTokenExpiry: ', uibuilder.get('authTokenExpiry'))
            app.isLoggedOn = isAuthorised
        })

        //#endregion ---- Debug info, can be removed for live use ---- //

    }, // --- End of mounted hook --- //

} // --- End of app1 --- //

) // EOF

Again, at my home PC there are apsolutely no problems with any of my instances - how could it then matter what is in these files?

P.S. Couldn't insert all files because of this error: An error occurred: Body is limited to 32000 characters; you entered 72097.

nerevar · 13 April 2023 09:48

Hello,

It's solved. I deleted all data from a browser.
Aparently there were some cookies leftovers.

TotallyInformation · 13 April 2023 10:51

Glad you've resolved it.

The code you've shared is still "old" style however. It will certainly continue to work but you will eventually want to bring it up to the latest approach so that you will be able to leverage the latest features.

Do check out the built-in examples now that you are on the latest versions of uibuilder and node-red. And I'm generally around in the forum so feel free to ask more questions if you get stuck.

nerevar · 13 April 2023 11:10

I know - I've saved the .js file in the project so I can study what's new for later.

Atm I'm trying to figure in which software to convert this old autocad layout to a SVG so I "modernise" the looks a bit using your "uibuilder+svg+vue.js" example. But, thats for another topic

TotallyInformation · 13 April 2023 11:56

Cool. Look forward to hearing about that, sounds interesting.

Just to note that the low-code features of uibuilder now fully support building SVG's dynamically - you can use that both from Node-RED and in front-end code.

So Vue might not be needed - though obviously if you are already familiar with it, its fine to use and can help with more complex front-end code.

system · 27 April 2023 11:56

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

Topic		Replies	Views
Uibuilder example General uibuilder	29	2653	23 November 2021
Uibuilder v6 beta - Ready to test Share Your Nodes uibuilder	4	457	1 December 2022
Uibuilder vNext (v5) - updates Share Your Nodes uibuilder	20	791	14 January 2022
[New Release] node-red-contrib-uibuilder - v3.1.3 Share Your Nodes	26	1651	26 January 2021
VueJS / UIBuilder - v-for ranged values not being passed to Node-Red General uibuilder	4	388	10 March 2022

Uibuilder not communicating with the Node-RED

Related topics