# \[Announce\] Yet Another Gauge

**URL:** <https://discourse.nodered.org/t/announce-yet-another-gauge/22572>\
**Category:** Share Your Nodes\
**Created:** [3 March 2020 17:13 UTC](https://discourse.nodered.org/t/announce-yet-another-gauge/22572 "2020-03-03T17:13:04Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [3 March 2020 17:13 UTC](https://discourse.nodered.org/t/announce-yet-another-gauge/22572/1 "2020-03-03T17:13:04Z")

</div>

By exploring wild web lately for new trends I found some nice gauges with bare minimum design. I decided to make similar gauges available for dashboard.

_Sometimes you'll need only few lines to say thousand words._

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

> **[node-red-contrib-ui-artless-gauge](https://flows.nodered.org/node/node-red-contrib-ui-artless-gauge)**
>
> A Node-RED dashboard ui node. Gauge with minimal design

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [3 March 2020 17:34 UTC](https://discourse.nodered.org/t/announce-yet-another-gauge/22572/2 "2020-03-03T17:34:36Z")

</div>

Really nice. Another great contribution to Node-RED community.

Interesting to see that it is based on GSAP. I will have to allocate time in my agenda to learn this awesome library.

Thanks a lot !

---

<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:** [3 March 2020 17:52 UTC](https://discourse.nodered.org/t/announce-yet-another-gauge/22572/3 "2020-03-03T17:52:45Z")

</div>

GSAP - what's the license on that ?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [3 March 2020 17:54 UTC](https://discourse.nodered.org/t/announce-yet-another-gauge/22572/4 "2020-03-03T17:54:56Z")

</div>

That part is free  
[https://greensock.com/standard-license/](https://greensock.com/standard-license/)

---

<div class="post-metadata">

**Author:** ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)\
**Post date:** [3 March 2020 18:39 UTC](https://discourse.nodered.org/t/announce-yet-another-gauge/22572/5 "2020-03-03T18:39:16Z")

</div>

Nice work! 🙂

On the license part, I wonder if it's compatible with the MIT license of your node.

The link you provided states, it's "free" for commercial or non-commercial use, _but_ only as long as you don't charge end users.

I'm no lawyer or license expert, but I think it would be a good idea to mention it somewhere on the README page that the lib uses a different license that _might_ clash with commercial applications. 🤔 😁

I will definitely try it out on my Dashboard at home though, the only thing I charge myself with is my free time. 😁

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [3 March 2020 18:47 UTC](https://discourse.nodered.org/t/announce-yet-another-gauge/22572/6 "2020-03-03T18:47:13Z")

</div>

> [@kuema](#):
>
> I'm no lawyer or license expert

Same for me. If things went wrong, I will remove it and try to find another solution.  
Just let me know. 🙂

---

<div class="post-metadata">

**Author:** ![knolleary](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/knolleary/32/3_2.png) [@knolleary](https://discourse.nodered.org/u/knolleary)\
**Post date:** [3 March 2020 19:01 UTC](https://discourse.nodered.org/t/announce-yet-another-gauge/22572/7 "2020-03-03T19:01:40Z")

</div>

Definitely recommend you highlight the license of the library you are using in your node's readme.

There's nothing wrong using it in line with the license, but the "no-commercial usage" clause will definitely put some users off and best they know that up front.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [3 March 2020 19:13 UTC](https://discourse.nodered.org/t/announce-yet-another-gauge/22572/8 "2020-03-03T19:13:02Z")

</div>

With version patch updated the readme (+ smarter icon position). Happily take all advises to improve wording specially for legal stuff.

---

<div class="post-metadata">

**Author:** ![Achronite](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/achronite/32/31868_2.png) [@Achronite](https://discourse.nodered.org/u/Achronite)\
**Post date:** [3 March 2020 19:35 UTC](https://discourse.nodered.org/t/announce-yet-another-gauge/22572/9 "2020-03-03T19:35:53Z")

</div>

Nice looking gauge, but the radial gauge isn't working for me - it isn't drawing the line. I have tried different sizes, and it makes no difference:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/4/747b0810433d4c90f13dd8b3796acece3ad5f2be.png)

In linear mode (all other params the same) it displays like this:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/5/85e3c92b038057e9d436d9563a8f74d1da54a954.png)

I am using dashboard version 2.19.4 and node-red 1.0.4

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [3 March 2020 19:38 UTC](https://discourse.nodered.org/t/announce-yet-another-gauge/22572/10 "2020-03-03T19:38:23Z")

</div>

Hmm. If you please add info about the environment you are using  
Browser and versions of related software  
Any errors seen in browser console?

---

<div class="post-metadata">

**Author:** ![Achronite](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/achronite/32/31868_2.png) [@Achronite](https://discourse.nodered.org/u/Achronite)\
**Post date:** [3 March 2020 19:49 UTC](https://discourse.nodered.org/t/announce-yet-another-gauge/22572/11 "2020-03-03T19:49:36Z")

</div>

Nothing in node-red-log. I've tried with Chrome, firefox and Edge and they are all the same.

In Chrome devtools there are 3 errors:

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

I think it could be [http://pi3:1880/ui/js/angular-chart.min.js.map](http://pi3:1880/ui/js/angular-chart.min.js.map) - this file is not being served. Clicking on it it gives: Cannot GET /ui/js/angular-chart.min.js.map

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [3 March 2020 19:57 UTC](https://discourse.nodered.org/t/announce-yet-another-gauge/22572/12 "2020-03-03T19:57:43Z")

</div>

No errors. Those are warnings and angular-chart is not related.  
Only thing I can suggest is to restart node-red or even whole system if you aren't done already.  
If somebody with PI equipment can confirm similar problems ... cos I dont have any

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [3 March 2020 20:18 UTC](https://discourse.nodered.org/t/announce-yet-another-gauge/22572/13 "2020-03-03T20:18:02Z")

</div>

There is one thing. If you set up gauge with let say linear layout and deploy and send some payload and then change the layout to radial and deploy but dont send new payload then the old payload will not cause the gauge to render cos replay message from node-red core does not contain proper computed values to that layout and stripe rendering can not happen. Only value can be changed cos this is correct for both layouts.  
So the question is, do you send new payload after the change of layout?

---

<div class="post-metadata">

**Author:** ![edje11](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/edje11/32/572_2.png) [@edje11](https://discourse.nodered.org/u/edje11)\
**Post date:** [3 March 2020 20:44 UTC](https://discourse.nodered.org/t/announce-yet-another-gauge/22572/14 "2020-03-03T20:44:04Z")

</div>

Nice, thanks for sharing.  
Can you override the line color with a message?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [3 March 2020 20:58 UTC](https://discourse.nodered.org/t/announce-yet-another-gauge/22572/15 "2020-03-03T20:58:13Z")

</div>

Not currently. I take it as a little contradiction with concept of widget being as simple and predictable as possible. But If you can describe the benefit of this possible option for many possible cases, I can make it happen.  
Runtime option changes will not be permanent of course as for any other ui widget option changes via msg.ui\_control ...

---

<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:** [3 March 2020 21:59 UTC](https://discourse.nodered.org/t/announce-yet-another-gauge/22572/16 "2020-03-03T21:59:04Z")

</div>

Very nice @hotNipi!  
I'm just building some new dashboards and have been trawling the node-RED library today, to try and find something new & fresh looking, and this certainly looks great.

_Now I've just got to find a similarly great looking bar-chart, and I'm done!_

Thanks for sharing.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [3 March 2020 22:01 UTC](https://discourse.nodered.org/t/announce-yet-another-gauge/22572/17 "2020-03-03T22:01:33Z")

</div>

Thank you.  
Bar chart looks like bar chart. Or I'm missing something here? 😉  
(ugliest but still must respect as most effective data visualization tools)

---

<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:** [3 March 2020 22:11 UTC](https://discourse.nodered.org/t/announce-yet-another-gauge/22572/18 "2020-03-03T22:11:29Z")

</div>

> [@hotNipi](#):
>
> Bar chart looks like bar chart

I don't want to take your thread OT, but as you have asked...  
I was looking for something like this as something different

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

...which is [GitHub - nazcasun/node-red-contrib-dashboard-sum-bars: node-red dashboard node : display sum values in a bar chart](https://github.com/nazcasun/node-red-contrib-dashboard-sum-bars)  
But, it appears to be an abandoned node (I've emailed the author) and there are too many bugs in it, which I've spent all night trying to fix.  
I've now thrown in the towel trying to fix it, and looking for an alternative.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [3 March 2020 22:19 UTC](https://discourse.nodered.org/t/announce-yet-another-gauge/22572/19 "2020-03-03T22:19:35Z")

</div>

Yup. This design has same flaws I created into ui-level. It may look nice but design driven limitations affect in many areas.

---

<div class="post-metadata">

**Author:** ![Maximus1](https://avatars.discourse-cdn.com/v4/letter/m/90ced4/32.png) [@Maximus1](https://discourse.nodered.org/u/Maximus1)\
**Post date:** [3 March 2020 22:23 UTC](https://discourse.nodered.org/t/announce-yet-another-gauge/22572/20 "2020-03-03T22:23:59Z")

</div>

nice gauge, but i get only a "n" when i try to use "fa-sd-card" as an icon.  
any suggestions?

[Next page](https://discourse.nodered.org/t/announce-yet-another-gauge/22572.md?page=2)