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

**URL:** <https://discourse.nodered.org/t/announce-node-red-contrib-ui-level-0-1-0/15584>\
**Category:** Share Your Nodes\
**Created:** [16 September 2019 16:49 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level-0-1-0/15584 "2019-09-16T16:49:44Z")\
**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:** [16 September 2019 16:49 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level-0-1-0/15584/1 "2019-09-16T16:49:44Z")

</div>

> **[node-red-contrib-ui-level](https://flows.nodered.org/node/node-red-contrib-ui-level)**
>
> A Node Red dashboard ui node. Linear level indicator

  
Version **0.1.0** doesn't bring any new feature for widget. Well ... almost. Minor things may be can be noticed with layout and I hope those will not break existing graphical beauty for anyone.

Main reason of this update is **performance improvement**.  
This involves complete new solution for graphical elements.  
Also as one of bottlenecks was animation of value text, I decided to separate it from main animations and turned it off by default. But there is checkbox to allow value text be animated. Handle with care 😉

As the change was actually quite heavy, I cant be sure I tested all the edge cases properly so bugs ... if found, don't hesitate to report here or at [ui-level github page](https://github.com/hotNipi/node-red-contrib-ui-level)

---

<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:** [16 September 2019 18:57 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level-0-1-0/15584/2 "2019-09-16T18:57:48Z")

</div>

And bugfix 0.1.1 published.  
Mea culpa.

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [19 September 2019 07:43 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level-0-1-0/15584/3 "2019-09-19T07:43:45Z")

</div>

Working great @hotNipi! very snappy.

Can I suggest one feature (I am not a good enough coder to create a pullrequest :') );

Provide an option to hide the text for both vertical and horizontal.  
For vertical an option to rotate the label (or perhaps even inherent to vertical).

The idea behind a level is that you have a visual representation for a certain value, meaning one doesn't necessarily need to see the value itself.

Visual representation what I would think would be awesome:

![22](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/1/169740ee19ed5a0822938c19ecdcfc4d77de21b1.jpeg)

The default font of the value is quite huge, is this correct ?

![17](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/b1a8b7a80606e2d13b752ada0a994b7d3853e0f3.jpeg)

---

<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:** [19 September 2019 07:49 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level-0-1-0/15584/4 "2019-09-19T07:49:44Z")

</div>

So feature request in short

1. Option to hide value
2. Condensed vertical layout (fit into one unit width)

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [19 September 2019 07:55 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level-0-1-0/15584/5 "2019-09-19T07:55:53Z")

</div>

I believe that is correct 🙂

Thinking out loud; for the value one could use the label to show it as well (ends up with the same font as the label). Would be great, I can already see a dashboard with only levels for batteries haha

---

<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:** [19 September 2019 09:31 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level-0-1-0/15584/6 "2019-09-19T09:31:51Z")

</div>

> [@bakman2](#):
>
> Thinking out loud; for the value one could use the label to show it as well (ends up with the same font as the label)

Maybe then  
3. text option - disable bold (gives more freedom for every layout)

and for vertical condensed layout if you leave label empty, value (if not hidden) will be at the label position

---

<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:** [19 September 2019 09:38 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level-0-1-0/15584/7 "2019-09-19T09:38:43Z")

</div>

> [@bakman2](#):
>
> The default font of the value is quite huge, is this correct ?

It is. You have text options to adjust it to fit better into your design.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/3/384bb064914a77b0f3e11ab2de5a3cb121b24ae3.png)

---

<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:** [19 September 2019 09:40 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level-0-1-0/15584/8 "2019-09-19T09:40:56Z")

</div>

imho - default should be the dashboard default font and size... - and then customise from there.

---

<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:** [19 September 2019 09:53 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level-0-1-0/15584/9 "2019-09-19T09:53:10Z")

</div>

> [@dceejay](#):
>
> default should be the dashboard default font and size

I think even regular gauge does not follow that rule for value field...  
But anyway the text options are public and easy to use. Font size for default I guess it is rather question of art (and this is not something where I can call myself an expert)

---

<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:** [19 September 2019 09:58 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level-0-1-0/15584/10 "2019-09-19T09:58:42Z")

</div>

touche - it is indeed (thanks to the justgage library). larger and bolder - but does use the default font-style - so when you change the Site - theme font it all changes.

---

<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:** [19 September 2019 10:05 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level-0-1-0/15584/11 "2019-09-19T10:05:25Z")

</div>

Sure. This is all same for ui\_level. Font type and color is inherited from dashboard (widget text related values). All what is changed is sizes in relative manner. (small figures for min and max, bold and little bigger value field)

---

<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:** [19 September 2019 10:18 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level-0-1-0/15584/12 "2019-09-19T10:18:46Z")

</div>

all good then 🙂

---

<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:** [20 September 2019 15:15 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level-0-1-0/15584/13 "2019-09-20T15:15:49Z")

</div>

Since v0.1.6

1. Single vertical layout can be sized down to one unit width.
2. Option to hide value field

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

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

😉

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [20 September 2019 17:16 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level-0-1-0/15584/14 "2019-09-20T17:16:31Z")

</div>

thanks @hotNipi, fantastic stuff!

---

<div class="post-metadata">

**Author:** ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)\
**Post date:** [21 September 2019 08:11 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level-0-1-0/15584/15 "2019-09-21T08:11:26Z")

</div>

Nicely performant, no issues 😃

![level](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/b/b4bab26a57facf34c09137ca76010a49f7ba979d.gif)

---

<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:** [21 September 2019 08:19 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level-0-1-0/15584/16 "2019-09-21T08:19:40Z")

</div>

Sounds like symphony 👏😃

---

<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:** [21 September 2019 19:31 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level-0-1-0/15584/17 "2019-09-21T19:31:57Z")

</div>

Just driving home tonight, and thinking how cool it would be if the level could optionally display peak values, [similar to my car dashboard](https://youtu.be/i9M64B1x-Ro) (but of course not a gauge).  
Especially if the delay time for the peak indicator could be set from the node config.

Maybe a step too far??

---

<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:** [21 September 2019 19:58 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level-0-1-0/15584/18 "2019-09-21T19:58:15Z")

</div>

Peak option has been in my mind and after redesign seems to be doable. No promises 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:** [23 September 2019 17:34 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level-0-1-0/15584/19 "2019-09-23T17:34:03Z")

</div>

So there will be peak option. Peak will have two modes. One mode will be with adjustable delay just like @Paul-Reed described. Additionally peak can be so to say _permanent_ with manual reset option via `msg.ui_control` And here I am little stuck with naming those options. I need short but clear names for nodes configuration page option selector.

Edit: there can be also possibility to follow peak that user can send via `msg.peak` or something like that. If anybody sees such thing usable, make some noise 🙃

With this little help from community the peak option may be then released already tomorrow. 😉

---

<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:** [23 September 2019 19:20 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-ui-level-0-1-0/15584/20 "2019-09-23T19:20:13Z")

</div>

> [@hotNipi](#):
>
> I need short but clear names for nodes configuration page option selector.

Maybe call the 'permanent peak' simply **peak** ,  
and the 'delay peak' - **auto-peak** (as in auto resetting peak)

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