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. 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.
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 centerGeneral 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#)
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: ; 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 😛
You can use both scaling and aligning to create complex scaleable elements.
Example: creating-a-meter-style
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]
Last modified 1yr ago