Skip to content

Instantly share code, notes, and snippets.

@bakman2

bakman2/README.md

Last active Apr 29, 2020
Embed
What would you like to do?
uibuilder - scaffolding

node-RED uibuilder - barebone examples

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

<!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)
//})
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.