USing background image for hover state.

[RainDojo]

I will read the Manual asap, been a lot of drama around here recently so sorry if this is a dumb question.

I see in the skin code which adds a faded square behind the link on hover (mouseover):

Code: Select all

[FinalBG]
Meter=Image
ImageName=#@#Skin Icons\Icon BG.png
X=100
Y=887
W=40
H=40
ClipString=1
ImageTint=15,15,15
MouseOverAction=[!SetOption Final ImageAlpha "80"][!Update]
MouseLeaveAction=[!SetOption Final ImageAlpha "250"][!Update]
ImageAlpha=0
AntiAlias=1

I thought it would be possible to edit it to use an image instead (last part):

Code: Select all

[This]
Meter=Image
ImageName=#@#winicons\calipers.png
X=67
Y=755
H=29
W=29
LeftMouseUpAction=["C:\Program Files (x86)\Screen Calipers 4.0\Calipers.exe"][!DeactivateConfig "Win 12 Pro by RD\Menu" "Menu.ini"][!Update]
AntiAlias=1

[ThisText]
Meter=String
FontColor=0,0,0,230
FontFace=Segoe UI
FontSize=11
X=112
Y=760
W=200
H=30
Text="Rainmeter"
AntiAlias=1

[ThisBG]
Meter=Image
ImageName=#@#Taskbar icon\hover-left.png
X=20
Y=734
LeftMouseUpAction=["H:\"][!DeactivateConfig "Win 12 Pro by RD\Menu" "Menu.ini"][!Update]

..but all I get is this mess:

Screenshot_1.png

I want the background image to be solid on hover and invisible otherwise.

[Yincognito]

I assume that by "background" you mean the ThisBG meter in your code. If not, adjust things accordingly.

First, ThisText should have a background of its own, so that hovering on it triggers not only on the text's pixels, but the text's "frame", so to speak. In your case, I suppose adding a SolidColor=0,0,0,1 to that meter in order to have its "frame background" almost transparent visually but still made of opaque pixels that can trigger the hover and leave events would be enough.

Then, just add the relevant part from your example to the ThisText meter:

Code: Select all

MouseOverAction=[!SetOption ThisBG ImageAlpha "255"][!Update]
MouseLeaveAction=[!SetOption ThisBG ImageAlpha "0"][!Update]

Finally, make sure your ThisBG meter is initially invisible, by adding this to it:

Code: Select all

ImageAlpha=0

Unrelated: you might want to order your meters in a more consistent fashion, similar to how you write things on a piece of paper, e.g. from top to bottom and left to right (or ThisBG, This, and then ThisText). This would make things clearer.

[RainDojo]

Thanks but that didn't work. It looks like you didn't understand that my faded out image was an image, not a shape. Thanks for looking anyway, I give up.

[balala]

I give up.

Why to give it up? Maybe you didn't described well what is your intention. So:
Which is the "faded out" image? That image is the meter whose transparency would you like to set ([Final] - I think so, but am I right?)? If so, try the followings:

Code: Select all

[FinalBG]
...
MouseOverAction=[!SetOption Final ImageAlpha "250"][!UpdateMeter "Final"][!Redraw]
MouseLeaveAction=[!SetOption Final ImageAlpha "1"][!UpdateMeter "Final"][!Redraw]
ImageAlpha=1
...

Take care to set the transparency of the [FinalBG] meter not to 0 (you had it set so, by the ImageAlpha=0 option), but to 1. If you set its transparency to 0 (make it completely transparent) it doesn't / can't react on mouse hovering.
If this doesn't help, a little bit more detailed description of the issue is needed.

[Yincognito]

Thanks but that didn't work. It looks like you didn't understand that my faded out image was an image, not a shape. Thanks for looking anyway, I give up.

Well, what can I say? The understanding is proportional with the clarity of the problem's description - and looks like I'm not the only one failing to understand what you wanted to achieve. Also, there's no shape in either your code or mine - there's one String meter and the others are Image meters, so not sure where I implied that I was talking about shapes. The answer is not to give up, but to persevere until you achieve what you want - that's how things are done.

If you set its transparency to 0 (make it completely transparent) it doesn't / can't react on mouse hovering.

Indeed - my bad, I made the same mistake. Good catch!

[CodeCode]

Why to give it up? Maybe you didn't described well what is your intention. So:
Which is the "faded out" image? That image is the meter whose transparency would you like to set ([Final] - I think so, but am I right?)? If so, try the followings:

Code: Select all

[FinalBG]
...
MouseOverAction=[!SetOption Final ImageAlpha "250"][!UpdateMeter "Final"][!Redraw]
MouseLeaveAction=[!SetOption Final ImageAlpha "1"][!UpdateMeter "Final"][!Redraw]
ImageAlpha=1
...

Take care to set the transparency of the [FinalBG] meter not to 0 (you had it set so, by the ImageAlpha=0 option), but to 1. If you set its transparency to 0 (make it completely transparent) it doesn't / can't react on mouse hovering.
If this doesn't help, a little bit more detailed description of the issue is needed.

This in my opinion is the best way. I actually use this pretty frequently. Remember code at the end will show over content before it. But if a meter or measure has the same name only the first coded will work.

[balala]

But if a meter or measure has the same name only the first coded will work.

I hope this is a known detail: nothing onto a Rainmeter code (in fact in any .ini formatted file) can't be duplicated: nor sections (no matter if those sections are meters or measures), nor variables, or options onto one section. The second and further occurrences of these duplicated things are ignored.

[u5z2r9]

Absolutely, let’s simplify this. To make the background image solid on hover and invisible otherwise, you just need to adjust the ImageAlpha setting. Set it to 255 for full opacity on hover, and set it back to 0 for transparency when not hovering. Here's how you can update your code:

Code: Select all

MouseOverAction=[!SetOption Final ImageAlpha "255"][!Update]
MouseLeaveAction=[!SetOption Final ImageAlpha "0"][!Update]

Make sure the image file paths are correct and that the file names in your code match those in your directories. If it still doesn’t work, double-check the image formats to ensure they’re compatible with your software.

I saw your previous messages and am I correct in understanding that you are still working on the skins? I would like to take a look, but I couldn't find them.

[CodeCode]

Absolutely, let’s simplify this. To make the background image solid on hover and invisible otherwise, you just need to adjust the ImageAlpha setting. Set it to 255 for full opacity on hover, and set it back to 0 for transparency when not hovering. Here's how you can update your code:

Code: Select all

MouseOverAction=[!SetOption Final ImageAlpha "255"][!Update]
MouseLeaveAction=[!SetOption Final ImageAlpha "0"][!Update]

Make sure the image file paths are correct and that the file names in your code match those in your directories. If it still doesn’t work, double-check the image formats to ensure they’re compatible with your software.

I saw your previous messages and am I correct in understanding that you are still working on the skins? I would like to take a look, but I couldn't find them.

If the "0" value creates a null response (if it does need one), just bump it up to "1". It will still be invisible.

[balala]

Absolutely, let’s simplify this. To make the background image solid on hover and invisible otherwise, you just need to adjust the ImageAlpha setting. Set it to 255 for full opacity on hover, and set it back to 0 for transparency when not hovering. Here's how you can update your code:

Code: Select all

MouseOverAction=[!SetOption Final ImageAlpha "255"][!Update]
MouseLeaveAction=[!SetOption Final ImageAlpha "0"][!Update]

What CodeCode meant above is that if you set the transparency of a meter to 0, that meter won't react anymore to mouse actions (like hovering the mouse over it for instance), because a such transparent meter can't detect a mouse action. This is why you should have to set its transparency to 1, instead of 0. In such a case, the meter becomes practically the same way invisible (its transparency being 1 from 255, so in fact little bit below 0.4%), but will fully react to mouse hovering. Accordingly your MouseOverAction and MouseLeaveAction option should look this way:

Code: Select all

MouseOverAction=[!SetOption Final ImageAlpha "255"][!UpdateMeter "Final"][!Redraw]
MouseLeaveAction=[!SetOption Final ImageAlpha "1"][!UpdateMeter "Final"][!Redraw]

And one more: I replaced the [!Update] bang by [!UpdateMeter "Final"][!Redraw]. No need to update the whole skin when you're performing such a mouse action, it's completely enough to update the involved meter and redraw the skin.