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.
100 lines • 12.7 kB
JSON
[
{
"id": "952df085.728f1",
"type": "uibuilder",
"z": "63281c77.40a064",
"name": "",
"topic": "",
"url": "moon",
"x": 470,
"y": 2460,
"wires": [
[
"98616d1d.81d1d"
],
[
"a878a368.08212"
]
]
},
{
"id": "83c18f6d.b6715",
"type": "inject",
"z": "63281c77.40a064",
"name": "",
"topic": "",
"payload": "",
"payloadType": "date",
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"x": 320,
"y": 2460,
"wires": [
[
"952df085.728f1"
]
]
},
{
"id": "98616d1d.81d1d",
"type": "debug",
"z": "63281c77.40a064",
"name": "",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "false",
"x": 670,
"y": 2440,
"wires": []
},
{
"id": "a878a368.08212",
"type": "debug",
"z": "63281c77.40a064",
"name": "",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"x": 650,
"y": 2480,
"wires": []
},
{
"id": "2b1c066.4d7aafa",
"type": "comment",
"z": "63281c77.40a064",
"name": "uibuilder/MoonJS Test",
"info": "[Front-End](/moon)\n\n## Configuration\n\nInstall MoonJS via the nodes configuration panel.\n\nThen update the files:\n\n* `index.html`\n* `index.js`\n\nAccording to the MoonJS example(s) in the \n[WIKI](https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Example,-MoonJS-with-Mini.CSS)\nwhich are also included in the 2 other comment nodes in this example.",
"x": 340,
"y": 2400,
"wires": []
},
{
"id": "16148a4e.0fdde6",
"type": "comment",
"z": "63281c77.40a064",
"name": "index.html",
"info": "<!doctype html>\n<html lang=\"en\"><head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta name=\"viewport\" content=\"width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes\">\n\n <title>MoonJS uibuilder Example</title>\n <meta name=\"description\" content=\"Node-RED uibuilder example using MoonJS\">\n\n <link rel=\"icon\" href=\"images/node-blue.ico\">\n\n <link rel=\"stylesheet\" href=\"https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css\">\n <link rel=\"stylesheet\" href=\"./index.css\" media=\"all\">\n\n</head><body>\n <div class=\"container\" id=\"app\">\n <header class=\"sticky row\">\n <div class=\"col-sm col-md-10 col-md-offset-1\">\n <span class=\"logo\">UIbuilder + Moon + Mini.css for Node-RED</span>\n </div>\n </header>\n <div class=\"row\">\n <p class=\"col-sm-12 col-md-10 col-md-offset-1\">\n This is a uibuilder test using <a href=\"https://kbrsh.github.io/moon/\">Moon.JS</a> as a front-end library.\n See the\n <a href=\"https://github.com/TotallyInformation/node-red-contrib-uibuilder\">node-red-contrib-uibuilder</a>\n README for details on how to use UIbuilder.\n </p>\n <div class=\"col-sm-12 col-md-10 col-md-offset-1 bordered rounded\">\n\n <h2>Dynamic Data (via Moon)</h2>\n\n <p>UIBuilder Front-End Version: {{feVersion}}</p>\n <p>Websocket State: {{socketConnectedState}}</p>\n <p>\n Messages: Received={{msgsReceived}}, Sent: {{msgsSent}}\n </p>\n <p>\n Control Messages Received: {{msgsControl}}, Msg: {{hMsgCtrl}}\n </p>\n <h2>Simple input using Moon</h2>\n <p><input class=\"input\" type=\"text\" m-model=\"inputText\"></p>\n <p><button class=\"primary shadowed\" m-on:click=\"increment\">Increment & Send</button> Click Counter: {{counterBtn}}. Click on the button to increment, it sends the data back to Node-RED as well.</p>\n </div>\n </div>\n <div class=\"row\">\n <h2 class=\"col-sm-12 col-md-10 col-md-offset-1\" >Input and Output Messages</h2>\n <pre class=\"col-sm-12 col-md-5 col-md-offset-1\" m-html=\"hLastRcvd\"></pre>\n <pre class=\"col-sm-12 col-md-5\" m-html=\"hLastSent\"></pre>\n </div>\n <footer class=\"row\">\n <div class=\"col-sm-12 col-md-10 col-md-offset-1\">\n Copyright © Julian Knight 2019 | Content generated by Node-RED and MoonJS\n </div>\n </footer>\n </div>\n\n <!-- These MUST be in the right order. Note no leading / -->\n <script src=\"../uibuilder/vendor/socket.io/socket.io.js\"></script>\n <script src=\"../uibuilder/vendor/moonjs/dist/moon.min.js\"></script> <!-- //prod version -->\n <!-- <script src=\"../uibuilder/vendor/moonjs/dist/moon.js\"></script> //dev version -->\n <!-- <script src=\"./uibuilderfe.js\"></script> //dev version -->\n <script src=\"./uibuilderfe.min.js\"></script> <!-- //prod version -->\n <!-- OPTIONAL: You probably want this. Put your custom code here -->\n <script src=\"./index.js\"></script>\n\n</body></html>\n",
"x": 560,
"y": 2400,
"wires": [],
"icon": "node-red/parser-html.svg"
},
{
"id": "b05ea2b7.8edff",
"type": "comment",
"z": "63281c77.40a064",
"name": "index.js",
"info": "/* jshint browser: true, esversion: 5, asi: true */\n/*globals Moon, uibuilder */\n// @ts-nocheck\n/*\n Copyright (c) 2019 Julian Knight (Totally Information)\n\n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this file except in compliance with the License.\n You may obtain a copy of the License at\n\n http://www.apache.org/licenses/LICENSE-2.0\n\n Unless required by applicable law or agreed to in writing, software\n distributed under the License is distributed on an \"AS IS\" BASIS,\n WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n See the License for the specific language governing permissions and\n limitations under the License.\n*/\n'use strict'\n\n/** @see https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/Front-End-Library---available-properties-and-methods */\n\n// Attach a Moon instance to html element with id \"app\"\nconst app1 = new Moon({\n el: '#app',\n data: {\n startMsg : 'Moon has started, waiting for messages',\n feVersion : '',\n counterBtn : 0,\n msgsReceived: 0,\n msgsControl : 0,\n msgsSent : 0,\n msgRecvd : '[Nothing]',\n msgSent : '[Nothing]',\n msgCtrl : '[Nothing]',\n inputText : ''\n }, // --- End of data --- //\n computed: {\n hLastRcvd: {\n get: function() {\n const msgRecvd = this.get('msgRecvd')\n if (typeof msgRecvd === 'string') return 'Last Message Received = ' + msgRecvd\n else return 'Last Message Received = ' + this.callMethod('syntaxHighlight', [msgRecvd])\n }\n },\n hLastSent: {\n get: function() {\n const msgSent = this.get('msgSent')\n if (typeof msgSent === 'string') return 'Last Message Sent = ' + msgSent\n else return 'Last Message Sent = ' + this.callMethod('syntaxHighlight', [msgSent])\n }\n },\n hMsgCtrl: {\n get: function() {\n const msgCtrl = this.get('msgCtrl')\n if (typeof msgCtrl === 'string') return 'Last Message Sent = ' + msgCtrl\n //else return 'Last Message Sent = ' + this.callMethod('syntaxHighlight', [msgCtrl])\n else return 'Last Message Sent = ' + JSON.stringify(msgCtrl)\n }\n }\n }, // --- End of computed --- //\n methods: {\n increment: function() {\n // Increment the count by one\n this.set('counterBtn', this.get('counterBtn') + 1)\n let topic = (this.get('msgRecvd')).topic || 'uibuilder/moon'\n uibuilder.send( { 'topic': topic, 'payload': { 'type': 'counterBtn', 'btnCount': this.get('counterBtn'), 'message': this.get('inputText') } } )\n },\n // return formatted HTML version of JSON object\n syntaxHighlight: function(json) {\n json = JSON.stringify(json, undefined, 4)\n json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');\n return json.replace(/(\"(\\\\u[a-zA-Z0-9]{4}|\\\\[^u]|[^\\\\\"])*\"(\\s*:)?|\\b(true|false|null)\\b|-?\\d+(?:\\.\\d*)?(?:[eE][+\\-]?\\d+)?)/g, function (match) {\n var cls = 'number'\n if (/^\"/.test(match)) {\n if (/:$/.test(match)) {\n cls = 'key'\n } else {\n cls = 'string'\n }\n } else if (/true|false/.test(match)) {\n cls = 'boolean'\n } else if (/null/.test(match)) {\n cls = 'null'\n }\n return '<span class=\"' + cls + '\">' + match + '</span>'\n })\n } // --- End of syntaxHighlight --- //\n }, // --- End of methods --- //\n hooks: { // Available hooks: init,mounted,updated,destroyed\n\n mounted: function(){\n console.debug('app mounted - setting up uibuilder watchers')\n\n /** **REQUIRED** Start uibuilder comms with Node-RED @since v2.0.0-dev3\n * Pass the namespace and ioPath variables if hosting page is not in the instance root folder\n * e.g. If you get continual `uibuilderfe:ioSetup: SOCKET CONNECT ERROR` error messages.\n * e.g. uibuilder.start('/nr/uib', '/nr/uibuilder/vendor/socket.io') // change to use your paths/names\n */\n uibuilder.start()\n\n this.set( 'feVersion', uibuilder.get('version'))\n\n // If msg changes - msg is updated when a standard msg is received from Node-RED over Socket.IO\n // Note that you can also listen for 'msgsReceived' as they are updated at the same time\n // but newVal relates to the attribute being listened to.\n uibuilder.onChange('msg', function(newVal){\n console.info('property msg changed!', newVal)\n app1.set( 'msgRecvd', newVal)\n })\n // As noted, we could get the msg here too\n uibuilder.onChange('msgsReceived', function(newVal){\n console.info('New msg sent FROM Node-RED over Socket.IO. Total Count: ', newVal)\n app1.set( 'msgsReceived', newVal)\n })\n\n\n // If a message is sent back to Node-RED\n uibuilder.onChange('sentMsg', function(newVal){\n console.info('property sentMsg changed!', newVal)\n app1.set( 'msgSent', newVal)\n })\n uibuilder.onChange('msgsSent', function(newVal){\n console.info('New msg sent TO Node-RED over Socket.IO. Total Count: ', newVal)\n app1.set('msgsSent', newVal )\n })\n\n\n // If we receive a control message from Node-RED\n uibuilder.onChange('ctrlMsg', function(newVal){\n console.info('property msgCtrl changed!', newVal)\n app1.set( 'msgCtrl', newVal)\n })\n uibuilder.onChange('msgsCtrl', function(newVal){\n console.info('New CONTROL msg sent FROM Node-RED over Socket.IO. Total Count: ', newVal)\n app1.set('msgsControl', newVal )\n })\n\n // If Socket.IO connects/disconnects\n uibuilder.onChange('ioConnected', function(newVal){\n console.info('Socket.IO Connection Status Changed: ', newVal)\n app1.set('socketConnectedState', newVal )\n })\n\n } // --- End of mounted hook --- //\n } // --- End of hooks --- //\n}) // --- End of app1 --- //\n\n// EOF\n",
"x": 690,
"y": 2400,
"wires": [],
"icon": "font-awesome/fa-code"
}
]