[HELP wanted] A Linear Level Indicator

It looks like that did the trick! Thank you for such a significant contribution to Node-RED!

Cheers, AB

1 Like

Hi.. I am using this as well and since the last update my bars now show the full 100% view rather than
matching the lower number being passed to it.

tried it in Edge (chromium) which shows 100% then if you hit refresh the animation runs and you see the bar go down to 12%

Vivaldi (3.4.2066.86) it just stuck at 100% might take several refreshing to make it update.

This was all fine i think in 1.3.33.... i think 1.3.34 when i saw the issue and figure that was why 1.3.35 was released.

Screenshot 2020-10-28 121107


Have you restarted the node-red after update?
Have you cleared browser cache (where dashboard runs) after update?

Just to make sure i redid both.. and still doesn't refresh... only in Edge Chromium it will update after you hit refresh for 2nd time

note there 1.3.36 so updated to that version and restarted NR and no change to the problem.

Screenshot 2020-10-28 144632

I see the above in the Browser dev console if that helps.. app.min.js tracks back to this Module.

The loading.html is not related.
Please add full list of version numbers of your setup.


And add info about the platform also.

Browsers... all.. Vivaldi, Edge Chromium, Firefox (all will be on latest versions)
even now on Samsung S10 Browser

It can take several refresh before it works.. if refresh again afterwards it then back to 100%

nodejs : 14.0.0
nodered. 1.2.2
dashboard: 2.23.4
ui_level : 1.3.36

NR is running on a Raspberry Pi3..
Linux DietPi 4.19.66-v7+ #1253 SMP Thu Aug 15 11:49:46 BST 2019 armv7l GNU/Linux

any other debugs i can get up?


You don't run browsers with dashboard on PI?

no.. no gui /desktop on the pi... all do via PC browser connecting to the PI.

OK. Seems I managed to reproduce on mobile so needs more work.
Luckily nothing is really broken, for any next input the widget shows graphics correctly. It is just bad for setups where the data update rate is really low.

Not related to the problem, I expect, but that is a very early 14.x version of nodjs, the latest is 14.15.0 I believe. It would be worth upgrading as initial versions of releases often have issues.

not too sure how to do that.. and i see latest is Node15 and im sure i read someone had problems using v15 recently

No, don't use 15, 14.x is the latest recommended. The 15 series are effectively development versions on the way to producing 16 which will be the next Long Term Support version. I don't know anything about DietPi, I use Raspbian Lite where I want a minimal OS installation, which is on all my Pis in fact.

yeah Dietpi is the same very lightweight all shell driven.
someone there posted a script to update nodejs.. but it takes the download from http://nodejs.org/dist/latest which will be 15.x

Im sure i could butcher the sh script to just go to the 14 folder instead (https://nodejs.org/dist/latest-v14.x/)

but i might do that on a test vm instead first :slight_smile: ..

im sure there is a proper way to do it so it stays in the 14.x branch.

glad you were able to reproduce the UI issue though.. always best when you can actually see the problem in action :slight_smile:

1 Like

Back to topic.
V0.1.37 is available. Hopefully fixes the issue finally.
A little feedback would be nice


1 Like

tested and now working in all the Browsers i have :slight_smile: including on Mobile too.

Glad you were able so suss it out..

Many thanks.

1 Like


I'm using the level indicator vertically to show the position of my roller shutters. It works well without problems. Thus my post is due to a design question. For the roller shutters it would look nicer if the bars of the indicator are wider, especially as I'm not using the value field.

Is there a way to increase the width of the bars of the indicator? Or is an configuration option planned for the future? Thanks in advance! :grinning:

No there is no plans to make any changes for ui_level.
Widest vertical gauge I know is the most simple one to make And you can design it as you want.
See this:

With slight modification This kind of thing can be done:


1 Like

Thank you very much for your answer, but that are bad news for me. The problem is: you don't know my ability, in fact it is a "non-ability" regarding jquery :laughing:

But I'll try to work my way through your example and see, what I can accomplish.

All you have to do is to ask dedicated questions after you have examined the example and have decision how it should look and behave for you :slight_smile: Just a slight learning curve to follow

So thanks again! I managed to do it like you propsed with CSS and repeating-linear-gradient(). It looked quite good, but my wife was not satisfied. It looked too different from the light indicator where I am using the fa-lightbub-o in yellow or black, depending on the state. Now for the roller shutters I'm using fa-align-justify with a gradient from yellow to black depending on the position of the shutters. Now she's happy :smiley: And me too, of course :smile: