node-red-contrib-uibuilder
Version:
Easily create data-driven web UI's for Node-RED. Single- & Multi-page. Multiple UI's. Work with existing web development workflows or mix and match with no-code/low-code features.
78 lines (61 loc) • 4.18 kB
HTML
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vue v2 + bootstrap-vue template - Node-RED uibuilder</title>
<meta name="description" content="Node-RED uibuilder - Vue v2 + bootstrap-vue template">
<link rel="icon" href="../uibuilder/images/node-blue.ico">
<!-- #region Supporting CSS. -->
<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 type="text/css" rel="stylesheet" href="./index.css" media="all"><!-- Your own CSS -->
<!-- #endregion -->
<!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / - socket.io no longer needed -->
<script defer src="../uibuilder/vendor/vue/dist/vue.min.js">/* prod version with component compiler */</script>
<script defer src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.min.js">/* remove 'min.' to use dev version */</script>
<script defer src="../uibuilder/uibuilder.iife.min.js">/* THE UIBUILDER LIBRARY MUST BE IN THE HTML! DO NOT REMOVE */</script>
<script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script>
<!-- #endregion -->
</head><body>
<div id="app" class="uib" v-cloak><!-- All UI code needs to be within here for Vue -->
<b-container id="app_container"><!-- Wraps the bootstrap-vue formatting -->
<b-img src="../uibuilder/images/node-blue-192x192.png" rounded left v-bind="imgProps" alt="Blue Node-RED" class="mt-1 mr-2"></b-img>
<h1 class="with-subtitle">uibuilder + Vue v2 + bootstrap-vue</h1>
<div role="doc-subtitle">Using the uibuilder IIFE library.</div>
<p>
This is a uibuilder example using <a href="https://vuejs.org/">Vue.js</a> as a front-end library.
See the
<a href="https://github.com/TotallyInformation/node-red-contrib-uibuilder">node-red-contrib-uibuilder</a>
README for details on how to use UIbuilder.
</p>
<div id="more"><!-- '#more' is used as a parent for dynamic content in examples --></div>
<b-card>
<h3 slot="header">Simple input using Vue</h3>
Simplest possible way of getting event information back to Node-RED using a uibuilder helper function.
The method works with any DOM event. Demonstrated here with a simple button click.
<p class="mt-1 pb-3">
<b-button id="myButton1" @click="doEvent" data-something="hello">Send Something To Node-RED</b-button>
</p>
<b-form class="border p-3">
<p>
You can also very simply create a form like this using Vue & bootstrap-vue.
The form sends data back to Node-RED.
Look at the <code>increment</code> method in <code>index.js</code> to see how easy this is.
</p>
<p>
<b-form-input id="inp_text" v-model="inputText" type="text" placeholder="Enter some text to send to Node-RED"></b-form-input><br>
<b-form-checkbox id="inp_chk" v-model="inputChkBox">
To tick or not to tick? That is the question
</b-form-checkbox><br>
<b-button id="btn_increment" pill variant="primary" v-on:click="increment">Increment</b-button>
Click Counter: <b>{{counterBtn}}</b>.
<p>
Click on the button to increment the counter. It sends the data dynamically back to Node-RED as well.
The data includes all of the form inputs.
</p>
</p>
</b-form>
</b-card>
</b-container>
</div>
</body></html>