[ { "id": "36e46a8812418a38", "type": "tab", "label": "Text Updates", "disabled": false, "info": "This tab contains an example uibuilder node\r\nalong with several example methods for\r\nupdating on-page text in your web pages.", "env": [] }, { "id": "a2a4f9ce8175afa5", "type": "group", "z": "36e46a8812418a38", "name": "Setup", "style": { "fill": "#ffffbf", "fill-opacity": "0.12", "label": true, "color": "#000000" }, "nodes": [ "60a8489436d0ee43", "ff050c4347776e67", "86ffc76eb5838f6c", "d5ffe9a264b1c424", "73283e35f23ba905", "e8b79e0479ad07fb", "11c34f35abc00f11", "475a22b945acf2c3", "59e22173849a0305" ], "x": 74, "y": 179, "w": 812, "h": 162 }, { "id": "86fa2a8ae6f5f32e", "type": "group", "z": "36e46a8812418a38", "name": "Front-end Code - Run after the uibuilder node has been deployed. \\n Sets up FE code, reloads connected clients.", "style": { "label": true, "stroke": "#a4a4a4", "fill-opacity": "0.33", "color": "#000000", "fill": "#ffffff" }, "nodes": [ "36b3dea638283be6", "46689bc058b9d4db", "a39bd1d7474cf8ec", "dc323f1cc56a3d6c", "24a49e7875280cc1", "d091b7d37c855385" ], "x": 544, "y": 23, "w": 582, "h": 138 }, { "id": "59e22173849a0305", "type": "junction", "z": "36e46a8812418a38", "g": "a2a4f9ce8175afa5", "x": 460, "y": 220, "wires": [ [ "ff050c4347776e67" ] ] }, { "id": "60a8489436d0ee43", "type": "debug", "z": "36e46a8812418a38", "g": "a2a4f9ce8175afa5", "name": "uib Std Output", "active": false, "tosidebar": true, "console": false, "tostatus": true, "complete": "true", "targetType": "full", "statusVal": "", "statusType": "counter", "x": 765, "y": 220, "wires": [], "l": false }, { "id": "ff050c4347776e67", "type": "uibuilder", "z": "36e46a8812418a38", "g": "a2a4f9ce8175afa5", "name": "", "topic": "", "url": "text-update-egs", "urlValid": true, "fwdInMessages": false, "allowScripts": false, "allowStyles": false, "copyIndex": true, "templateFolder": "blank", "extTemplate": "", "showfolder": false, "reload": true, "sourceFolder": "src", "deployedVersion": "6.6.0", "showMsgUib": true, "title": "", "descr": "", "x": 620, "y": 260, "wires": [ [ "60a8489436d0ee43" ], [ "86ffc76eb5838f6c", "11c34f35abc00f11" ] ] }, { "id": "86ffc76eb5838f6c", "type": "debug", "z": "36e46a8812418a38", "d": true, "g": "a2a4f9ce8175afa5", "name": "uib Control Output", "active": true, "tosidebar": true, "console": false, "tostatus": true, "complete": "true", "targetType": "full", "statusVal": "", "statusType": "counter", "x": 825, "y": 280, "wires": [], "l": false }, { "id": "e044ccbbc70ecc60", "type": "inject", "z": "36e46a8812418a38", "name": "Toggle Visible Msgs", "props": [ { "p": "_uib", "v": "{\"command\":\"showMsg\"}", "vt": "json" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "x": 190, "y": 60, "wires": [ [ "6a4c985e0fc73c31" ] ] }, { "id": "ad3e6bf13e2c7f15", "type": "inject", "z": "36e46a8812418a38", "name": "Log Lvl 5", "props": [ { "p": "_uib", "v": "{\"command\":\"set\",\"prop\":\"logLevel\",\"value\":5}", "vt": "json" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "x": 220, "y": 100, "wires": [ [ "6a4c985e0fc73c31" ] ] }, { "id": "86f9153ff0dc2d04", "type": "inject", "z": "36e46a8812418a38", "name": "Reload", "props": [ { "p": "_ui", "v": "{\"method\":\"reload\"}", "vt": "json" }, { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "reload", "x": 230, "y": 140, "wires": [ [ "6a4c985e0fc73c31" ] ], "info": "Sends a pre-formatted msg to the front-end that\r\ncauses the page to reload itself." }, { "id": "6a4c985e0fc73c31", "type": "link out", "z": "36e46a8812418a38", "name": "uib ctrls out", "mode": "link", "links": [ "b9605e7d0a662387", "d5ffe9a264b1c424" ], "x": 355, "y": 100, "wires": [] }, { "id": "d5ffe9a264b1c424", "type": "link in", "z": "36e46a8812418a38", "g": "a2a4f9ce8175afa5", "name": "uib-upd-egs - no cache", "links": [ "6a4c985e0fc73c31", "45c30769766809e0", "7cf15cdc25847e38", "5c4452e742079f53", "046d41ddfade6f54" ], "x": 325, "y": 220, "wires": [ [ "59e22173849a0305" ] ] }, { "id": "73283e35f23ba905", "type": "link in", "z": "36e46a8812418a38", "g": "a2a4f9ce8175afa5", "name": "uib-upd-egs - cached", "links": [ "11c34f35abc00f11", "230b14e3f0320ec0", "d5772ba475aa309a" ], "x": 245, "y": 300, "wires": [ [ "e8b79e0479ad07fb" ] ] }, { "id": "e8b79e0479ad07fb", "type": "uib-cache", "z": "36e46a8812418a38", "g": "a2a4f9ce8175afa5", "cacheall": false, "cacheKey": "topic", "newcache": true, "num": 1, "storeName": "default", "name": "Cache (by topic)", "storeContext": "context", "varName": "uib_cache", "x": 390, "y": 260, "wires": [ [ "ff050c4347776e67" ] ] }, { "id": "11c34f35abc00f11", "type": "link out", "z": "36e46a8812418a38", "g": "a2a4f9ce8175afa5", "name": "link out 64", "mode": "link", "links": [ "73283e35f23ba905" ], "x": 765, "y": 300, "wires": [] }, { "id": "475a22b945acf2c3", "type": "inject", "z": "36e46a8812418a38", "g": "a2a4f9ce8175afa5", "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": 190, "y": 260, "wires": [ [ "e8b79e0479ad07fb" ] ] }, { "id": "6f9255ce54661e2a", "type": "comment", "z": "36e46a8812418a38", "name": "1) Add this manually to index.html (see inside) - The flow below updates from Node-RED. \\n Also updates the number's CSS Class (using JSONata calculation).", "info": "```html\n

\n This is some text and I want to tell you \n that my age is 140.\n This will be updated direct from Node-RED\n using a uib-update node.\n

\n

\n This is some more text and I want to tell you \n that the temperature today is \n -20℃. This will\n be updated using front-end code in\n index.js\n

\n

\n (waiting for quote)\n

\n```\n\nDon't forget to also uncomment the line\nthat loads the index.js file if you want\nto play with the next example as well.\n\nWe could, of course, insert this HTML\ndynamically from Node-RED using the \nuib-element node.", "x": 390, "y": 380, "wires": [] }, { "id": "d3b66a1c8aafb1f4", "type": "uib-update", "z": "36e46a8812418a38", "name": "Update myage span content \\n (#myage css selector)", "topic": "", "mode": "update", "modeSourceType": "update", "cssSelector": "#myage", "cssSelectorType": "str", "slotSourceProp": "payload", "slotSourcePropType": "msg", "attribsSource": "(\t /* Set the class based on incoming value */\t $lu := ($number(payload) > 60 ? \"warning\" : \"info\") & \" border\";\t\t {\"class\": $lu}\t)", "attribsSourceType": "jsonata", "slotPropMarkdown": false, "x": 480, "y": 440, "wires": [ [ "230b14e3f0320ec0" ] ] }, { "id": "a1c5793fee1d129e", "type": "inject", "z": "36e46a8812418a38", "name": "Random myage (note need for \\n topic so that cached correctly)", "props": [ { "p": "payload" }, { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "*/1 8-23 * * *", "once": false, "onceDelay": "15", "topic": "update-myage", "payload": "$formatInteger($random() * 100, \"0\")\t", "payloadType": "jsonata", "x": 210, "y": 440, "wires": [ [ "d3b66a1c8aafb1f4" ] ] }, { "id": "230b14e3f0320ec0", "type": "link out", "z": "36e46a8812418a38", "name": "link out 65", "mode": "link", "links": [ "73283e35f23ba905" ], "x": 645, "y": 440, "wires": [] }, { "id": "3aae18802d1de054", "type": "comment", "z": "36e46a8812418a38", "name": "2) Add this manually to index.js (see inside) - it does updates from the front-end instead", "info": "```javascript\nuibuilder.onChange('msg', (msg) => {\n If (msg.topic === 'todaytemp') {\n // Use innerHTML if needed\n $('#todaytemp').innerText = msg.payload\n }\n})\n```", "x": 380, "y": 500, "wires": [] }, { "id": "d5772ba475aa309a", "type": "link out", "z": "36e46a8812418a38", "name": "link out 66", "mode": "link", "links": [ "73283e35f23ba905" ], "x": 645, "y": 560, "wires": [] }, { "id": "07cd2f6a6d08658c", "type": "inject", "z": "36e46a8812418a38", "name": "Random todaytemp (note need for \\n topic so that front-end code handles correctly)", "props": [ { "p": "payload" }, { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "*/1 8-23 * * *", "once": false, "onceDelay": "15", "topic": "todaytemp", "payload": "$formatInteger($random() * 100 - 50, \"0\")\t", "payloadType": "jsonata", "x": 260, "y": 560, "wires": [ [ "d5772ba475aa309a" ] ] }, { "id": "532ec0e5a5152d88", "type": "inject", "z": "36e46a8812418a38", "name": "Set command", "props": [ { "p": "_uib", "v": "{\"command\":\"set\",\"prop\":\"myquote\",\"value\":\"\"}", "vt": "json" } ], "repeat": "", "crontab": "0 8-23 * * *", "once": false, "onceDelay": "15", "topic": "", "x": 160, "y": 700, "wires": [ [ "1118681bef5c126b" ] ] }, { "id": "1118681bef5c126b", "type": "http request", "z": "36e46a8812418a38", "name": "", "method": "GET", "ret": "obj", "paytoqs": "ignore", "url": "https://zenquotes.io/api/random", "tls": "", "persist": false, "proxy": "", "insecureHTTPParser": false, "authType": "", "senderr": false, "headers": [], "x": 330, "y": 700, "wires": [ [ "b69aa587eb50ae6f" ] ] }, { "id": "b69aa587eb50ae6f", "type": "change", "z": "36e46a8812418a38", "name": "Upd set value from web response", "rules": [ { "t": "set", "p": "_uib.value", "pt": "msg", "to": "payload[0].h", "tot": "msg" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 560, "y": 700, "wires": [ [ "45c30769766809e0" ] ] }, { "id": "45c30769766809e0", "type": "link out", "z": "36e46a8812418a38", "name": "link out 67", "mode": "link", "links": [ "d5ffe9a264b1c424" ], "x": 745, "y": 700, "wires": [] }, { "id": "85b05013bc65a8ef", "type": "comment", "z": "36e46a8812418a38", "name": "3) This time, lets use the uib-var front-end component. (We won't cache this one) \\n The uibuilder set command is used to change the variable in the front-end. \\n In this case, we will tell the component to use HTML - see the first comment contents above.", "info": "", "x": 400, "y": 640, "wires": [] }, { "id": "f8bdfabd783cab21", "type": "inject", "z": "36e46a8812418a38", "name": "Set command", "props": [ { "p": "_uib", "v": "{\"command\":\"set\",\"prop\":\"egfilter\",\"value\":100}", "vt": "json" } ], "repeat": "", "crontab": "*/1 8-23 * * *", "once": false, "onceDelay": "15", "topic": "", "x": 160, "y": 840, "wires": [ [ "7cf15cdc25847e38" ] ] }, { "id": "7cf15cdc25847e38", "type": "link out", "z": "36e46a8812418a38", "name": "link out 75", "mode": "link", "links": [ "d5ffe9a264b1c424" ], "x": 745, "y": 840, "wires": [] }, { "id": "a61cbcfc65c601b3", "type": "comment", "z": "36e46a8812418a38", "name": "4) Use the uib-var front-end component to apply a JavaScript `filter` function before display. (We won't cache this one) \\n The uibuilder set command is used to change the variable in the front-end. \\n Example filter sets # Decimal Places. Default is 0.", "info": "", "x": 470, "y": 780, "wires": [] }, { "id": "36b3dea638283be6", "type": "inject", "z": "36e46a8812418a38", "g": "86fa2a8ae6f5f32e", "name": "", "props": [ { "p": "topic", "vt": "str" } ], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "setup all FE files", "x": 605, "y": 80, "wires": [ [ "24a49e7875280cc1", "d091b7d37c855385" ] ], "l": false }, { "id": "46689bc058b9d4db", "type": "template", "z": "36e46a8812418a38", "g": "86fa2a8ae6f5f32e", "name": "index.html", "field": "payload", "fieldType": "msg", "format": "html", "syntax": "plain", "template": "\n\n\n \n \n \n\n Updating text examples - Node-RED uibuilder\n \n\n \n \n\n \n \n \n \n \n\n\n \n

Different ways of updating UI text

\n
Using the UIBUILDER IIFE library.
\n\n
\n\n

Example (1) via uib-update node

\n

\n This is some text and I want to tell you \n that my age is 140.\n This will be updated direct from Node-RED\n using a uib-update node.\n

\n

Example (2) via front-end code (index.html)

\n

\n This is some more text and I want to tell you \n that the temperature today is \n -20℃. This will\n be updated using front-end code in\n index.js\n

\n

Example (3) via <uib-var> custom web component

\n

\n \n (waiting for quote)\n \n

\n

Example (4) via <uib-var> custom web component with filter

\n

\n \n [waiting for egfilter value]\n (no filter, just the value)
\n \n [waiting for egfilter value]\n (myFilter fn applied)
\n \n \n [waiting for egfilter value]\n \n (myFilter fn with extra param (2) applied)\n

\n

Example (5) via <uib-var> custom web component using topic monitor

\n

\n \n [waiting for egtopic/#1 value]\n \n

\n\n

Other uib-var tests

\n \n\n\n", "output": "str", "x": 810, "y": 80, "wires": [ [ "a39bd1d7474cf8ec" ] ] }, { "id": "a39bd1d7474cf8ec", "type": "uib-save", "z": "36e46a8812418a38", "g": "86fa2a8ae6f5f32e", "url": "text-update-egs", "uibId": "ff050c4347776e67", "folder": "src", "fname": "", "createFolder": true, "reload": true, "usePageName": false, "encoding": "utf8", "mode": 438, "name": "", "topic": "", "x": 1020, "y": 80, "wires": [] }, { "id": "dc323f1cc56a3d6c", "type": "template", "z": "36e46a8812418a38", "g": "86fa2a8ae6f5f32e", "name": "index.js", "field": "payload", "fieldType": "msg", "format": "javascript", "syntax": "plain", "template": "/* global $,uibuilder */\n\n/** Custom filter function\n * Called from uib-var with the filter attribute set\n * Filter functions ALWAYS have the passed value as the first parameter\n * Other parameters are added after the value as in this case with dp\n * @param {*} val Current value of the managed variable\n * @param {number} dp # decimal places to show\n * @returns {string} Updated value trimmed to the required # of dps before display\n */\nfunction myFilter(val, dp) {\n if (!dp) dp = 0\n // console.log('myFilter called', arguments )\n return (Math.random()*val).toFixed(dp)\n}\n\n// uibuilder.onChange('msg', (msg) => {\n// if (msg.topic === 'todaytemp') {\n// console.info('👁️ We got a `todaytemp` message from Node-RED')\n// // Use innerHTML if needed\n// $('#todaytemp').innerText = msg.payload\n// }\n// })\n\n// uibuilder.onTopic('mytopic/#1', (msg) => {\n// console.log( 'TOPIC \"mytopic/#1\" recieved')\n// })", "output": "str", "x": 820, "y": 120, "wires": [ [ "a39bd1d7474cf8ec" ] ] }, { "id": "24a49e7875280cc1", "type": "change", "z": "36e46a8812418a38", "g": "86fa2a8ae6f5f32e", "name": "index.html", "rules": [ { "t": "set", "p": "fname", "pt": "msg", "to": "index.html", "tot": "str" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 695, "y": 80, "wires": [ [ "46689bc058b9d4db" ] ], "l": false }, { "id": "d091b7d37c855385", "type": "change", "z": "36e46a8812418a38", "g": "86fa2a8ae6f5f32e", "name": "index.js", "rules": [ { "t": "set", "p": "fname", "pt": "msg", "to": "index.js", "tot": "str" } ], "action": "", "property": "", "from": "", "to": "", "reg": false, "x": 695, "y": 120, "wires": [ [ "dc323f1cc56a3d6c" ] ], "l": false }, { "id": "0b17130da037b085", "type": "comment", "z": "36e46a8812418a38", "name": "Examples of different ways to update text or HTML on your web page", "info": "", "x": 280, "y": 20, "wires": [] }, { "id": "a90103b8776de604", "type": "inject", "z": "36e46a8812418a38", "name": "Send msg with given topic. Payload is value to show", "props": [ { "p": "topic", "vt": "str" }, { "p": "payload" } ], "repeat": "13", "crontab": "", "once": false, "onceDelay": "15", "topic": "mytopic/#1", "payload": "$random() * 10000", "payloadType": "jsonata", "x": 280, "y": 980, "wires": [ [ "5c4452e742079f53" ] ] }, { "id": "5c4452e742079f53", "type": "link out", "z": "36e46a8812418a38", "name": "link out 76", "mode": "link", "links": [ "d5ffe9a264b1c424" ], "x": 745, "y": 980, "wires": [] }, { "id": "1d7eada0bf4714e4", "type": "comment", "z": "36e46a8812418a38", "name": "5) Use the uib-var front-end component to to monitor recieved messages with a given topic. (We won't cache this one) \\n Just send the message.", "info": "", "x": 470, "y": 920, "wires": [] }, { "id": "4713e2116ddc6c5f", "type": "uib-tag", "z": "36e46a8812418a38", "name": "", "topic": "", "tag": "uib-var", "tagSource": "", "tagSourceType": "str", "parent": "#more", "parentSource": "", "parentSourceType": "str", "elementId": "var05", "elementIdSourceType": "str", "position": "last", "positionSourceType": "str", "slotSourceProp": "[waiting for data]", "slotSourcePropType": "str", "attribsSource": "{\"topic\": \"mytopic/#1\"}", "attribsSourceType": "json", "slotPropMarkdown": false, "x": 340, "y": 1120, "wires": [ [ "046d41ddfade6f54" ] ] }, { "id": "91baa1ad1ffb54b0", "type": "inject", "z": "36e46a8812418a38", "name": "", "props": [], "repeat": "", "crontab": "", "once": false, "onceDelay": 0.1, "topic": "", "x": 95, "y": 1120, "wires": [ [ "4713e2116ddc6c5f", "e7ba80c9d474c240" ] ], "l": false }, { "id": "046d41ddfade6f54", "type": "link out", "z": "36e46a8812418a38", "name": "link out 77", "mode": "link", "links": [ "d5ffe9a264b1c424" ], "x": 745, "y": 1120, "wires": [] }, { "id": "d70baee6d9a7a852", "type": "comment", "z": "36e46a8812418a38", "name": "Example of no-code addition of a uib-var tag to the web page, updates automatically using the same flow as #5 above", "info": "", "x": 470, "y": 1080, "wires": [] }, { "id": "e7ba80c9d474c240", "type": "uib-tag", "z": "36e46a8812418a38", "name": "", "topic": "", "tag": "uib-var", "tagSource": "", "tagSourceType": "str", "parent": "#more", "parentSource": "", "parentSourceType": "str", "elementId": "var06", "elementIdSourceType": "str", "position": "last", "positionSourceType": "str", "slotSourceProp": "[...]", "slotSourcePropType": "str", "attribsSource": "{\"filter\": \"lang\"}", "attribsSourceType": "json", "slotPropMarkdown": false, "x": 340, "y": 1160, "wires": [ [ "046d41ddfade6f54" ] ] }, { "id": "eb8221235230f0a2", "type": "comment", "z": "36e46a8812418a38", "name": "Example updated: 2024-01-01", "info": "", "x": 1280, "y": 40, "wires": [] } ]