It is currently March 28th, 2024, 3:06 pm

Help with Mouse Over

Get help with creating, editing & fixing problems with skins
TroVo05
Posts: 10
Joined: March 1st, 2023, 9:04 pm

Help with Mouse Over

Post by TroVo05 »

Hey All - New here and new to rainmeter. I am working on creating my first skin and i need some help. I am working on a dock with buttons. See attached photos (don't mind the graphics, those will change, just working on coding right now.)

Image

Basically what i want is to hover over the word "itunes" and then have the music icon show up partly behind the block vertical dock and then when i move my house off the word itunes i want the music icon to disappear. My current code that i have right now is below. I have been trying to figure it out on my own but i am not understanding the coding. Can someone please help me!

Code: Select all

[Variables]
LINKS="C:\Users\trovo\OneDrive\Documents\Rainmeter\Skins\MySkin\Links\"

[MeterBackground]
Meter=IMAGE
X=0
Y=0
W=300
H=1824
ImageName=C:\Users\trovo\OneDrive\Documents\Rainmeter\Skins\MySkin\@Resources\Background.png

;[BUTTONS]===================

[MeterITUNES_BUTTON]
Meter=BUTTON
X=-400R
Y=8
ButtonImage=C:\Users\trovo\OneDrive\Documents\Rainmeter\Skins\MySkin\@Resources\Itunes.png
ButtonCommand=!Execute ["#LINKS#iTunes.lnk""]

;[ICONS]=======================================

[MeterItunes_ICON]
Meter=IMAGE
X=200
Y=300
H=300
W=300
ImageName=C:\Users\trovo\OneDrive\Documents\Rainmeter\Skins\MySkin\@Resources\Itunes Icon.png
User avatar
balala
Rainmeter Sage
Posts: 16109
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Help with Mouse Over

Post by balala »

TroVo05 wrote: March 1st, 2023, 9:14 pm Basically what i want is to hover over the word "itunes" and then have the music icon show up partly behind the block vertical dock and then when i move my house off the word itunes i want the music icon to disappear. My current code that i have right now is below. I have been trying to figure it out on my own but i am not understanding the coding. Can someone please help me!
  • Add a Hidden=1 option to the [MeterItunes_ICON] meter (which i assume is the "music icon"). With this option, you get the meter hidden, so you don't see it.
  • To get it revealed when you're hovering the mouse over the Itunes word (which I assume is the [MeterITUNES_BUTTON] meter), then re-hidden when you're leaving the meter, you have to add the following two options to the [MeterITUNES_BUTTON] meter:

    Code: Select all

    [MeterITUNES_BUTTON]
    ...
    MouseOverAction=[!ShowMeter "MeterItunes_ICON"][!Redraw]
    MouseLeaveAction=[!HideMeter "MeterItunes_ICON"][!Redraw]
    The MouseOverAction option is obviously executed when you're hovering the mouse over the meter. This shows up the [MeterItunes_ICON] meter. when you're leaving the meter, its MouseLeaveAction option is executed, hiding the [MeterItunes_ICON] meter.
What am I not entirely sure about, is what you mean by "partly behind the block vertical dock". What you mean?
I have additional improvements and comments related to the posted code, but first try out what I suggested above, to see if this is what you need.
TroVo05
Posts: 10
Joined: March 1st, 2023, 9:04 pm

Re: Help with Mouse Over

Post by TroVo05 »

balala wrote: March 1st, 2023, 9:42 pm
  • Add a Hidden=1 option to the [MeterItunes_ICON] meter (which i assume is the "music icon"). With this option, you get the meter hidden, so you don't see it.
  • To get it revealed when you're hovering the mouse over the Itunes word (which I assume is the [MeterITUNES_BUTTON] meter), then re-hidden when you're leaving the meter, you have to add the following two options to the [MeterITUNES_BUTTON] meter:

    Code: Select all

    [MeterITUNES_BUTTON]
    ...
    MouseOverAction=[!ShowMeter "MeterItunes_ICON"][!Redraw]
    MouseLeaveAction=[!HideMeter "MeterItunes_ICON"][!Redraw]
    The MouseOverAction option is obviously executed when you're hovering the mouse over the meter. This shows up the [MeterItunes_ICON] meter. when you're leaving the meter, its MouseLeaveAction option is executed, hiding the [MeterItunes_ICON] meter.
What am I not entirely sure about, is what you mean by "partly behind the block vertical dock". What you mean?
I have additional improvements and comments related to the posted code, but first try out what I suggested above, to see if this is what you need.

YOU'RE AWESOME!!!!! That worked great! and exactly what i wanted. I would love to hear the additional improvements and comments related to the code. i am VERY new to this so i'll take all the help i can get!

Here is an image of what i mean by the behind the black bar.

Image

Since the bar is see through, i want the icon to show up partially behind the bar and partially to the right, so the icon would still be 100% visible but darker on the left side.....

Hope that makes sense.
User avatar
balala
Rainmeter Sage
Posts: 16109
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Help with Mouse Over

Post by balala »

TroVo05 wrote: March 1st, 2023, 9:53 pm YOU'RE AWESOME!!!!! That worked great! and exactly what i wanted.
I'm not, but am glad if you got what you wanted.
TroVo05 wrote: March 1st, 2023, 9:53 pm I would love to hear the additional improvements and comments related to the code. i am VERY new to this so i'll take all the help i can get!
Alright:
  • It's not a good idea to add the whole path of a file used in your code, especially of one placed into the @Resources folder of your config. Instead Rainmeter has a simple way to refere to this folder, by using the #@# variable. This variable is refearing exactly to the @Resources folder. So, accordingly, the paths like:
    • C:\Users\trovo\OneDrive\Documents\Rainmeter\Skins\MySkin\@Resources\Background.png (used into the ImageName option of the [MeterBackground] meter)
    • C:\Users\trovo\OneDrive\Documents\Rainmeter\Skins\MySkin\@Resources\Itunes.png (ButtonImage option of the [MeterITUNES_BUTTON] meter)
    • C:\Users\trovo\OneDrive\Documents\Rainmeter\Skins\MySkin\@Resources\Itunes Icon.png (used in the ImageName option of the [MeterItunes_ICON] meter),
    should be written as:
    • #@#Background.png
    • #@#Itunes.png
    • #@#Itunes Icon.png
    Much simpler and Rainmeter knows what is the path of the @Resources folder and acts accordingly. Note that if you add the full path, the skin most probably doesn't work on another computer than yours, because most probably the path of the @Resources folder is different on other computers. So using the #@# variable fixes this issue.
  • !Execute has been long time ago deprecated and shouldn't be used. You've used it into the ButtonCommand option of the [MeterITUNES_BUTTON] meter, but should be removed. So the ButtonCommand=!Execute ["#LINKS#iTunes.lnk""] option of the mentioned meter should be ButtonCommand=["#LINKS#iTunes.lnk""].
  • This is something which shouldn't be a problem, however it seems that the Skins folder placed onto the OneDrive, can cause troubles. It is recommended not to use the skins from OneDrive, but to place them to a "common" folder. This issue has been discussed many times in past, for instance here (but there are more such discussions).
TroVo05 wrote: March 1st, 2023, 9:53 pm Here is an image of what i mean by the behind the black bar.

Image

Since the bar is see through, i want the icon to show up partially behind the bar and partially to the right, so the icon would still be 100% visible but darker on the left side.....

Hope that makes sense.
Yep, it does make. For this you have to take two things into account:
  • In your code, you have to have the meter of the bar (not sure which one is that, so I named it [MeterBar]) before the one of the icon (I assume that's [MeterITUNES_BUTTON]).
  • You have to find proper X and Y options for both above meters, to have them approximatively in the same position (supposing the meters are properly sized, but at least from the posted screenshot, I think they are). For first try the exact same position for both. If the meters are following one the other in your code, you can add a proper X and Y value to [MeterBar] and can either add the same X and Y values for [MeterITUNES_BUTTON] as well, or can use X=0r and Y=0r for this meter. Check to see how the meters are looking with such X and Y values, then adjust them, if needed. Finally if you can't get them properly in place, pack please the config (the folder in the Skins folder which contains the skin, in this case this being probably C:\Users\trovo\OneDrive\Documents\Rainmeter\Skins\MySkin) and upload the package here, to can check.
TroVo05
Posts: 10
Joined: March 1st, 2023, 9:04 pm

Re: Help with Mouse Over

Post by TroVo05 »

balala wrote: March 2nd, 2023, 5:06 pm I'm not, but am glad if you got what you wanted.

Alright:
  • It's not a good idea to add the whole path of a file used in your code, especially of one placed into the @Resources folder of your config. Instead Rainmeter has a simple way to refere to this folder, by using the #@# variable. This variable is refearing exactly to the @Resources folder. So, accordingly, the paths like:
    • C:\Users\trovo\OneDrive\Documents\Rainmeter\Skins\MySkin\@Resources\Background.png (used into the ImageName option of the [MeterBackground] meter)
    • C:\Users\trovo\OneDrive\Documents\Rainmeter\Skins\MySkin\@Resources\Itunes.png (ButtonImage option of the [MeterITUNES_BUTTON] meter)
    • C:\Users\trovo\OneDrive\Documents\Rainmeter\Skins\MySkin\@Resources\Itunes Icon.png (used in the ImageName option of the [MeterItunes_ICON] meter),
    should be written as:
    • #@#Background.png
    • #@#Itunes.png
    • #@#Itunes Icon.png
    Much simpler and Rainmeter knows what is the path of the @Resources folder and acts accordingly. Note that if you add the full path, the skin most probably doesn't work on another computer than yours, because most probably the path of the @Resources folder is different on other computers. So using the #@# variable fixes this issue.
  • !Execute has been long time ago deprecated and shouldn't be used. You've used it into the ButtonCommand option of the [MeterITUNES_BUTTON] meter, but should be removed. So the ButtonCommand=!Execute ["#LINKS#iTunes.lnk""] option of the mentioned meter should be ButtonCommand=["#LINKS#iTunes.lnk""].
  • This is something which shouldn't be a problem, however it seems that the Skins folder placed onto the OneDrive, can cause troubles. It is recommended not to use the skins from OneDrive, but to place them to a "common" folder. This issue has been discussed many times in past, for instance here (but there are more such discussions).
Yep, it does make. For this you have to take two things into account:
  • In your code, you have to have the meter of the bar (not sure which one is that, so I named it [MeterBar]) before the one of the icon (I assume that's [MeterITUNES_BUTTON]).
  • You have to find proper X and Y options for both above meters, to have them approximatively in the same position (supposing the meters are properly sized, but at least from the posted screenshot, I think they are). For first try the exact same position for both. If the meters are following one the other in your code, you can add a proper X and Y value to [MeterBar] and can either add the same X and Y values for [MeterITUNES_BUTTON] as well, or can use X=0r and Y=0r for this meter. Check to see how the meters are looking with such X and Y values, then adjust them, if needed. Finally if you can't get them properly in place, pack please the config (the folder in the Skins folder which contains the skin, in this case this being probably C:\Users\trovo\OneDrive\Documents\Rainmeter\Skins\MySkin) and upload the package here, to can check.
Awesome! This is great information for me! I’ll update it based on your recommendations!

Thank you so much!
User avatar
balala
Rainmeter Sage
Posts: 16109
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Help with Mouse Over

Post by balala »

TroVo05 wrote: March 2nd, 2023, 5:51 pm Awesome! This is great information for me! I’ll update it based on your recommendations!

Thank you so much!
You're welcome. If you update your code and get further issues, feel free to come back with them. Good luck...
TroVo05
Posts: 10
Joined: March 1st, 2023, 9:04 pm

Re: Help with Mouse Over

Post by TroVo05 »

balala wrote: March 2nd, 2023, 7:27 pm You're welcome. If you update your code and get further issues, feel free to come back with them. Good luck...
So i updated my Code and here is what i got, let me know if all looks good based on your previous comments. I haven't had a change to play with getting the icon behind the black bar yet. I am at work so just messing around a little bit here and there. Everything appears to be functioning still so i assume i did it correctly......

Code: Select all

[code];[BEGIN CONFIG FILE]=============================


[Rainmeter]

[Variables]
LINKS="C:\Users\trovo\Documents\Rainmeter\Skins\MySkin\Links\"

[MeterBackground]
Meter=IMAGE
X=0
Y=0
W=300
H=1824
ImageName=#@#Background.png

;[BUTTONS]===================

[MeterITUNES_BUTTON]
Meter=BUTTON
X=-300R
Y=200
ButtonImage=#@#ItunesMusic2.png
ButtonCommand=["#LINKS#iTunes.lnk""]
MouseOverAction=[!ShowMeter "MeterItunes_ICON"][!Redraw]
MouseLeaveAction=[!HideMeter "MeterItunes_ICON"][!Redraw]

[MeterItunes_ICON]
Meter=IMAGE
X=200
Y=300
H=300
W=300
Hidden=1
ImageName=#@#ItunesLogo.png
User avatar
balala
Rainmeter Sage
Posts: 16109
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Help with Mouse Over

Post by balala »

TroVo05 wrote: March 2nd, 2023, 7:38 pm So i updated my Code and here is what i got, let me know if all looks good based on your previous comments. I haven't had a change to play with getting the icon behind the black bar yet. I am at work so just messing around a little bit here and there. Everything appears to be functioning still so i assume i did it correctly......
The code looks to be alright. There I see nothing wrong with it now. But obviously can't try it out, since I don't have the involved resources. But when you get home try it and let us (me) know if there is anything wrong.
TroVo05
Posts: 10
Joined: March 1st, 2023, 9:04 pm

Re: Help with Mouse Over

Post by TroVo05 »

balala wrote: March 2nd, 2023, 9:07 pm The code looks to be alright. There I see nothing wrong with it now. But obviously can't try it out, since I don't have the involved resources. But when you get home try it and let us (me) know if there is anything wrong.
All is working well! Thank you!
TroVo05
Posts: 10
Joined: March 1st, 2023, 9:04 pm

Re: Help with Mouse Over

Post by TroVo05 »

Here is an update......attached is my code and also a video of the skin working.....

https://i.imgur.com/cV2bXJe.mp4

Code: Select all

[Variables]
LINKS="C:\Users\trovo\Documents\Rainmeter\Skins\MySkin\Links\"

[MeterItunes_ICON]
Meter=IMAGE
X=200
Y=300
H=300
W=300
Hidden=1
ImageName=#@#ItunesLogo.png

[MeterBackground]
Meter=IMAGE
X=0
Y=0
W=300
H=1824
ImageName=#@#Background.png

;[BUTTONS]===================

[MeterITUNES_BUTTON]
Meter=BUTTON
X=-300R
Y=200
ButtonImage=#@#ItunesMusic2.png
ButtonCommand=["#LINKS#iTunes.lnk""]
MouseOverAction=[!ShowMeter "MeterItunes_ICON"][!Redraw]
MouseLeaveAction=[!HideMeter "MeterItunes_ICON"][!Redraw]

[MeterDiscord_BUTTON]
Meter=BUTTON
X=-300R
Y=249
ButtonImage=#@#Discord.png
ButtonCommand=["#LINKS#Discord.lnk"]

[MeterEdge_BUTTON]
Meter=BUTTON
X=-300R
Y=298
ButtonImage=#@#Edge.png
ButtonCommand=["#LINKS#Microsoft Edge.lnk"]

[MeterPhotoshop_BUTTON]
Meter=BUTTON
X=-300R
Y=347
ButtonImage=#@#Photoshop.png
ButtonCommand=["#LINKS#Photoshop.lnk"]
Post Reply