8/10/2019 Rain Pad 101

1/20

Version 0.1

Rainpad 101SXPanda

8/10/2019 Rain Pad 101

2/20

1

ContentsPrerequisites ........................................................................................................................................... 2

Changes to the Interface since version 0.1 ............................................................................................. 2

The Meters Window ........................................................................................................................... 3

Meters ................................................................................................................................................. 3

Your First Rainmeter Skin ........................................................................................................................ 4

Adding a Simple Text Clock ................................................................................................................. 7

Adding Seconds to your Clock ........................................................................................................... 10

Testing ............................................................................................................................................... 11

Bars and Roundlines ............................................................................................................................. 12

Bars ................................................................................................................................................... 12

Roundlines ........................................................................................................................................ 12

Advanced .............................................................................................................................................. 13

Using Images ..................................................................................................................................... 13

Histograms ........................................................................................................................................ 14

Rainpad v0.2 new functions .................................................................................................................. 14

Panels ................................................................................................................................................ 15

Drop Down Menus ............................................................................................................................ 16

Image Arrays (Animated Images) ...................................................................................................... 18

8/10/2019 Rain Pad 101

3/20

2

PrerequisitesYou will need to have downloaded both Rainpad andRainmeterfor this tutorial. No programming

experience or previous use of Rainmeter is needed. Note that Rainpad is not associated with

Rainmeter, nor is it endorsed by the Rainmeter developers.

Changes to the Interface since version 0.1Dont worry if you havent used ., this tutorial doesnt require previous knowledge of Rainpad.

Once you open up Rainpad 0.2 you should see a window that looks something like the image below.

Let me walk you through what all this means.

The biggest difference you are likely to notice between Rainpad 0.1 and 0.2 is the omission of the

Variables menu, as well as the Rainmetermenu being renamed to General Information, and the

Metermenu being tweaked toAdd a Meter.

General Information is where we add a few lines that will be used by the Rainmeter Skin, and Add a

Meter is where you personalise your skin to provide the style you want. These are explained in more

detail below.

http://rainmeter.net/cms/http://rainmeter.net/cms/http://rainmeter.net/cms/http://rainmeter.net/cms/

8/10/2019 Rain Pad 101

4/20

3

The Meters Window

If you were to go to the meters panel and click on Time then this new window opens up.

This window is where the magic happens, and you can use these buttons and text boxes to add

displays to your Rainmeter skin. The purpose of each of these boxes will be explained later on, so I

wont go into any more detail just yet.

Thats all you really need to know about the interface for now, next up is creating your first Rainpad

Rainmeter skin.

MetersThere are currently 13 meters that you can add in Rainpad, these are listed below.

8/10/2019 Rain Pad 101

5/20

4

TimeUsed to display time values as a string, bar or roundline. Time can be displayed as

hours, minutes, seconds or a combination of the three.

DateUsed to display date values as a string. The date can be displayed as days, months,

years, weekdays or various combinations of these values.

CPUUsed to display CPU usage as a string, bar, roundline or histogram. You can even use it

to display information regarding individual CPU cores.

MemoryUsed to display memory (RAM) allocation as a string, bar, roundline or histogram.

Hard driveUsed to display disk storage usage as a string, bar or roundline. You can check

total, used or free space.

Battery infoUsed to display battery charge as a string, bar or roundline.

ImageUsed to display an image. Images can also be used as buttons.

StringsUsed to display fixed text values. Useful for labelling other meters.

BarUsed to display a fixed bar. Useful for creating backdrops for dynamic bars (such as

memory or CPU bars)

RoundlineUsed to display a fixed roundline. Useful for creating backdrops for dynamic

roundlines (such as memory or CPU bars)

There are 2 more advanced meters

PanelsUsed to create Windows 8 style panels that can be used to launch applications or

URLs.

Image arrayUsed to create animated images.

Drop Down MenusUsed to create drop down menus that launch applications or URLs.

Your First Rainmeter SkinFor our first Rainmeter Skin we only need to create something very simple, so make sure Rainpad is

open and we can get started.

The first thing you should do is update the general information, so click on the General Information

button along the top, and then select Add Rainmeter Information to open a new window.

The Author name can be anything you want, your name, handle or whatever you want. If you dont

intend to ever release your Rainmeter then you neednt bother filling it in. The update rate is the

time in between each update, in milliseconds, i.e. if you were using a Rainmeter that displayed CPU

usage then every 1000 milliseconds (one second) Rainmeter will check what the CPU usage is. If you

intend to display time then its a good idea to leave this at , otherwise seconds wont update

frequently enough. The Skin Path is where your skin file is located, this isnt particularly important so

you can leave it as is if for now. The final part is version, which is a numerical value depicting what

version the Rainmeter is, you can leave this at 1.0.

Moving on, the next thing to do is to update the variables so select Variables and then select Add

Variable Information from the drop down menu to open up another window.

8/10/2019 Rain Pad 101

6/20

5

The first field we see here is where you can enter your name, this is the name that will be associated

with the skin within Rainmeter, this isnt important so enter whatever you want (your name, handle,

etc.). The second field is labelled update rate, and this is the essentially the refresh rate of your skin

in milliseconds i.e, if you have an update rate of 1000 and a meter that displays your CPU usage,

then that meter will update once every second, setting it to 50 will make it update every 20 seconds.

For general use 1000 is the optimal setting, so we can leave it at 1000. Examples of when you should

decrease it are shown in the more advanced tutorials later on. The final section is labelled Version,

this isnt important unless you release your rainmeter skin to the public, but we dont need to worry

about this for now. Once youve filled all of these sections in, hit the Ok button and we can move on.

If you used Rainmeter v0.1 then you might be expecting to add variables right now, but v0.2 has

removed the reliance on predefined variables to allow greater customisation, so we no longer need

to do this.

The main window of Rainpad should now look like this:

8/10/2019 Rain Pad 101

7/20

8/10/2019 Rain Pad 101

8/20

7

You can see that it now contains your Rainmeter and MetaData information. You can go back and

change these values whenever you please, so dont worry if you want to increase the update rate or

change your author name.

Now that weve got that out of the way we are ready to personalise and customise, so select Add a

Meter from the top menu bar, then click on the Time option to open yet another window. We will

now be adding a simple text based clock.

Adding a Simple Text Clock

This window might seem a bit overwhelming and confusing to anyone new to Rainmeter, but

thankfully I am here to walk you through it. Before I can explain what these mean I need to explain

how Rainmeter works. Rainmeter uses two main functions named measures and meters. Measures

collect information, while meters display that information, each meter typically uses one measure,

8/10/2019 Rain Pad 101

9/20

8

but some will use none while others could use multiple. Unfortunately Rainpad only supports either

one or none at this point in time, but thats all we will need for this simple skin.

The first textbox you see is the measure name, and this is the title that Rainpad uses to identify the

measure. These can be titled anything provided that they fit two criteria: they must not contain any

spaces, and they must be unique. There can be no other measure or meter that shares the same

name, nor can they be named Rainmeter, Variable or MetaData as these are used for other

purposes. As this is our first measure you can leave it as MeasureTime.

The second option is a series of radio buttons used to select the format that we will be measuring. If

you select Hours it will measure hours, if you select Minutes it will measure minutes, etc. Please

be aware that if you intend to use bars or roundlines to display time then they only support single

unit measures, i.e. seconds, minutes and hours; hours/minutes and hours/minutes/seconds do not

work.

Select Hours/Minutes,we will be using a separate measure to record seconds later on. The nextfield is the update divider, and this field is a multiplication of the Rainmeter Update value. If you

leave it at 1 then it uses Rainmeters default Update value (1000 in this case), and changing it to 2 will

multiply it by 2 (2000), we want to leave it at 1.

The next option is the meter name. This follows the same rules as the measure name, and we can

leave it as MeterTime. The skin position values indicate where on the screen we want to position

the measure, with the values being in pixels. Setting it to 0, 0 means it will be in the top left corner

by default. We want to set this to , (Ill explain later). Something that people often forget is that

skin position is not screen position. Skins may be moved around the screen, so the X and Y values are

relative to the top left corner of the skin and not the screen.

Below this are three tabs named String, Bar and Roundline. A string is literally a string of

characters, so in laymans terms its a word or a sentence. Bars and roundlines are more complex

and they are covered in a later chapter, so make sure that String is the selected tab.

Prefix and suffix are the first two options, and these will come before and after your measured

value, we dont need to use these but an example of when you would use them is if you wanted

them to say The time is (time) Oclock. Remember to add a space at the end of a prefix and

another at the beginning of a suffix, otherwise there will be no separation between them and the

measure.

To select your font you can press the button next to the font text box, and this will open a new

dialog window. This window contains a lot of information, and the only part we are interested in is

the font. All other options will have no effect on the Rainmeter skin we create, so just ignore them.

Font size is self-explanatory, and I find that a size of around 8 is best for this purpose so thats what

I recommend you set it to. Choosing font color is the same as choosing a font, hit the button to the

right to open up a new dialog and choose whatever colour you want, I personally will be using a light

grey color since I like my skins to be fairly monochrome. Alignment is also self-explanatory, and we

want to set this to right so that we can have our seconds meter displayed next to it, this is why we

set our X value to 100.

8/10/2019 Rain Pad 101

10/20

9

The text effect selection has 3 options, these are None, Border and Shadow, these add simple

effects to our string and we will be using Shadow. Effect colour defines the colour of the effect, and

you choose this colour in the same way that you chose your font color, I recommend a dark grey if

you used a light grey for your font color. Finally we have Anti-Aliasing which basically makes text

look pretty, we can leave this as 1.

Double check all your values, which should look like the image below, and then hit Ok to close the

window and add more code to the editor panel.

You should notice two differences to the main Rainpad window, the first is that new code has been

added, and the second is that two new items have been added to the contents panel on the left.

8/10/2019 Rain Pad 101

11/20

10

If you click on either of these two new items then it will highlight them in the code editor, which is

handy if you want to make any changes later on, or delete them altogether. Tip: Use descriptive

measure and meter names so that you can easily identify them in the contents menu.

Adding Seconds to your Clock

Before we test out our Rainmeter we have one more thing to do, and that is to add seconds to our

clock, so open up a new Time window.

Remember that our measure name and meter name have to be unique, so our first priority shouldbe to change these to MeasureNameSeconds and MeterNameSeconds. Next up change the

format to seconds, and set screen position to 100, 0, if it is not already set as such. We want a prefix

of : so that it appears to be a part of the rest of the clock, but we dont need a suffix so leave these

blank, your font, font color, text effect and effect color that you used before should have carried

over so leave them as they are. Font size is where things change, our minutes and hours are set to

8, and making our seconds smaller provides a nice visual touch, so set font to 4. Now that weve

changed our font size, we also have to change our screen position, otherwise the seconds will

appear to be floating above the hours and minutes. We decreased font size by 4, so we should also

decrease our y position by 4. 0+4 is 4, so set y to 4. This will make sure that the entire clock is sitting

along the same line.

8/10/2019 Rain Pad 101

12/20

11

Once youve done all of that you should be ready to test your Rainmeter skin.

Testing

Go to File=>Save to open up the save dialog, and navigate to your Rainmeter skins folder, this should

be under My Documents\Rainmeter\Skins. Once there create a new folder and nameit

Rainpad, thengo into this folder and save your file as RainpadClock.ini.

Now open up Rainmeter and you should see your new file listed in the left hand skins menu.

If it is not in the list then hit the Refresh all button and it should now appear.

If you double click on this file then the clock should appear in the top left corner of your screen.

Congratulations, you just created your first Rainpad Rainmeter skin.

8/10/2019 Rain Pad 101

13/20

12

Bars and RoundlinesBars and roundlines are two different ways of displaying information using visual effects rather than

plain text. In a bar, a value is displayed in a similar way you would see a health bar in a video game,

where a block is stretched between two points, depicting its value as a percentage. A roundline is

the same thing, except instead of being a straight line like in a bar, it is a curved or circular line.

You should be familiar with the Rainpad interface by now, so this section will be less descriptive than

before.

Bars

Start a new Rainpad file (Ctrl+N) and update your Rainmeter and Variables sections, again use a dark

grey for colour 1 and a light grey for colour 2. Now go to the Meters menu and look to the bottom

three options. These are meters that used fixed values, i.e. string uses fixed strings, bar is a non-

moving bar. We will be using a blank bar as the background for our first bar, so click bar. Leave the

measure name, meter name and screen position as is. Set width to 20 and height to 200, set

orientation to vertical and then select flat color. If you were to choose image then you could use an

image as your bar, but we want a flat colour. Set your bar colour to a dark grey.

Now go to the Meter menu again and select CPU. The only box here that we havent used before is

the Core box. You can use this to record CPU usageacross individual cores by setting the number to

that value (1 measures the first core, 2 measures the second etc.) leaving this at 0 measures the

average across all cores, so leave it at 0.

Make sure you have selected the Bar tab and then set width to 20, height to 200 and orientation to

vertical. Again, select flat color and set the color to a lighter grey and hit Ok. Save up and load your

Rainmeter skin in Rainmeter, you will now have a bar that shows your CPU load. Huzzah!

Roundlines

Now we will create a roundline that displays RAM usage. The process is very much the same.

Go to the Meter drop down menu again and select Roundline, leave the measure name and meter

name as they are, then set x to 5 so that we dont overlap with our bar.

Width is not important unless we are using a non-solid roundline, but Rainpad doesnt currently

support non-solid blank round lines, so ignore width. Inner radius and outer radius define the shape

of the roundline itself, so set inner radius to 40 and outer radius to 48. Change line colour to your

darker grey. Start rotation defines where the value is on your roundline, we want to be at the

top which can be achieved by setting the start rotation to -90. Rotation angle is the angle between

the start of the roundline and the end of it, we want a full circle so set this to 360 and then hit Ok.

Now go to the Meter drop down menu once more and select Memory. Leave measure name, update

divider and meter name as they are and again set x to 50 and remember to select the Roundline tab.

You want all of the values below to be the same as they are in the previous roundline, except for line

colour which should be the lighter grey we used for our bar. The solid checkbox is a new option we

havent seen before, but wecan leave this as checked. Hit Ok once you have filled in all of the boxes

and then test your Rainmeter skin to see the new roundline added.

8/10/2019 Rain Pad 101

14/20

13

Advanced

Using Images

Images can seriously improve the appearance of a Rainmeter application, and can be the difference

between good and awesome. Rainpad allows users to add images, as well as using images as buttons

to launch applications and open URLs.

Open a new Rainpad file, or open up an existing one and perform the formalities you need to

perform in preparation of adding meters, then go to the Meter drop down menu and select Image.

Name the meter whatever you wish and set your x and y values to position the image where you

want it on the screen. The width and height values are the width and height of the image. You can

leave these blank if you want to use the images default width and height values (which is probably

the best thing to do). The image name box is a bit more complex than other entries. For this box you

need to locate the folder where your Rainmeter .ini file is located. This should be under My

Documents/Rainmeter/Skins/. Once you have located this file you need to place an image into this

folder and then remember its name

8/10/2019 Rain Pad 101

15/20

8/10/2019 Rain Pad 101

16/20

15

Panels

The Panels creator provides a simple means of creating Windows 8 style panels. To create these

panels you will require an image to be used as the icon of these panels, or alternatively you can use

the .ico file of the program. A collection of icons that I have created are available here.

Below you can see a screenshot of my Windows 8 start menu, compared against a collection of

panels created using the Rainpad panel creator.

To create these panels first open up or create a new Rainpad file, and open up the Meter menu,

scroll down to Advanced and select Panels to open up a new window.

http://georgebroadhurstdesigns.com/Windows8PanelsExamples.ziphttp://georgebroadhurstdesigns.com/Windows8PanelsExamples.ziphttp://georgebroadhurstdesigns.com/Windows8PanelsExamples.ziphttp://georgebroadhurstdesigns.com/Windows8PanelsExamples.zip

8/10/2019 Rain Pad 101

17/20

8/10/2019 Rain Pad 101

18/20

17

rate at 1000 then there would be a slight delay between when we click on the buttons and when we

see results, so we want to lower it to around 100. This means that if you want to use other meters

then you should make sure to set the update divider value to so that we dont suck up computer

resources or have jittery meters. Now that youve done that you can open up the drop down menu

window from the meter menu, listed under advanced.

For the x and y position we probably want it to be in the top left hand corner, so we can leave this at

. The title diameter defines the size of the button that opens the drop down menu, but we wont

know what values to use until weve decided what font size and title to use, so we can ignore this for

now.

The text sections is what the title of the menu will be, in the example image I used below there are

three drop down menus using the titles Websites, Applications and Games, for this example I will

be using Websites as my text entry.

Font, font color, font size, text effect, effect color and anti-aliasing are used exactly as they are in

strings so play around with these settings and set them to what you want. The only one we need to

care about is font size, as we need to take this into account when determining our title diameters. I

will be using a size of 16. The Background Col and BG Opacity (%) sections relate to the color of the

button that opens the drop down menu, in the image above this is the darker grey section. Once

youve set all of that we can look back at the title diameters section. If you hit the calculate width

and height button here then Rainpad will suggest a size for you to use based on the font size and

the amount of characters in your title. These diameters may not always work for your menu, they

are just suggested width and heights. The height is not likely to be an issue but the width could be,

with text overlapping the sides of the menu. If you are using a short title (like Games), or the names

of the items you are launching are significantly longer than your title then you should manually

increase the width to make sure there are no issues.

Thats the first of three parts done; the second stage of creating a drop down menu is defining the

appearance of the menu itself. You will see a second column of variables that is very similar to the

first except all of the labels begin with Item, these relate to the drop down items. Choose your font,

font size etc. and make it look how you want it, then take a look at Menu BG Col: and BG Opacity,

these are the same as the Background Col: and BG Opacity of the previous column, except they

handle the drop down menu (the light grey section in the image above), so set these to what you

want. I personally like an opacity of 80% for the titles and 60% for the items.

Thats stage two done, just one left now.

The final column contains five sections labelled list item 1 through 5, these are the items that will

appear in your drop down menu. You can only have up to 5 in one menu. Each item has only two

8/10/2019 Rain Pad 101

19/20

18

sections; text and action. Text is the label that describes what you will be opening and action is what

clicking on these items will do, choose a name and enter a URL or choose a directory for as many

items as you like, but remember that you dont haveto use all five.

Thats it, youve now created a menu. When you load up the skin in Rainmeter you will initially only

see the title, and when you click on it five more items will appear as if by magic. If the menu seems

unresponsive then remember you can increase your update rate.

Image Arrays (Animated Images)

Image arrays are a collection of images that you can switch between to create animations,

essentially each image represents a frame in a film or a gif. Below is a series of frames of a character

walking, an image array will cycle through each of these frames so that we can have a walking

character on our desktop. You can download this collection of images fromhere,and we will be

using these for this tutorial.

Once youve downloaded these files extract them to a folder in your Rainmeter skins folder, make

sure it is the same folder that you will be saving your rainmeter file to. If you look at the name of

these images you will notice that they are named Pluto (Pluto is his name ), followed by a number

between and 24, followed by the file extension .png. This format is VERYimportant. If you use a

custom image array for this then make sure they are named in this way, otherwise it will not work.

To clarify, the image MUST contain the number corresponding to their frame at some point, so

1image.png is fine, image1array.png is also fine imagearrayone.png is NOT good, and image01.png is

also not okay.

Now start a new Rainpad file and update the general information, for this skin it is important to have

a quick update rate so that we have a smooth animation, I used an update rate of 42 to give a frame

rate of 24 fps (which is what I rendered the animation to). Now open up the Image array window

found under the advanced panel.

Here we find a very simple window, with only a few variables.

http://georgebroadhurstdesigns.com/Pluto.ziphttp://georgebroadhurstdesigns.com/Pluto.ziphttp://georgebroadhurstdesigns.com/Pluto.ziphttp://georgebroadhurstdesigns.com/Pluto.zip

8/10/2019 Rain Pad 101

20/20

19

Set the meter name and skin position to whatever you want it to be, and then set the width and

height to 128 if you are using my image array, or the dimensions whatever images you are using.

Each image should be the same size to give the best results. The image name is the name of the

image without the number, so in our case its Pluto if you are using an image array using the format

1image.png24image.png then you would leave this blank, as you only put the part that comes

before the number. The Image ext variable is anything that comes after the number, which we can

leave as .png. Next up is the image count, and this is how many images we have in our array. We

have 24 so set it to 24 and now you can press ok. Load up your skin in Rainmeter and voila, you

know have a walking desktop buddy. Enjoy!

This concludes the Rainpad101 for Rainpad v0.2, I hope you enjoy the program and please let me

know any feedback you have or suggestions for future versions.