# \[Announce\] node-red-contrib-ui-level

**URL:** <https://discourse.nodered.org/t/announce-node-red-contrib-ui-level/9408>\
**Category:** Share Your Nodes\
**Created:** [25 March 2019 15:52 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level/9408 "2019-03-25T15:52:05Z")\
**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:** [25 March 2019 15:52 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level/9408/1 "2019-03-25T15:52:05Z")

</div>

> **[node-red-contrib-ui-level](https://flows.nodered.org/node/node-red-contrib-ui-level)**
>
> Level indicator

As first release and by not having full testing resources available, it may have slight issues here and there but with your help my dear community I'm sure we can find and resolve them quickly 😉

---

<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:** [25 March 2019 17:55 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level/9408/2 "2019-03-25T17:55:41Z")

</div>

Really cool widget! Just tried it out. Great work! 😀

Just one tiny thing: the dark text is really hard to read when using the dark dashboard theme.

---

<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:** [25 March 2019 17:57 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level/9408/3 "2019-03-25T17:57:59Z")

</div>

What theme you are using? Angular or Node-RED?

---

<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:** [25 March 2019 17:59 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level/9408/4 "2019-03-25T17:59:13Z")

</div>

I am using the standard dark theme of the dashboard, I believe it's all Angular Material.

![Screenshot_2019-03-25_18-57-28](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/9/9cb05c51ea832bfde96ecd7a972268555782029f.png)

This setting, without any other changes made:

![Screenshot_2019-03-25_19-00-33](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/d82e7184f08732bba66410e874cedd1811cc9197.png)

---

<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:** [25 March 2019 18:07 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level/9408/5 "2019-03-25T18:07:30Z")

</div>

Weird 🤔 It should take theme text color.  
Can you please add version of Node-Red and dashboard version also.

---

<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:** [25 March 2019 18:09 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level/9408/6 "2019-03-25T18:09:44Z")

</div>

Of course, it's a fresh install of:

- Node-RED version: v0.20.3
- Dashboard version: 2.14.0

I can try to change the dashboard's text color setting, maybe there is something wrong with the default values.

EDIT:  
The screenshot I took was from a Chromium browser, v73.0.3683.75

When using Firefox (66.0), the text in the middle is missing completely.

---

<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:** [25 March 2019 18:15 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level/9408/7 "2019-03-25T18:15:00Z")

</div>

Hey @hotNipi,  
Really nice piece if work!!  
Perhaps add a picture of the widget in your readme file, so everybody can see right away how your widget looks like. It is too pretty to hide it...  
Bart

---

<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:** [25 March 2019 18:16 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level/9408/8 "2019-03-25T18:16:52Z")

</div>

Absolutely. Was about to do it, but found another bug. As always. Patch for that is published.

---

<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:** [25 March 2019 18:23 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level/9408/9 "2019-03-25T18:23:04Z")

</div>

Just updated. Very nice work! 😀

The result on Chromium 73:  
 ![Screenshot_2019-03-25_19-21-04](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/19f73300e120dcc85ddb0fdcdd312d7193a94549.png)

and Firefox 66:  
 ![Screenshot_2019-03-25_19-21-30](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/f/f2b0d5e39524c02d96c51133211ddfe9c3d28fe8.png)

---

<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:** [25 March 2019 18:45 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level/9408/10 "2019-03-25T18:45:16Z")

</div>

I will investigate FF missing text issue tomorrow. I think it's the inline font-styling issue but let's see.

---

<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:** [25 March 2019 19:28 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level/9408/11 "2019-03-25T19:28:34Z")

</div>

Couldn't wait. Version 0.0.6 has fixes for Firefox.

---

<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:** [25 March 2019 20:27 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level/9408/12 "2019-03-25T20:27:28Z")

</div>

Yes, I know what you mean... 😀

Perfect, thank you!

---

<div class="post-metadata">

**Author:** ![banjopicker](https://avatars.discourse-cdn.com/v4/letter/b/58f4c7/32.png) [@banjopicker](https://discourse.nodered.org/u/banjopicker)\
**Post date:** [30 March 2019 13:46 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level/9408/13 "2019-03-30T13:46:05Z")

</div>

That is pretty cool, thank you. I will be replacing some of my indicators with this--clean and compact.

---

<div class="post-metadata">

**Author:** ![bohtho](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bohtho/32/6153_2.png) [@bohtho](https://discourse.nodered.org/u/bohtho)\
**Post date:** [30 March 2019 17:56 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level/9408/14 "2019-03-30T17:56:36Z")

</div>

It’s really great for quick compact mobile dashboards. Great work. I use 15 of these on my main dashboard tab now. Hope the sorting/placement thing gets sorted soon whether the fault is current dashboard itself or widgets.

---

<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:** [1 April 2019 17:17 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level/9408/15 "2019-04-01T17:17:27Z")

</div>

The sorting/placement issue is fixed in version 0.0.10.  
🙃

---

<div class="post-metadata">

**Author:** ![wraith](https://avatars.discourse-cdn.com/v4/letter/w/bcef8e/32.png) [@wraith](https://discourse.nodered.org/u/wraith)\
**Post date:** [1 April 2019 17:43 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level/9408/16 "2019-04-01T17:43:37Z")

</div>

There is an issue if you change pages on the dashboard - level doesn't show current value, only unit is visible (Chrome and Firefox on Win 10). ![no_value](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/d/d6d3dd3a90c9b77bd73bcba0612517f6ea6ce9f4.png) ![value](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/8/89bc105fdefb54514d85ed3f29328e975d0a741c.png)

---

<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:** [1 April 2019 19:03 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level/9408/17 "2019-04-01T19:03:03Z")

</div>

Thank you! Fixed in 0.0.11

---

<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:** [1 April 2019 21:14 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level/9408/18 "2019-04-01T21:14:36Z")

</div>

What was the magic ? (to the placement issue?)

---

<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:** [2 April 2019 04:00 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level/9408/19 "2019-04-02T04:00:14Z")

</div>

Well, the issue was missing `order` property in `ui.addWidget` and the magic was just clear head to discover it.

---

<div class="post-metadata">

**Author:** ![realjax](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/realjax/32/895_2.png) [@realjax](https://discourse.nodered.org/u/realjax)\
**Post date:** [24 April 2019 20:51 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level/9408/20 "2019-04-24T20:51:01Z")

</div>

I love this level component but was wondering if it would it be possible to add the following feature.  
Have a look at this comparison between the level and the gauge:

![10](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/a/acaf43a3cdde0dd3aa93b44c6b49b223856974d6.png)

Both have a similar color setup but the gauge only shows green because this is the active color range for the current value. The level however shows all color ranges.

Would it be possible for the level to have something similar? Ie, show een all green bar for its current value, an all orange bar when it drops (in this example) below 2.95 and an all red below 2.85?

cheers,

[Next page](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level/9408.md?page=2)