Uibuilder - just getting started

Dashboard
1

I have successfully got uibuilder up and running. I am running the following setup:

image
image912×231 4.22 KB

I have figured out a way to parse the msg payload in index.js. I am not sure it's the best way but I can at least pull out the payload and topic. I add this to the computed section of index.js

 computed: {
        
        hLastTopic: function(){
            var msgTopic = this.msgTopic
             if (typeof msgTopic === 'string') return 'Last Topic Received = ' + msgTopic
            else return 'Last Topic Received = ' + this.syntaxHighlight(msgTopic)
        },
        
         hLastPayload: function(){
            var msgPayload = this.msgPayload
            return msgPayload
        },

I added the following code to index.html try and parse out the payload and topic.

               <b-button id="tune_status" pill variant="primary">Tune {{msgPayload}}</b-button>
                           
                
                <b-card class="mt-3" header="Normal Messages" border-variant="primary" header-bg-variant="primary" header-text-variant="white" align="left" >
                    <p>
                        Messages: Received=<b>{{msgsReceived}}</b>, Sent=<b>{{msgsSent}}</b>
                    </p>
                    <pre v-html="hLastRcvd" class="syntax-highlight"></pre>
                    <pre v-html="hLastTopic" class="syntax-highlight"></pre>
                    <pre v-html="hLastSent" class="syntax-highlight"></pre>
                    <p slot="footer" class="mb-0">
                        The received message is from the input to the uibuilder node.
                        The send message will appear out of port #1 of the node.
                    </p>
                </b-card>

I get this output

image
image1366×480 8.96 KB

I want to be able to do an if then else and depending on the payload result set attributes like background color, etc. I have been tweaking the above computed functions but unless I have them set as shown I blow up the web page (blank page). Since I am running vu.js I did a quick search for if then esle and I see a directive called v-if.

At this point I am confused on how to apply if then else statements for uibuilder. Should I be doing that in the computed section? Or should I be doing that in the index.html with vu.js directives. I suspect the computed functions are not for general if then else type statements to define css styles.

Regards

2

Hi, it may help if you think about uibuilder and VueJS separately.

In your mounted section you have a uibuilder.onChange('msg', function(msg) { ... }) where you take the data from the msg from Node-RED and assign it to a Vue variable that you define in the data section. Whenever you change that vue variable, the display of that variable changes.

Now if you want to use some incoming data to change the visibility of some elements, you add a v-if to an outer element and assign to it a variable defined in the data section. Assign true to that variable and the elements will be visible, assign false and they will disappear.

So, for example, set up a data variable called showme and default it to false. Create some DIV in you html with a v-if="showme". When you load the page, the contents of the DIV will be hidden.

Now in your mounted section you add your uibuilder.onChange. In the function for it, have something like

mounted: {

    const app = this

    uibuilder.onChange('msg', function(msg) { 
        app.showme = msg.payload
     })

}

And send a msg from Node-RED to uibuilder containing {payload: true}. When you send the msg, the contents of the DIV will appear. Send a payload of false and the contents of the DIV will disappear.

3

Ok trying to follow you on this...This is what I added to the mounted section:

 // 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.msgPayload = msg.payload
            app.msgTopic = msg.topic
            app.msgsReceived = uibuilder.get('msgsReceived')
        })

My thought is that I would parse the payload by topic for what ever I want to update. So using your example I would should be able to add logic like if msgTopic = 'tune status' && msgPayload = 'true' then do something

I will give that a shot tomorrow.

thanks

4

Yes, that is a common approach.

if (msg.topic === 'tune status' && msg.payload === true) {
   // do something
   app.showme = msg.payload
}

Yes :grinning:

The variables already defined in the template that you may be using like msgRecvd, you will see already defined in the data section, you just need to add a definition for showme.

5

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