Animate Fill Level On Irregular Shaped Component

Just started to work with IA and have a simple question. I have an irregular shaped component that is representing multiple level lift station. I’m wanting to animate the fill color to show water level based on the value in the PLC. Is there a way to do this for 0-100%
I looked at the level indication but didn’t see a way to edit its shape.

Thanks,
Bob O.

The quick and dirty solution would be to place background-colored, borderless empty objects in front of the level indicator to obscure it where the irregular steps are. The precision solution would be to draw exactly what you need with the paintable canvas.

Thanks for the reply.
I’m trying to avoid the down and dirty method. I have my object drawn but not sure how to control the fill height based on the value [0-100] in the PLC.

Thanks Again.

Thanks for pointing out the paintable canvas for this, @pturmel. Using it to draw a shape and then fill to a certain level is easy using the clip method. Definitely beats my previous method of creating shapes to fill the area and dynamically calculating their size and position to make it all work!

Below is a basic example, in case it’s helpful to others. It expects the paintable canvas to have a custom property fillPercent used to set the fill level 0-100%:

from java.awt import Color
from java.awt.geom import GeneralPath
from java.awt.geom import Rectangle2D

g = event.graphics

#### Create shapes assuming 250x350 size, then scale the graphics
#### to proper size later

# Silo
silo = GeneralPath()
silo.moveTo(0,0)
silo.lineTo(0,250)
silo.lineTo(75,350)
silo.lineTo(150,250)
silo.lineTo(150,0)
silo.closePath()

# Shape to be clipped to actual empty area
empty = GeneralPath()
empty.moveTo(0.5,0.5)
empty.lineTo(0.5,250)
empty.lineTo(75,350)
empty.lineTo(150,250)
empty.lineTo(150,0.5)
empty.closePath()

# Empty area based on fillPercent property
emptyPercent = 100 - event.source.fillPercent
emptyArea = Rectangle2D.Float(0, 0, 150, 350 * emptyPercent/100)

#### Scale graphics to actual component size
dX = (event.width-1)/151.0
dY = (event.height-1)/351.0
g.scale(dX,dY)

# Paint silo (includes fill for filled area)
g.setPaint(Color.YELLOW)
g.fill(silo)
g.setColor(Color.GRAY)
g.draw(silo)

# Clip empty area to exclude filled area
g.setClip(emptyArea)
g.clip(empty)

# Paint empty area
g.setPaint(Color.DARK_GRAY)
g.fill(empty)

Along with the example the paintable canvas comes prefilled with, the information in the Java 2D Graphics tutorial here filled in the rest needed to accomplish this (and much more).

1 Like

HI Witman
If have a complex pre-created svg shape this method doesn’t work and also draw complex shape with code is really hard.
So I’d like to know is there any other solution for that?

thank

My Batik SVG Canvas Module provides an SVG rendering component, but you’ll have to modify that SVG on the fly to include the fill level animation (empty complete shape with clipped fill shape on top). The component does expose the graphics object tree for runtime manipulation, if you wish to experiment with dynamically modifying that instead.

1 Like