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

Centering relatively to other meter

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

Centering relatively to other meter

Active Colors » April 9th, 2015, 10:21 am

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.
First case implies that every meter will be centered, therefore in the second case image meter would be sticked to the left or right fringe while text would be centered and placed inside the image.
Still don't see any difference? See the next spoiler then.
In the first case whatever Text you write your image meter will be resized based on that Text and this Text will stay centered inside the image meter whatever width it obtains from that Text.

In the second case whatever Text you write your image meter will be resized based on that Text and image meter will stay centered outside the string meter whatever Text string meter has.
Still? Last one.
In the first case as a center point we take image's position and in the second case as a center point we take text's position. So, in the first case will be centered the text and in the second will be centered the image. Plus in both cases image's width are depending on text itself and not on it's width.


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.