This tutorial is going to be a bit more to chew on. First off lets set up a basic hard drive freespace measure and meter.

[Rainmeter] BackgroundMode=2 SolidColor="0, 255, 255, 255" Author=Amfest Update=1000 ;-------------------------------------- [MeasureDiskC] Measure=FreeDiskSpace Drive=C:\ ;--------------------------------------- [MeterDiskC] Meter=STRING MeasureName=MeasureDiskC X=0 Y=0 Prefix="C:\ " AutoScale=1

Here we just have displayed the freespace on the C drive with a simple prefix of C:\ before the freespace display. But . .what if the user doesnt' want it to be the C drive. Or what if you list C and D drive but they dont' have a hard drive on D but their CD-Rom and their D drive is actually E drive. You could let them flounder through your code to change out any instance of C:\ that you put in or you can use variables.

The variables are keywords that are replaced in other settings. These can be used e.g. to gather user defined values to the top of the config-file so that they can be easily changed. To use a variable just surround the keyword with '#'-chars. These must be put under [Rainmeter] section.

So lets do that. We're going to add another line divider between the Rainmeter top section and the first measure. Add this

[Variables] D1="C:\"

What this basically means is that anywhere you put in the D1 variable instead what ever is written after the equals mark will be inputed instead. In order for this to work also you have to surround D1 with # also. So we change the measure and meter to:

[MeasureDiskC] Measure=FreeDiskSpace Drive=#D1# ;--------------------------------------- [MeterDiskC] Meter=STRING MeasureName=MeasureDiskC X=0 Y=0 Prefix="#D1# " AutoScale=1

If you notice I've changed the Drive= to link to the variable. The prefix is also changed to the variable. I've even included it in quotations and kept space. If you save and reload you won't notice anything different than before but if you change the variable D1 to D1="D:\" You'll notice that the free space and prefix will both change to your D drive. It's a very easy method to customize to the needs of people who download your skins. Or if you decide to change things where you input the same thing alot then you can easily change them all.

Moving along now we're going to work with showing and hiding meters. Maybe you don't want to have a big long list going down but instead a window where the information switches. In order to do this you'll have to learn how to create a clickable hotspot that will hide and show meters so that the information won't overlap. So lets add a CPU measure and meter to the current code.

[MeasureCPU] Measure=CPU

and

[MeterCPU] MeasureName=MeasureCPU Meter=STRING X=0 Y=0 Prefix="CPU: " Text="%1%"

The X and Y as 0 will place the cpu text over the c drive text. In order to amend this problem we have to make one of them hidden at startup. In this case we'll make the CPU text hidden. At the end of the MeterCPUtext meter add in Hidden=1. Now when you load up the skin you shoudln't see the CPU text anymore. Now we need an action in order to show the CPU text and make the C drive text hidden. We'll use the Meter=IMAGE to make some small boxes as clickable objects first. Add these after the Meter for CPU.

[MeterHotspot1] Meter=IMAGE X=0 Y=20r W=10 H=10 SolidColor=0, 0, 0, 255 [MeterHotspot2] Meter=IMAGE X=20r Y=0r W=10 H=10 SolidColor=0, 0, 0, 255

This should be easy to understand. I made an Image Meter but didn't use any image for it. Instead we added a SolidColor=RGB color line. This in turn will just make a rectangle specified to your Width and Height input. If you're going to just make boxes this is a good method to use instead of creating solid color images. With this method you can adjust the size as you need without stretching your image. It's also a good method to figure out your sizes if you do intend to create an image background or button later. Well Now that we have two boxes to represet something to click, we now need to add in Mouse actions and then Bangs.

A bang is a special command that can be executed to change something in the application.

It should look like this.

[MeterHotspot1] Meter=IMAGE X=0 Y=20r W=10 H=10 SolidColor=0, 0, 0, 255 LeftMouseDownAction=!execute [!RainmeterHideMeter MeterCPU] [!RainmeterShowMeter MeterDiskC] [MeterHotspot2] Meter=IMAGE X=20r Y=0r W=10 H=10 SolidColor=0, 0, 0, 255 LeftMouseDownAction=!execute [!RainmeterHideMeter MeterDiskC] [!RainmeterShowMeter MeterCPU]

First off at the ends of the IMAGE meters we add in an action so that rainmeter knows that when the left mouse button is pushed down this is what is going to happen. Since we're going to use two bang commands together with 1 mouse click we have to use the !execute bang.

!Execute
Special !bang that can be used to combine several !bangs together. The !bangs are separated with '[' and ']'-chars.

As it says we have to put brackets around our bang commands when using it. Our first bang is !RainmeterHideMeter Metername. This is just as it reads. It hides whatever Meter you specify. It makes whatever Meter you choose become Hidden=1. The next bang does the opposite. !RainmeterShowMeter Metername. It will make the meter visble. There are other Mouse and Bang Options. Check the helpfile for possible uses. I will delve into others later but I also encourage everyone to check through the helpfile as you might come up with your own uses.

Well now we have two clickable boxes that change the meters but maybe we want buttons. Ones that depress when you push them and change when you mouse over them. You'll Need to do some image work if you want to create buttons. Either way download this simple button I made.

The image must have 3 frames which can be set either horizontally or vertically (The orientation is checked from the width/height of the image).

So create a basic button look. Leave at least a 1 pixel transparent area under and above the image. then you can simply extend the width 3 times the size. In the case of the one I created the width was 15 so I made a new image with 45pixel width. Then I just pasted the image 3 times next to each other. The very left box is the one that is displayed normally. The middle box is what the button looks like when you click on it. For this one I made it a darker color to signify a button push and dropped it down a pixel to give that depression feel. Then the very right image is what the button looks like when you put your mouse over it. I chose to have it lift up but you can easily just make it light up or something. Maybe the black border could of turned yellow. Either way save the button.png to the tutorial05 skin folder if you are following along and now we change our hotspot IMAGE meters to button meters.

[MeterHotspot1] Meter=BUTTON X=0 Y=20r ButtonImage=Button.png ButtonCommand=!execute [!RainmeterHideMeter MeterCPU] [!RainmeterShowMeter MeterDiskC] [MeterHotspot2] Meter=BUTTON X=20r Y=0r ButtonImage=Button.png ButtonCommand=!execute [!RainmeterHideMeter MeterDiskC] [!RainmeterShowMeter MeterCPU]

The meter is now Button. Since this meter is now going to be linked to an image we don't needd the W and H input. Same for SolidColor. It can be taken out. Now we need to specify our ButtonImage name. And the Mouse Action isn't needed since a button is geared to be pushed just change it to ButtonCommand. The bangs will be used on ButtonCommand instead. Also if you'll notice Buttons change the meters faster than clicking an image hotspot. It's up to you how you want to use them though.