# Horizontal Tank with Fill/Level Indicator

**URL:** <https://forum.inductiveautomation.com/t/horizontal-tank-with-fill-level-indicator/21124>\
**Category:** Ignition\
**Tags:** ignition79\
**Created:** [November 28, 2018, 11:55pm UTC](https://forum.inductiveautomation.com/t/horizontal-tank-with-fill-level-indicator/21124 "2018-11-28T23:55:42Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![curtisfennell](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/curtisfennell/32/39017_2.png) [@curtisfennell](https://forum.inductiveautomation.com/u/curtisfennell)\
**Post date:** [November 28, 2018, 11:55pm UTC](https://forum.inductiveautomation.com/t/horizontal-tank-with-fill-level-indicator/21124/1 "2018-11-28T23:55:42Z")

</div>

I have seen where you can subtract a square from a circle but it leaves the nasty looking edge. I would essentially like to take the cylindrical tank component and rotate it by 90 degrees. I can do that but the fill still tries to remain in the vertical state. Any help?

Reference to first sentence.

> [@Horizontal Tank](http://forum.inductiveautomation.com/t/horizontal-tank/7956):
>
> I’ve had a quick play around but without luck so I’m wondering if someone can help me with the following problem. Put simply, I want to display a Cylindrical Tank component but have it horizontal (the tank is physically lying on the ground rather than standing upright). If I just draw a tank and change the rotation to 90deg then the liquid fills from left to right, whereas I’d want it to represent true gravity, i.e. fill from bottom to top. (Also the text labels are rotated). What are my opti…

---

<div class="post-metadata">

**Author:** ![MMaynard](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmaynard/32/3366_2.png) [@MMaynard](https://forum.inductiveautomation.com/u/MMaynard)\
**Post date:** [November 29, 2018, 12:14pm UTC](https://forum.inductiveautomation.com/t/horizontal-tank-with-fill-level-indicator/21124/2 "2018-11-29T12:14:42Z")

</div>

Use a tank symbol from the symbol factory and then put a progress bar on it?

---

<div class="post-metadata">

**Author:** ![curtisfennell](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/curtisfennell/32/39017_2.png) [@curtisfennell](https://forum.inductiveautomation.com/u/curtisfennell)\
**Post date:** [November 29, 2018, 2:10pm UTC](https://forum.inductiveautomation.com/t/horizontal-tank-with-fill-level-indicator/21124/3 "2018-11-29T14:10:51Z")

</div>

No can do, cant seem to rotate the progress bar, and ultimately a fill level is wanted.

---

<div class="post-metadata">

**Author:** ![MMaynard](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmaynard/32/3366_2.png) [@MMaynard](https://forum.inductiveautomation.com/u/MMaynard)\
**Post date:** [November 29, 2018, 2:37pm UTC](https://forum.inductiveautomation.com/t/horizontal-tank-with-fill-level-indicator/21124/4 "2018-11-29T14:37:47Z")

</div>

You can just uncheck Horizontal on the progress bar to make it go vertical, or use a Level Indicator instead.

---

<div class="post-metadata">

**Author:** ![curtisfennell](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/curtisfennell/32/39017_2.png) [@curtisfennell](https://forum.inductiveautomation.com/u/curtisfennell)\
**Post date:** [November 29, 2018, 2:50pm UTC](https://forum.inductiveautomation.com/t/horizontal-tank-with-fill-level-indicator/21124/5 "2018-11-29T14:50:25Z")

</div>

The Level Indicator Works, but with the tank with the rounded edges, it leaves that area empty.

---

<div class="post-metadata">

**Author:** ![MMaynard](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmaynard/32/3366_2.png) [@MMaynard](https://forum.inductiveautomation.com/u/MMaynard)\
**Post date:** [November 29, 2018, 3:44pm UTC](https://forum.inductiveautomation.com/t/horizontal-tank-with-fill-level-indicator/21124/6 "2018-11-29T15:44:19Z")

</div>

If you want perfect you will have to draw it all out with the level indicator behind, and some other shapes in front masking out parts.

---

<div class="post-metadata">

**Author:** ![vitor.dasilva](https://avatars.discourse-cdn.com/v4/letter/v/b5ac83/32.png) [@vitor.dasilva](https://forum.inductiveautomation.com/u/vitor.dasilva)\
**Post date:** [November 30, 2018, 7:50am UTC](https://forum.inductiveautomation.com/t/horizontal-tank-with-fill-level-indicator/21124/7 "2018-11-30T07:50:43Z")

</div>

It’s still surprising to see people placing so much effort and time into doing things the “old” way. Just because you can make pretty graphics and animations it doesnt mean you should… in fact there is a lot of research to suggest it should be avoided.

I highly recommend the ASM guidelines ([https://www.asmconsortium.net/deployment/guidelines/Pages/default.aspx](https://www.asmconsortium.net/deployment/guidelines/Pages/default.aspx)) and high performance handbook ([https://www.amazon.com/High-Performance-HMI-Handbook-Comprehensive-ebook/dp/B00CELQJU8](https://www.amazon.com/High-Performance-HMI-Handbook-Comprehensive-ebook/dp/B00CELQJU8)).

These books go into lots of details about the advantages of keeping graphics simple and the advantages for operators (namely, identifying and addressing abnormal situations). In our example here, the pretty rounded-edges tank would be replaced with a simple bar chart and a sparkline graph showing the last x mins/hrs etc. This lets the operator access the process at a glance and check where the level is in respect to the desired limits, alarm limits and if the process is tracking as desired.

Now, I dont know your project and the context of the question more than is provided so please dont take this message as negative criticism! I’m just trying to raise awareness! I too have made lots of pretty pages in my time but have been converted after implementing, deploying and using an ASM-based system vs traditional. The first impressions are “This is bland…” but it doesnt take long to realise the advantages and to start relying on them!

Good luck!  
vds

---

<div class="post-metadata">

**Author:** ![MMaynard](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mmaynard/32/3366_2.png) [@MMaynard](https://forum.inductiveautomation.com/u/MMaynard)\
**Post date:** [November 30, 2018, 12:20pm UTC](https://forum.inductiveautomation.com/t/horizontal-tank-with-fill-level-indicator/21124/8 "2018-11-30T12:20:34Z")

</div>

Vitor,  
I am in 100% agreement. We have been following the HPHMI (High Performance HMI) guidelines on our systems.  
The operators take a few days to adjust to it but overall it is a much cleaner, easier to operate system.

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [November 30, 2018, 9:36pm UTC](https://forum.inductiveautomation.com/t/horizontal-tank-with-fill-level-indicator/21124/9 "2018-11-30T21:36:02Z")

</div>

If I understand what you’re looking for this can be achieved with fairly minimal work.

1. Draw a rectangle to the basic size that you’re wanting for your tank, and round the corners until you achieve the look you’re going for.  
–Change the name to Border  
–Change the background color to transparent
2. Duplicate the first shape
3. Draw another rectangle.
4. Set the size of all three shapes so that they are equal.
5. Select the non-rounded corner rectangle first and then the duplicated rounded corner rectangle. Make certain that they are aligned on vertical and horizontal center.
6. Select the Difference operation from the shape menu, this will subtract the rounded corner rectangle from the non-rounded corner rectangle, effectively creating a mask.  
–Change the name of the resultant shape to Mask  
–Set the Fill pain to match the background  
–Set the stroke paint to transparent to get rid of the rectangle border
7. Create a Level Indicator and make it the same size as the other shapes.
8. Send the Level Indicator to the back of the z-order.
9. Set the Mask to the front of the z-order

I created the following graphic using these steps.  
 ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/4/43a4c36ff120a7aaf13c3ab5633faea3dfa00d4d.png)

You can also create a gradient to make the shape feel 3D if you wanted. Here is an example where I did something similar to this on one of our dashboards.

![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/0/09ab75195ca00febfda02a78aeb504d7ff7b37f0.png)

---

<div class="post-metadata">

**Author:** ![filipg](https://avatars.discourse-cdn.com/v4/letter/f/a88e4f/32.png) [@filipg](https://forum.inductiveautomation.com/u/filipg)\
**Post date:** [December 5, 2018, 9:38pm UTC](https://forum.inductiveautomation.com/t/horizontal-tank-with-fill-level-indicator/21124/10 "2018-12-05T21:38:50Z")

</div>

Thanks for the references, vds. I had been following guidelines in ISA 18.2-2009 (Management of alarm systems for the process industries) which make many of the same points about HMI design - carefully-designed, consistent, and ‘bland’ pays dividends in cases of upsets. My plant is a bunch of simple stuff with 2 large, complicated systems with many things that can go wrong and I’m starting from scratch (all systems did it differently, conflicting color coding, no trends anywhere, etc.)
