It is currently October 21st, 2019, 4:12 am

## Centering relatively to other meter

Tips and Tricks from the Rainmeter Community
Active Colors
Moderator
Posts: 529
Joined: February 16th, 2012, 3:32 am

### Centering relatively to other meter

This topic prompted me to write a trick for positioning meter relatively to the center of other meter. I thought just simple positioning won't be tricky enough and decided to go deeper and as an example make:

An image meter that will be resized based on string's meter Text which stays centered based on Width of the image meter.
and:
An image meter that will be resized based on string's meter Text and will be centered relatively to the string meter's Text.

And in both cases we don't have Width and Height values for the string meter. What only we will depend on is a Text itself!

Don't see the difference between two? See the spoiler.
Still don't see any difference? See the next spoiler then.
Still? Last one.

I decided to eliminate width and height values because in this way it is more tricky to obtain centering. And this trick will be handy in different situations.

Depending on different alignments code should be little or drastically changed.
For my examples as an image meter I will use prepared button below:
BTNgreen.png
Center Alignment

Code: Select all

``````[Image1C]
Meter=IMAGE
ImageName=BTNgreen.png
ScaleMargins=10,10,10,10
X=(([Text1C:X])-([Image1C:W]/2))
Y=45
W=(([Text1C:W])+22)       ;22 additional pixels will be added to the edges in order to make image look like real button. If not added then the width would be same as text's width.
H=([Text1C:H]+20)       ;20 additional pixels will be added for the same reason as in W.
AntiAlias=1
UpdateDivider=-1
DynamicVariables=1
Hidden=0

[Text1C]
Meter=STRING
X=120
Y=(([Image1C:H]/2)-([Text1C:H]/2)+([Image1C:Y]))
StringAlign=CENTER
FontFace=Arial
FontSize=10
FontColor=255,255,255
StringStyle=NORMAL
AntiAlias=1
Text="Example"
DynamicVariables=1
UpdateDivider=-1
Hidden=0``````
cc1.png
cc2.png
cc3.png
X is controled from string, Y is controlled from image.
If you want to make the whole thing to auto-center inside the background or any other image, you can add this lines:

Code: Select all

``````[Image1C]
Y=([YourBackground:Y]+([YourBackground:H]/2)-([Text1C:H]/2)-10)      ;10 is exactly half of added additional 20 pixels in the H of [Image1C] meter

[Text1C]
X=([YourBackground:X]+([YourBackground:W]/2))``````
Notice that in this situation we have not to update these meters. Otherwise "construction" would be broken. Though if you need meters updated look at the following approach:

Code: Select all

``````[Image2]
Meter=IMAGE
ImageName=BTNgreen.png
ScaleMargins=10,10,10,10
X=(120-([Image2:W]/2))
Y=(70-([Image2:Y]/2))
W=(([Text2:W])+22)
H=([Text2:H]+20)
AntiAlias=1
UpdateDivider=-1
DynamicVariables=1
Hidden=0

[Text2]
Meter=STRING
X=(([Image2:X])+([Image2:W]/2))
Y=(([Image2:Y])+([Image2:H]/2)-([Text2:H]/2))
StringAlign=CENTER
FontFace=Arial
FontSize=10
FontColor=255,255,255
StringStyle=NORMAL
AntiAlias=1
Text="Example"
DynamicVariables=1
UpdateDivider=-1
Hidden=0``````
In this approach we have to add !UpdateMeter bang into [Rainmeter] section. If not added then the placement points would be messed up:

Code: Select all

``````[Rainmeter]
OnRefreshAction=[!UpdateMeter Image2][!UpdateMeter Text2][!Redraw]``````

Left Alignment
In comparison to center alignment, left alignment is only one alignment that works flawless updated it or not.

Code: Select all

``````[Image3L]
Meter=IMAGE
ImageName=BTNgreen.png
ScaleMargins=10,10,10,10
X=10
Y=40
W=([Text3L:W]+22)
H=([Text3L:H]+20)
AntiAlias=1
UpdateDivider=-1
DynamicVariables=1
Hidden=0

[Text3L]
Meter=STRING
X=(([Image3L:X])+([Image3L:W]/2))
Y=([Image3L:Y]+([Image3L:H]/2)-([Text3L:H]/2))
StringAlign=CENTER
FontFace=Arial
FontSize=10
FontColor=255,255,255
StringStyle=NORMAL
AntiAlias=1
Text="Example"
DynamicVariables=1
UpdateDivider=-1
Hidden=0
``````
l1.png
l2.png

Right Alignment
In this case meters shouldn't be updated. Otherwise positioning would be destroyed.

Code: Select all

``````[Image1R]
Meter=IMAGE
ImageName=BTNgreen.png
ScaleMargins=10,10,10,10
X=(([Text1R:X])-([Image1R:W]/2))
Y=40
W=(([Text1R:W])+22)
H=([Text1R:H]+20)
AntiAlias=1
UpdateDivider=-1
DynamicVariables=1
Hidden=0

[Text1R]
Meter=STRING
X=220
Y=([Image1R:Y]+([Image1R:H]/2)-([Text1R:H]/2))
StringAlign=RIGHT
FontFace=Arial
FontSize=10
FontColor=255,255,255
StringStyle=NORMAL
AntiAlias=1
Text="Example"
DynamicVariables=1
UpdateDivider=-1
Hidden=0
``````
r1.png
r2.png
You do not have the required permissions to view the files attached to this post.