# Gradient Tool Values for binding/expression purposes **URL:** \ **Category:** Ignition\ **Tags:** vision, ignition81\ **Created:** [October 23, 2023, 2:54pm UTC](https://forum.inductiveautomation.com/t/gradient-tool-values-for-binding-expression-purposes/80859 "2023-10-23T14:54:51Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Mark\_Minuth](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@Mark\_Minuth](https://forum.inductiveautomation.com/u/Mark_Minuth)\ **Post date:** [October 23, 2023, 2:54pm UTC](https://forum.inductiveautomation.com/t/gradient-tool-values-for-binding-expression-purposes/80859/1 "2023-10-23T14:54:51Z")
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. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/1/f1a64ca48a4f619f0e6a1f448908fc053171cc6a.png) ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [October 23, 2023, 3:21pm UTC](https://forum.inductiveautomation.com/t/gradient-tool-values-for-binding-expression-purposes/80859/2 "2023-10-23T15:21:07Z")
No. You'll have to use scripting to generate an equivalent gradient each 'frame' you want to animate. ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [October 23, 2023, 3:29pm UTC](https://forum.inductiveautomation.com/t/gradient-tool-values-for-binding-expression-purposes/80859/4 "2023-10-23T15:29:29Z")
The OP is using Vision; CSS isn't available. ---
**Author:** ![Mark\_Minuth](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@Mark\_Minuth](https://forum.inductiveautomation.com/u/Mark_Minuth)\ **Post date:** [October 24, 2023, 1:58pm UTC](https://forum.inductiveautomation.com/t/gradient-tool-values-for-binding-expression-purposes/80859/6 "2023-10-24T13:58:49Z")
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 Point2D > > f = [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 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/7/c76f3748c14c9ed79daf092a966ca4f4b761ffe3.png) 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. ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [October 24, 2023, 3:09pm UTC](https://forum.inductiveautomation.com/t/gradient-tool-values-for-binding-expression-purposes/80859/7 "2023-10-24T15:09:21Z")
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](https://docs.inductiveautomation.com/display/DOC81/Vision+-+Paintable+Canvas) ---
**Author:** ![Mark\_Minuth](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@Mark\_Minuth](https://forum.inductiveautomation.com/u/Mark_Minuth)\ **Post date:** [October 24, 2023, 3:58pm UTC](https://forum.inductiveautomation.com/t/gradient-tool-values-for-binding-expression-purposes/80859/8 "2023-10-24T15:58:50Z")
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! ---
**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\ **Post date:** [October 24, 2023, 3:59pm UTC](https://forum.inductiveautomation.com/t/gradient-tool-values-for-binding-expression-purposes/80859/9 "2023-10-24T15:59:43Z")
> [@Mark\_Minuth](#): > > 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. **Always** the best practice 🙂 ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [October 24, 2023, 4:48pm UTC](https://forum.inductiveautomation.com/t/gradient-tool-values-for-binding-expression-purposes/80859/10 "2023-10-24T16:48:33Z")
> [@Mark\_Minuth](#): > > I fear it would really overcomplicate the code Arguably, you already did that with scripts that import java.awt. So, dive in! ---
**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\ **Post date:** [October 24, 2023, 8:50pm UTC](https://forum.inductiveautomation.com/t/gradient-tool-values-for-binding-expression-purposes/80859/11 "2023-10-24T20:50:46Z")
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. ---
**Author:** ![Mark\_Minuth](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@Mark\_Minuth](https://forum.inductiveautomation.com/u/Mark_Minuth)\ **Post date:** [October 25, 2023, 2:21pm UTC](https://forum.inductiveautomation.com/t/gradient-tool-values-for-binding-expression-purposes/80859/12 "2023-10-25T14:21:33Z")
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. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [October 25, 2023, 2:29pm UTC](https://forum.inductiveautomation.com/t/gradient-tool-values-for-binding-expression-purposes/80859/13 "2023-10-25T14:29:15Z")
instead of gradient, maybe just some arrows inside the pipes, can could animate those too a bit if you really wanted ---
**Author:** ![Felipe\_CRM](https://avatars.discourse-cdn.com/v4/letter/f/dfb087/32.png) [@Felipe\_CRM](https://forum.inductiveautomation.com/u/Felipe_CRM)\ **Post date:** [October 25, 2023, 2:31pm UTC](https://forum.inductiveautomation.com/t/gradient-tool-values-for-binding-expression-purposes/80859/14 "2023-10-25T14:31:23Z")
> [@victordcq](#): > > arrows inside the pipes 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. ---
**Author:** ![Mark\_Minuth](https://avatars.discourse-cdn.com/v4/letter/m/d78d45/32.png) [@Mark\_Minuth](https://forum.inductiveautomation.com/u/Mark_Minuth)\ **Post date:** [October 25, 2023, 3:37pm UTC](https://forum.inductiveautomation.com/t/gradient-tool-values-for-binding-expression-purposes/80859/15 "2023-10-25T15:37:52Z")
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. ![Animation](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/2/a2385bd20d3766aa14a0ad72fc1a744be8052543.gif) 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. ---
**Author:** ![pturmel](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/pturmel/32/3295_2.png) [@pturmel](https://forum.inductiveautomation.com/u/pturmel)\ **Post date:** [October 25, 2023, 3:42pm UTC](https://forum.inductiveautomation.com/t/gradient-tool-values-for-binding-expression-purposes/80859/16 "2023-10-25T15:42:37Z")
> [@Mark\_Minuth](#): > > the performance hit from the giant script running quite often Vision has a lot more leeway than Perspective for this sort of thing since each client runs this themselves. ---
**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\ **Post date:** [October 29, 2023, 10:05am UTC](https://forum.inductiveautomation.com/t/gradient-tool-values-for-binding-expression-purposes/80859/17 "2023-10-29T10:05:11Z")
I'm very grateful for your pipes/rectangle animation example. 👍 This is what I came up with... ![PipesAnimation](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/d/5d4a0214630cf7dc0cdc9a24c297b5514a55625c.gif) ---
**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\ **Post date:** [January 4, 2025, 8:17am UTC](https://forum.inductiveautomation.com/t/gradient-tool-values-for-binding-expression-purposes/80859/18 "2025-01-04T08:17:43Z")
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: ![Screenshot_45_degree](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/8/a839f35ae7290dea0439005bdc2692c6788d4acc.png) ![Screenshot_90_degree](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/d/edb12486ca454f38b3ebf5ebc2b95843777299c8.png) What I get now is this: ![Screenshot_45_degree2](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/4/641336f2aaccf11c337fb872bb70ca5ca58f8abb.png) ![Screenshot_90_degree2](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/2/7230058566ae5b352dfdaf03ea8efa976f2d017a.png) Any ideas...? ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [January 4, 2025, 11:13am UTC](https://forum.inductiveautomation.com/t/gradient-tool-values-for-binding-expression-purposes/80859/19 "2025-01-04T11:13:10Z")
I don't use gradient paints for this sort of thing, but it should work with an [affine transform](https://docs.oracle.com/javase/8/docs/api/java/awt/geom/AffineTransform.html). 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:** ```python 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:** ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/a/1adb76c7cda8fffb483e89c122afcb86cae80c01.png) ---
**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\ **Post date:** [January 4, 2025, 11:41am UTC](https://forum.inductiveautomation.com/t/gradient-tool-values-for-binding-expression-purposes/80859/20 "2025-01-04T11:41:37Z")
I'm playing with idea to show a feedback, that a rotating roller conveyor is running. And I think I've got it... ![ConveyorAnimation](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/e/8e12f19afad1a2bfcda45fe3ab29106c94888ac8.gif) This .gif doesn't show a good representation. In reality the animation on the rollers is much better... Like this: ![ConveyorAnimation2](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/e/6e0fc79be44061f4a3f26fbb4a80a7dd72c9e51b.gif) ---
**Author:** ![justinedwards.jle](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/justinedwards.jle/32/37854_2.png) [@justinedwards.jle](https://forum.inductiveautomation.com/u/justinedwards.jle)\ **Post date:** [January 4, 2025, 11:42am UTC](https://forum.inductiveautomation.com/t/gradient-tool-values-for-binding-expression-purposes/80859/21 "2025-01-04T11:42:59Z")
It looks good. That's the sort of thing I would use affine transform for. ---
**Author:** ![zxcslo](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/zxcslo/32/61610_2.png) [@zxcslo](https://forum.inductiveautomation.com/u/zxcslo)\ **Post date:** [January 4, 2025, 11:53am UTC](https://forum.inductiveautomation.com/t/gradient-tool-values-for-binding-expression-purposes/80859/22 "2025-01-04T11:53:41Z")
I would very much like to see, how you will do it... 🙃 [Next page](https://forum.inductiveautomation.com/t/gradient-tool-values-for-binding-expression-purposes/80859.md?page=2)