It is currently April 19th, 2024, 3:19 am

fading trough 3 colors... how to do it?

Get help with creating, editing & fixing problems with skins
User avatar
brax64
Posts: 172
Joined: July 8th, 2018, 8:05 pm

fading trough 3 colors... how to do it?

Post by brax64 »

So I'm banging my head against the wall... :?
The concept I'm trying (with no success...) to develop is the following:
I want to make a transition trough 3 colors and apply it to a target meter, in the form of FontColor or ImageTint so it can be applied to strings or images.
To start I've my 3 colors, just for example the 3 basic: 255,0,0 (red/color 1), 0,255,0 (green/color 2) and 0,0,255 (blue color3), I would have then a variable (that could be the value of a measure that change overtime or even a variable that change due to MouseScrollDown/UpAction) and that variable will be forced to range between 0 and 100.
So I would like to generate the final color, that the target meter will use, as a seamless blend of the 3 colors with the condition that 0 will result as color 1, 49 will result as color 2 and 100 as color 3, so from 0 to 49 a fading between color 1 and 2 and from 50 to 100 a fading between color 2 and 3
Now, my example assume to use basic color (I mean colors with only 1 component of the 3), it will be the same managing random colors that are using all 3 components?
I would really appreciate any hint/suggestion in order to achieve that...

Thank you all in advance
mak_kawa
Posts: 908
Joined: December 30th, 2015, 9:47 am

Re: fading trough 3 colors... how to do it?

Post by mak_kawa »

Hi brax64

This is my incomplete, buggy and not-smart-at-all solution. Certainly, balala or Yincognito or someone will beat instantly. :-)

Code: Select all

[Rainmeter]
Update=1000
BackgroundMode=2
SolidColor=192,192,192

[Variables]
R=255
G=0
B=0
Range=0

[testMeasureUp]
Measure=Calc
Formula=#Range#
IfConditionMode=1
IfCondition=(#CURRENTSECTION#<=50)
IfTrueAction=[!SetVariable R (Clamp(#R#-5,0,255))][!SetVariable G (Clamp(#G#+5,0,255))]
IfCondition2=(#CURRENTSECTION#>50)
IfTrueAction2=[!SetVariable G (Clamp(#G#-5,0,255))][!SetVariable B (Clamp(#B#+5,0,255))]
DynamicVariables=1
UpdateDivider=-1

[testMeasureDown]
Measure=Calc
Formula=#Range#
IfConditionMode=1
IfCondition=(#CURRENTSECTION#<=50)
IfTrueAction=[!SetVariable R (Clamp(#R#+5,0,255))][!SetVariable G (Clamp(#G#-5,0,255))]
IfCondition2=(#CURRENTSECTION#>50)
IfTrueAction2=[!SetVariable G (Clamp(#G#+5,0,255))][!SetVariable B (Clamp(#B#-5,0,255))]
DynamicVariables=1
UpdateDivider=-1

[testMeter]
Meter=Image
X=5
Y=5
W=100
H=75
SolidColor=#R#,#G#,#B#
DynamicVariables=1
MouseScrollDownAction=[!SetVariable Range (Clamp((#Range#-1),0,100))][!UpdateMeasure testMeasureDown][!UpdateMeter testMeter][!Redraw]
MouseScrollUpAction=[!SetVariable Range (Clamp((#Range#+1),0,100))][!UpdateMeasure testMeasureUp][!UpdateMeter testMeter][!Redraw]
But honestly, a major problem for this is... I (we?) don't know how to calculate RGB transition from one color to another color. Above code merely increments/decrements RGB values, and does not mean true color transition, I think.
User avatar
brax64
Posts: 172
Joined: July 8th, 2018, 8:05 pm

Re: fading trough 3 colors... how to do it?

Post by brax64 »

mak_kawa wrote: August 7th, 2020, 5:12 am Hi brax64

This is my incomplete, buggy and not-smart-at-all solution. Certainly, balala or Yincognito or someone will beat instantly. :-)

...

But honestly, a major problem for this is... I (we?) don't know how to calculate RGB transition from one color to another color. Above code merely increments/decrements RGB values, and does not mean true color transition, I think.
Hi mak_kava
Thank you very much for your reply, yep I did came up with something similar to this and I hit the wall when I tried to find a way to use random colors (colors that use all 3 components).
Maybe using some kind of matrix might solve the problem, but I've no clue how...
User avatar
brax64
Posts: 172
Joined: July 8th, 2018, 8:05 pm

Re: fading trough 3 colors... how to do it?

Post by brax64 »

This is what I came up with using Volume as trigger, it's very rough and rudimentary...

Code: Select all

[Rainmeter]
Update=100

[Variables]
R=0
G=0
B=0
step=5

[Volume]
Measure=Plugin
Plugin=Win7AudioPlugin

[Colors]
Measure=Calc
Formula=Volume
IfConditionMode=1
IfCondition=(Volume<50)
IfTrueAction=[!SetVariable R (255-(#step#*[Volume:]))][!SetVariable G (#step#*[Volume:])][!SetVariable B 0]
IfCondition2=(Volume>=50)
IfTrueAction2=[!SetVariable R 0][!SetVariable G (510-(#step#*[Volume:]))][!SetVariable B ((#step#*[Volume:])-255)]

[Meter]
Meter=Shape
Shape=Rectangle 10,10,100,100,10 | Fill Color #R#,#G#,#B# | Stroke Color 0,0,0,0
DynamicVariables=1
Now the next step would be make it run with full colors (that use 3 components) and not only in the range 0/255 but anything in between...
User avatar
Yincognito
Rainmeter Sage
Posts: 7125
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: fading trough 3 colors... how to do it?

Post by Yincognito »

brax64 wrote: August 7th, 2020, 1:19 amSo I'm banging my head against the wall... :?
Stop hurting your head like that, a solution is available, courtesy of iNjUST, see here. 8-)
Or, adapted a bit for your case:

Code: Select all

[Variables]
; Start Color
; in the form (RS, GS, BS, AS)
RS=255
GS=0
BS=0
AS=255
; End Color
; in the form (RE, GE, BE, AE)
RE=0
GE=255
BE=0
AE=255
; Variable
; can be the value of a measure as well
V=0
; Variable Max
; can be the MaxValue of a measure as well
VM=100
; Step
; by how much the variable changes on update
S=1

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1
BackgroundMode=2
SolidColor=47,47,47,255

---Measures---

[M]
Group=ColorGroup
Measure=Calc
Formula=Clamp(M+#S#,1,#VM#+1)
UpdateDivider=-1
OnUpdateAction=[!SetVariable V ([M]-1)]
DynamicVariables=1

[R]
Group=ColorGroup
Measure=Calc
Formula=((#RE#-#RS#)*#V#/#VM#+#RS#)
DynamicVariables=1

[G]
Group=ColorGroup
Measure=Calc
Formula=((#GE#-#GS#)*#V#/#VM#+#GS#)
DynamicVariables=1

[B]
Group=ColorGroup
Measure=Calc
Formula=((#BE#-#BS#)*#V#/#VM#+#BS#)
DynamicVariables=1

[A]
Group=ColorGroup
Measure=Calc
Formula=((#AE#-#AS#)*#V#/#VM#+#AS#)
DynamicVariables=1

---Meters---

[Image]
Meter=Image
W=100
H=100
SolidColor=[R:0],[G:0],[B:0],255
MouseScrollUpAction=[!SetVariable S 1][!UpdateMeasureGroup ColorGroup][!UpdateMeter Image][!Redraw]
MouseScrollDownAction=[!SetVariable S -1][!UpdateMeasureGroup ColorGroup][!UpdateMeter Image][!Redraw]
DynamicVariables=1
Obviously, if you're talking about a measurement (like CPU, volume, whatever) and not a variable, no need for step (S) or Clamp or decrementing by 1 so that it starts at 0 and ends at 100, as you would just use the current value of the measure divided by its maximum (whether or not you actually add a MaxValue option to the measure).

To be fair, if it was me, I would have complicated the whole thing needlessly, but iNjUST's method is beautifully simple and effective, so the best choice should prevail. ;-)

EDIT: Just realized this didn't fade through 3 colors, just 2, but it's just a matter of changing the start color and end color when you first reach the previous end color. I can update the code accordingly, if needed though.
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
User avatar
balala
Rainmeter Sage
Posts: 16144
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: fading trough 3 colors... how to do it?

Post by balala »

brax64 wrote: August 7th, 2020, 8:01 am Now the next step would be make it run with full colors (that use 3 components) and not only in the range 0/255 but anything in between...
Here is a general code, which does what you asked for. It has three colors defined by components into the [Variables] section (I started with Red - 255,0,0; Green - 0,255,0; Blue - 0,0,255, but you can modify these components as needed). Note that the colors are not defined as colors, but the components are defined one by one. When you're scrolling with the mouse wheel, the first color changes to the second, then this to the third. You can use any (valid) colors.
Didn't check Yincognito's code so far.

Code: Select all

[Rainmeter]
Update=1000

[Variables]
R1=255
G1=0
B1=0

R2=0
G2=255
B2=0

R3=0
G3=0
B3=255
Range=0

[MeterColor]
Meter=Image
SolidColor=#R#,#G#,#B#
X=0
Y=0
W=100
H=50
DynamicVariables=1
MouseScrollDownAction=[!SetVariable Range "(Clamp((#Range#-1),0,100))"][!UpdateMeasure "MeasureRange"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
MouseScrollUpAction=[!SetVariable Range "(Clamp((#Range#+1),0,100))"][!UpdateMeasure "MeasureRange"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]

[MeasureRange]
Measure=Calc
Formula=#Range#
IfCondition=(#CURRENTSECTION#<50)
IfTrueAction=[!SetVariable R "(#R1#+(#Range#/50)*(#R2#-#R1#))"][!SetVariable G "(#G1#+(#Range#/50)*(#G2#-#G1#))"][!SetVariable B "(#B1#+(#Range#/50)*(#B2#-#B1#))"][!UpdateMeter "MeterColor"][!Redraw]
IfFalseAction=[!SetVariable R "(#R2#+((#Range#-50)/50)*(#R3#-#R2#))"][!SetVariable G "(#G2#+((#Range#-50)/50)*(#G3#-#G2#))"][!SetVariable B "(#B2#+((#Range#-50)/50)*(#B3#-#B2#))"][!UpdateMeter "MeterColor"][!Redraw]
IfConditionMode=1
DynamicVariables=1
mak_kawa
Posts: 908
Joined: December 30th, 2015, 9:47 am

Re: fading trough 3 colors... how to do it?

Post by mak_kawa »

Hi all

Maybe I'm too late and slow... :-) But here is my idea for the color transition between any two colors. Probably already presented by balala and Yincognito, so mine is almost useless...

Code: Select all

[Rainmeter]
Update=1000
BackgroundMode=2
SolidColor=192,192,192

[Variables]
Range=0
Position=0

; Color1: Brown
R1=165
G1=42
B1=42

; Color2: SteelBlue
R2=70
G2=130
B2=180

Rdiff=(#R2#-#R1#)
Gdiff=(#G2#-#G1#)
Bdiff=(#B2#-#B1#)

R=#R1#
G=#G1#
B=#B1#

[colorMeasure]
Measure=Calc
Formula=1
OnUpdateAction=[!SetVariable Position (#Range#/100)][!SetVariable R (#R1#+(#Position#*#Rdiff#))][!SetVariable G (#G1#+(#Position#*#Gdiff#))][!SetVariable B (#B1#+(#Position#*#Bdiff#))]
DynamicVariables=1
UpdateDivider=-1

[colorMeter]
Meter=Image
X=5
Y=5
W=100
H=75
SolidColor=#R#,#G#,#B#
DynamicVariables=1
MouseScrollDownAction=[!SetVariable Range (Clamp((#Range#-2),0,100))][!UpdateMeasure colorMeasure][!UpdateMeter colorMeter][!Redraw]
MouseScrollUpAction=[!SetVariable Range (Clamp((#Range#+2),0,100))][!UpdateMeasure colorMeasure][!UpdateMeter colorMeter][!Redraw]

[refColor1]
Meter=Image
X=5
Y=85
W=45
H=30
SolidColor=#R1#,#G1#,#B1#

[refColor2]
Meter=Image
X=55
Y=85
W=45
H=30
SolidColor=#R2#,#G2#,#B2#
User avatar
brax64
Posts: 172
Joined: July 8th, 2018, 8:05 pm

Re: fading trough 3 colors... how to do it?

Post by brax64 »

Yincognito wrote: August 7th, 2020, 10:07 am Stop hurting your head like that, a solution is available, courtesy of iNjUST, see here. 8-)
Or, adapted a bit for your case:

Obviously, if you're talking about a measurement (like CPU, volume, whatever) and not a variable, no need for step (S) or Clamp or decrementing by 1 so that it starts at 0 and ends at 100, as you would just use the current value of the measure divided by its maximum (whether or not you actually add a MaxValue option to the measure).

To be fair, if it was me, I would have complicated the whole thing needlessly, but iNjUST's method is beautifully simple and effective, so the best choice should prevail. ;-)

EDIT: Just realized this didn't fade through 3 colors, just 2, but it's just a matter of changing the start color and end color when you first reach the previous end color. I can update the code accordingly, if needed though.
Hi Yincognito,

Thank you so much, now I've something to messing around with! :D
I guess with 3 colors using, in example, the Volume as trigger, something like this should do the trick

Code: Select all

[Colors]
Measure=Calc
Formula=Volume
IfConditionMode=1
IfCondition=(Volume<50)
IfTrueAction=[!SetVariable RS color1][!SetVariable GS color1][!SetVariable BS color1][!SetVariable RE color2][!SetVariable GE color2][!SetVariable BE color2]
IfCondition2=(Volume>=50)
IfTrueAction2=[!SetVariable RS color2][!SetVariable GS color2][!SetVariable BS color2][!SetVariable RE color3][!SetVariable GE color3][!SetVariable BE color3]
Really appreciated! :thumbup:
User avatar
brax64
Posts: 172
Joined: July 8th, 2018, 8:05 pm

Re: fading trough 3 colors... how to do it?

Post by brax64 »

balala wrote: August 7th, 2020, 10:19 am Here is a general code, which does what you asked for. It has three colors defined by components into the [Variables] section (I started with Red - 255,0,0; Green - 0,255,0; Blue - 0,0,255, but you can modify these components as needed). Note that the colors are not defined as colors, but the components are defined one by one. When you're scrolling with the mouse wheel, the first color changes to the second, then this to the third. You can use any (valid) colors.
Didn't check Yincognito's code so far.
Hi balala,
thank you so much for passing by, now I've even more stuff to play with! :D

Take care! :)
User avatar
brax64
Posts: 172
Joined: July 8th, 2018, 8:05 pm

Re: fading trough 3 colors... how to do it?

Post by brax64 »

mak_kawa wrote: August 7th, 2020, 10:30 am Hi all

Maybe I'm too late and slow... :-) But here is my idea for the color transition between any two colors. Probably already presented by balala and Yincognito, so mine is almost useless...
Hi mak-kawa
nothing is useless, really appreciate your effort trying to help!