# TotallyInformation's Web Components

**URL:** <https://discourse.nodered.org/t/totallyinformations-web-components/94590>\
**Category:** Share Your Projects\
**Tags:** uibuilder, widgets\
**Created:** [13 January 2025 19:27 UTC](https://discourse.nodered.org/t/totallyinformations-web-components/94590 "2025-01-13T19:27:27Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [13 January 2025 19:27 UTC](https://discourse.nodered.org/t/totallyinformations-web-components/94590/1 "2025-01-13T19:27:27Z")

</div>

My (hopefully) handy web component widgets continue to develop. These can be used with ANY web app even without Node-RED. With Node-RED they can be used with http-in/-response nodes and should work fine with both Dashboards.

They are also now starting to get standardised support for UIBUILDER as well of course - but please note that these components will never require it, they will always be independently usable.

They are not quite published to `npm` yet though that will come soon. Until then, they can be used direct from [GitHub](https://github.com/TotallyInformation/web-components) or via the [jsdelivr CDN](https://www.jsdelivr.com/package/gh/totallyinformation/web-components).

The documentation continues to improve and is available, along with full demo's, at [https://wc.totallyinformation.net](https://wc.totallyinformation.net).

We now have one component that I've promoted to "live" status. The `led-gauge` component. The various colours and numbers of segments are all controllable very easily.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/2/72bca57fb3c1a7e65b62942757d0ae079bf74800.png)

There are others that will be getting promoted as soon as I can finalise their code.

One brand-new feature is the ability to send property changes direct from Node-RED via uibuilder. This will soon be standard across most or all of the components as will sending updates back.

At present, the `led-gauge` component is the only fully featured one. Value changes and segment clicks are reported back to Node-RED if used with uibuilder. Any property can be changed via a message with a standardised msg.topic and payload.

PS: The example above also demonstrates one of the other handy components. The  
`call-out` which produces GitHub/Obsidian style call out boxes.

---

<div class="post-metadata">

**Author:** ![craigcurtin](https://avatars.discourse-cdn.com/v4/letter/c/94ad74/32.png) [@craigcurtin](https://discourse.nodered.org/u/craigcurtin)\
**Post date:** [13 January 2025 23:02 UTC](https://discourse.nodered.org/t/totallyinformations-web-components/94590/2 "2025-01-13T23:02:24Z")

</div>

Man you are a machine !! Dont know where you get the time or energy - but great for all of use that you do !

Keep up the great work Julian !

Craig

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [13 January 2025 23:04 UTC](https://discourse.nodered.org/t/totallyinformations-web-components/94590/3 "2025-01-13T23:04:28Z")

</div>

Thanks Craig 😄

Let me know if you've any ideas for future widgets.

---

<div class="post-metadata">

**Author:** ![craigcurtin](https://avatars.discourse-cdn.com/v4/letter/c/94ad74/32.png) [@craigcurtin](https://discourse.nodered.org/u/craigcurtin)\
**Post date:** [13 January 2025 23:06 UTC](https://discourse.nodered.org/t/totallyinformations-web-components/94590/4 "2025-01-13T23:06:17Z")

</div>

Will do - although i am sure you are way ahead of me on those ideas anyway

Craig

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [13 January 2025 23:07 UTC](https://discourse.nodered.org/t/totallyinformations-web-components/94590/5 "2025-01-13T23:07:10Z")

</div>

Can never have enough ideas! And I'm always happy to hear what other people are thinking/wanting.