# 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:** 18

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

</div>

> [@seth350](#):
>
> I do not understand how the configuration gets transferred into the actual ui widget?

@seth350: You will have to implement a couple of things to transfer data from you config screen to the dashboard widget:

- Create a html widget to visualise the data in the config screen (flow editor):

```auto
<div class="form-row">
     <label for="node-input-colorArea1"><i class="fa fa-paint-brush"></i> Color 1</span></label>
     <input type="color" id="node-input-colorArea1"/>
</div>

```

- Then the data needs to be listed inside the 'default' values section of 'this' JavaScript object:

```auto
defaults: {
         colorArea1: {value: '#ffffc0'}
},

```

You specify here the default value (in case the user hasn't been able to change it yet), but you can also e.g. specify whether the fields is required or not ...
- The the colorArea1 fields becomes available in the config input parameter:

```auto
function HTML(config) {

```

- And then you can use it inside the html code that will be generated (in the flow on the server side which will be send to the dashboard on the client side):

```auto
.scaleArea1 {
     fill: ` + config.colorArea1 + `;
     stroke: #000;
     stroke-width: 1px;
}

```

Note that this works all fine when you drag a **new** gauge-node on your flow editor. But it will become more difficult when you have to add new fields afterwards, and users have already been using your previous version in their flows. Then you will need to write some extra Javascript code to make sure that existing nodes (which don't have your new field yet), will get the new field with the correct default data. But that is not relevant for you at this moment (since you haven't published your first version on npm yet): just remove the existing gauge-nodes from your flow, and drag a new one from your pallette to your flow and the new field with the default value will become automatically available. In case you will ever need it, [here](https://discourse.nodered.org/t/upgrading-nodes-specifically-my-own/2641/11) is how you can accomplish it ...

> [@seth350](#):
>
> I just installed the node to my node-red and I am getting some errors.

Have you installed it in your node-RED directory? Don't know about this ... Is there anybody else that knows what could be causing this problem ???

---

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