A Linear Gauge For Node-Red

Share Your Nodes
18

@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):
    <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:
    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:
    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):
    .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 is how you can accomplish it ...

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 ???

1 Like