node-red-contrib-uibuilder
Version:
Easily create web UI's for Node-RED using any (or no) front-end library. VueJS and bootstrap-vue included but change as desired.
124 lines (106 loc) • 6.63 kB
HTML
<!-- Note that adding an appcache really speeds things up after the first load
You need to amend the appcache file to meet your needs.
Don't forget to change the appcache file if you update ANY
of the files in it otherwise the old versions will ALWAYS be used.
<html lang="en" manifest="./uibuilder.appcache">
-->
<html lang="en">
<!--
This is the default, template html for uibuilder.
It is meant to demonstrate the use of VueJS & bootstrap-vue to dynamically
update the ui based on incoming/outgoing messages from/to the
Node-RED server.
-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Node-RED UI Builder - VueJS + bootstrap-vue default template</title>
<meta name="description" content="Node-RED UI Builder - VueJS + bootstrap-vue default template">
<link rel="icon" href="./images/node-blue.ico">
<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" />
<!-- Your own CSS -->
<link type="text/css" rel="stylesheet" href="./index.css" media="all">
</head><body>
<div id="app" v-cloak>
<b-container id="app_container">
<b-img src="./images/node-blue-192x192.png" rounded left v-bind="imgProps" alt="Blue Node-RED" class="mt-1 mr-2"></b-img>
<h1>UIbuilder + Vue.js + bootstrap-vue for Node-RED</h1>
<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>
<h2>Simple input using Vue</h2>
<b-form class="border p-3 m-2">
<p>
You can very simply create a form 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 v-model="inputText" type="text" placeholder="Enter some text to send to Node-RED"></b-form-input><br>
<b-form-checkbox 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.</p>
</p>
</b-form>
<h2>Dynamic Data</h2>
<div>
<p>Uses Vue to dynamically update in response to messages from Node-RED.</p>
<p>
Check out the <code>mounted</code> function in <code>index.js</code> to See
how easy it is to update Vue data from Node-RED.
</p>
<b-card class="mt-3" header="Status" border-variant="info" header-bg-variant="info" header-text-variant="white" align="center" >
<p class="float-left">Socket.io Connection Status: <b>{{socketConnectedState}}</b></p>
<p class="float-right">Time offset between browser and server: <b>{{serverTimeOffset}}</b> hours</p>
</b-card>
<b-card class="mt-3" header="Normal Messages" border-variant="primary" header-bg-variant="primary" header-text-variant="white" align="left" >
<p>
Messages: Received=<b>{{msgsReceived}}</b>, Sent=<b>{{msgsSent}}</b>
</p>
<pre v-html="hLastRcvd" class="syntax-highlight"></pre>
<pre v-html="hLastSent" class="syntax-highlight"></pre>
<p slot="footer" class="mb-0">
The received message is from the input to the uibuilder node.
The send message will appear out of port #1 of the node.
</p>
</b-card>
<b-card class="mt-3" header="Control Messages" border-variant="secondary" header-bg-variant="secondary" header-text-variant="white" align="left" >
<p>
Control Messages: Received=<b>{{msgsControl}}</b>, Sent=<b>{{msgsCtrlSent}}</b>
</p>
<pre v-html="hLastCtrlRcvd" class="syntax-highlight"></pre>
<pre v-html="hLastCtrlSent" class="syntax-highlight"></pre>
<p slot="footer" class="mb-0">
Control messages always appear out of port #2 of the uibuilder node
whether they are from the server or the client. The <code>from</code> property
of the message tells you where it came from.
</p>
</b-card>
</div>
</b-container>
</div>
<!-- Dont forget to use minified versions of libraries for production, non-min versions for development only -->
<!-- These MUST be in the right order. Note no leading / -->
<!-- REQUIRED: Socket.IO is loaded only once for all instances. Without this, you don't get a websocket connection -->
<script src="../uibuilder/vendor/socket.io/socket.io.js"></script>
<!-- --- Vendor Libraries - Load in the right order --- -->
<script src="../uibuilder/vendor/vue/dist/vue.js"></script> <!-- dev version with component compiler -->
<!-- <script src="../uibuilder/vendor/vue/dist/vue.min.js"></script> prod version with component compiler -->
<!-- <script src="../uibuilder/vendor/vue/dist/vue.runtime.min.js"></script> prod version without component compiler -->
<script src="../uibuilder/vendor/bootstrap-vue/dist/bootstrap-vue.js"></script>
<!-- REQUIRED: Sets up Socket listeners and the msg object -->
<script src="./uibuilderfe.js"></script> <!-- dev version -->
<!-- <script src="./uibuilderfe.min.js"></script> //prod version -->
<!-- OPTIONAL: You probably want this. Put your custom code here -->
<script src="./index.js"></script>
</body></html>