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.

totallyinformation.github.io/node-red-contrib-uibuilder/

TotallyInformation/node-red-contrib-uibuilder

384 lines (383 loc) • 12.7 kB

JSON

[ { "id": "2d368cb9c96bdff7", "type": "group", "z": "ff9704678e3a4b61", "name": "UIBUILDER \"simple\" example (Updated: 2024-067-01)", "style": { "fill": "#ffffff", "fill-opacity": "0.21", "label": true, "color": "#000000" }, "nodes": [ "116a78405410289c", "fa042ed296e9de80", "bb3b15c09b085da2", "7845085b17f1686b", "054d34fec0aa457b", "cef55ea2491d8024", "3e4c1bb1d26f20ce", "5a5653fbb5559e32" ], "x": 54, "y": 339, "w": 972, "h": 388 }, { "id": "116a78405410289c", "type": "comment", "z": "ff9704678e3a4b61", "g": "2d368cb9c96bdff7", "name": "Quote of the Day example. (READ ME FIRST!)", "info": "This flow gets a \"quote of the day\" from the Internet and passes it\nto uibuilder. It caches the result so that if you reload the page,\nyou get the last result back. The quote is updated every 30 minutes\nduring the day and evening.\n\n\"Simple\" refers to the front-end code. While the flow looks a little\ncomplex, it really isn't. On the Node-RED server side: A trigger, an Internet request,\nand uibuilder. On the client browser side: A well-formatted HTML blockquote, a simple\nfunction that updates the UI and a function that listens to messages from Node-RED,\nand finally some really simple CSS for formatting.\n\n## Configuration\n\n1. Give the uibuilder node a url name.\n2. Deploy.\n3. Change the selected uibuilder node in the uib-save node.\n4. Deploy again.\n5. Update the front-end code files by running the sub-group. This updates index.(html|js|css).\n6. Deploy again.\n\nPress the button on the trigger named \"getQuote\" to start the flow.", "x": 260, "y": 380, "wires": [] }, { "id": "fa042ed296e9de80", "type": "debug", "z": "ff9704678e3a4b61", "g": "2d368cb9c96bdff7", "name": "simple-debug", "active": false, "tosidebar": true, "console": false, "tostatus": false, "complete": "true", "targetType": "full", "x": 900, "y": 420, "wires": [] }, { "id": "bb3b15c09b085da2", "type": "uibuilder", "z": "ff9704678e3a4b61", "g": "2d368cb9c96bdff7", "name": "Simple Example", "topic": "", "url": "uib-simple-example", "okToGo": true, "fwdInMessages": false, "allowScripts": false, "allowStyles": false, "copyIndex": true, "templateFolder": "blank", "extTemplate": "", "showfolder": false, "reload": true, "sourceFolder": "src", "deployedVersion": "6.1.0-beta", "showMsgUib": true, "x": 630, "y": 440, "wires": [ [ "fa042ed296e9de80" ], [ "054d34fec0aa457b" ] ] }, { "id": "7845085b17f1686b", "type": "inject", "z": "ff9704678e3a4b61", "g": "2d368cb9c96bdff7", "name": "", "props": [ { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": "", "topic": "getQuote", "x": 160, "y": 440, "wires": [ [ "3e4c1bb1d26f20ce" ] ] }, { "id": "054d34fec0aa457b", "type": "debug", "z": "ff9704678e3a4b61", "g": "2d368cb9c96bdff7", "name": "uib controls", "active": false, "tosidebar": true, "console": false, "tostatus": false, "complete": "true", "targetType": "full", "x": 890, "y": 460, "wires": [] }, { "id": "cef55ea2491d8024", "type": "debug", "z": "ff9704678e3a4b61", "d": true, "g": "2d368cb9c96bdff7", "name": "qotd-debug", "active": false, "tosidebar": true, "console": false, "tostatus": false, "complete": "true", "targetType": "full", "statusVal": "", "statusType": "auto", "x": 550, "y": 500, "wires": [] }, { "id": "3e4c1bb1d26f20ce", "type": "http request", "z": "ff9704678e3a4b61", "g": "2d368cb9c96bdff7", "name": "Quote of the day", "method": "GET", "ret": "obj", "paytoqs": false, "url": "https://favqs.com/api/qotd", "tls": "", "persist": false, "proxy": "", "authType": "", "x": 330, "y": 440, "wires": [ [ "bb3b15c09b085da2", "cef55ea2491d8024" ] ] }, { "id": "5a5653fbb5559e32", "type": "group", "z": "ff9704678e3a4b61", "g": "2d368cb9c96bdff7", "name": "Run this to update the front-end code files (after setting the uibuilder url name)", "style": { "fill": "#ffffff", "fill-opacity": "0.31", "label": true, "color": "#000000" }, "nodes": [ "55abd225ad81d743", "490d3439c60c1b7a", "c1d742d7201e9392", "73dc5646a81ea558", "46757650f470b5bd", "85c41b050ea3a3de", "e26eb52f5db65966", "d7be075fdea36b47" ], "x": 84, "y": 539, "w": 652, "h": 162 }, { "id": "55abd225ad81d743", "type": "inject", "z": "ff9704678e3a4b61", "g": "5a5653fbb5559e32", "name": "", "props": [], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "x": 145, "y": 620, "wires": [ [ "73dc5646a81ea558", "46757650f470b5bd", "e26eb52f5db65966" ] ], "l": false }, { "id": "490d3439c60c1b7a", "type": "template", "z": "ff9704678e3a4b61", "g": "5a5653fbb5559e32", "name": "", "field": "payload", "fieldType": "msg", "format": "html", "syntax": "mustache", "template": "<!doctype html>\n<html lang=\"en\"><head>\n <meta charset=\"utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n\n <title>Quote of the day - Node-RED UIBUILDER</title>\n <meta name=\"description\" content=\"Node-RED UIBUILDER - Quote of the day\">\n <link rel=\"icon\" href=\"./images/node-blue.ico\">\n\n \n <link type=\"text/css\" rel=\"stylesheet\" href=\"./index.css\" media=\"all\">\n\n \n <script defer src=\"../uibuilder/uibuilder.iife.min.js\"></script>\n <script defer src=\"./index.js\"></script>\n \n</head><body>\n <h1>UIBUILDER example: Get and view a Quote of the Day</h1>\n <div role=\"doc-subtitle\">Using the UIBUILDER IIFE library. No framework used.</div>\n \n\n <div id=\"more\"></div>\n\n <blockquote id=\"quote\">\n \n <q id=\"quoteText\">No quote received yet.</q>\n <cite id=\"quoteAuthor\"></cite>\n </blockquote>\n</body></html>", "output": "str", "x": 420, "y": 580, "wires": [ [ "c1d742d7201e9392" ] ] }, { "id": "c1d742d7201e9392", "type": "uib-save", "z": "ff9704678e3a4b61", "g": "5a5653fbb5559e32", "url": "uib-simple-example", "uibId": "bb3b15c09b085da2", "folder": "src", "fname": "", "createFolder": false, "reload": false, "usePageName": false, "encoding": "utf8", "mode": 438, "name": "", "topic": "", "x": 620, "y": 620, "wires": [] }, { "id": "73dc5646a81ea558", "type": "change", "z": "ff9704678e3a4b61", "g": "5a5653fbb5559e32", "name": "index.html", "rules": [ { "t": "set", "p": "fname", "pt": "msg", "to": "index.html", "tot": "str" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 270, "y": 580, "wires": [ [ "490d3439c60c1b7a" ] ] }, { "id": "46757650f470b5bd", "type": "change", "z": "ff9704678e3a4b61", "g": "5a5653fbb5559e32", "name": "index.js", "rules": [ { "t": "set", "p": "fname", "pt": "msg", "to": "index.js", "tot": "str" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 260, "y": 620, "wires": [ [ "85c41b050ea3a3de" ] ] }, { "id": "85c41b050ea3a3de", "type": "template", "z": "ff9704678e3a4b61", "g": "5a5653fbb5559e32", "name": "", "field": "payload", "fieldType": "msg", "format": "javascript", "syntax": "mustache", "template": "// @ts-nocheck\n\n/** Example of using the IIFE build of the uibuilder client library\n * Note that uibuilder.start() should no longer be needed.\n * See the documentation if the client doesn't start on its own.\n */\n'use strict'\n\n// Update the quote\nfunction updQuote(quote) {\n // Update the quote\n $('#quoteText').innerText = quote.body\n // and the author\n $('#quoteAuthor').innerText = quote.author\n // And the overall quote citation\n $('#quote').setAttribute('cite', quote.url)\n}\n\n// Listen for incoming messages from Node-RED\nuibuilder.onChange('msg', function (msg) {\n // Make sure we only process quotes and ignore other messages.\n // Generally sensible to filter like this.\n if (msg.topic === 'getQuote') updQuote(msg.payload.quote)\n})\n", "output": "str", "x": 420, "y": 620, "wires": [ [ "c1d742d7201e9392" ] ] }, { "id": "e26eb52f5db65966", "type": "change", "z": "ff9704678e3a4b61", "g": "5a5653fbb5559e32", "name": "index.css", "rules": [ { "t": "set", "p": "fname", "pt": "msg", "to": "index.css", "tot": "str" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 260, "y": 660, "wires": [ [ "d7be075fdea36b47" ] ] }, { "id": "d7be075fdea36b47", "type": "template", "z": "ff9704678e3a4b61", "g": "5a5653fbb5559e32", "name": "", "field": "payload", "fieldType": "msg", "format": "css", "syntax": "mustache", "template": "/* Load defaults from `<userDir>/node_modules/node-red-contrib-uibuilder/front-end/uib-brand.css`\n * This version auto-adjusts for light/dark browser settings but might not be as complete.\n */\n@import url(\"./uib-brand.css\");\n\n/* OR, load the defaults from the older `<userDir>/node_modules/node-red-contrib-uibuilder/front-end/uib-styles.css` */\n/* @import url(\"./uib-styles.css\"); */\n\n/* Formate the quote of the day */\n#quote {\n background-color: beige;\n color: black;\n padding: 1rem;\n}\n\n#quoteText {\n font-style: italic;\n font-size: larger;\n}\n\n#quoteAuthor {\n display: block;\n font-style: normal\n}\n", "output": "str", "x": 420, "y": 660, "wires": [ [ "c1d742d7201e9392" ] ] } ]