# A Linear Gauge For Node-Red

**URL:** <https://discourse.nodered.org/t/a-linear-gauge-for-node-red/6001>\
**Category:** Share Your Nodes\
**Created:** [20 December 2018 20:03 UTC](https://discourse.nodered.org/t/a-linear-gauge-for-node-red/6001 "2018-12-20T20:03:35Z")\
**Posts on this page:** 1\
**Showing post:** 21

<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:** [24 December 2018 13:10 UTC](https://discourse.nodered.org/t/a-linear-gauge-for-node-red/6001/21 "2018-12-24T13:10:39Z")

</div>

@seth350, lots of issues. That is your disadvantage now, when doing pioneer work ...

> [@seth350](#):
>
> The problem did not resolve itself until I upgraded to dashboard v2.13. I was on v2.9.8.

Ah yes, the widget API is only recently added to [dashboard](https://discourse.nodered.org/t/announce-dashboard-version-2-10-0/4196) version **2.10.0**. Would be good if you could add that to the readme page, in the installation section.

> [@seth350](#):
>
> How to individualize each widget?

Well seems you have already analysed it very well.  
Seems indeed that you need to specify (in your raw html section in your js file) a dynamic id, similar to the [gauge](https://github.com/node-red/node-red-dashboard/blob/80c6e45558700148db02978405750689bf9397ad/src/components/ui-gauge/ui-gauge.html) node:

```auto
<div id="gauge_{{$id}}" ...

```

Not sure at the moment where the $id is coming from, and if you have to specifiy it somewhere

**[EXTRA]** Another thing that might be usefull is theming support. When you look e.g. at the [gauge-node](https://github.com/node-red/node-red-dashboard/blob/master/nodes/ui_gauge.js#L23), they get the settings of the current theme and display the gauge in those colors (if available):

```auto
        var theme = ui.getTheme();
        if (theme === undefined) {
            theme = {"group-textColor":{value:"#000"}};
            theme["widget-textColor"] = {value:"#000"};
            theme["widget-backgroundColor"] = {value:'#1784be'};
        }

        var gageoptions = {};
        gageoptions.lineWidth = {'theme-dark':0.75};
        gageoptions.pointerOptions = {'theme-dark':{color:'#8e8e93'}, 'theme-custom':theme["group-textColor"].value};
        gageoptions.backgroundColor = {'theme-dark':'#515151', 'theme-custom':theme["widget-textColor"].value };
        gageoptions.compassColor = {'theme-dark':'#0b8489', 'theme-light':'#1784be', 'theme-custom':theme["widget-backgroundColor"].value};

```

@dceejay : _I'm not sure whether every widget developer needs to add this kind of code, or whether this will/can be applied automatically for all widget nodes by the dashboard???_

---

_[View the full topic](https://discourse.nodered.org/t/a-linear-gauge-for-node-red/6001)._