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.
1,267 lines (1,266 loc) • 34.4 kB
JSON
[
{
"id": "56443195ea782ac2",
"type": "tab",
"label": "Client Cmds",
"disabled": false,
"info": "Demonstrates and tests uibuilder client\r\ncommands sent from Node-RED.",
"env": []
},
{
"id": "5d9e25e34533c465",
"type": "group",
"z": "56443195ea782ac2",
"name": "uib commands - issues to all connected pages \\n ",
"style": {
"stroke": "#777777",
"label": true,
"color": "#000000",
"fill": "#ffffff",
"fill-opacity": "0.2"
},
"nodes": [
"b34ceaa60b79bc3a",
"00de39fae10f15e6",
"4a13f941904a122b",
"0f067d8c7209ff9c",
"1c068daa3a77bdb4",
"1db4309a628d785c",
"abc43c01d88f7a05",
"8eef4c98c396d83a",
"16010315c365626a"
],
"x": 34,
"y": 423,
"w": 392,
"h": 378
},
{
"id": "e25baed2b1efe9a7",
"type": "group",
"z": "56443195ea782ac2",
"name": "Test Data \\n ",
"style": {
"fill": "#bfdbef",
"fill-opacity": "0.21",
"label": true,
"color": "#000000"
},
"nodes": [
"1d1f5b0d55f6a646",
"463baba887b1ba54",
"3bacf340a18a123b",
"f21cb178c880c38c",
"d342da6a1fd7fe1c",
"dd0f91438befda74",
"3765cd6597296c35",
"3a2598858575dc41",
"5d8f7e2a251f57b2",
"bc2b5cbcae309807"
],
"x": 454,
"y": 423,
"w": 552,
"h": 258
},
{
"id": "5f79bf4a4f4f3f36",
"type": "group",
"z": "56443195ea782ac2",
"name": "uibuilder client Test Page \\n ",
"style": {
"fill": "#dbcbe7",
"fill-opacity": "0.2",
"label": true,
"color": "#000000"
},
"nodes": [
"7c8adbf5b52fc611",
"501e49abf6e5a607",
"618c5774773d9086",
"6f4dfd051ff2cf83",
"dea4924479704c6e",
"75e04dbce19bc0e1",
"fd14560e7aa0f275",
"472ff48730d1b698",
"32f6056e316798bf",
"363f0c47148e997e",
"3b043396fab746f0",
"65dffaaedb01010f"
],
"x": 34,
"y": 43,
"w": 782,
"h": 238
},
{
"id": "e0a48c7ef200ea29",
"type": "group",
"z": "56443195ea782ac2",
"name": "More uib commands: Include external files of different types \\n Place files in the same folder as your index.html file or use any URL \\n ",
"style": {
"label": true,
"color": "#000000",
"fill": "#bfc7d7",
"fill-opacity": "0.26"
},
"nodes": [
"2ff102b3f7bbbad6",
"4ce1fc8c40ccbf7d",
"fa7f8d5ddcbdd7ac",
"82e8db6decd2dd1b",
"57905e02bd2658d4",
"88db38578e24a526",
"ef5602ddf9f7422d",
"f83742762fb77e58",
"810b9dd6a392018c"
],
"x": 34,
"y": 847,
"w": 427,
"h": 394
},
{
"id": "a788bb7b3bb7e959",
"type": "group",
"z": "56443195ea782ac2",
"name": "Initialise the page & cache on startup \\n ",
"style": {
"fill": "#e3f3d3",
"fill-opacity": "0.18",
"label": true,
"color": "#000000"
},
"nodes": [
"4b29103fb972307d",
"16cdac4094403b45",
"f078cbb95b319197",
"911214c9aa6fdbb0",
"6416796b98c7bc07"
],
"x": 34,
"y": 303,
"w": 752,
"h": 98
},
{
"id": "75e04dbce19bc0e1",
"type": "junction",
"z": "56443195ea782ac2",
"g": "5f79bf4a4f4f3f36",
"x": 360,
"y": 140,
"wires": [
[
"7c8adbf5b52fc611"
]
]
},
{
"id": "363f0c47148e997e",
"type": "junction",
"z": "56443195ea782ac2",
"g": "5f79bf4a4f4f3f36",
"x": 720,
"y": 180,
"wires": [
[
"618c5774773d9086"
]
]
},
{
"id": "7c8adbf5b52fc611",
"type": "uibuilder",
"z": "56443195ea782ac2",
"g": "5f79bf4a4f4f3f36",
"name": "",
"topic": "",
"url": "iife-client-tests",
"fwdInMessages": false,
"allowScripts": false,
"allowStyles": false,
"copyIndex": true,
"templateFolder": "blank",
"extTemplate": "",
"showfolder": false,
"reload": true,
"sourceFolder": "src",
"deployedVersion": "6.1.0",
"showMsgUib": true,
"x": 530,
"y": 160,
"wires": [
[
"501e49abf6e5a607"
],
[
"32f6056e316798bf",
"363f0c47148e997e"
]
],
"info": "This example uses a blank template with\r\nthe IIFE build of the front-end client.\r\n\r\nIt does not use any front-end framework, just\r\npure HTML, CSS and JavaScript.\r\n\r\nThe IIFE build should be included using a link\r\ntag in your HTML."
},
{
"id": "501e49abf6e5a607",
"type": "debug",
"z": "56443195ea782ac2",
"g": "5f79bf4a4f4f3f36",
"name": "uibuilder standard output",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": true,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "counter",
"x": 695,
"y": 120,
"wires": [],
"l": false,
"info": "This shows the data coming out of the\r\nuibuilder node's Port #1 (top) which is\r\nthe standard output.\r\n\r\nHere you will see any standard msg sent from\r\nyour front-end code."
},
{
"id": "618c5774773d9086",
"type": "debug",
"z": "56443195ea782ac2",
"g": "5f79bf4a4f4f3f36",
"name": "uibuilder control output",
"active": false,
"tosidebar": true,
"console": false,
"tostatus": true,
"complete": "true",
"targetType": "full",
"statusVal": "",
"statusType": "counter",
"x": 755,
"y": 200,
"wires": [],
"l": false,
"info": "This shows the data coming out of the\r\nuibuilder node's Port #2 (bottom) which is\r\nthe control output.\r\n\r\nHere you will see any control msg either sent\r\nby the node itself or from the front-end library.\r\n\r\nFor example the \"client disconnect\" and\r\n\"client connect\" messages. Or the \"visibility\"\r\nmessages from the client.\r\n\r\nLoop the \"client connect\", \"cache replay\" and\r\n\"cache clear\" messages back to a `uib-cache`\r\nnode before the input to uibuilder in order\r\nto control the output of the cache."
},
{
"id": "6f4dfd051ff2cf83",
"type": "comment",
"z": "56443195ea782ac2",
"g": "5f79bf4a4f4f3f36",
"name": "Chk Description in each node",
"info": "",
"x": 480,
"y": 100,
"wires": []
},
{
"id": "dea4924479704c6e",
"type": "link in",
"z": "56443195ea782ac2",
"g": "5f79bf4a4f4f3f36",
"name": "uib-client-tests-uncached",
"links": [
"16010315c365626a",
"1d1f5b0d55f6a646",
"4ce1fc8c40ccbf7d",
"81158a3cb7a12342",
"b7f66bb3aee49f18",
"1c433aa390e1bc8c"
],
"x": 205,
"y": 140,
"wires": [
[
"75e04dbce19bc0e1"
]
]
},
{
"id": "1d1f5b0d55f6a646",
"type": "link out",
"z": "56443195ea782ac2",
"g": "e25baed2b1efe9a7",
"name": "link out 13",
"mode": "link",
"links": [
"dea4924479704c6e"
],
"x": 965,
"y": 480,
"wires": []
},
{
"id": "b34ceaa60b79bc3a",
"type": "inject",
"z": "56443195ea782ac2",
"g": "5d9e25e34533c465",
"name": "Toggle Visible Msgs",
"props": [
{
"p": "_uib",
"v": "{\"command\":\"showMsg\",\"prop\":\"body\"}",
"vt": "json"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 190,
"y": 480,
"wires": [
[
"16010315c365626a"
]
],
"info": "Change the \"prop\" value to a CSS Selector.\r\n\r\nThe display will appear as the last child of\r\nthat selected element.\r\n\r\ne.g. `body` or `#more`."
},
{
"id": "00de39fae10f15e6",
"type": "inject",
"z": "56443195ea782ac2",
"g": "5d9e25e34533c465",
"name": "Toggle Visible Status",
"props": [
{
"p": "_uib",
"v": "{\"command\":\"showStatus\",\"prop\":\"body\"}",
"vt": "json"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 190,
"y": 520,
"wires": [
[
"16010315c365626a"
]
],
"info": "Change the \"prop\" value to a CSS Selector.\r\n\r\nThe display will appear as the last child of\r\nthat selected element.\r\n\r\ne.g. `body` or `#more`."
},
{
"id": "4a13f941904a122b",
"type": "inject",
"z": "56443195ea782ac2",
"g": "5d9e25e34533c465",
"name": "SET Client Log Level 5",
"props": [
{
"p": "_uib",
"v": "{\"command\":\"set\",\"prop\":\"logLevel\",\"value\":5}",
"vt": "json"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 180,
"y": 560,
"wires": [
[
"16010315c365626a"
]
]
},
{
"id": "0f067d8c7209ff9c",
"type": "inject",
"z": "56443195ea782ac2",
"g": "5d9e25e34533c465",
"name": "SET Client Log Level 0",
"props": [
{
"p": "_uib",
"v": "{\"command\":\"set\",\"prop\":\"logLevel\",\"value\":0}",
"vt": "json"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 180,
"y": 600,
"wires": [
[
"16010315c365626a"
]
]
},
{
"id": "1c068daa3a77bdb4",
"type": "inject",
"z": "56443195ea782ac2",
"g": "5d9e25e34533c465",
"name": "GET client version var",
"props": [
{
"p": "_uib",
"v": "{\"command\":\"get\",\"prop\":\"version\"}",
"vt": "json"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 180,
"y": 640,
"wires": [
[
"16010315c365626a"
]
]
},
{
"id": "463baba887b1ba54",
"type": "uib-update",
"z": "56443195ea782ac2",
"g": "e25baed2b1efe9a7",
"name": "",
"topic": "",
"mode": "update",
"modeSourceType": "update",
"cssSelector": "#more",
"cssSelectorType": "str",
"slotSourceProp": "\"Chunga! \" & \t$formatInteger($random() * 100, \"0\")\t",
"slotSourcePropType": "jsonata",
"attribsSource": "{\t \"style\": \"background-color: rgb(\" & $random() * 200 & \",\" & $random() * 200 & \",\" & $random() * 200 & \");\"\t}",
"attribsSourceType": "jsonata",
"slotPropMarkdown": false,
"x": 780,
"y": 480,
"wires": [
[
"1d1f5b0d55f6a646"
]
]
},
{
"id": "3bacf340a18a123b",
"type": "inject",
"z": "56443195ea782ac2",
"g": "e25baed2b1efe9a7",
"name": "",
"props": [],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 635,
"y": 480,
"wires": [
[
"463baba887b1ba54"
]
],
"l": false
},
{
"id": "f21cb178c880c38c",
"type": "uib-element",
"z": "56443195ea782ac2",
"g": "e25baed2b1efe9a7",
"name": "",
"topic": "",
"elementtype": "ul",
"parent": "#more",
"parentSource": "",
"parentSourceType": "str",
"elementid": "more-ol",
"elementId": "",
"elementIdSourceType": "str",
"heading": "",
"headingSourceType": "str",
"headingLevel": "h2",
"position": "last",
"positionSourceType": "str",
"confData": {},
"x": 770,
"y": 520,
"wires": [
[
"1d1f5b0d55f6a646"
]
]
},
{
"id": "d342da6a1fd7fe1c",
"type": "inject",
"z": "56443195ea782ac2",
"g": "e25baed2b1efe9a7",
"name": "",
"props": [
{
"p": "payload"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "[\"one\",\"two\",\"three\"]",
"payloadType": "json",
"x": 625,
"y": 520,
"wires": [
[
"f21cb178c880c38c"
]
],
"l": false
},
{
"id": "dd0f91438befda74",
"type": "inject",
"z": "56443195ea782ac2",
"g": "e25baed2b1efe9a7",
"name": "",
"props": [
{
"p": "payload"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "\"LI with random: \" & $formatInteger($random() * 255, \"0\")\t",
"payloadType": "jsonata",
"x": 585,
"y": 560,
"wires": [
[
"3765cd6597296c35"
]
],
"l": false
},
{
"id": "3765cd6597296c35",
"type": "uib-element",
"z": "56443195ea782ac2",
"g": "e25baed2b1efe9a7",
"name": "",
"topic": "",
"elementtype": "li",
"parent": "#more-ol",
"parentSource": "",
"parentSourceType": "str",
"elementid": "",
"elementId": "",
"elementIdSourceType": "str",
"heading": "",
"headingSourceType": "str",
"headingLevel": "h2",
"position": "2",
"positionSourceType": "str",
"confData": {},
"x": 750,
"y": 560,
"wires": [
[
"1d1f5b0d55f6a646"
]
]
},
{
"id": "3a2598858575dc41",
"type": "inject",
"z": "56443195ea782ac2",
"g": "e25baed2b1efe9a7",
"name": "",
"props": [
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "sform1",
"payload": "[{\"id\":\"r1\",\"type\":\"text\",\"required\":false,\"label\":\"Text Input:\",\"value\":\"Foo\"},{\"id\":\"r2\",\"type\":\"color\",\"required\":false,\"label\":\"Colour:\",\"value\":\"#427798\"},{\"id\":\"r3\",\"type\":\"date\",\"required\":true,\"label\":\"Date:\"},{\"id\":\"r4\",\"type\":\"range\",\"required\":false,\"label\":\"Range (0-100):\",\"value\":\"20\",\"min\":0,\"max\":100},{\"id\":\"r5\",\"type\":\"button\",\"label\":\"Send to Node-RED\",\"value\":\"Buttons can have values as well\"}]",
"payloadType": "json",
"x": 570,
"y": 600,
"wires": [
[
"5d8f7e2a251f57b2"
]
]
},
{
"id": "5d8f7e2a251f57b2",
"type": "uib-element",
"z": "56443195ea782ac2",
"g": "e25baed2b1efe9a7",
"name": "",
"topic": "",
"elementtype": "sform",
"parent": "#more",
"parentSource": "",
"parentSourceType": "str",
"elementid": "sform1",
"elementId": "",
"elementIdSourceType": "str",
"heading": "",
"headingSourceType": "str",
"headingLevel": "h2",
"position": "last",
"positionSourceType": "str",
"confData": {},
"x": 760,
"y": 600,
"wires": [
[
"1d1f5b0d55f6a646"
]
]
},
{
"id": "bc2b5cbcae309807",
"type": "inject",
"z": "56443195ea782ac2",
"g": "e25baed2b1efe9a7",
"name": "Remove",
"props": [
{
"p": "mode",
"v": "remove",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 560,
"y": 640,
"wires": [
[
"5d8f7e2a251f57b2"
]
]
},
{
"id": "1db4309a628d785c",
"type": "inject",
"z": "56443195ea782ac2",
"g": "5d9e25e34533c465",
"name": "uiGet #more",
"props": [
{
"p": "_uib",
"v": "{\"command\":\"uiGet\",\"prop\":\"#more\"}",
"vt": "json"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 210,
"y": 680,
"wires": [
[
"16010315c365626a"
]
]
},
{
"id": "abc43c01d88f7a05",
"type": "inject",
"z": "56443195ea782ac2",
"g": "5d9e25e34533c465",
"name": "htmlSend",
"props": [
{
"p": "_uib",
"v": "{\"command\":\"htmlSend\"}",
"vt": "json"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 220,
"y": 720,
"wires": [
[
"16010315c365626a"
]
]
},
{
"id": "8eef4c98c396d83a",
"type": "inject",
"z": "56443195ea782ac2",
"g": "5d9e25e34533c465",
"name": "uiWatch #more (toggle)",
"props": [
{
"p": "_uib",
"v": "{\"command\":\"uiWatch\",\"prop\":\"#more\"}",
"vt": "json"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 180,
"y": 760,
"wires": [
[
"16010315c365626a"
]
]
},
{
"id": "16010315c365626a",
"type": "link out",
"z": "56443195ea782ac2",
"g": "5d9e25e34533c465",
"name": "link out 32",
"mode": "link",
"links": [
"dea4924479704c6e"
],
"x": 385,
"y": 600,
"wires": []
},
{
"id": "2ff102b3f7bbbad6",
"type": "inject",
"z": "56443195ea782ac2",
"g": "e0a48c7ef200ea29",
"name": "",
"props": [
{
"p": "_uib",
"v": "{\"command\":\"include\",\"prop\":\"./test.html\",\"value\":{\"id\":\"incHtm\",\"parent\":\"#more\",\"attributes\":{\"style\":\"width:50%;\"}}}",
"vt": "json"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "include-HMTL-file",
"x": 170,
"y": 920,
"wires": [
[
"4ce1fc8c40ccbf7d"
]
]
},
{
"id": "4ce1fc8c40ccbf7d",
"type": "link out",
"z": "56443195ea782ac2",
"g": "e0a48c7ef200ea29",
"name": "link out 37",
"mode": "link",
"links": [
"dea4924479704c6e"
],
"x": 335,
"y": 1060,
"wires": []
},
{
"id": "fa7f8d5ddcbdd7ac",
"type": "inject",
"z": "56443195ea782ac2",
"g": "e0a48c7ef200ea29",
"name": "",
"props": [
{
"p": "_uib",
"v": "{\"command\":\"include\",\"prop\":\"./test.txt\",\"value\":{\"id\":\"incTxt\",\"parent\":\"#more\", \"position\": 1}}",
"vt": "json"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "include-text-file",
"x": 180,
"y": 1120,
"wires": [
[
"4ce1fc8c40ccbf7d"
]
]
},
{
"id": "82e8db6decd2dd1b",
"type": "inject",
"z": "56443195ea782ac2",
"g": "e0a48c7ef200ea29",
"name": "",
"props": [
{
"p": "_uib",
"v": "{\"command\":\"include\",\"prop\":\"./SmallCat.jpg\",\"value\":{\"id\":\"incImg\",\"parent\":\"#more\",\"attributes\":{\"style\":\"width:10em;\"}}}",
"vt": "json"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "include-jpg-file",
"x": 180,
"y": 1000,
"wires": [
[
"4ce1fc8c40ccbf7d"
]
]
},
{
"id": "57905e02bd2658d4",
"type": "inject",
"z": "56443195ea782ac2",
"g": "e0a48c7ef200ea29",
"name": "",
"props": [
{
"p": "_uib",
"v": "{\"command\":\"include\",\"prop\":\"./flower.mp4\",\"value\":{\"id\":\"incVid\",\"parent\":\"#more\",\"attributes\":{\"style\":\"width:50%;\"}}}",
"vt": "json"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "include-vid-file",
"x": 180,
"y": 1080,
"wires": [
[
"4ce1fc8c40ccbf7d"
]
]
},
{
"id": "88db38578e24a526",
"type": "inject",
"z": "56443195ea782ac2",
"g": "e0a48c7ef200ea29",
"name": "",
"props": [
{
"p": "_uib",
"v": "{\"command\":\"include\",\"prop\":\"./apple.svg\",\"value\":{\"id\":\"incImg\",\"parent\":\"#more\",\"attributes\":{\"style\":\"width:10em;\"}}}",
"vt": "json"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "include-svg-file",
"x": 180,
"y": 1040,
"wires": [
[
"4ce1fc8c40ccbf7d"
]
]
},
{
"id": "ef5602ddf9f7422d",
"type": "inject",
"z": "56443195ea782ac2",
"g": "e0a48c7ef200ea29",
"name": "",
"props": [
{
"p": "_uib",
"v": "{\"command\":\"include\",\"prop\":\"./sc_task.pdf\",\"value\":{\"id\":\"incPdf\",\"parent\":\"#more\",\"attributes\":{\"style\":\"width:99%;\"}}}",
"vt": "json"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "include-pdf-file",
"x": 180,
"y": 960,
"wires": [
[
"4ce1fc8c40ccbf7d"
]
]
},
{
"id": "f83742762fb77e58",
"type": "inject",
"z": "56443195ea782ac2",
"g": "e0a48c7ef200ea29",
"name": "",
"props": [
{
"p": "_ui",
"v": "{\"method\":\"remove\",\"components\":[\"#incTxt\"]}",
"vt": "json"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "remove-text-file",
"x": 180,
"y": 1160,
"wires": [
[
"4ce1fc8c40ccbf7d"
]
]
},
{
"id": "810b9dd6a392018c",
"type": "inject",
"z": "56443195ea782ac2",
"g": "e0a48c7ef200ea29",
"name": "",
"props": [
{
"p": "_uib",
"v": "{\"command\":\"include\",\"prop\":\"./test.json\",\"value\":{\"id\":\"incJson\",\"parent\":\"#more\",\"position\":\"first\",\"attributes\":{\"style\":\"width:50%;\"}}}",
"vt": "json"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "include-json-file",
"x": 180,
"y": 1200,
"wires": [
[
"4ce1fc8c40ccbf7d"
]
]
},
{
"id": "fd14560e7aa0f275",
"type": "uib-cache",
"z": "56443195ea782ac2",
"g": "5f79bf4a4f4f3f36",
"cacheall": false,
"cacheKey": "topic",
"newcache": true,
"num": 1,
"storeName": "default",
"name": "Cache",
"storeContext": "context",
"varName": "uib_cache",
"x": 310,
"y": 220,
"wires": [
[
"7c8adbf5b52fc611"
]
],
"info": "Cache inputs based on the msg.topic.\r\n\r\nJust the last msg is kept for each\r\ntopic.\r\n\r\nDefault context store is used in this\r\nexample since not everyone will have\r\ndefined a file-based store.\r\n\r\nThat means that if you want an initial\r\nzero-code layout, you need to trigger\r\nits sending from a trigger node that\r\nfires when Node-RED (re)starts."
},
{
"id": "472ff48730d1b698",
"type": "link in",
"z": "56443195ea782ac2",
"g": "5f79bf4a4f4f3f36",
"name": "uib-client-tests-cached",
"links": [
"32f6056e316798bf",
"16cdac4094403b45",
"1c433aa390e1bc8c"
],
"x": 205,
"y": 240,
"wires": [
[
"fd14560e7aa0f275"
]
]
},
{
"id": "32f6056e316798bf",
"type": "link out",
"z": "56443195ea782ac2",
"g": "5f79bf4a4f4f3f36",
"name": "client-tests-control-outputs",
"mode": "link",
"links": [
"472ff48730d1b698"
],
"x": 695,
"y": 200,
"wires": [],
"info": "Sends control messages back to the cache input\r\n\r\nThis ensures that when new clients (browser\r\ntabs) connect or if a page is reloaded, \r\nthe browser gets the cached data automatically.\r\n\r\nYou could filter this output to only include\r\n\"client connect\" messages if you wanted to \r\nimprove efficiency when you expect lots of \r\nclients to connect."
},
{
"id": "3b043396fab746f0",
"type": "inject",
"z": "56443195ea782ac2",
"g": "5f79bf4a4f4f3f36",
"name": "Clear Cache",
"props": [
{
"p": "uibuilderCtrl",
"v": "clear cache",
"vt": "str"
},
{
"p": "cacheControl",
"v": "CLEAR",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"x": 150,
"y": 200,
"wires": [
[
"fd14560e7aa0f275"
]
]
},
{
"id": "4b29103fb972307d",
"type": "inject",
"z": "56443195ea782ac2",
"g": "a788bb7b3bb7e959",
"name": "On Start (Heading)",
"props": [
{
"p": "topic",
"vt": "str"
},
{
"p": "payload"
}
],
"repeat": "",
"crontab": "",
"once": true,
"onceDelay": 0.1,
"topic": "on-start",
"payload": "[\"uibuilder Client Tests\",\"Using the IIFE Library\"]",
"payloadType": "json",
"x": 170,
"y": 360,
"wires": [
[
"f078cbb95b319197"
]
],
"info": "Runs on Node-RED startup so that the cache is always\r\npopulated even if you do not have a Node-RED persistent\r\ncontext store defined.\r\n\r\nSets the payload for the page title, heading and\r\nsub-heading.\r\n\r\nAlso sets a distinct msg.topic which is used by the\r\n`uib-cache` node."
},
{
"id": "16cdac4094403b45",
"type": "link out",
"z": "56443195ea782ac2",
"g": "a788bb7b3bb7e959",
"name": "initial setup to cache",
"mode": "link",
"links": [
"472ff48730d1b698"
],
"x": 745,
"y": 360,
"wires": []
},
{
"id": "f078cbb95b319197",
"type": "uib-element",
"z": "56443195ea782ac2",
"g": "a788bb7b3bb7e959",
"name": "Pg Title",
"topic": "",
"elementtype": "title",
"parent": "body",
"parentSource": "",
"parentSourceType": "str",
"elementid": "",
"elementId": "",
"elementIdSourceType": "str",
"heading": "",
"headingSourceType": "str",
"headingLevel": "h2",
"position": "last",
"positionSourceType": "str",
"confData": {},
"x": 340,
"y": 360,
"wires": [
[
"6416796b98c7bc07"
]
],
"info": "Sets the page title and heading along with a\r\nsub-heading."
},
{
"id": "911214c9aa6fdbb0",
"type": "uib-element",
"z": "56443195ea782ac2",
"g": "a788bb7b3bb7e959",
"name": "descr",
"topic": "",
"elementtype": "article",
"parent": "body",
"parentSource": "",
"parentSourceType": "str",
"elementid": "description",
"elementId": "",
"elementIdSourceType": "str",
"heading": "head",
"headingSourceType": "msg",
"headingLevel": "h2",
"position": "2",
"positionSourceType": "str",
"confData": {},
"x": 530,
"y": 360,
"wires": [
[
"16cdac4094403b45"
]
],
"info": "Adds a descriptive text box with a heading\r\nNote that the position is set to 2 so that\r\nit appears after the page sub-heading even\r\nif you have inserted other elements onto the\r\npage."
},
{
"id": "6416796b98c7bc07",
"type": "change",
"z": "56443195ea782ac2",
"g": "a788bb7b3bb7e959",
"name": "descr",
"rules": [
{
"t": "set",
"p": "payload",
"pt": "msg",
"to": "This page is an example of a zero-code web page driven by uibuilder and Node-RED. No code was harmed in the making of this page. 😁<p>Try out the various remote commands that the uibuilder client allows</p>",
"tot": "str"
},
{
"t": "set",
"p": "head",
"pt": "msg",
"to": "uibuilder tests",
"tot": "str"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 455,
"y": 360,
"wires": [
[
"911214c9aa6fdbb0"
]
],
"l": false,
"info": "Set the descriptive text for the page.\r\nAlso sets a heading for the text box.\r\n\r\nFor uibuilder v6.1, we have to reset the\r\n`msg.payload` for this. I aim to make this\r\nmore flexible in the future."
},
{
"id": "65dffaaedb01010f",
"type": "inject",
"z": "56443195ea782ac2",
"g": "5f79bf4a4f4f3f36",
"name": "Reload",
"props": [
{
"p": "_ui",
"v": "{\"method\":\"reload\"}",
"vt": "json"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "reload",
"x": 170,
"y": 100,
"wires": [
[
"75e04dbce19bc0e1"
]
],
"info": "Sends a pre-formatted msg to the front-end that\r\ncauses the page to reload itself."
}
]