: change first input's background colour and value","style":{"fill":"#e3f3d3","fill-opacity":"0.31","label":true,"color":"#000000"},"nodes":["3e4bf23522996347","64d9ee32caf6e104"],"x":54,"y":399,"w":662,"h":82},{"id":"9396d8d9ec748531","type":"junction","z":"2c47031326e8fd01","g":"be701bbd8a0980fa","x":940,"y":960,"wires":[["b0cdd123141f5eb7"]]},{"id":"c39c272bd6ec06f7","type":"junction","z":"2c47031326e8fd01","x":940,"y":1060,"wires":[["b0cdd123141f5eb7"]]},{"id":"d79da848f082d821","type":"debug","z":"2c47031326e8fd01","g":"a6adf8c814ea39df","name":"Std Output","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"","statusType":"counter","x":545,"y":140,"wires":[],"l":false},{"id":"c1c1273697d0c0d3","type":"uibuilder","z":"2c47031326e8fd01","g":"a6adf8c814ea39df","name":"components-html","topic":"","url":"components-html","okToGo":true,"fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"reload":true,"sourceFolder":"tests","deployedVersion":"5.0.0-dev.2","showMsgUib":false,"title":"Testing TotallyInformation web components","descr":"","editurl":"vscode://file/src/uibRoot/components-html/?windowId=_blank","x":320,"y":160,"wires":[["d79da848f082d821"],["dc8c6e18b6b209b6"]]},{"id":"dc8c6e18b6b209b6","type":"debug","z":"2c47031326e8fd01","g":"a6adf8c814ea39df","name":"Ctrl Output","active":false,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"","statusType":"counter","x":545,"y":200,"wires":[],"l":false},{"id":"baf98201102ea713","type":"link in","z":"2c47031326e8fd01","g":"a6adf8c814ea39df","name":"link in 1","links":["5edd6397d8c76a02","b6221e56cb4d6652","9bb62bc1cd7bad3c","84a0deb0e6c3c8ca","d8f1bf63848edeca","b0cdd123141f5eb7","3e4bf23522996347"],"x":95,"y":160,"wires":[["c1c1273697d0c0d3"]]},{"id":"ca1fb080bf336089","type":"inject","z":"2c47031326e8fd01","g":"5280fb631c7d3157","name":"Toggle Visible Msgs","props":[{"p":"_uib","v":"{\"command\":\"showMsg\"}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":970,"y":140,"wires":[["5edd6397d8c76a02"]]},{"id":"f7556a7999836b28","type":"inject","z":"2c47031326e8fd01","g":"5280fb631c7d3157","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":1000,"y":180,"wires":[["5edd6397d8c76a02"]]},{"id":"4493aeefd709cb84","type":"inject","z":"2c47031326e8fd01","g":"5280fb631c7d3157","name":"Reload","props":[{"p":"_ui","v":"{\"method\":\"reload\"}","vt":"json"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"reload","x":1010,"y":220,"wires":[["5edd6397d8c76a02"]],"info":"Sends a pre-formatted msg to the front-end that\r\ncauses the page to reload itself."},{"id":"5edd6397d8c76a02","type":"link out","z":"2c47031326e8fd01","g":"5280fb631c7d3157","name":"link out 55","mode":"link","links":["baf98201102ea713"],"x":1125,"y":180,"wires":[]},{"id":"b6221e56cb4d6652","type":"link out","z":"2c47031326e8fd01","g":"349a99ecf4a3ad8a","name":"link out 56","mode":"link","links":["baf98201102ea713"],"x":715,"y":560,"wires":[]},{"id":"fd5456075222084c","type":"inject","z":"2c47031326e8fd01","g":"349a99ecf4a3ad8a","name":"data-list:","props":[{"p":"str","v":"$formatNumber($random()*100, \"0.0\")\t\t","vt":"jsonata"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":160,"y":560,"wires":[["625003b509fdb71d","f9139d2d46e53071"]]},{"id":"625003b509fdb71d","type":"uib-update","z":"2c47031326e8fd01","g":"349a99ecf4a3ad8a","name":"Change dl1 text","topic":"","mode":"update","modeSourceType":"update","cssSelector":"#dl1","cssSelectorType":"str","slotSourceProp":"List is replaced by a message from Node-RED.
","slotSourcePropType":"str","attribsSource":"","attribsSourceType":"msg","slotPropMarkdown":false,"x":360,"y":560,"wires":[["b6221e56cb4d6652"]]},{"id":"f6378b50eef90925","type":"change","z":"2c47031326e8fd01","g":"349a99ecf4a3ad8a","name":"Change dl1 list","rules":[{"t":"set","p":"payload","pt":"msg","to":"{\"keyvalueseparator\":\" 💠 \",\"liststyle\":\"'😎 '\",\"data\":{\"xxx\":\"Triple x\",\"yyy\":\"Triple y\",\"zzz\":\"triple z\"},\"style\":\"background-color: var(--surface4);\"}","tot":"json"},{"t":"set","p":"topic","pt":"msg","to":"data-list::dl1","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":550,"y":600,"wires":[["b6221e56cb4d6652"]]},{"id":"f9139d2d46e53071","type":"delay","z":"2c47031326e8fd01","g":"349a99ecf4a3ad8a","name":"","pauseType":"delay","timeout":"1","timeoutUnits":"milliseconds","rate":"1","nbRateUnits":"1","rateUnits":"second","randomFirst":"1","randomLast":"5","randomUnits":"seconds","drop":false,"allowrate":false,"outputs":1,"x":380,"y":600,"wires":[["f6378b50eef90925"]]},{"id":"e098e4cc596316be","type":"comment","z":"2c47031326e8fd01","name":"NOTE: Many of the component web pages have delayed actions in front-end code. \\n You may need to give them a few seconds before sending dynamic updates from Node-RED to avoid clashes.","info":"","x":430,"y":300,"wires":[]},{"id":"baa286f94c606dab","type":"comment","z":"2c47031326e8fd01","name":"Web components home page: https://wc.totallyinformation.net/ \\n Readme first","info":"[Web components home page](https://wc.totallyinformation.net/)\n\nCopy the `tests` folder from the\n`@totallyinformation/web-components` package.\n\nThen make sure that the delivery folder (on\nthe advanced tab) is set to use the `tests`\nfolder.\n\nFor each page, you will need to uncomment\nthe uibuilder links. You can leave the\noriginal links in place if you want since they\nsimply will fail to load.\n\nThe head section contains the `\n\n\n\n```\n\nOther links, with the exception of the documentation\nlinks should work fine.","x":280,"y":40,"wires":[]},{"id":"42a730fdc388dcbf","type":"comment","z":"2c47031326e8fd01","name":"Example updated: 2025-09-20 \\n Requires a minimum of v1.4.1 of the component package. \\n Tested using UIBUILDER v7.5.0","info":"","x":830,"y":40,"wires":[]},{"id":"411273962d195075","type":"inject","z":"2c47031326e8fd01","g":"0958c88d9e5ba8df","name":"led-gauge::led-gauge-1 - set to value 65, set colour breaks at 60 and 80","props":[{"p":"topic","vt":"str"},{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"led-gauge::led-gauge-1","payload":"{\"value\":65,\"colors\":{\"60\":40,\"80\":0}}","payloadType":"json","x":350,"y":720,"wires":[["9bb62bc1cd7bad3c"]]},{"id":"9bb62bc1cd7bad3c","type":"link out","z":"2c47031326e8fd01","g":"0958c88d9e5ba8df","name":"link out 10","mode":"link","links":["baf98201102ea713"],"x":695,"y":720,"wires":[]},{"id":"473a297be9f81407","type":"inject","z":"2c47031326e8fd01","g":"be701bbd8a0980fa","name":"Check if Markdown-IT loaded? (payload should be true)","props":[{"p":"_uib","v":"{\"command\":\"get\",\"prop\":\"markdown\"}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":300,"y":840,"wires":[["b0cdd123141f5eb7"]]},{"id":"b108f5a5b6204a53","type":"inject","z":"2c47031326e8fd01","g":"be701bbd8a0980fa","name":"Replace #more div with Markdown Content - heading, para and list - heading should be collapsable - using uibuilder low-code","props":[{"p":"_ui","v":"[{\"method\":\"replace\",\"components\":[{\"type\":\"collapsible-headings\",\"id\":\"md\",\"parent\":\"#more\",\"attributes\":{},\"slotMarkdown\":\"## H2 - Markdown input\\n\\nSome text in a para\\n\\n* List #1\\n* List #2\\n\"}]}]","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":520,"y":880,"wires":[["b0cdd123141f5eb7"]]},{"id":"b0cdd123141f5eb7","type":"link out","z":"2c47031326e8fd01","g":"be701bbd8a0980fa","name":"link out 5","mode":"link","links":["baf98201102ea713"],"x":1135,"y":840,"wires":[]},{"id":"1e1f465e6c58a04b","type":"uib-tag","z":"2c47031326e8fd01","g":"617053f26322eea0","name":"","topic":"","tag":"collapsible-headings","tagSource":"","tagSourceType":"str","parent":"#more","parentSource":"","parentSourceType":"str","elementId":"manual-2","elementIdSourceType":"str","position":"last","positionSourceType":"str","slotSourceProp":"payload","slotSourcePropType":"msg","attribsSource":"","attribsSourceType":"msg","slotPropMarkdown":false,"x":530,"y":960,"wires":[["9396d8d9ec748531"]]},{"id":"13453844827fc8b3","type":"inject","z":"2c47031326e8fd01","g":"617053f26322eea0","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"auto-create-html-from-html","payload":"{\t \"mystring\": \"Boo-hoo\",\t \"mynumber\": $formatInteger($random() * 100, \"#00\")\t}\t ","payloadType":"jsonata","x":170,"y":960,"wires":[["9802142222f2ff62"]]},{"id":"9802142222f2ff62","type":"template","z":"2c47031326e8fd01","g":"617053f26322eea0","name":"","field":"payload","fieldType":"msg","format":"handlebars","syntax":"mustache","template":"\n
My Dynamic Heading (h2)
\n
\n Added using uibuilder's uib-tag\n node from a node-red HMTL template.\n
\n
\n Lorem ipsum dolor sit amet, consectetur\n adipiscing elit, sed do eiusmod tempor\n incididunt ut labore et dolore magna aliqua.\n Ut enim ad minim veniam, quis nostrud\n exercitation ullamco laboris nisi ut\n aliquip ex ea commodo consequat. Duis\n aute irure dolor in reprehenderit in\n voluptate velit esse cillum dolore eu\n fugiat nulla pariatur. Excepteur sint\n occaecat cupidatat non proident, sunt\n in culpa qui officia deserunt mollit anim\n id est laborum.\n
\n
\n
My Dynamic Heading (h2)
\n
\n Replaced the previous \"My first heading\"\n and following paragraphs by using uibuilder's\n uib-update\n node from a node-red HMTL template.\n
\n
\n Lorem ipsum dolor sit amet, consectetur\n adipiscing elit, sed do eiusmod tempor\n incididunt ut labore et dolore magna aliqua.\n Ut enim ad minim veniam, quis nostrud\n exercitation ullamco laboris nisi ut\n aliquip ex ea commodo consequat. Duis\n aute irure dolor in reprehenderit in\n voluptate velit esse cillum dolore eu\n fugiat nulla pariatur. Excepteur sint\n occaecat cupidatat non proident, sunt\n in culpa qui officia deserunt mollit anim\n id est laborum.\n
\n
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [20 September 2025 17:07 UTC](https://discourse.nodered.org/t/totallyinformation-web-components-new-release-v1-5-0-and-test-flows/99113/4 "2025-09-20T17:07:09Z")
> [@Buckskin](#):
>
> Would it be possible to change the colour of the links. My eyes are not what they used to be and I have to get close to see the text?
Hi there, hmm, those do look bad! But that isn't how they look on my system:
What browser are you using?
I deliberately don't touch the colour of links in my CSS so that you can set them at the browser. However, perhaps I _should_ set them?
I will add a CSS variable perhaps with the default being to use the browser's choice. But then you will be able to easily override it. For the live website, I will tweak the link colours shortly since that is forced into dark mode.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [20 September 2025 17:32 UTC](https://discourse.nodered.org/t/totallyinformation-web-components-new-release-v1-5-0-and-test-flows/99113/5 "2025-09-20T17:32:34Z")
@Buckskin - try the live [wc.totallyinformation.net](http://wc.totallyinformation.net) site now. I've updated the styles.
---
### Author:  [@Buckskin](https://discourse.nodered.org/u/Buckskin)
#### Post date: [20 September 2025 22:37 UTC](https://discourse.nodered.org/t/totallyinformation-web-components-new-release-v1-5-0-and-test-flows/99113/6 "2025-09-20T22:37:06Z")
Thank you. Much better (although I am not a big fan of pink / purple 😁). I am using Edge.
Quick look at some of the pre-alpha. What about hotNipi's edge meter would that not be a better option [Gauge's for Dashboard 2.0 made with ui\_template - Dashboard - Node-RED Forum](https://discourse.nodered.org/t/gauges-for-dashboard-2-0-made-with-ui-template/85955/132). I know it is designed for dashboard v2 but it may be an easier starting place than chatGPT
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [21 September 2025 00:36 UTC](https://discourse.nodered.org/t/totallyinformation-web-components-new-release-v1-5-0-and-test-flows/99113/7 "2025-09-21T00:36:58Z")
> [@Buckskin](#):
>
> not a big fan of pink / purple
I'm always open to better suggestions. 😉
> [@Buckskin](#):
>
> What about hotNipi's edge meter
I intend to add hotnipi's gauge at some point since the component version of that that was gifted to the community by him. Happy to add the edge meter as well. Though at least the led-gauge is reasonable start I think.
There are so many things I'd like to add, but of course, each takes time which currently is in fairly short supply. However, by the end of Jan next year, I'll effectively be retired so should have more time to spend. I need to balance the time between the components and uibuilder of course though. 😃
Contributions from others are also always welcome and this is much easier with the components since I now include a script that templates he creation of a new component along with matching documentation and demo/test page. So over the last day or so, I've managed to add the two new components complete with demo page and documentation.