It is currently April 8th, 2020, 4:03 pm

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

Help with creating, editing & fixing problems with skins
User avatar
jsmorley
Developer
Posts: 20457
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

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

Post by jsmorley »

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.

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".
User avatar
Yincognito
Posts: 1152
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

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

Post by Yincognito »

jsmorley wrote:
March 11th, 2020, 2:08 pm

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. :thumbup:
jsmorley wrote:
March 11th, 2020, 2:14 pm
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.
User avatar
Yincognito
Posts: 1152
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

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

Post by Yincognito »

jsmorley wrote:
March 11th, 2020, 2:14 pm
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...
User avatar
jsmorley
Developer
Posts: 20457
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

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

Post by 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...
User avatar
Yincognito
Posts: 1152
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

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

Post by Yincognito »

jsmorley wrote:
March 11th, 2020, 2:26 pm
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.
User avatar
jsmorley
Developer
Posts: 20457
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

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

Post by 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
You do not have the required permissions to view the files attached to this post.
User avatar
Yincognito
Posts: 1152
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

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

Post by 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.
You do not have the required permissions to view the files attached to this post.
User avatar
balala
Rainmeter Sage
Posts: 10094
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

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

Post by 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.
You do not have the required permissions to view the files attached to this post.
User avatar
Beuwolf
Posts: 28
Joined: February 15th, 2020, 10:08 pm

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

Post by 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 ! O.O

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 ! :lol:

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. O.O
Yincognito wrote:
March 11th, 2020, 2:10 pm
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 ! :D
balala wrote:
March 11th, 2020, 7:31 pm
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. :oops: But having your example now I try and read it soon again.
balala wrote:
March 11th, 2020, 7:31 pm
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 ! :jawdrop That sure makes things much easier overall !

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

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 ! :D

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. :oops:

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 ! :D
You do not have the required permissions to view the files attached to this post.
User avatar
Yincognito
Posts: 1152
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

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

Post by Yincognito »

balala wrote:
March 11th, 2020, 7:31 pm
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! :thumbup: 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... :D Credit to you though, you implemented it perfectly, not to mention the TransformationMatrix variant. :great:

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