It is currently March 29th, 2024, 6:34 am

Fading an image

Get help with creating, editing & fixing problems with skins
User avatar
UnstoppableDave
Posts: 30
Joined: May 22nd, 2010, 6:51 pm

Fading an image

Post by UnstoppableDave »

Hey guys,
I am wondering if it is possible to fade an image on an event, like mouseover.
The method I am getting closest in is by using variables, as shown below, however it does not seem to be working. Am i misunderstanding the function here? Am I overlooking a simple function for fading?
It seems like it should work but my brain is not quite connecting the dots. :|

[Meter]
Meter=Image
Path=
ImageName=
X=
Y=
W=
H=
ImageAlpha=#ImageAlpha#
DynamicVariables=1
MouseOverAction=!Execute [!RainmeterSetVariable ImageAlpha 0]
IfAboveValue=50
IfAboveAction=!Execute [!RainmeterSetVariable ImageAlpha 40]
IfAboveValue=100
IfAboveAction=!Execute [!RainmeterSetVariable ImageAlpha 80] (or whatever)

Thanks,
Dave
Image
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Fading an image

Post by jsmorley »

UnstoppableDave wrote:Hey guys,
I am wondering if it is possible to fade an image on an event, like mouseover.
The method I am getting closest in is by using variables, as shown below, however it does not seem to be working. Am i misunderstanding the function here? Am I overlooking a simple function for fading?
It seems like it should work but my brain is not quite connecting the dots. :|

[Meter]
Meter=Image
Path=
ImageName=
X=
Y=
W=
H=
ImageAlpha=#ImageAlpha#
DynamicVariables=1
MouseOverAction=!Execute [!RainmeterSetVariable ImageAlpha 0]
IfAboveValue=50
IfAboveAction=!Execute [!RainmeterSetVariable ImageAlpha 40]
IfAboveValue=100
IfAboveAction=!Execute [!RainmeterSetVariable ImageAlpha 80] (or whatever)

Thanks,
Dave

First off, you need to "initialize" the variable #ImageAlpha# in the [Variables] section. You can set it to any value, perhaps 255 to start. So just ImageAlpaha=255.

Then, I would suggest ImageTint instead of ImageAlpha. ImageAlpha will work, but is really depreciated and ImageTint should be used as it is not certain that ImageAlpha will always be there. The last part of ImageTint= is the "alpha", and 255,255,255 is equal to "don't mess with the color. So ImageTint=255,255,255,150 is the same as ImageAlpha=150. You can still use the value of a measure for just the alpha by using ImageTint=255,255,255,#ImageAlpha# in the meter.

Now, your IfAboveValue= statements won't work, as you don't have anything telling it IfWHATValue... You need to put IfAbove/IfBelow/IfEqual statements on a measure (regular or Calc) so there is a value being returned that you can test. The OnMouseOver is fine on a meter, but the IfAboveAction statments need to be on a measure.

In addition, don't use IfAboveValue=100 if 100 is the "max" value, like in a percentage. It will never be "above" 100, use IfAboveValue=99.

Also, don't forget an action to set the alpha "back" to something. You are doing all IfAboveValue= statments, and once it goes to 100, it will never go back to "0" unless you mouse over it. You might add:

IfBelowValue=50
IfBelowAction=[!RainmeterSetVariable ImageAlpha 0]

Hope this helps.
User avatar
UnstoppableDave
Posts: 30
Joined: May 22nd, 2010, 6:51 pm

Re: Fading an image

Post by UnstoppableDave »

It is as I thought, I seriously misunderstood the use of IfAboveValue and the like. Your explanation cleared alot up.
Just one more question then. How do I measure the time the mouse has been over the icon, or is there another way to set the fade to happen gradually (300ish ms)?
Image
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Fading an image

Post by jsmorley »

UnstoppableDave wrote:It is as I thought, I seriously misunderstood the use of IfAboveValue and the like. Your explanation cleared alot up.
Just one more question then. How do I measure the time the mouse has been over the icon, or is there another way to set the fade to happen gradually (300ish ms)?
There is no really easy way to do that on an individual meter. I imagine there is a way with the OnMouseOver doing a SetVariable or ActivateMeasure that then could do some seriously complicated stuff in a Calc measure to set the alpha based on a counter or something, but yike...

Another alternative is to have that image and whatever measure(s) drive it to be in a skin alone. You can drag it so it "looks" like it is part of a bigger skin, but have it be on its own in reality. Then you can use the Fade Out / Fade In and Fade Duration settings for the skin in RainBrowser to have the skin (and thus the meter) fade out at any speed you want when you mouseover it, don't even need any code at all in the skin itself.
User avatar
UnstoppableDave
Posts: 30
Joined: May 22nd, 2010, 6:51 pm

Re: Fading an image

Post by UnstoppableDave »

Your first paragraph was what I was thinking.
But I will look into a second skin.
Thanks for the time. :D
Image
User avatar
JamesAC
Developer
Posts: 318
Joined: July 14th, 2009, 5:57 pm

Re: Fading an image

Post by JamesAC »

Try this:

Code: Select all

[Rainmeter]
Update=10
MouseOverAction=!Execute [!RainmeterEnableMeasure Fader][!RainmeterEnableMeasure FaderInc]
MouseLeaveAction=!Execute [!RainmeterDisableMeasure Fader][!RainmeterDisableMeasure FaderInc]

[Variables]

[Fader]
Measure=CALC
Formula=FaderInc
MaxValue=255
Disabled=1

[FaderInc]
Measure=CALC
Formula=Fader + 10
MaxValue=255
Disabled=1

[FinalAlpha]
Measure=CALC
Formula=Fader = 0 ? 1 : Fader
AverageSize=10

[Image]
Meter=IMAGE
ImageName=colors.png
X=0
Y=0
ImageTint=255,255,255,[FinalAlpha]
DynamicVariables=1
It might take a bit extra work if you want it to fade out as well but it should be possible. If you want the fade to be quicker, increase the number that is added in [FaderInc].
+++ Divide By Cucumber Error. Please Reinstall Universe And Reboot +++
Quis custodiet ipsos custodes?