It is currently August 8th, 2020, 8:46 am

Image Mouseover Boundaries

Report bugs with the Rainmeter application and suggest features.
unusuallyregular
Posts: 2
Joined: June 22nd, 2017, 1:13 pm

Image Mouseover Boundaries

Post by unusuallyregular »

I have created a launcher for some programs and games I have, with each button consisting of a 72x72 pixel image with transparency. These images are arranged at a 45 degree angle, so they have overlapping (invisible) corners. When I mouse over any of these images, I have the opacity increase. This normally works fine, but if one image has a transparent corner overlapping the non-transparent part of another image and I move my mouse to the overlapping area, both images have their mouseover bangs executed.

From what I can tell, Rainmeter for the mouseover bang checks whether any non-transparent pixels are being hovered over and if so, whether those pixels are within the bounds of the image meter. It does not check to what image those pixels belong, but only what boundaries they are within. This causes both images to have the bang executed, when only one of them should be executed.

Here is a GIF of the bug

Image

And the image boundaries just for clarity

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

Re: Image Mouseover Boundaries

Post by jsmorley »

That is correct, and there is no good way to overcome that with Image meters. You are exactly right that the mouse detection is based on any non-transparent pixels, and any meters that have that pixel within the boundaries of the rectangular meter container. Rainmeter doesn't know or care what made a pixel "solid". It just knows it is solid, and then it evaluates which meters contain it.
0zAaSKs.png
Any solid pixel within that little box I'm pointing to with the arrow is "owned" by BOTH meters, and they both will react to any mouse actions.

About the only thing I can suggest, and it's a bit of work, is to use Button meters rather than Image meters. Button meters have a different way of evaluating the hit zones, and are based on both non-transparent pixels AND which Button image occupies that particular pixel, rather than which meter container(s) include it.

Creating button images is a bit of work, but not terrible. The simplest way, in my view, is to create 3 versions of each of your images. Those 3 versions should be different, for instance have a different color or brightness, so you can take advantage of the automatic transition effect of the Button meter, rather than using MouseOverAction and !SetOption with an Image meter. MouseOverAction is the villain in this scenario, don't use it.

Once you have the 3 images for each button you want to create, you can use Alternative 2 here:

https://docs.rainmeter.net/tips/button-images/

To create a bitmap "filmstrip" of the 3 images to create a single button image that you use in the meter.

https://docs.rainmeter.net/manual/meters/button/

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1

[MeterButton1]
Meter=Button
ButtonImage=#@#Buttons\button1.png

[MeterButton2]
Meter=Button
X=35
Y=35
ButtonImage=#@#Buttons\button2.png
button1.png
button2.png
GIF.gif
With the Button meter, the only time both meters would be activated is if your cursor is on a solid pixel, not a transparent one, that is owned by both. In other words, if you have actual solid parts of the meters that overlap. Don't do that. That can never be solved...

Note: There is a downside to this. Since ONLY solid pixels are detected on a Button meter, you need to give some opacity, just 1% is enough (which will be "solid" but "invisible") to the areas "within" your image that you want to react to the mouse. You don't want to make the entire rectangle that defines the bitmap filmstrip solid, or you are right back where you were. However transparent areas in the "middle" of your image, that you want to react to the mouse, need to have some opacity, or the mouse won't see them. A good example would be your "headphone" image. While you want it to be entirely transparent "around" the headphone, you will likely want to make solid but invisible the interior of the image, so it isn't a pain to click on.
You do not have the required permissions to view the files attached to this post.
unusuallyregular
Posts: 2
Joined: June 22nd, 2017, 1:13 pm

Re: Image Mouseover Boundaries

Post by unusuallyregular »

jsmorley wrote:That is correct, and there is no good way to overcome that with Image meters. You are exactly right that the mouse detection is based on any non-transparent pixels, and any meters that have that pixel within the boundaries of the rectangular meter container. Rainmeter doesn't know or care what made a pixel "solid". It just knows it is solid, and then it evaluates which meters contain it.

...

Note: There is a downside to this. Since ONLY solid pixels are detected on a Button meter, you need to give some opacity, just 1% is enough (which will be "solid" but "invisible") to the areas "within" your image that you want to react to the mouse. You don't want to make the entire rectangle that defines the bitmap filmstrip solid, or you are right back where you were. However transparent areas in the "middle" of your image, that you want to react to the mouse, need to have some opacity, or the mouse won't see them. A good example would be your "headphone" image. While you want it to be entirely transparent "around" the headphone, you will likely want to make solid but invisible the interior of the image, so it isn't a pain to click on.
This is really kind of a niche thing that I noticed, so it doesn't bother me too much, but I didn't know about the button meter, so thanks for letting me know about that. As far as not having a good way to solve this bug, I'm not too concerned. I just wanted to make sure that this was known about.

Also, the note about the transparent pixels also applies to the method I'm currently using with the image meters, so I already have nearly transparent pixels there.
User avatar
Jeff
Posts: 145
Joined: September 3rd, 2018, 11:18 am

Re: Image Mouseover Boundaries

Post by Jeff »

I don't know if this is of any help but this bug transferred to D2D as well, so congrats on the successful conversion :P
(it probably happens because of how Rainmeter is coded and not of GDI or D2D, eh)
Is there any development related to this lil quirk or will it stay the same?
If no, will you guys update the docs to include the info jsmorley provided earlier about MouseOverActions on the button meter?
User avatar
jsmorley
Developer
Posts: 21217
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Image Mouseover Boundaries

Post by jsmorley »

Jeff wrote:
May 9th, 2020, 9:40 pm
I don't know if this is of any help but this bug transferred to D2D as well, so congrats on the successful conversion :P
(it probably happens because of how Rainmeter is coded and not of GDI or D2D, eh)
Is there any development related to this lil quirk or will it stay the same?
If no, will you guys update the docs to include the info jsmorley provided earlier about MouseOverActions on the button meter?
It's not a "bug" with how it works with images, and really all meters except Button and now Shape, it's how it has always worked, by design. One might argue with the design I guess, but it's not likely to change due to backwards compatibility concerns.

As to Button, it is documented here:

https://docs.rainmeter.net/manual/meters/button/#ButtonCommand
User avatar
Jeff
Posts: 145
Joined: September 3rd, 2018, 11:18 am

Re: Image Mouseover Boundaries

Post by Jeff »

jsmorley wrote:
May 9th, 2020, 11:51 pm
As to Button, it is documented here:

https://docs.rainmeter.net/manual/meters/button/#ButtonCommand
Ah, I'm blind, my bad ;-;
Can button's HitTest2 stuff be added to a meter's general options?