Is it possible to access the actual positions you set the linear gradient tool to to use with bindings or expressions or scripting? Specifically, they're called the "Linear fill gradient start location" and "Linear fill gradient end location" according to the bottom right info corner thing. I'm trying to animate gas or liquid flowing through a pipe, and this would potentially be a relatively easy solution.
No. You'll have to use scripting to generate an equivalent gradient each 'frame' you want to animate.
1 Like
The OP is using Vision; CSS isn't available.
1 Like
Figured I'd follow up with what I ended up scripting. Vision doesn't seem to like anything but relative gradients, so I had to use relative values based on the size of my objects. It looks pretty good, but now I have to decide if it's worth doing this for every "pipe". It would be a sizable script that's running quite often, and may effect how well the scada system runs. Here's an exerpt of the script I wrote attached to a timer's propertyChange:
from java.awt import Color
from com.inductiveautomation.ignition.client.util.gui.paints import RelativeLinearGradientPaint
from java.awt.geom import Point2Df = [0.0,1.0]
c1 = Color(160,160,0,160)
c2 = Color(217,217,0,96)
c = [c1,c2]
v = event.source.value
m = RelativeLinearGradientPaint.CycleMethod.REFLECT#Flowing Right
w13 = event.source.parent.getComponent('Rectangle 13').relWidth
x13 = Point2D.Double((0 + (v * 2)) / (w13 * 2),0)
y13 = Point2D.Double((50.0 + (v * 2)) / (w13 * 2),0)
rlgp13 = RelativeLinearGradientPaint(x13,y13,f,c,m)event.source.parent.getComponent('Rectangle 13').fillPaint = rlgp13
It Looks alright, but again is probably too much overhead for anything large scale. The Relative math is also different depending on which way the gas/liquid is flowing. You also will have to add an offset in if two of these are next to each other, otherwise the animations won't line up.
2 Likes
If you're going this far, you may as well just go all the way down the rabbit hole and use a paintable canvas component:
https://docs.inductiveautomation.com/display/DOC81/Vision+-+Paintable+Canvas
While it'd be fun to mess around with those, I fear it would really overcomplicate the code. If anyone that's not me ever needed to change or fix something from here it would take so much time to get acclimated with what I did.
That being said, I didn't know the Paintable Canvas tool even existed, so thanks for the heads up!
1 Like
Always the best practice 
1 Like
Arguably, you already did that with scripts that import java.awt. So, dive in!
Might be easier to make a small section of semi-transparent pipe with another shape behind it that changes it's position along the inside of the pipe using a timer component. Set up the layout so you can stretch it as needed. No over-complex scripting or gradients and you still get a little bit of animation. Maybe even connected to a gateway/client-wide tag used as the timer.
However, probably not good practice to have lots of extra moving things/colors to draw the operator's attention. Only draw attention if something is wrong. There's nothing wrong with highlighting the active path, but a simple 2d pipe (rectangle) that simply changes (dull) colors would suffice.
1 Like
The extra color and animation is definitely a concern, but this particular system has a rather complicated flow layout that can change. This will probably be used partially as a teaching tool for operators to visually see the flow path, so the customer was interested in animation. I normally like a little slow animation to see at a glance that motors and fans are running, but use colors and animations for alarming.
instead of gradient, maybe just some arrows inside the pipes, can could animate those too a bit if you really wanted
1 Like
I was just about to say this; the arrows would be faster to interpret at a glance, where the subtle gradient might require half a second to process. Could still have the pipes glowing to show flow in general.
1 Like
All solid points with the arrows, I originally just had static arrows to show the direction but it still took a while to interpret so I was kind of looking outside the box for a different solution. I caved yesterday and implemented this and the result ended up looking pretty decent.
The animation really ended up flowing together well, and the performance hit from the giant script running quite often wasn't too bad. I haven't played around with colors and opacities enough yet and will probably end up making it more subtle or making it greyscale.
3 Likes
Vision has a lot more leeway than Perspective for this sort of thing since each client runs this themselves.
2 Likes
I'm very grateful for your pipes/rectangle animation example. 
This is what I came up with...
2 Likes
While this is working very well for horizontal/vertical lines/rectangles, what about diagonal?
I have a need for linear gradient, but for rectangle which is at various angles, from 0 to 90 degree...
What I would like is this:
What I get now is this:
Any ideas...?
I don't use gradient paints for this sort of thing, but it should work with an affine transform. Simply code it vertically and subsequently change the angle with a transform.
What I normally use to achieve uniform line gradients on pipes in the canvas is a simple for loop. Starting with the maximum width of the line, I redraw it reducing the width down to some predetermined size. As I do this, I use the index value to shift the rgb and produce the desired gradient.
Example:
from java.awt import BasicStroke
graphics = event.graphics
for index in xrange(50, 2, -2):
graphics.stroke = BasicStroke(index, BasicStroke.CAP_ROUND, BasicStroke.JOIN_MITER)
graphics.color = system.gui.color(0, 255 - (index * 2), 0)
graphics.drawLine(50, 250, 250, 50)
Result:
1 Like
I'm playing with idea to show a feedback, that a rotating roller conveyor is running.
And I think I've got it...
This .gif doesn't show a good representation. In reality the animation on the rollers is much better...
Like this:
1 Like
It looks good. That's the sort of thing I would use affine transform for.
1 Like
I would very much like to see, how you will do it... 