bakman2/README.md

## README.md

      
    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

  
## 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>

## 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' });
};

## 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>

## 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)
		//})
	},
});
	<!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' });
	};
	'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)
	//})
	},
	});