I've been beating my head against a wall working on a new suite. The hardest, and most tedious thing has been making the skins resizable. It involves a lot of simple math, and trial and error. Over the course of the next few Workshops I'm going to share some of the things that I've learned about resizing skins, as well as other cool things to do with position formulas and dynamic variables. They'll start off pretty basic and work towards more complicated topics.
Simple Taskbar
I strongly recommend downloading the skin and changing the values of the HEIGHT and FONTSIZE variable to many different things to see how the skins adjusts.
[Rainmeter]
Author=Varelse
Update=1000
[Variables]
WIDTH=#SCREENAREAWIDTH#
HEIGHT=30
SCREENAREAWIDTH is the width of the resolution your monitor is set at. This allows the skins to fit any resolution. HEIGHT is the height of the skin. It can be any number.
COLOR1=15,15,15,200
TEXTCOLOR=150,150,150
FONTSIZE=10
Those three variables above are for the text and the background. COLOR1 is the color of the taskbar. FONTSIZE is set at 10, but that can be changed. Keep in mind that the fontsize is not in pixels, but in point size. This is important later.
PROG1=firefox
PROG2=notepad
PROG3=calculator
LINK1=firefox.exe
LINK2=notepad.exe
LINK3=calc.exe
Variables for the launcher. There's only three shortcuts because I wanted to keep the .ini file uncomplicated.
[BG]
Meter=Image
SolidColor=#COLOR1#
H=#HEIGHT#
W=#WIDTH#
This meter is the background for the taskbar. Height (H) is determined by #HEIGHT#, and width (W) is determined by #WIDTH#. The dimensions of the taskbar can be changed by editing the respective variables.
[Text]
SolidColor=0,0,0,1
StringStyle=BOLD
StringAlign=CENTER
FontColor=#TEXTCOLOR#
FontSize=#FONTSIZE#
StringCase=Upper
FontFace=Trebuchet MS
Y=r
MeterStyle section for the text.
The key to automatic scaling is making the position of individual meters a function of some input variable. I usually use a length and make the position a percentage of that length. For this skin it is the width.
[Link1]
Meter=String
MeterStyle=Text
Text=#PROG1#
X= (#WIDTH#*0.4)
Y= (#HEIGHT#/2-(#FONTSIZE#*0.8))
LeftMouseDownAction=!Execute ["#LINK1#"]
[Link2]
Meter=String
MeterStyle=Text
Text=#PROG2#
X= (#WIDTH#*0.5)
LeftMouseDownAction=!Execute ["#LINK2#"]
[Link3]
Meter=String
MeterStyle=Text
Text=#PROG3#
X= (#WIDTH#*0.6)
LeftMouseDownAction=!Execute ["#LINK3#"]
So, the links are centered around the middle of the taskbar. This makes the X position of [Link1] #WIDTH#*0.5. [Link1] and [Link3] are separated by 0.1*#WIDTH# from [Link2]. This makes [Link1] have a X position of 0.4*#WIDTH# and [Link3] have 0.6*#WIDTH#. These are pretty much arbitrary. Change them to what you like.
The most complicated part of this skin is making sure that the text stays centered in the Y direction. That's what the Y= formula in [Link1] does. The formula was derived mostly through trial and error. #HEIGHT#/2 finds the midpoint of the taskbar in the Y direction. #FONTSIZE*0.8 is approximately half the height in pixels of the text. Subtracting the two yields the distance from the top of the skin that the text needs to be to keep it centered. Or as I like to call it–Magic. The 0.8 may need to be changed depending of the font and the font size that you are using, but it seems to work fairly well for the few fonts I've tried it on. (The font that I'm using for the suite I'm working on uses 0.9 so you're mileage may vary.)
[MeasureClock]
Measure=Time
Format="%I.%M %p"
[Clock]
Meter=String
MeasureName=MeasureClock
MeterStyle=Text
StringAlign=Right
X= (#WIDTH#-(#HEIGHT#/2-#FONTSIZE#*0.8))
And to make this not just a dock, a clock is added. (#HEIGHT#/2-#FONTSIZE#*0.8) is the distance from the top of the skin to the top of the text. Subtracting this from the WIDTH allows the clock to keep an equal distance from all sides. Symmetric.
Postmortem
While all this fuss over position formulas and automatic resizing seems like a needless complication, I think that it adds a lot to your skin, as well as being pretty awesome. Once you become familiar enough working with position formulas, they'll take much less time to do.
