# Animating a gradient **URL:** \ **Category:** Ignition\ **Created:** [November 25, 2014, 4:07am UTC](https://forum.inductiveautomation.com/t/animating-a-gradient/9377 "2014-11-25T04:07:18Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![MCC](https://avatars.discourse-cdn.com/v4/letter/m/3e96dc/32.png) [@MCC](https://forum.inductiveautomation.com/u/MCC)\ **Post date:** [November 25, 2014, 4:07am UTC](https://forum.inductiveautomation.com/t/animating-a-gradient/9377/1 "2014-11-25T04:07:18Z")
In v7.7.1 is it possible to animate the fill paint of a component using the style customizer? I’d like to have different states trigger different colored gradient fills. However, when I animate anything with a gradient, it reverts to a solid color paint. Thanks! ---
**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\ **Post date:** [November 25, 2014, 2:06pm UTC](https://forum.inductiveautomation.com/t/animating-a-gradient/9377/2 "2014-11-25T14:06:12Z")
Yeah, it get’s a little messy. OK, a lot messy, but it can be done. I added three extra Properties to a rectangle, Color1, Color2, and Style. This way you can pick both colors of the gradient via scripting. `if event.propertyName=="Color1": from java.awt import Color from java.awt import GradientPaint o=event.source x1=o.relX y1=o.relY Color1=o.Color1 x2=x1+o.relWidth y2=y1 Color2=o.Color2 o.setFillPaint(GradientPaint(x1,y1,Color1,x2,y2,Color2,1))` When changing the gradient this way, the Fill Paint type becomes unknown, so you have to change it to something it recognizes before yo can do anything further to it. Like copy/paste, or adjust your styles: ![](https://us1.discourse-cdn.com/inductiveautomation/original/2X/9/9031d9cdeae5464b286bdc061b9cce03628f0a38.png) Perhaps someone else can chime in and tell me what I’m missing… ![:scratch:](https://us1.discourse-cdn.com/inductiveautomation/original/1X/76d1620bec252bfac07050c889ff5a91dc8a9c25.gif ":scratch:") Here’s a window to look at. [AnimatedGradient\_2014-11-25\_0850.proj](https://us1.discourse-cdn.com/inductiveautomation/original/2X/9/9a96618aa4f462e7ede1932ab837cda2c66cc9df.proj) (6.97 KB) ---
**Author:** ![MCC](https://avatars.discourse-cdn.com/v4/letter/m/3e96dc/32.png) [@MCC](https://forum.inductiveautomation.com/u/MCC)\ **Post date:** [December 4, 2014, 6:42pm UTC](https://forum.inductiveautomation.com/t/animating-a-gradient/9377/3 "2014-12-04T18:42:29Z")
Thanks for the reply, Jordan! Your script works well. ![:thumb_right:](https://us1.discourse-cdn.com/inductiveautomation/original/1X/2026e28c0c425034352c1b75807edf956adc75f4.gif ":thumb\_right:") I was looking to simply include the paint characteristics in a style table, but that doesn’t work. Your workaround, using the java gradientpaint function, works great. It is a little messy how it sets the paint to “unk,” but I may be able to live with that. Maybe built-in animation for paint styles will be in a future release. ---
**Author:** ![StepanenkoPaul](https://avatars.discourse-cdn.com/v4/letter/s/9d8465/32.png) [@StepanenkoPaul](https://forum.inductiveautomation.com/u/StepanenkoPaul)\ **Post date:** [February 9, 2017, 2:07pm UTC](https://forum.inductiveautomation.com/t/animating-a-gradient/9377/4 "2017-02-09T14:07:41Z")
May be who knows how do radial gradient? I create circle and added to it two custom properties (OrangeColor (type Color), RedColor (type Color)) and wroted this script: from java.awt import Color from java.awt import RadialGradientPaint o = event.source x1=o.relX y1=o.relY Colors=[o.OrangeColor,o.RedColor] Floats=[0.0,1.0] o.setFillPaint(RadialGradientPaint(x1,23,o.relWidth/2,Floats,Colors)) It’s work, but it is not that i wanted… ---
**Author:** ![jpark](https://avatars.discourse-cdn.com/v4/letter/j/a88e57/32.png) [@jpark](https://forum.inductiveautomation.com/u/jpark)\ **Post date:** [February 9, 2017, 4:20pm UTC](https://forum.inductiveautomation.com/t/animating-a-gradient/9377/5 "2017-02-09T16:20:06Z")
[code]from com.inductiveautomation.ignition.client.util.gui.paints import RelativeLinearGradientPaint from com.inductiveautomation.ignition.client.util.gui.paints.MultipleGradientPaint import CycleMethod from java.awt.geom import Point2D if event.propertyName in [“Color1”,“Color2”]: rlgp = RelativeLinearGradientPaint(Point2D.Double(0.0,0.5), Point2D.Double(1.0,0.5),[0.0,1.0],[event.source.Color1, event.source.Color2],CycleMethod.NO\_CYCLE) event.source.fillPaint = rlgp[/code] ---
**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\ **Post date:** [February 9, 2017, 4:39pm UTC](https://forum.inductiveautomation.com/t/animating-a-gradient/9377/6 "2017-02-09T16:39:54Z")
I guess I need more information modifying the code in the original window: [code]if event.propertyName==“Color1”: from java.awt import Color from java.awt import RadialGradientPaint o=event.source x1=o.relX + o.relWidth/2 y1=o.relY + o.relHeight/2 Color1=o.Color1 Color2=o.Color2 o.setFillPaint(RadialGradientPaint(x1, y1, o.relWidth/2,[0.0, 1.0], [Color1,Color2]))[/code] ---
**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\ **Post date:** [February 9, 2017, 4:42pm UTC](https://forum.inductiveautomation.com/t/animating-a-gradient/9377/7 "2017-02-09T16:42:12Z")
Thanks for the code, Jae, I like how it keeps the gradient type in the properties! EDIT: Nosing around, I can’t seem to find anything for the radial gradient type. ---
**Author:** ![jpark](https://avatars.discourse-cdn.com/v4/letter/j/a88e57/32.png) [@jpark](https://forum.inductiveautomation.com/u/jpark)\ **Post date:** [February 9, 2017, 5:00pm UTC](https://forum.inductiveautomation.com/t/animating-a-gradient/9377/8 "2017-02-09T17:00:05Z")
I didn’t realize your post was from 2014 ! [code]com.inductiveautomation.ignition.client.util.gui.paints.RadialGradientPaint RadialGradientPaint(float cx, float cy, float radius, float[] fractions, java.awt.Color[] colors, MultipleGradientPaint.CycleMethod cycleMethod)[/code] ---
**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\ **Post date:** [February 9, 2017, 5:17pm UTC](https://forum.inductiveautomation.com/t/animating-a-gradient/9377/9 "2017-02-09T17:17:08Z")
It’s still good information. I’ll update my window export above to reflect it. But first… lunch! Thanks! ---
**Author:** ![StepanenkoPaul](https://avatars.discourse-cdn.com/v4/letter/s/9d8465/32.png) [@StepanenkoPaul](https://forum.inductiveautomation.com/u/StepanenkoPaul)\ **Post date:** [February 10, 2017, 9:03am UTC](https://forum.inductiveautomation.com/t/animating-a-gradient/9377/10 "2017-02-10T09:03:39Z")
i just want to get like that… Clearly i did something not right when i used RadialGradientPaint(float cx, float cy, float radius, float[] fractions, java.awt.Color[] colors, MultipleGradientPaint.CycleMethod cycleMethod)[/code] Here is my script: code #Circle position = x=50, y =50, width=25, height=25, WhiteColor and BlueColor are custom properties of this circle import com.inductiveautomation.ignition.client.util.gui.paints o=event.source rgp=RadialGradientPaint(o.relWidth/2,o.relHeight/2,25,[0.0,1.0],[o.BlueColor,o.WhiteColor],CycleMethod.NO\_CYCLE) o.SetFillPaint=rgp[/code] ---
**Author:** ![JordanCClark](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jordancclark/32/83362_2.png) [@JordanCClark](https://forum.inductiveautomation.com/u/JordanCClark)\ **Post date:** [February 13, 2017, 12:42pm UTC](https://forum.inductiveautomation.com/t/animating-a-gradient/9377/11 "2017-02-13T12:42:39Z")
Two things I could see: - setFillPaint is a method, so you need to call it like a function. - you will need to add relX and relY to the coordinates to center the gradient. [code]from com.inductiveautomation.ignition.client.util.gui.paints import RadialGradientPaint from com.inductiveautomation.ignition.client.util.gui.paints.MultipleGradientPaint import CycleMethod o=event.source rgp=RadialGradientPaint(o.relX+o.relWidth/2, o.relY+o.relHeight/2, 25, [0.0,1.0], [o.WhiteColor, o.BlueColor], CycleMethod.NO\_CYCLE) o.setFillPaint(rgp)[/code] ---
**Author:** ![StepanenkoPaul](https://avatars.discourse-cdn.com/v4/letter/s/9d8465/32.png) [@StepanenkoPaul](https://forum.inductiveautomation.com/u/StepanenkoPaul)\ **Post date:** [February 15, 2017, 8:28am UTC](https://forum.inductiveautomation.com/t/animating-a-gradient/9377/12 "2017-02-15T08:28:34Z")
![:prayer:](https://us1.discourse-cdn.com/inductiveautomation/original/1X/e5a7e3b63facc151ea73e3b45db7bdb3d4bdc316.gif ":prayer:") Thanks. It’s working! ---
**Author:** ![weertske](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/weertske/32/3353_2.png) [@weertske](https://forum.inductiveautomation.com/u/weertske)\ **Post date:** [July 15, 2017, 6:00am UTC](https://forum.inductiveautomation.com/t/animating-a-gradient/9377/13 "2017-07-15T06:00:27Z")
The problem with the above solution is that it causes the Fill Paint to have a value “unk”. If you try to save the project with that as the Fill Paint. The save will throw a serialization error. If instead you use “RelativeRadialGradientPaint” it will identify the gradient correctly and save with no problem. ```auto if event.propertyName == "EdgeColor" or event.propertyName == "CenterColor": from com.inductiveautomation.ignition.client.util.gui.paints import RelativeRadialGradientPaint from com.inductiveautomation.ignition.client.util.gui.paints.MultipleGradientPaint import CycleMethod from java.awt.geom import Point2D o=event.source rrgp=RelativeRadialGradientPaint(Point2D.Double(0.5,0.5), Point2D.Double(0.0,0.0), Point2D.Double(0.0,0.0), Point2D.Double(0.0,0.0), [0.0,1.0], [o.CenterColor, o.EdgeColor], CycleMethod.NO_CYCLE) o.fillPaint = rrgp ``` ---
**Author:** ![MCC](https://avatars.discourse-cdn.com/v4/letter/m/3e96dc/32.png) [@MCC](https://forum.inductiveautomation.com/u/MCC)\ **Post date:** [February 22, 2018, 6:44pm UTC](https://forum.inductiveautomation.com/t/animating-a-gradient/9377/14 "2018-02-22T18:44:49Z")
Revisiting this old topic… I’d like to use jpark’s technique so that I avoid the “unk” fill problem. Where can I find documentation on the inductive automation RelativeLinearGradientPaint function? I’d like to be able to modify the gradient to add more stops and it seems to be quite different from the java gradient. ---
**Author:** ![jpark](https://avatars.discourse-cdn.com/v4/letter/j/a88e57/32.png) [@jpark](https://forum.inductiveautomation.com/u/jpark)\ **Post date:** [February 22, 2018, 7:06pm UTC](https://forum.inductiveautomation.com/t/animating-a-gradient/9377/15 "2018-02-22T19:06:05Z")
> [@weertske](#): > > RelativeRadialGradientPaint [https://docs.oracle.com/javase/7/docs/api/java/awt/RadialGradientPaint.html](https://docs.oracle.com/javase/7/docs/api/java/awt/RadialGradientPaint.html) ---
**Author:** ![MCC](https://avatars.discourse-cdn.com/v4/letter/m/3e96dc/32.png) [@MCC](https://forum.inductiveautomation.com/u/MCC)\ **Post date:** [February 22, 2018, 7:52pm UTC](https://forum.inductiveautomation.com/t/animating-a-gradient/9377/16 "2018-02-22T19:52:44Z")
Hi jpark, thanks. That gives the docs for radial gradient paint and I can get similar docs from Oracle for linear gradient paint. However, the arguments for inductive automation’s “relative” linear gradient paint are different. From trial and error, I know that it wants either 5 or 7 arguments and that, if you use 7 arguments, the third one must be a floating-point numeric. I’m just not clear how to take your ```auto rlgp = RelativeLinearGradientPaint(Point2D.Double(0.0,0.5), Point2D.Double(1.0,0.5),[0.0,1.0],[event.source.Color1, event.source.Color2],CycleMethod.NO_CYCLE) ``` and modify it to add more stops. ---
**Author:** ![MCC](https://avatars.discourse-cdn.com/v4/letter/m/3e96dc/32.png) [@MCC](https://forum.inductiveautomation.com/u/MCC)\ **Post date:** [March 17, 2018, 12:16am UTC](https://forum.inductiveautomation.com/t/animating-a-gradient/9377/17 "2018-03-17T00:16:36Z")
For anyone who is interested in this topic, here are the arguments for RelativeLinearGradient: ```auto public RelativeLinearGradientPaint(java.awt.geom.Point2D start, java.awt.geom.Point2D end, float[] fractions, java.awt.Color[] colors, MultipleGradientPaint.CycleMethod cycleMethod, MultipleGradientPaint.ColorSpaceType colorSpace, java.awt.geom.AffineTransform gradientTransform) Constructs a LinearGradientPaint. Parameters: start - the gradient axis start Point2D in user space end - the gradient axis end Point2D in user space fractions - numbers ranging from 0.0 to 1.0 specifying the distribution of colors along the gradient colors - array of colors corresponding to each fractional value cycleMethod - either NO_CYCLE, REFLECT, or REPEAT colorSpace - which color space to use for interpolation, either SRGB or LINEAR_RGB gradientTransform - transform to apply to the gradient ``` I was able to add gradient “stops” by adding to the fractions and colors arrays. ---
**Author:** ![shane2977](https://avatars.discourse-cdn.com/v4/letter/s/919ad9/32.png) [@shane2977](https://forum.inductiveautomation.com/u/shane2977)\ **Post date:** [August 22, 2018, 8:02pm UTC](https://forum.inductiveautomation.com/t/animating-a-gradient/9377/18 "2018-08-22T20:02:22Z")
Great thread guys. Thanks for seeing through to the end MCC ---
**Author:** ![Seth\_Kahle](https://avatars.discourse-cdn.com/v4/letter/s/eb9ed0/32.png) [@Seth\_Kahle](https://forum.inductiveautomation.com/u/Seth_Kahle)\ **Post date:** [February 5, 2023, 9:16pm UTC](https://forum.inductiveautomation.com/t/animating-a-gradient/9377/19 "2023-02-05T21:16:19Z")
@weertske This method works great! Except I'm having one issue. The script for coloring the shape with a gradient fill only occurs when one of the color changes. I've linked those colors to a boolean parameter, and then tied to that to an OPC tag. The issue is that the filling is triggered on the boolean parameter change, so when when I first navigate to a window, everywhere there is an instance of this shape, it just has the default coloring until a state change occurs. Seeking ideas on how to trigger the filling when graphic is first opened so that the initial state will be set properly. ---
**Author:** ![weertske](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/weertske/32/3353_2.png) [@weertske](https://forum.inductiveautomation.com/u/weertske)\ **Post date:** [February 5, 2023, 10:32pm UTC](https://forum.inductiveautomation.com/t/animating-a-gradient/9377/20 "2023-02-05T22:32:48Z")
Sorry, I am a little tied up with other projects right now so I suggest you direct this at some of the other members of this thread. Of the top of my head I would tie a script to on window opened event and toggle the boolean. [Next page](https://forum.inductiveautomation.com/t/animating-a-gradient/9377.md?page=2)