Scaling, Aligning and MouseActions.

[Jax]

Hi all! Thought I'd share some of my techniques from my experience with building reactive and customizable modules! Lets get started with scaling

Scaling
To make a skin which can scale according to W H and Scale variables, you'll need to have position & dimensional options for meters set with inline formulas.

Every inline formula must be contained in a bracket

Code: Select all

; An example of a completely scaled shape meter
[Shape]
Meter=Shape
Shape=Rectangle 0,0,150,150,4 | StrokeWidth (2*#Scale#) | Scale #Scale#,#Scale#,0,0
; or alternatively, you can scale the shape like this
Shape2=Rectangle 0,0,(150*#Scale#),(150*#Scale#),(4*#Scale#) | StrokeWidth (2*#Scale#)

To scale any meter is as simple as multiplying their positional and dimensional values!

Aligning

Most Rainmeter elements (except for a few) is aligned from it's top left corner. Therefore, you can't just set a meter's X value to (#W#/2) and expect it to center properly within a shape with W=#W#

Center
General formula: =(#Total#/2-#Group#/2)
Total is the sum of dimensional units to align the Group center
Group is the sum of dimensional units to be aligned center

Code: Select all

; Example of centering a image meter to shape with WH
[Variables]
Scale=1
W=(200*#Scale#)
H=(200*#Scale#)

[Shape]
Meter=Shape
W=#W#
H=#H#
SolidColor=255,0,0

[Image]
Meter=Image
DynamicVariables=1
W=(100*#Scale#)
H=[Image:H]
X=([Shape:W]/2-[Image:W]/2)
Y=([Shape:H]/2-[Image:H]/2)

However, for string and shape meters, you can use alternative ways to center them

Code: Select all

; Aligning a string according to their submeternames:
[String]
Meter=String
MeterStyle=Center#Align#

[String:CenterWH]
X=(#W#/2)
Y=(#H#/2)
StringAlign=CenterCenter

[String:CenterH]
X=(10*#Scale#)
Y=(#H#/2)
StringAlign=LeftCenter

[String:CenterW]
X=(#W#/2)
Y=(10*#Scale#)
StringAlign=CenterTop        ; "Center" defaults to "CenterTop"

Code: Select all

; Aligning a shape meter to WH
[Shape]
Meter=Shape
X=(#W#/2)
Y=(#H#/2)
Shape=Rectangle 0,0,(10*#Scale#),(10*#Scale#) | OffSet (-5*#Scale#),(-5*#Scale#)

To the side
Aligning left general formula: =(#AnchorDim#+#OffSet#)
Aligning right general formula: =(#AnchorDim#-#OffSet#-#Group#)
AnchorDim is the dimensional positional value where the meter is aligned at
OffSet is the distance between the alignment anchor and the meter
Group is the sum of dimensional units to be aligned right

Using R or r you can sometimes omit using #AnchorDim#. More on the Rainmeter wiki

Code: Select all

; A few ways to align a meter after a meter (left)
[PrevMeter]
...
[Meter]
X=(20*#scale#)R
X=(20*#scale#+[PrevMeter:XW])

; Aligning a meter before a meter (right)
[RightMeter]
X=([Meter:X]-[RightMeter:W]-20*#Scale#)

And again, there are other ways to center String and Shape Meters. No examples will be given, as you can probably figure it out

MouseActions

A generic mouse over, mouse leave action looks like this

Code: Select all

[Meter]
...
MouseOverAction=[!SetOption #CURRENTSECTION# OptionName OverValue][!UpdateMeter #CURRENTSECTION#][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# OptionName LeaveValue][!UpdateMeter #CURRENTSECTION#][!Redraw]

However, you can't configure a shape's inline options with !SetOption. This is what you should do instead:

Code: Select all

[Shape]
...
Shape... | Extend Fill
Fill=Fill Color #LeaveColor#
MouseOverAction=[!SetOption #CURRENTSECTION# Fill "Fill Color #OverColor#"][!UpdateMeter #CURRENTSECTION#][!Redraw]
MouseLeaveAction=[!SetOption #CURRENTSECTION# Fill "Fill Color #LeaveColor#"][!UpdateMeter #CURRENTSECTION#][!Redraw]

That's it for now~ You can find a version of this guide on JaxCore's Tips and Tricks. Let me know if you have any questions!