# Quantity Level Indication in Silo

**URL:** <https://discourse.nodered.org/t/quantity-level-indication-in-silo/76899>\
**Category:** Industrial\
**Tags:** node-red-dashboard\
**Created:** [24 March 2023 10:06 UTC](https://discourse.nodered.org/t/quantity-level-indication-in-silo/76899 "2023-03-24T10:06:14Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Talkatoo](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@Talkatoo](https://discourse.nodered.org/u/Talkatoo)\
**Post date:** [24 March 2023 10:06 UTC](https://discourse.nodered.org/t/quantity-level-indication-in-silo/76899/1 "2023-03-24T10:06:14Z")

</div>

As I am working on a brewing project. I need to display the current capacity of silo. I am planning to use an SVG image for the silo and I will get values(current length) from the level sensor. Based on the values, I will calculate the current volume of my silo or cylinder. Depending on the sensor value, I will indicate the level of silo in precentage. I have been going through Forum to find the solution. If you know a similar implementation, Please provide your suggestions.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [24 March 2023 10:16 UTC](https://discourse.nodered.org/t/quantity-level-indication-in-silo/76899/2 "2023-03-24T10:16:06Z")

</div>

I seem to remember a post that calculated volumes of cylinders from a while back.

@BartButenaers did you create something for dealing with cylinders?

found it

> [@\[ANNOUNCE\] node-red-contrib-tank-volume: version 1.1.0](https://discourse.nodered.org/t/announce-node-red-contrib-tank-volume-version-1-1-0/67270):
>
> Hi folks, Got some feature requests for [node-red-contrib-tank-volume](https://github.com/bartbutenaers/node-red-contrib-tank-volume), which are available now in the palette as version 1.1.0. This release contains following changes: Ability to specify the input dimensions in millimeters. Support of the new tank type "horizontal stadium": [image] Support of the new tank type "vertical stadium": [image] [Documentation](https://github.com/bartbutenaers/node-red-contrib-tank-volume#tank-battery) (incl. example flow) about tank batteries. Hopefully it can also be useful for others. 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:** [24 March 2023 10:18 UTC](https://discourse.nodered.org/t/quantity-level-indication-in-silo/76899/3 "2023-03-24T10:18:38Z")

</div>

If you are building something like scada then of course svg would be the choice but if it will be just an level indicator then such things are quite easy to do ...

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

---

<div class="post-metadata">

**Author:** ![Talkatoo](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@Talkatoo](https://discourse.nodered.org/u/Talkatoo)\
**Post date:** [24 March 2023 10:21 UTC](https://discourse.nodered.org/t/quantity-level-indication-in-silo/76899/4 "2023-03-24T10:21:27Z")

</div>

@zenofmud Thanks for the info. I will study this.  
@hotNipi , Yes, I am going to implement SCADA like system.

---

<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:** [24 March 2023 17:26 UTC](https://discourse.nodered.org/t/quantity-level-indication-in-silo/76899/5 "2023-03-24T17:26:50Z")

</div>

> [@zenofmud](#):
>
> @BartButenaers did you create something for dealing with cylinders?

Paul,  
The tank-volume node indeed calculates partial filled horizontal and vertical cyclinders.  
But I don't have created any svg drawings for that.  
Bart

---

<div class="post-metadata">

**Author:** ![Talkatoo](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@Talkatoo](https://discourse.nodered.org/u/Talkatoo)\
**Post date:** [28 March 2023 06:07 UTC](https://discourse.nodered.org/t/quantity-level-indication-in-silo/76899/6 "2023-03-28T06:07:30Z")

</div>

@BartButenaers  
I need to represent the current tank level in the image/picture.  
Only Number representation (in percentage)is only available to current tank level.  
Is there any workaround available to represent in graphical ways ?

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [28 March 2023 08:46 UTC](https://discourse.nodered.org/t/quantity-level-indication-in-silo/76899/7 "2023-03-28T08:46:34Z")

</div>

You could ask @hotNipi how he built his image 😀

---

<div class="post-metadata">

**Author:** ![Talkatoo](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@Talkatoo](https://discourse.nodered.org/u/Talkatoo)\
**Post date:** [28 March 2023 08:50 UTC](https://discourse.nodered.org/t/quantity-level-indication-in-silo/76899/8 "2023-03-28T08:50:08Z")

</div>

Thanks @zenofmud

Hi @hotNipi , Can you please provide your suggestion?. I will be very help for me

---

<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:** [28 March 2023 09:01 UTC](https://discourse.nodered.org/t/quantity-level-indication-in-silo/76899/9 "2023-03-28T09:01:35Z")

</div>

That thing is created with `ui_template`, showing pretty simple html div on top of the image.  
The technique can be found here [Dashboard tips. Let the ui\_text act as level gauge ... DIY gauge examples](https://discourse.nodered.org/t/dashboard-tips-let-the-ui-text-act-as-level-gauge-diy-gauge-examples/40878)

But as I understood, you are creating "SCADA - like" thing with the SVG. To advise anything solid, It takes to know a lot more of it. How it is built, what nodes you are using, what kind of communication you have created and so on. Maybe explore existing stuff and then find some solutions. Otherwise it will be just random recommendation with no actual value for you.

---

<div class="post-metadata">

**Author:** ![Talkatoo](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@Talkatoo](https://discourse.nodered.org/u/Talkatoo)\
**Post date:** [28 March 2023 09:43 UTC](https://discourse.nodered.org/t/quantity-level-indication-in-silo/76899/10 "2023-03-28T09:43:40Z")

</div>

@hotNipi

Thanks for your comments.  
I am trying to implement SCADA like this [Loading - groov View](https://demo.groov.com/#10)(I found this sample hopper implementation on the internet).

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [28 March 2023 09:45 UTC](https://discourse.nodered.org/t/quantity-level-indication-in-silo/76899/11 "2023-03-28T09:45:05Z")

</div>

That link brings you to a login page.....

---

<div class="post-metadata">

**Author:** ![Talkatoo](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@Talkatoo](https://discourse.nodered.org/u/Talkatoo)\
**Post date:** [28 March 2023 09:47 UTC](https://discourse.nodered.org/t/quantity-level-indication-in-silo/76899/12 "2023-03-28T09:47:27Z")

</div>

I think Username is trial and password is opto22.

---

<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:** [28 March 2023 10:31 UTC](https://discourse.nodered.org/t/quantity-level-indication-in-silo/76899/13 "2023-03-28T10:31:55Z")

</div>

Pretty straightforward buildup - animated gif-s (some svg-s) and static images inside containers with absolute position. Different states of machinery done by change in image sources and reveal/hide some additional items. Plus some simple controls.

I'd avoid gif-s cos as not very well scale-able things. But for sure, to have nice thing, it takes an artist to draw some graphics. Preferably SVG so can be animated as needed.

---

<div class="post-metadata">

**Author:** ![Talkatoo](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@Talkatoo](https://discourse.nodered.org/u/Talkatoo)\
**Post date:** [28 March 2023 10:39 UTC](https://discourse.nodered.org/t/quantity-level-indication-in-silo/76899/14 "2023-03-28T10:39:55Z")

</div>

You mean after finding the current capacity of the tank, they displayed different images based on percentage. Am I correct ?

---

<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:** [28 March 2023 11:00 UTC](https://discourse.nodered.org/t/quantity-level-indication-in-silo/76899/15 "2023-03-28T11:00:58Z")

</div>

Mostly yes seems to me.

---

<div class="post-metadata">

**Author:** ![Talkatoo](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@Talkatoo](https://discourse.nodered.org/u/Talkatoo)\
**Post date:** [28 March 2023 11:26 UTC](https://discourse.nodered.org/t/quantity-level-indication-in-silo/76899/16 "2023-03-28T11:26:03Z")

</div>

How to display different GIF images for various percentages in node-red?.

---

<div class="post-metadata">

**Author:** ![Talkatoo](https://avatars.discourse-cdn.com/v4/letter/t/f05b48/32.png) [@Talkatoo](https://discourse.nodered.org/u/Talkatoo)\
**Post date:** [30 March 2023 13:54 UTC](https://discourse.nodered.org/t/quantity-level-indication-in-silo/76899/17 "2023-03-30T13:54:37Z")

</div>

@hotNipi @BartButenaers

I have different image for different level indication. Now,I need to rotate "Augur" in my brewing project. In SVG, by transform or rotate feature, I can't rotate augur like in a real world scenario. Do I need to use GIF images for that? or do I need to use Local frame separately for augur instead of the global frame?  
Please provide suggestions.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/7/2742a337e8490ac284cc8b49cfe85c56c6de7e4c.png)

---

<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:** [30 March 2023 17:52 UTC](https://discourse.nodered.org/t/quantity-level-indication-in-silo/76899/18 "2023-03-30T17:52:35Z")

</div>

> [@Talkatoo](#):
>
> In SVG, by transform or rotate feature, I can't rotate augur

Hey @Talkatoo,  
why can't you rotate this in an SVG drawing?  
Did you try the [node-red-contrib-ui-svg](https://github.com/bartbutenaers/node-red-contrib-ui-svg/blob/master/README.md) node? It allows you to start and stop animations, in your case a rotate animation.  
Bart

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [30 March 2023 23:35 UTC](https://discourse.nodered.org/t/quantity-level-indication-in-silo/76899/19 "2023-03-30T23:35:52Z")

</div>

Might be easier to use a static image, and then change it to an animated gif as required.

[examples here](https://opto22.com/support/resources-tools/demos/gif-animations-for-groov-view)

---

<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:** [31 March 2023 04:56 UTC](https://discourse.nodered.org/t/quantity-level-indication-in-silo/76899/20 "2023-03-31T04:56:24Z")

</div>

Hey @Sean-McG,  
That could indeed ve asier for a simple animation.

But I see here that it is about a brewery project. So I assume in the near future he will also want to show temperatures and other dynamic changing stuff on his image. If he starts now with an animated gif, he will soon be stuck.

But of course it all depends on entire use case...

[Next page](https://discourse.nodered.org/t/quantity-level-indication-in-silo/76899.md?page=2)