Dynamic & Reactive user interface

Creating a module with a reactive user interface can be achieved in Rainmeter with inline formulas and mouse action bangs.

In most cases, you do not want to use fixed dimensional values for anything. This includes X Y W H R StrokeWidth FontSize. The only case that you will have fixed values for anything is if your module is generated from a lua / ps1 script.

Scaling

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

The simplest form of an inline formula is X=(150*#Scale#)This tells Rainmeter to scale your X value according to the Scale variable.

Every inline formula must be contained in a bracket

; 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 element (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

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

; 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

; 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"

; 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#)

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:

https://docs.rainmeter.net/manual/meters/general-options/#XY

; 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 😛

Synergizing scale & align

You can use both scaling and aligning to create complex scaleable elements. Example: MeterStyles

MouseActions

A generic mouse over mouse leave action looks like this

[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 alternatively.

[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]