JaxCore
GithubWebsiteSupport Server
  • JaxCore - Documentation
  • 🚀Getting Started
    • Introduction
    • Installation
    • User Interface
    • Additional requisites
    • Changing global options
    • Uninstallation
    • FAQs
      • New user FAQs
      • JaxCore FAQs
      • Miscellaneous FAQs
      • Anti-virus, false positive FAQs
      • Modules FAQs
        • YourFlyouts
        • YourMixer
        • ValliStart
        • IdleStyle
        • Keylaunch
        • Keystrokes OSD
      • Widget FAQs
        • ModularClocks
        • ModularVisualizer
        • Plainext
      • Media Player FAQs
      • Performance FAQs
  • 📦Modules
    • Introduction
    • YourFlyouts
    • YourMixer
    • IdleStyle
    • ValliStart
  • 🌥️Widgets
    • Introduction
    • ModularClocks
    • ModularPlayers
    • ModularVisualizer
    • Overlayer
    • Plainext
    • FAQ
  • Coding a module
    • Code formatting
    • Variables
    • Dynamic & Reactive user interface
    • Measures
    • MeterStyles
    • AutoHotkey usage
    • CoreInstaller
Powered by GitBook
On this page
  • Scaling
  • Aligning
  • Center
  • Side
  • Synergizing scale & align
  • MouseActions

Was this helpful?

Export as PDF
  1. Coding a module

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:

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

Synergizing scale & align

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

Last updated 3 years ago

Was this helpful?

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:

😛
https://docs.rainmeter.net/manual/meters/general-options/#XY
#creating-a-meter-style