It is currently April 25th, 2024, 2:49 pm

Making a skin with different icons.

Get help with creating, editing & fixing problems with skins
Ao Nuu Shin
Posts: 128
Joined: May 2nd, 2015, 9:13 am

Making a skin with different icons.

Post by Ao Nuu Shin »

Hello. A long time ago, I started experimenting with rainmeter skins. I either used illustro's code and tweaked it to make something. Or different open source rainmeter skins to re-create something entirely else and every time with icons and things I created on my own from Photoshop. I recently came back to making skins because I want to make one very simple, easy and good looking.

I have the idea of making pictures on PS again, icons like bins and whatnot. Or, in the worse case scenario, use some from google images. Creating/Using is not my problem though. My problem lies in that, I completely forgot EVERYTHING that I knew and my brain is just as bad as my memory.

Long story short, is there a specific code that I can study/re-learn, that enables me to have, for example, two different bin icons BUT, when the bin is empty it will display only the 1 icon, and when the bin is full it will display the other icon which gonna look like "filled up" like an actual bin for example.

I think I know/remember how to add sound effects and actions....proooobably....what I can't remember or understand is how to make the above example viable. I assume I have to put the 2 images on @resource folder, obviously, make a path on the bin.ini that is gonna read both of them, but I don't know for the life of me how to make that happen, I don't even know if it's possible or If I am asking something too much...

So far, I've managed to make a big icon that says Recycle Bin, and has a count of how many exact items are being deleted.

Please, this is really important to me, I tried to recover my account just to make this question here. I hope someone will see it and help me out. I am planning to make this skin, finish it and keep working on it until March. I want to give it as a present to someone and if they really like it, I may re-activate my Deviantart and upload it there for other people to use it. Yes, it's a birthday planned gift. I want to start simple and modest with that and keep working/updating it with more and neat features, but I am a loser noob.

But, I want to work hard on that, so, guys, please, I legit beg of you, I need this help/guidance. In the meantime, I am reading up some commands about most of the things, but I am having a trouble to understand/memorize them all....

EDIT : I found a picture online, as a sample, I copied illustro's demo code - old version of illustro made by me - and tried to make it work. So far, I managed to make the picture visible on the desktop and WITH the sound working as intended. But, my issue lies elsewhere, there is some sort of the same image like a mirror whenever I hover my mouse over the bin icon. I can move it with X/Y but only with them. It feels like a cropped button from that image ON the image....I am confused. Here is my code so far, I don't know what else to do.

Code: Select all

[Rainmeter]
Update=1000
Background=#@#RBin Empty.png

[Metadata]
Name=Recycle Bin
Author=Bahaaaaa
Version=1.0

[Variables]
FontName=Trebuchet MS
Text=Recycle Bin
TextSize=8
===============================
Measures
===============================
[MeasureBinItems]
Measure=Plugin
Plugin=RecycleManager.dll
RecycleType=Count
UpdateDivider=1

[MeasureBinSize]
Measure=Plugin
Plugin=RecycleManager.dll
RecycleType=Size
UpdateDivider=1

================================
Styles
================================
[styleTitle]
StringAlign=Center
StringCase=Upper
StringStyle=Bold
StringEffect=Shadow
FontEffectColor=0,0,0,50
FontColor=#colorText#
FontFace=#fontName#
FontSize=10
AntiAlias=1
ClipString=1

[styleCenter]
StringAlign=Center
StringCase=None
StringStyle=Bold
StringEffect=Shadow
FontEffectColor=0,0,0,20
FontColor=#colorText#
FontFace=#fontName#
FontSize=#textSize#
AntiAlias=1
ClipString=1

[styleRightText]
StringAlign=Center
StringCase=None
StringStyle=Bold
StringEffect=Shadow
FontEffectColor=0,0,0,20
FontColor=#colorText#
FontFace=#fontName#
FontSize=#textSize#
AntiAlias=1
ClipString=1

[styleSeperator]
SolidColor=255,255,255,15

===============================
Meters
===============================
[meterTitle]
Meter=Button
ButtonImage=#@#\RBin Empty.png
X=0
Y=0
W=10
H=10
Text=Recycle Bin
MouseOverAction=[!PLAYSTOP][PLAY "#@#Sounds\Blip.wav"]
LeftMouseUpAction=[!CommandMeasure measureBinItems "OpenBin"]
RightMouseUpAction=[!CommandMeasure measureBinItems "EmptyBin"]
ToolTipText=Left-click to open Recycle Bin#CRLF#Right-click to empty

[meterBinItems]
Meter=Button
MeasureName=measureBinItems
Text=%1 items

[meterBinSize]
Meter=Button
MeasureName=measureBinSize
Text=%1B
AutoScale=1
Last edited by Brian on January 9th, 2019, 7:50 am, edited 1 time in total.
Reason: Please use [code] tags.
User avatar
balala
Rainmeter Sage
Posts: 16169
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Making a skin with different icons.

Post by balala »

Ao Nuu Shin wrote: January 9th, 2019, 6:27 am Long story short, is there a specific code that I can study/re-learn, that enables me to have, for example, two different bin icons BUT, when the bin is empty it will display only the 1 icon, and when the bin is full it will display the other icon which gonna look like "filled up" like an actual bin for example.
I think I know/remember how to add sound effects and actions....proooobably....what I can't remember or understand is how to make the above example viable. I assume I have to put the 2 images on @resource folder, obviously, make a path on the bin.ini that is gonna read both of them, but I don't know for the life of me how to make that happen, I don't even know if it's possible or If I am asking something too much...
If you want to start learning, the best place is always the Help. There you can find sample codes on each meter / measure's page. Start with those examples, they are good, especially for learning purposes. For example, get the sample code here: https://docs.rainmeter.net/manual-beta/measures/recyclemanager/
Whenever you have concrete questions, feel free to come here on the forum and ask. Sooner or later almost every time you'll get a reply.
Ao Nuu Shin wrote: January 9th, 2019, 6:27 am I am a loser noob.
No, you are not.
Forget this. Everyone of us was a noob at a given time. Just keep working if you like this, a lot of satisfactions are awaiting for you.
Ao Nuu Shin wrote: January 9th, 2019, 6:27 am But, I want to work hard on that, so, guys, please, I legit beg of you, I need this help/guidance. In the meantime, I am reading up some commands about most of the things, but I am having a trouble to understand/memorize them all....
Don't try to memorize anything. If you keep working, after a while you'll learn automatically all things you're working with. In the meantime doesn't worth to memorize them, anyway won't help. You'll feel you've memorized them, but when will have to apply, you'll come to the conclusion, that there always is a mistake.
User avatar
jsmorley
Developer
Posts: 22629
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Making a skin with different icons.

Post by jsmorley »

In my view, the best way to handle the recycle bin, or really any image that changes between two states based on a measure value, is to use the MeterStyle functionality, combined with IfCondition tests and !SetOption bangs on the measure.

Using MeterStyle not only allows you to easily change the image used, but simultaneously change all kinds of other related attributes like fonts and colors and sizes and such, that might also be dependent on the same measure value.

https://docs.rainmeter.net/manual/meters/general-options/meterstyles/
https://docs.rainmeter.net/manual/measures/general-options/ifconditions/
https://docs.rainmeter.net/manual/bangs/#SetOption

Code: Select all

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

[MeasureBinSize]
Measure=RecycleManager
RecycleType=SIZE
IfCondition=MeasureBinSize > 0
IfTrueAction=[!SetOption MeterBinImage MeterStyle "StyleAll | StyleFull"][!SetOption MeterBinText MeterStyle "StyleAll | StyleFull"]
IfFalseAction=[!SetOption MeterBinImage MeterStyle "StyleAll | StyleEmpty"][!SetOption MeterBinText MeterStyle "StyleAll | StyleEmpty"]

[MeasureBinCount]
Measure=RecycleManager
RecycleType=COUNT

[StyleAll]
ImagePath=#@#Images
FontFace=Fira Sans
FontSize=11
SolidColor=0,0,0,1
GreyScale=1
AntiAlias=1
AutoScale=1
NumOfDecimals=0

[StyleFull]
ImageName=RecycleFull.png
ImageAlpha=255
FontColor=255,255,255,255
Text=Items: %2#CRLF#Size: %1B
LeftMouseUpAction=[!CommandMeasure "MeasureBinSize" "OpenBin"]
RightMouseUpAction=[!CommandMeasure "MeasureBinSize" "EmptyBinSilent"]

[StyleEmpty]
ImageName=RecycleEmpty.png
ImageAlpha=180
FontColor=190,190,190,255
Text=Recycle#CRLF#Empty
LeftMouseUpAction=[!CommandMeasure "MeasureBinSize" "OpenBin"]
RightMouseUpAction=""

[MeterBinText]
Meter=String
MeterStyle=StyleAll | StyleEmpty
MeasureName=MeasureBinSize
MeasureName2=MeasureBinCount
X=17
Y=14
LeftMouseUpAction=""
RightMouseUpAction=""

[MeterBinImage]
Meter=Image
MeterStyle=StyleAll | StyleEmpty
X=120
Y=10
W=40
H=40
RecycleEmpty.png
RecycleFull.png


So in StyleAll we put all the options we want to be set a particular way no matter what the state is. Note that in a MeterStyle you don't have to worry about the type of meter it will be applied to, just stick all of them in the same MeterStyle. Any option that doesn't apply to a particular meter type will just be ignored on that meter. In other words, it does no harm to set FontSize on an Image meter, it will just be ignored.

Then in StyleEmpty and StyleFull we put the changes to various options we want to make based on the state of the measure.

Meters will always use StyleAll, and then either StyleEmpty or StyleFull as appropriate.
You do not have the required permissions to view the files attached to this post.
User avatar
jsmorley
Developer
Posts: 22629
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Making a skin with different icons.

Post by jsmorley »

Recycle_1.0.rmskin
1.jpg
You do not have the required permissions to view the files attached to this post.
User avatar
balala
Rainmeter Sage
Posts: 16169
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Making a skin with different icons.

Post by balala »

Ao Nuu Shin wrote: January 9th, 2019, 6:27 am

Code: Select all

[Rainmeter]
Update=1000
Background=#@#RBin Empty.png

[Metadata]
Name=Recycle Bin
Author=Bahaaaaa
Version=1.0

[Variables]
FontName=Trebuchet MS
Text=Recycle Bin
TextSize=8
===============================
Measures
===============================
[MeasureBinItems]
Measure=Plugin
Plugin=RecycleManager.dll
RecycleType=Count
UpdateDivider=1

[MeasureBinSize]
Measure=Plugin
Plugin=RecycleManager.dll
RecycleType=Size
UpdateDivider=1

================================
Styles
================================
[styleTitle]
StringAlign=Center
StringCase=Upper
StringStyle=Bold
StringEffect=Shadow
FontEffectColor=0,0,0,50
FontColor=#colorText#
FontFace=#fontName#
FontSize=10
AntiAlias=1
ClipString=1

[styleCenter]
StringAlign=Center
StringCase=None
StringStyle=Bold
StringEffect=Shadow
FontEffectColor=0,0,0,20
FontColor=#colorText#
FontFace=#fontName#
FontSize=#textSize#
AntiAlias=1
ClipString=1

[styleRightText]
StringAlign=Center
StringCase=None
StringStyle=Bold
StringEffect=Shadow
FontEffectColor=0,0,0,20
FontColor=#colorText#
FontFace=#fontName#
FontSize=#textSize#
AntiAlias=1
ClipString=1

[styleSeperator]
SolidColor=255,255,255,15

===============================
Meters
===============================
[meterTitle]
Meter=Button
ButtonImage=#@#\RBin Empty.png
X=0
Y=0
W=10
H=10
Text=Recycle Bin
MouseOverAction=[!PLAYSTOP][PLAY "#@#Sounds\Blip.wav"]
LeftMouseUpAction=[!CommandMeasure measureBinItems "OpenBin"]
RightMouseUpAction=[!CommandMeasure measureBinItems "EmptyBin"]
ToolTipText=Left-click to open Recycle Bin#CRLF#Right-click to empty

[meterBinItems]
Meter=Button
MeasureName=measureBinItems
Text=%1 items

[meterBinSize]
Meter=Button
MeasureName=measureBinSize
Text=%1B
AutoScale=1
Just a small remark related to this code: the PlayStop bang shouldn't have to have an exclamation mark before. There are just three such bangs: Play, PlayLoop and PlayStop, all others having that exclamation mark, but these three don't have it. You've added a such mark in front of the PLAYSTOP bang into the MaouseOverAction option of the [meterTitle] meter. Remove it.
Ao Nuu Shin
Posts: 128
Joined: May 2nd, 2015, 9:13 am

Re: Making a skin with different icons.

Post by Ao Nuu Shin »

Oh, my God! I was never expecting any comment! Was afraid it will be ignored!! Thank you for talking to me, I will try to take everyone's advice to heart! I appreciate what you did and I hope I can be a good rainmeter skin builder in the future!
User avatar
balala
Rainmeter Sage
Posts: 16169
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Making a skin with different icons.

Post by balala »

Ao Nuu Shin wrote: January 9th, 2019, 8:37 pm Was afraid it will be ignored!!
We try to never ignore, especially not questions in new topics.
Ao Nuu Shin wrote: January 9th, 2019, 8:37 pm I hope I can be a good rainmeter skin builder in the future!
You can and will be, supposing you'll keep working. Go ahead, experience is very valuable.
:thumbup: :great: