Create custom dashboard or web interfaces.
ref.: node-red-contrib-uibuilder
Examples include receive and send from/to node-RED.
- Vanilla javascript version
- vue.js version
Rename the files to index.html/index.js
Create custom dashboard or web interfaces.
ref.: node-red-contrib-uibuilder
Examples include receive and send from/to node-RED.
Rename the files to index.html/index.js
<!DOCTYPE html> | |
<html lang="en"> | |
<body> | |
<div>From node-RED:<span id="received"></span></div> | |
<button id="send">Send data back to node-red</button> | |
<script src="../uibuilder/vendor/socket.io/socket.io.js"></script> | |
<script src="./uibuilderfe.min.js"></script> | |
<script src="./index.js"></script> | |
</body> | |
</html> |
'use strict'; | |
// vanilla JS | |
uibuilder.start(); | |
uibuilder.onChange('msg', function (msg) { | |
console.log(msg); | |
document.getElementById('received').innerHTML = msg.payload; | |
}); | |
document.getElementById('send').onclick = function () { | |
uibuilder.send({ payload: 'send from uibuilder' }); | |
}; |
<!DOCTYPE html> | |
<html lang="en"> | |
<body> | |
<div id="app"> | |
<div>{{ msg }}</div> | |
</div> | |
<script src="../uibuilder/vendor/socket.io/socket.io.js"></script> | |
<script src="../uibuilder/vendor/vue/dist/vue.js"></script> | |
<script src="./uibuilderfe.min.js"></script> | |
<script src="./index.js"></script> | |
</body> | |
</html> |
'use strict'; | |
var app1 = new Vue({ | |
el: '#app', | |
data: { | |
msg: '', | |
}, | |
computed: {}, | |
methods: {}, | |
mounted: function() { | |
uibuilder.start(); | |
var vueApp = this; | |
uibuilder.onChange('msg', function(msg) { | |
vueApp.msg = msg; | |
}); | |
// send message back to node-red | |
// uibuilder.send({payload:'some message'}) | |
// control message from node-red | |
//uibuilder.onChange('ctrlMsg', function(msg) { | |
// console.log(msg) | |
//}) | |
}, | |
}); |