I'm trying to build a switch with uibuilder (bootstrap-vue).
My goal is to be able to set the switch on 2 browsers (iPhone and mac) and from node-red (uibuilder input).
[{"id":"f38da159.cd70f","type":"uibuilder","z":"1d3866f1.0e8e09","name":"","topic":"","url":"uibuilder","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"showfolder":false,"x":380,"y":640,"wires":[["ec349a33.5ac878"],[]]},{"id":"1baa6671.01fc4a","type":"inject","z":"1d3866f1.0e8e09","name":"true","topic":"","payload":"{\"name\":\"at_home\",\"service_name\":\"at_home\",\"characteristic\":\"On\",\"value\":true}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":620,"wires":[["f38da159.cd70f"]]},{"id":"ec349a33.5ac878","type":"debug","z":"1d3866f1.0e8e09","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":570,"y":640,"wires":[]},{"id":"507ad928.308538","type":"inject","z":"1d3866f1.0e8e09","name":"false","topic":"","payload":"{\"name\":\"at_home\",\"service_name\":\"at_home\",\"characteristic\":\"On\",\"value\":false}","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":190,"y":680,"wires":[["f38da159.cd70f"]]}]
It works with one exception:
- I can set the switch in any browser and get the msg on output 1.
- I can set the switch in node-red and send the msg to all browsers.
- however if I set the switch in one browser, the second browser isn't updated.
Any tips how I can achieve it?
Versions:
- uibuilder v2.01 (boostrap-vue 2.0.0-rc.28 instead of 2.0.0-rc.27)
- node-red v0.20.7
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
<title>Node-RED UI Builder</title>
<meta name="description" content="Node-RED UI Builder - VueJS + bootstrap-vue version">
<link rel="icon" href="./images/node-blue.ico">
<!-- See https://goo.gl/OOhYW5 -->
<link rel="manifest" href="./manifest.json">
<meta name="theme-color" content="#3f51b5">
<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 rel="stylesheet" href="./index.css" media="all">
</head>
<body>
<div id="app">
<b-container id="app_container">
<b-card no-body>
<b-tabs card small>
<b-tab title="Main" active>
<b-form-checkbox v-model="at_home_value" @input="at_home_input" switch size="lg" class="mb-2">
at home <b-badge variant="info">{{at_home_value}}</b-badge>
</b-form-checkbox>
<b-form-checkbox v-model="ss_value" @input="ss_input" switch size="lg" class="mb-2">
security system <b-badge variant="info">{{ss_value}}</b-badge>
</b-form-checkbox>
</b-tab>
<b-tab title="Rooms">
<b-card-text>rooms ...</b-card-text>
</b-tab>
<b-tab title="Heating">
<b-card-text>heating ...</b-card-text>
</b-tab>
<b-tab title="Greenhouse">
<b-card-text>greenhouse ...</b-card-text>
</b-tab>
</b-tabs>
</b-card>
</b-container>
</div>
<script src="../uibuilder/vendor/socket.io/socket.io.js"></script>
<!-- Vendor Libraries - Load in the right order -->
<script src="../uibuilder/vendor/vue/dist/vue.js"></script> <!-- dev version with component compiler -->
<!-- <script src="../uibuilder/vendor/vue/dist/vue.min.js"></script> prod version with component compiler -->
<!-- <script src="../uibuilder/vendor/vue/dist/vue.runtime.min.js"></script> prod version without component compiler -->
<script src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.js"></script>
<!-- REQUIRED: Sets up Socket listeners and the msg object -->
<!-- <script src="./uibuilderfe.js"></script> //dev version -->
<script src="./uibuilderfe.min.js"></script> <!-- //prod version -->
<!-- OPTIONAL: You probably want this. Put your custom code here -->
<script src="./index.js"></script>
</body>
</html>
index.js
// @ts-nocheck
'use strict'
var app1 = new Vue({
el: '#app',
data: {
at_home_value: null,
at_home_flag: true,
ss_value: null,
ss_flag: true,
socketConnectedState : false,
serverTimeOffset : '[unknown]',
},
methods: {
at_home_input: function() {
//console.info('[indexjs:at_home_input] flag: ' + this.at_home_flag + ' value: ' + this.at_home_value);
if (this.at_home_flag) {
uibuilder.send( {
"topic": "uibuilder",
"payload": {
"name": "at_home",
"service_name":"at_home",
"characteristic":"On",
"value": this.at_home_value
}
})
} else {
this.at_home_flag = true;
}
},
ss_input: function() {
if (this.ss_flag) {
uibuilder.send( {
"topic": "uibuilder",
"payload": {
"name": "security_system",
"service_name":"security_system",
"characteristic":"On",
"value": this.ss_value
}
})
} else {
this.ss_flag = true;
}
},
},
mounted: function(){
//console.debug('[indexjs:Vue.mounted] app mounted - setting up uibuilder watchers')
uibuilder.start()
var vueApp = this
uibuilder.onChange('msg', function(newVal){
//console.info('[indexjs:uibuilder.onChange] msg received from Node-RED server:', newVal)
switch (newVal.payload.name) {
case "at_home":
vueApp.at_home_value = newVal.payload.value;
vueApp.at_home_flag = false;
break;
case "security_system":
vueApp.ss_value = newVal.payload.value;
vueApp.ss_flag = false;
break;
}
})
}
})
