# Custom node appearance and event handlers. Proof on concept: Inline Gauge

**URL:** <https://discourse.nodered.org/t/custom-node-appearance-and-event-handlers-proof-on-concept-inline-gauge/83001>\
**Category:** Core Development\
**Tags:** ui-widgets\
**Created:** [18 November 2023 23:47 UTC](https://discourse.nodered.org/t/custom-node-appearance-and-event-handlers-proof-on-concept-inline-gauge/83001 "2023-11-18T23:47:36Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [21 November 2023 09:52 UTC](https://discourse.nodered.org/t/custom-node-appearance-and-event-handlers-proof-on-concept-inline-gauge/83001/21 "2023-11-21T09:52:13Z")

</div>

if the image is over the node, why not make the image clickable if possible) which would open the node configuration

---

<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:** [21 November 2023 12:15 UTC](https://discourse.nodered.org/t/custom-node-appearance-and-event-handlers-proof-on-concept-inline-gauge/83001/22 "2023-11-21T12:15:55Z")

</div>

Yes, as previously mentioned, there has to be an ability to open the config. And the ability to easily show/hide the extra display.

A flag in the config that lets you decide whether the default is shown or hidden would be very helpful.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [21 November 2023 20:22 UTC](https://discourse.nodered.org/t/custom-node-appearance-and-event-handlers-proof-on-concept-inline-gauge/83001/23 "2023-11-21T20:22:54Z")

</div>

> [@johnebgood](#):
>
> I am also adding an option for round or square options.

Although this looks very nice, I am wondering if this isn't too much different looking from normal nodes? With your rectangular shape it was still pretty visible that it was a node, just a fancy one. But now the middle one looks more like a very elegant _junction_ instead of a _node_ 😉 Not sure whether people will immediately recognize it as a node? But again, it looks nice.

So I am wondering - if this ever would become possible - if it is better to restrict the visualization to a rectangular shape or not?

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [21 November 2023 21:05 UTC](https://discourse.nodered.org/t/custom-node-appearance-and-event-handlers-proof-on-concept-inline-gauge/83001/24 "2023-11-21T21:05:47Z")

</div>

Blimey!  
What happened to 'The editor is not a dashboard' 🤔

Personally, i'm quite strict in that practice and not using the editor for any form of monitoring, that's not to say it can be useful of course given the right use case.

But this thread looks fun, and I like designing.

To me, the gauges look to 'disconnected' from the node that represents them.  
IMO, I think the gauge should be apart of the node its self

Something like below.

 ![Screenshot 2023-11-21 at 20.56.24](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/4/04de604c35c6167e577ac41ad94e6583df163490.png)

**EDIT**  
And yes!  
I have just created a tumble dryer in Node RED 😆

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [21 November 2023 21:43 UTC](https://discourse.nodered.org/t/custom-node-appearance-and-event-handlers-proof-on-concept-inline-gauge/83001/25 "2023-11-21T21:43:58Z")

</div>

I'm counting to ten.... 🤕

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [21 November 2023 22:00 UTC](https://discourse.nodered.org/t/custom-node-appearance-and-event-handlers-proof-on-concept-inline-gauge/83001/26 "2023-11-21T22:00:29Z")

</div>

> [@marcus-j-davies](#):
>
> What happened to 'The editor is not a dashboard'

Please don't keep repeating that. Never awake sleeping dogs 😉

> [@marcus-j-davies](#):
>
> I have just created a tumble dryer in Node RED

Well at least you managed to create a tumble dryer _ **node** _. I mean that at least you see immediately it is a node. Perhaps that might be easier for people to get familiar with this kind of nodes, because the difference from normal nodes is not that big...

And when you click on the top area (i.e. icon and label) the config screen will appear like normal, but when you click in the visualization area the visualization can respond to that in some way.

About the inputs and outputs of your node. You draw them at the top, while @johnebgood placed them in the center:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/0/6036f1ce910951e246b8e20293f5bc4125a50d1c.png)

Not sure if that was a conscious choice, or you just forgot about it.

But it might have an advantage to attach the wires at the top of the node. When you hide the visualization (via the node's config screen) then the wires don't change if they are attached at the top. If you have used e.g. junctions to nicely route your wires, then that routing won't be changed by hiding or showing the visualization...

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [21 November 2023 22:09 UTC](https://discourse.nodered.org/t/custom-node-appearance-and-event-handlers-proof-on-concept-inline-gauge/83001/27 "2023-11-21T22:09:31Z")

</div>

Oh this was just a swag change to the height via CSS to fit the gauge (shamefully lifted from a web image search).

Its actually the `function` node 🤫

Yes, having the pins centered would make for better uniformity

**EDIT**  
Thinking about this in more detail (sorry if it’s already been discussed, have not gone through the thread in detail)

But having an area to display runtime updatable content seem intriguing, not just for gauges as an example.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [21 November 2023 22:41 UTC](https://discourse.nodered.org/t/custom-node-appearance-and-event-handlers-proof-on-concept-inline-gauge/83001/28 "2023-11-21T22:41:07Z")

</div>

> [@marcus-j-davies](#):
>
> Oh this was just a swag change to the height via CSS

Ah yes, thanks for the tip.

The node-red-contrib-image-output node would look this way like this:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/b/fb72d896fea9880b24148e1a0030d24d12729e2b.jpeg)

Or

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/a/1ae804e1d8e6e6241b55bf2de40f90c0844ad66e.jpeg)

Personally I like the latter one, because - as explained above - the wires keep untouched when you hide the vizualization.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [21 November 2023 22:45 UTC](https://discourse.nodered.org/t/custom-node-appearance-and-event-handlers-proof-on-concept-inline-gauge/83001/29 "2023-11-21T22:45:45Z")

</div>

BTW not sure but perhaps there is an extra advantage of such a visualization inside/on-top-of the node: because it 'might' also still work fine with the current auto-layout algorithms. Because those algorithms take into account the area of the node.

---

<div class="post-metadata">

**Author:** ![jackcarey](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jackcarey/32/61101_2.png) [@jackcarey](https://discourse.nodered.org/u/jackcarey)\
**Post date:** [22 November 2023 20:56 UTC](https://discourse.nodered.org/t/custom-node-appearance-and-event-handlers-proof-on-concept-inline-gauge/83001/30 "2023-11-22T20:56:31Z")

</div>

I've thought a lot about the _"editor is not a dashboard"_ idea over the past 12~18 months and I think it makes a lot of sense, but I also disagree with it because of the same factory paradigm as johnebgood. Were NodeRED state-based rather than message-based, inline UI would be a no-brainer. For NR though, a button next to each nodes "Enabled" toggle (at the bottom of the sidebar panel) for "Show Inline UI" could satisfy the best of both worlds: it'd only do something if the node developer has configured inline UI (which could be done in much the same way the current UI and help text is at the moment), it wouldn't affect the myriad of existing nodes that don't _have_ any inline UI, and the visual clusterf\*ck of lots of disparate inline components in the editor is avoided by default because the user would explicitly have to enable each one.

I can see an issue with some node developers preferring inline UI to the sidebar, which could take away choice for the user. Perhaps `data-nr-inline` attributes on the HTML could be used to ensure components that appear inline _also_ appear in the sidebar?

---

<div class="post-metadata">

**Author:** ![cymplecy](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/cymplecy/32/2773_2.png) [@cymplecy](https://discourse.nodered.org/u/cymplecy)\
**Post date:** [22 November 2023 21:25 UTC](https://discourse.nodered.org/t/custom-node-appearance-and-event-handlers-proof-on-concept-inline-gauge/83001/31 "2023-11-22T21:25:49Z")

</div>

I think, at a simple level, its nice to be able to see your code and view a "dashboard" on the same web-page

I come from Scratch/Snap! and that's exactly what we do

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

But, I genreally just do home IoT with NodeRED and the debugger and node status do most of what I need/want

I can see it would be nice to see a fancy gauge on the editor but nice doesn't cut it for me to go against long held NR philosophy - You've got to push back against the waves 🙂

Maybe what is needed is the ability to view a dashboard instead/as well as the debugger?

[edit]In Snap! we can vary the size of the stage on the right depending on what's more important - seeing the code or seeing some results from it

Just my thoughts 🙂

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [22 November 2023 22:02 UTC](https://discourse.nodered.org/t/custom-node-appearance-and-event-handlers-proof-on-concept-inline-gauge/83001/32 "2023-11-22T22:02:03Z")

</div>

> [@jackcarey](#):
>
> the user would explicitly have to enable each one.

Yes I totally agree that by default the nodes should look like today, and the user explicit needs to activate the inline visualization. That way _ **the flow editor 'by default' will still be not a dashboard** _. Unless the user really likes his flow editor to become a dashboard...

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [22 November 2023 22:18 UTC](https://discourse.nodered.org/t/custom-node-appearance-and-event-handlers-proof-on-concept-inline-gauge/83001/33 "2023-11-22T22:18:25Z")

</div>

> [@jackcarey](#):
>
> I've thought a lot about the _"editor is not a dashboard"_ i

The main objection is “ do you really want to allow users access to the editor/admin side of the application. While Node-RED is indeed often used in “simple” home automation tasks, if it is used in “ production” however simple that may be, if you require access to the editor in order to see what is happening then that person has full access to the application. Even in a home environment the possibility for inexperienced users to mess things up is huge. I can see the utility for debug and testing, but it should not be the default ui/dashboard for users

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [22 November 2023 22:29 UTC](https://discourse.nodered.org/t/custom-node-appearance-and-event-handlers-proof-on-concept-inline-gauge/83001/34 "2023-11-22T22:29:16Z")

</div>

For the past 8 years, I've dissed the comments "the editor is not a dashboard" at every opportunity, but now I'm beginning to eat my words....

---

<div class="post-metadata">

**Author:** ![jackcarey](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jackcarey/32/61101_2.png) [@jackcarey](https://discourse.nodered.org/u/jackcarey)\
**Post date:** [22 November 2023 22:32 UTC](https://discourse.nodered.org/t/custom-node-appearance-and-event-handlers-proof-on-concept-inline-gauge/83001/35 "2023-11-22T22:32:30Z")

</div>

I think this becomes especially important for the use cases where flows are operating _only_ as a backend (no dashboards needed). One could argue it's actually a bit backwards to default on text-based debugging in a visual programming environment and I'd personally love to have discrete visuals without the complexity/clutter of setting up nodes only for a quick dashboard or ui-builder frontend that only flow maintainers will ever see. Beyond backend-only flows, the idea of "locations" for UI components in visual programming interests me, such that users and/or node developers would configure where components are displayed... `inline`, `sidebar`, or `frontend` (dashboard) for example. I don't know if this concept is necessarily a good fit for NR, but packaging UI components with nodes could make "flow-to-feedback" workflows easier to create 🤔

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [22 November 2023 22:45 UTC](https://discourse.nodered.org/t/custom-node-appearance-and-event-handlers-proof-on-concept-inline-gauge/83001/36 "2023-11-22T22:45:15Z")

</div>

> [@Paul-Reed](#):
>
> but now I'm beginning to eat my words....

Paul,  
So I assume you don't like the proposals being made here?

I have a lot of interest in this discussion, because currently some users - like me - already use this kind of nodes, but we have to find a lot of workarounds to get it done. Would simply like to have a more easy a standard way to do it.

And people that don't like it have the advantage that it would be disabled by default, so they can keep having a simple classic flow editor. So from their point of view, nothing changes. And from our point of view, a lot would change.

And to be honest. It isn't only me and a couple of weirdos that like a bit of visualization stuff in their flow editor. When you look at the npm [download statistics](https://npm-stat.com/charts.html?package=node-red-contrib-image-output) of the node-red-contrib-image-output node, then we see that there were _ **57239** _ downloads in the last 365 days. I think that number speaks for itself...

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [22 November 2023 23:02 UTC](https://discourse.nodered.org/t/custom-node-appearance-and-event-handlers-proof-on-concept-inline-gauge/83001/37 "2023-11-22T23:02:38Z")

</div>

> [@BartButenaers](#):
>
> there were _ **57239** _ downloads in the last 365 days. I think that number speaks for itself...

Not that impressive Bart...  
I got 32,875 from node-red-contrib-simpletime, and I'm not even a developer...  
I do like some feedback in the editor, but should be discreetly, like `node.status` etc.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [22 November 2023 23:09 UTC](https://discourse.nodered.org/t/custom-node-appearance-and-event-handlers-proof-on-concept-inline-gauge/83001/38 "2023-11-22T23:09:37Z")

</div>

> [@BartButenaers](#):
>
> _ **57239** _ downloads in the last 365 days

vs 1.3 million for node-red and over 100 million on docker 🙂 . As I said, while I can’t see a mainstream use case I certainly can see utility for debugging, so I’m not totally against the idea, just not sure what is stopping people implementing today. The examples given so far seem within reach of decent developers.

---

<div class="post-metadata">

**Author:** ![jackcarey](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jackcarey/32/61101_2.png) [@jackcarey](https://discourse.nodered.org/u/jackcarey)\
**Post date:** [23 November 2023 00:05 UTC](https://discourse.nodered.org/t/custom-node-appearance-and-event-handlers-proof-on-concept-inline-gauge/83001/39 "2023-11-23T00:05:55Z")

</div>

I agree with disallowing consumer users access to the editor/admin only for the sake of seeing some UI. This and the visual simplicity of the current node appearance are great reasons to keep them separated. However, the question I am now thinking about is how best to enable pre-packaged visuals/UI with nodes. I can see a few ways forward:

1. Allow inline UI on nodes, but only if it is turned off by default and enabled per node instance per flow. This would only be for flow developers and maintainers, who could toggle which node instances show inline UI.
2. Allow UI/visuals in the editor sidebar, perhaps as a new `tab-link` next to other buttons. This would bring together UI 'widgets' from multiple node instances into one location without cluttering the flow grid. Similar in appearance to the Scratch/Snap screenshot from cymplecy. This would only be for flow developers and maintainers, who could toggle which node instances appear here.
3. Effectively allowing custom dashboard-like functionality from _all_ nodes, such that they can expose their own UI to be used in the same way as the current `button`, `slider`, `gauge`, etc. In the editor, flow developers could then configure which controls and data are exposed to the dashboard through either a new `node-red-dashboard` node or the sidebar UI.

As I've written this, 2. and 3. seem like the best options. For a quick fix, 2. could probably be done by writing by a package that adds a `/ui` iframe into the sidebar tab links. 3. would require/benefit from integration with `uibuilder` or `node-red-dashboard` in order to gain momentum. In any case, I know `node-red-dashboard` is being re-written, so discussion along this route may be best kept until the new version is seen...

---

<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:** [23 November 2023 00:52 UTC](https://discourse.nodered.org/t/custom-node-appearance-and-event-handlers-proof-on-concept-inline-gauge/83001/40 "2023-11-23T00:52:19Z")

</div>

> [@cymplecy](#):
>
> I think, at a simple level, its nice to be able to see your code and view a "dashboard" on the same web-page

Which, of course, you can do if using a decent browser. 🙂

Edge lets you have a "split screen" view as do one or two other browsers I think. I sometimes use this feature when making a uibuilder video.

[Previous page](https://discourse.nodered.org/t/custom-node-appearance-and-event-handlers-proof-on-concept-inline-gauge/83001.md?page=1)

[Next page](https://discourse.nodered.org/t/custom-node-appearance-and-event-handlers-proof-on-concept-inline-gauge/83001.md?page=3)