Hi,
Hope you guys are doing well. I have been following the threads related to Soket.io, so that data from Node red could be sent to UI Builder.
Currently Im facing a problem related to get the data in UI Builder. I could fetch the msg.payload from Node red on the Java script function I have written. Even when I copy paste the solution for virtual Shopfloor from @ [TotallyInformation] ( Uibuilder + VueJS + SVG = visual IoT floorplan )
could see the tags such mentioned in part Mounted such as .onChange.
But whatever changes I make in Html and java script i can see it on the UI Builder.
For Info :
npm version - 8.12.2
node version - v16.14.0
Could you please help me, where am I making mistake.
Thank you in advance.
This one is the Javascript data:
Mainly Im trying to fetch the data from Node-Red (msg.payload) in
vueApp.cardId = newVal.payload.
function h2(ab)
{
let obj= document.getElementById("H-2");
obj.src ="./Halle-2.JPG";
if(msg.payload==1){
l1= document.getElementById("L1");
l1.src ="./Red.JPG";
l1.style.display="inline";
document.getElementById("L2").style.display="none";
document.getElementById("L3").style.display="none";
document.getElementById("L4").style.display="none";
}
if(msg.payload==2){
l2= document.getElementById("L2");
l2.src ="./Yellow.JPG";
l2.style.display="inline";
document.getElementById("L1").style.display="none";
document.getElementById("L3").style.display="none";
document.getElementById("L4").style.display="none";
}
if(msg.payload==3){
document.getElementById("L1").style.display="none";
document.getElementById("L2").style.display="none";
document.getElementById("L3").style.display="inline";
document.getElementById("L4").style.display="none";
}
if(msg.payload==4){
document.getElementById("L1").style.display="none";
document.getElementById("L2").style.display="none";
document.getElementById("L3").style.display="none";
document.getElementById("L4").style.display="inline";
}
}
var app1 = new Vue({
mounted: function(){
//console.debug('[indexjs:Vue.mounted] app mounted - setting up uibuilder watchers')
/** **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('/nr/uib', '/nr/uibuilder/vendor/socket.io') // change to use your paths/names
*/
uibuilder.start('../uibuilder/node_modules/socket.io')
var vueApp = this
// Example of retrieving data from uibuilder
vueApp.feVersion = uibuilder.get('version')
/** You can use the following to help trace how messages flow back and forth.
* You can then amend this processing to suite your requirements.
*/
//#region ---- Trace Received Messages ---- //
// If msg changes - msg is updated when a standard msg is received from Node-RED over Socket.IO
// newVal relates to the attribute being listened to.
uibuilder.onChange('msg', function(newVal){
//console.info('[indexjs:uibuilder.onChange] msg received from Node-RED server:', newVal)
vueApp.msgRecvd = newVal
if ( newVal.topic == 'Green' ) {
vueApp.cardId = newVal.payload
}
if ( newVal.topic == 'Red' ) {
vueApp.smallCount = newVal.payload
}
})
// As we receive new messages, we get an updated count as well
uibuilder.onChange('msgsReceived', function(newVal){
//console.info('[indexjs:uibuilder.onChange] Updated count of received msgs:', newVal)
vueApp.msgsReceived = newVal
})
// 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(newVal){
//console.info('[indexjs:uibuilder.onChange:ctrlMsg] CONTROL msg received from Node-RED server:', newVal)
vueApp.msgCtrl = newVal
})
}
})
function h2(ab)
{
let obj= document.getElementById("H-2");
obj.src ="./Halle-2.JPG";
if(msg.payload==1){
l1= document.getElementById("L1");
l1.src ="./Red.JPG";
l1.style.display="inline";
document.getElementById("L2").style.display="none";
document.getElementById("L3").style.display="none";
document.getElementById("L4").style.display="none";
}
if(msg.payload==2){
l2= document.getElementById("L2");
l2.src ="./Yellow.JPG";
l2.style.display="inline";
document.getElementById("L1").style.display="none";
document.getElementById("L3").style.display="none";
document.getElementById("L4").style.display="none";
}
if(msg.payload==3){
document.getElementById("L1").style.display="none";
document.getElementById("L2").style.display="none";
document.getElementById("L3").style.display="inline";
document.getElementById("L4").style.display="none";
}
if(msg.payload==4){
document.getElementById("L1").style.display="none";
document.getElementById("L2").style.display="none";
document.getElementById("L3").style.display="none";
document.getElementById("L4").style.display="inline";
}
}
var app1 = new Vue({
mounted: function(){
//console.debug('[indexjs:Vue.mounted] app mounted - setting up uibuilder watchers')
/** **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('/nr/uib', '/nr/uibuilder/vendor/socket.io') // change to use your paths/names
*/
uibuilder.start('../uibuilder/node_modules/socket.io')
var vueApp = this
// Example of retrieving data from uibuilder
vueApp.feVersion = uibuilder.get('version')
/** You can use the following to help trace how messages flow back and forth.
* You can then amend this processing to suite your requirements.
*/
//#region ---- Trace Received Messages ---- //
// If msg changes - msg is updated when a standard msg is received from Node-RED over Socket.IO
// newVal relates to the attribute being listened to.
uibuilder.onChange('msg', function(newVal){
//console.info('[indexjs:uibuilder.onChange] msg received from Node-RED server:', newVal)
vueApp.msgRecvd = newVal
if ( newVal.topic == 'Green' ) {
vueApp.cardId = newVal.payload
}
if ( newVal.topic == 'Red' ) {
vueApp.smallCount = newVal.payload
}
})
// As we receive new messages, we get an updated count as well
uibuilder.onChange('msgsReceived', function(newVal){
//console.info('[indexjs:uibuilder.onChange] Updated count of received msgs:', newVal)
vueApp.msgsReceived = newVal
})
// 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(newVal){
//console.info('[indexjs:uibuilder.onChange:ctrlMsg] CONTROL msg received from Node-RED server:', newVal)
vueApp.msgCtrl = newVal
})
}
})
The problem is the UI Builder is not recognizing the Output from Node red and also not interpreting the data from Java script. So in HTML when I wrote this code -
It showing the same with curly brackets in the Dashboard. As shown in the picture.
My Project is basically to make a Dashboard on which the lights will be switched on and off with the help of bulb images depending on the topic and payload that i receive from the node red.
I was using till now the svelte basic as the template. Will that be reason of not fetching the data from Node Red?
This problem is solved, just by installing the vue@2 version.
Thanks alot [TotallyInformation] for your help. I managed to find the console error and followed old threads to solve it. Thanks again.
