Would like to have a skin previewd and commented on please.

[Yincognito]

Code: Select all

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

[Variables]
W=5
U=[!UpdateMeasure MeasureFader][!UpdateMeterGroup Faders][!Redraw]
CurrentAlphaOne=160
CurrentAlphaTwo=160
CurrentAlphaThree=160
CurrentAlphaFour=160
CurrentAlphaFive=160

[MeasureFader]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat Fade1,#W#,20
Fade1=[!SetVariable CurrentAlphaOne "(Clamp(#CurrentAlphaOne#-5,160,255))"]#U#
ActionList2=Repeat Fade2,#W#,20
Fade2=[!SetVariable CurrentAlphaOne "(Clamp(#CurrentAlphaOne#+5,160,255))"]#U#
ActionList3=Repeat Fade3,#W#,20
Fade3=[!SetVariable CurrentAlphaTwo "(Clamp(#CurrentAlphaTwo#-5,160,255))"]#U#
ActionList4=Repeat Fade4,#W#,20
Fade4=[!SetVariable CurrentAlphaTwo "(Clamp(#CurrentAlphaTWo#+5,160,255))"]#U#
ActionList5=Repeat Fade5,#W#,20
Fade5=[!SetVariable CurrentAlphaThree "(Clamp(#CurrentAlphaThree#-5,160,255))"]#U#
ActionList6=Repeat Fade6,#W#,20
Fade6=[!SetVariable CurrentAlphaThree "(Clamp(#CurrentAlphaThree#+5,160,255))"]#U#
ActionList7=Repeat Fade7,#W#,20
Fade7=[!SetVariable CurrentAlphaFour "(Clamp(#CurrentAlphaFour#-5,160,255))"]#U#
ActionList8=Repeat Fade8,#W#,20
Fade8=[!SetVariable CurrentAlphaFour "(Clamp(#CurrentAlphaFour#+5,160,255))"]#U#
ActionList9=Repeat Fade9,#W#,20
Fade9=[!SetVariable CurrentAlphaFive "(Clamp(#CurrentAlphaFive#-5,160,255))"]#U#
ActionList10=Repeat Fade10,#W#,20
Fade10=[!SetVariable CurrentAlphaFive "(Clamp(#CurrentAlphaFive#+5,160,255))"]#U#
DynamicVariables=1

[TextStyle]
Group=Faders
Y=5R
W=120
FontSize=13
FontWeight=700
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
DynamicVariables=1

[MeterOne]
Meter=String
MeterStyle=TextStyle
Y=0
FontColor=255,255,255,#CurrentAlphaOne#
Text=Meter One
MouseOverAction=[!CommandMeasure MeasureFader "Stop 1"][!CommandMeasure MeasureFader "Execute 2"]
MouseLeaveAction=[!CommandMeasure MeasureFader "Stop 2"][!CommandMeasure MeasureFader "Execute 1"]

[MeterTwo]
Meter=String
MeterStyle=TextStyle
FontColor=255,255,255,#CurrentAlphaTwo#
Text=Meter Two
MouseOverAction=[!CommandMeasure MeasureFader "Stop 3"][!CommandMeasure MeasureFader "Execute 4"]
MouseLeaveAction=[!CommandMeasure MeasureFader "Stop 4"][!CommandMeasure MeasureFader "Execute 3"]

[MeterThree]
Meter=String
MeterStyle=TextStyle
FontColor=255,255,255,#CurrentAlphaThree#
Text=Meter Three
MouseOverAction=[!CommandMeasure MeasureFader "Stop 5"][!CommandMeasure MeasureFader "Execute 6"]
MouseLeaveAction=[!CommandMeasure MeasureFader "Stop 6"][!CommandMeasure MeasureFader "Execute 5"]

[MeterFour]
Meter=String
MeterStyle=TextStyle
FontColor=255,255,255,#CurrentAlphaFour#
Text=Meter Four
MouseOverAction=[!CommandMeasure MeasureFader "Stop 7"][!CommandMeasure MeasureFader "Execute 8"]
MouseLeaveAction=[!CommandMeasure MeasureFader "Stop 8"][!CommandMeasure MeasureFader "Execute 7"]

[MeterFive]
Meter=String
MeterStyle=TextStyle
FontColor=255,255,255,#CurrentAlphaFive#
Text=Meter Five
MouseOverAction=[!CommandMeasure MeasureFader "Stop 9"][!CommandMeasure MeasureFader "Execute 10"]
MouseLeaveAction=[!CommandMeasure MeasureFader "Stop 10"][!CommandMeasure MeasureFader "Execute 9"]

test.gif



https://docs.rainmeter.net/manual/plugins/actiontimer/

Yes, that's even better. Fading instead of "glowing", for a similar effect on things. Hopefully the OP will understand this process as well, but it would take a detour to the ActionTimer section of the manual.

So it seems to me that you could create just one "glow" image, slightly larger and offset from the "icon", and fade that in and out on mouse over / leave.

Yeah, something like that. I'm all for reusability in this kind of situations, as it simplifies the job with minimal "downside" effects for the process.

[Yincognito]

Not sure this couldn't be a Shape with a radial gradient, but I'd have to explore how well you could get that to look as a "glow".

Yes, if I think about it, I believe glowing is ore suitable for text "animation" on hover. For images, especially those with transparent parts, it's a bit trickier to make a glowing shape that suits all the possible shapes the original opaque icon could take...

[jsmorley]

Right. It's all a question of design and ascetics. You might have the entire "container" the icons sits in have a color or a gradient that fades in and out to indicate when an icon is hovered for instance.

Probably my least-favorite approach would be to create a slightly larger and offset copy of each and every image, forcing a "glow" on it using Photoshop or something. Whew. A lot of work, and not terribly extensible really. If you want to create a new icon a month from now, you better remember exactly how you did the earlier ones...

[Yincognito]

Right. It's all a question of design and ascetics. You might have the entire "container" the icons sits in have a color or a gradient that fades in and out to indicate when an icon is hovered for instance.

Probably my least-favorite approach would be to create a slightly larger and offset copy of each and every image, forcing a "glow" on it using Photoshop or something. Whew. A lot of work, and not terribly extensible really. If you want to create a new icon a month from now, you better remember exactly how you did the earlier ones...

Indeed. I think one effect should be enough in these cases, that's why in my original post I used "or" and not "and". I mean, make a choice on one of them and forget about the other - no need to also have them glow if they already resize, and no point in having them resize if they already have a glow effect on them. It depends on the circumstances: in some cases a glow (or fade) effect might look better - and be easier to implement -, in others the reverse.

[jsmorley]

So just to give an example...

Code: Select all

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

[Variables]
W=5
U=[!UpdateMeasure MeasureFader][!UpdateMeter *][!Redraw]
Alpha1=1

[MeasureFader]
Measure=Plugin
Plugin=ActionTimer
ActionList1=Repeat Fade1,#W#,26
Fade1=[!SetVariable Alpha1 "(Clamp(#Alpha1#+10,1,255))"]#U#
ActionList2=Repeat Fade2,#W#,26
Fade2=[!SetVariable Alpha1 "(Clamp(#Alpha1#-10,1,255))"]#U#
DynamicVariables=1

[MeterContainerBack]
Meter=Shape
Shape=Rectangle 0,0,65,65 | StrokeWidth 0 | Fill RadialGradient MyGradient1
MyGradient1=0,0 | 255,255,87,#Alpha1# ; 0.0| 255,255,87,1 ; 1.0
DynamicVariables=1

[MeterContainer]
Meter=Shape
Shape=Rectangle 0,0,65,65 | StrokeWidth 0

[MeterImage]
Meter=Image
ImagePath=#@#Images\
ImageName=Check.png
W=65
H=65
Container=MeterContainer
MouseOverAction=[!CommandMeasure MeasureFader "Stop 2"][!CommandMeasure MeasureFader "Execute 1"]
MouseLeaveAction=[!CommandMeasure MeasureFader "Stop 1"][!CommandMeasure MeasureFader "Execute 2"]

test.gif

[Yincognito]

Another alternative would be to tint the image accordingly. For the first image meter in this skin, the code would be something like:

Code: Select all

[MeterProgramImage_1]
Meter=Image
Container=MeterProgramImage_1_Container
ImageName=#@#Images\notepad.png
X=((#SizeBig#-#SizeSmall#)/2)
Y=((#SizeBig#-#SizeSmall#)/2)
W=(#SizeSmall#)
H=(#SizeSmall#)
ImageTint=128,128,128,255
MouseOverAction=[!SetOption MeterProgramImage_1 ImageTint "255,255,255,255"][!UpdateMeter MeterProgramImage_1][!Redraw]
MouseLeaveAction=[!SetOption MeterProgramImage_1 ImageTint "128,128,128,255"][!UpdateMeter MeterProgramImage_1][!Redraw]
LeftMouseUpAction=["C:\Windows\System32\Notepad.exe"]
ToolTipText=Notepad
DynamicVariables=1

And the result:

ezgif.com-video-to-gif.gif

This can, of course, be combined with resizing the image icon, by simply adding the relevant bangs back in the MouseOver and MouseLeave options. Naturally, the effect can be applied on the #SizeBig# (i.e. 64x64) icon - as opposed to the sample above, where it has been applied on the #SizeSmall# (i.e. 48x48) one.

[balala]

Returning to the question of having an enlargement of an icon which the mouse is hovered over, yesterday I posted a relatively complicated solution of this question. I had to add a MouseOverAction and a MouseLeaveaction option to each icon. Those options had to be rewritten from one icon to the other. Yincognito suggested (PS here) that maybe TransformationMatrix could be used to get a much simpler solution. I promised I'll try to figure out how to do this. Finally I did, here is what I got. Note that this procedure is indeed extremely simple, but it has the disadvantage of using the TransformationMatrix option, which for many seems hard. I'm not sure why, this is an extremely powerful and not too complicated feature, which can be used on any meter, particularly here on Image meters.

GIF.gif

Starting from the original code, posted by Beuwolf, you have to add only one variable and two options to two sections of the code. Nothing else is needed.
So, add the EnlargementPercent=20 variable to the [Variables] section. This is the percent of enlargement, which occurs when you're hovering the mouse over the icon. Also add the following options to both style sections, [StyleImage_L] and [StyleImage_M+R]:

Code: Select all

[StyleImage_L]
...
MouseOverAction=[!SetOption #CURRENTSECTION# TransformationMatrix "(1+#EnlargementPercent#/100);0;0;(1+#EnlargementPercent#/100);(([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)-([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)*(1+#EnlargementPercent#/100));(([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)-([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)*(1+#EnlargementPercent#/100))"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# TransformationMatrix "1;0;0;1;0;0"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
DynamicVariables=1

...

[StyleImage_M+R]
...
MouseOverAction=[!SetOption #CURRENTSECTION# TransformationMatrix "(1+#EnlargementPercent#/100);0;0;(1+#EnlargementPercent#/100);(([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)-([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)*(1+#EnlargementPercent#/100));(([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)-([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)*(1+#EnlargementPercent#/100))"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# TransformationMatrix "1;0;0;1;0;0"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
DynamicVariables=1

The two MouseOverAction and MouseLeaveAction options are identical in the two sections.
That's all!

In my opinion, this is a much more simple and elegant solution then the previous one. I like it very much. It has one more advantage, namely that the percent of enlargement can be extremely easily set, through the EnlargementPercent variable, within the [Variables] section.
Please give it a try and let me know how does this work.

[Beuwolf]

Had a slight hickup when starting the second row, the 7th Icon just didn't want to be placed underneath the first one. It kept moving the divider down underneath itself, instead of leaving it above and between row 1 and 2. And the Icon itself settled underneath Icon 6. So, after some head scratching and trying everything I could think about I thought to myself. ** Well, this probably wont work but lets put the divider in the .inc file instead of the .ini file ** and then I give up and ask here in the forum. So, did that, clicked save and reload. And it worked !

I did not expect the divider to work from a .inc file. Don't ask me why though, just thought those were more for pulling extra things into the .ini, like fonts, colours and so on. Then again, from this thread I know I barely know nothing so there is that too !

In any case, got it all sorted and the Launch dock is working as intended. Then I come here and saw what else you all have posted.

Ok, I built on the previously posted code and made everything (including the background, the bars, the images, etc.) adapt to just 2 variables: #SizeBig# (image size when hovered) and #SizeSmall# (image size when not hovered).

This is very useful, and make things SO much easier ! Especially with the resizing of this particular skin, having so many images. Thanks !

Returning to the question of having an enlargement of an icon which the mouse is hovered over, yesterday I posted a relatively complicated solution of this question. I had to add a MouseOverAction and a MouseLeaveaction option to each icon. Those options had to be rewritten from one icon to the other. Yincognito suggested (PS here) that maybe TransformationMatrix could be used to get a much simpler solution. I promised I'll try to figure out how to do this. Finally I did, here is what I got. Note that this procedure is indeed extremely simple, but it has the disadvantage of using the TransformationMatrix option, which for many seems hard. I'm not sure why, this is an extremely powerful and not too complicated feature, which can be used on any meter, particularly here on Image meters.

I actually read through the Transformation Matrix Guide a couple days ago and did not leave much wiser. But having your example now I try and read it soon again.

Starting from the original code, posted by Beuwolf, you have to add only one variable and two options to two sections of the code. Nothing else is needed.
So, add the EnlargementPercent=20 variable to the [Variables] section. This is the percent of enlargement, which occurs when you're hovering the mouse over the icon. Also add the following options to both style sections, [StyleImage_L] and [StyleImage_M+R]:

Code: Select all

[StyleImage_L]
...
MouseOverAction=[!SetOption #CURRENTSECTION# TransformationMatrix "(1+#EnlargementPercent#/100);0;0;(1+#EnlargementPercent#/100);(([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)-([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)*(1+#EnlargementPercent#/100));(([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)-([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)*(1+#EnlargementPercent#/100))"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# TransformationMatrix "1;0;0;1;0;0"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
DynamicVariables=1

...

[StyleImage_M+R]
...
MouseOverAction=[!SetOption #CURRENTSECTION# TransformationMatrix "(1+#EnlargementPercent#/100);0;0;(1+#EnlargementPercent#/100);(([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)-([#CURRENTSECTION#:X]+[#CURRENTSECTION#:W]/2)*(1+#EnlargementPercent#/100));(([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)-([#CURRENTSECTION#:Y]+[#CURRENTSECTION#:H]/2)*(1+#EnlargementPercent#/100))"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# TransformationMatrix "1;0;0;1;0;0"][!UpdateMeter "#CURRENTSECTION#"][!Redraw]
DynamicVariables=1

The two MouseOverAction and MouseLeaveAction options are identical in the two sections.
That's all!

In my opinion, this is a much more simple and elegant solution then the previous one. I like it very much. It has one more advantage, namely that the percent of enlargement can be extremely easily set, through the EnlargementPercent variable, within the [Variables] section.
Please give it a try and let me know how does this work.

WOW once again ! That sure makes things much easier overall !

Fact is, with both your help, Yincognito and balala, the end result is just awesome !

Combining Yincognito [SizeBig] and [SizeSmall] on the few places where it was needed in the .ini and .inc file, then adding balala Transformation Matrix to the skin and it works flawlessly ! Well, from what I can see anyway, have added the skin below if anyone want to check it out.

I learned alot from you all here, several ways on how to reach the end goal, which for now was making the image expand while hovering over it. Something I not even had considered but now liking it !

Found myself a 30day free trial on a Icon software, so going to play around with it and see if I can make some better looking icons to go with the skin as well. Not that those I found are bad, they great looking but as mentioned. Would be nice if they were more uniform if possible. Have the weekend off so will see what one can come up with, if anything.

I be looking into the glowing suggestion that has been posted as well, although pretty happy with how it is for the moment.

But saying that, any other suggestions posted I be more then happy to have a look at !

[Yincognito]

In my opinion, this is a much more simple and elegant solution then the previous one. I like it very much. It has one more advantage, namely that the percent of enlargement can be extremely easily set, through the EnlargementPercent variable, within the [Variables] section.
Please give it a try and let me know how does this work.

Excellent work, balala! Nice trick to include the mouse actions into the meter styles in order to avoid copy pasting them in every meter - that's a trick I'll have to remember. This must be the simplest solution yet, and yes, using a variable (or variables, in my version) to control the amount of resizing makes the whole thing much more flexible.

That being said, if I follow your example and include the repetitive options into the meter styles, coupled with replacing the specific meter names with the #CURRENTSECTION# variable, I will massively reduce the needed additional code as well... Credit to you though, you implemented it perfectly, not to mention the TransformationMatrix variant.

Now the OP has a lot of ways to do things in his skin, and a lot of fine stuff to learn.

[Yincognito]

Combining Yincognito [SizeBig] and [SizeSmall] on the few places where it was needed in the .ini and .inc file, then adding balala Transformation Matrix to the skin and it works flawlessly !

Actually, if you're including SizeBig and SizeSmall in the .ini and .inc files in order to be able to resize the whole skin, you should know you can probably do it using SizeSmall and balala's EnlargementPercent variable as well. It's all about modifying the formulas of relevant X,Y,W and H where SizeBig is used.

In the end, SizeBig is basically #SizeSmall#+(#EnlargementPercent#/100)*#SizeSmall#, or (1+#EnlargementPercent#/100)*#SizeSmall# in math terms. In other words, if you enlarge your icons on hover by 20%, you'll probably want to enlarge the (unpadded) part of your your skin by 20% as well.

Or, even simpler (since you have less to modify, thanks to balala's trick), you can express EnlargementPercent as ((#SizeBig#/#SizeSmall#)*100) in the TransformationMatrix formulas, and have both icon resizing on hover and skin resizing based on the value of SizeBig...