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.
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
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 ...
@zenofmud Thanks for the info. I will study this.
@hotNipi , Yes, I am going to implement SCADA like system.
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
1 Like
@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 ?
You could ask @hotNipi how he built his image 
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
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.
Thanks for your comments.
I am trying to implement SCADA like this Loading - groov View(I found this sample hopper implementation on the internet).
That link brings you to a login page.....
I think Username is trial and password is opto22.
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.
You mean after finding the current capacity of the tank, they displayed different images based on percentage. Am I correct ?
Mostly yes seems to me.
How to display different GIF images for various percentages in node-red?.
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.
Hey @Talkatoo,
why can't you rotate this in an SVG drawing?
Did you try the node-red-contrib-ui-svg node? It allows you to start and stop animations, in your case a rotate animation.
Bart
Might be easier to use a static image, and then change it to an animated gif as required.
1 Like
Hey @smcgann99,
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...
