Skip to content

Instantly share code, notes, and snippets.

@bakman2

bakman2/README.md

Last active April 29, 2020 06:41
Show Gist options
  • Save bakman2/8e8232f144c7ac34d4dbbd08cd9fc97b to your computer and use it in GitHub Desktop.
Save bakman2/8e8232f144c7ac34d4dbbd08cd9fc97b to your computer and use it in GitHub Desktop.
Download ZIP
uibuilder - scaffolding
Raw
README.md

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

Raw
index_vanilla.html
<!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>
Raw
index_vanillajs.js
'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' });
};
Raw
index_vuejs.html
<!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>
Raw
index_vuejs.js
'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