It is currently December 5th, 2023, 5:01 am

how to center an image in relation to a container/shape

Get help with creating, editing & fixing problems with skins
Rafamear
Posts: 113
Joined: November 15th, 2021, 1:47 am
Location: Brazil

how to center an image in relation to a container/shape

Post by Rafamear »

I have a container with an image inside that only defines the height, and then the width remains proportional, but I want the image to be centered so that, if I use an image of another size or that has the right size for this container, it stay centered in the same way.

In short, if I use an image of the same width and height as the container, it remains centered and in the same way, if I use an image that is larger in terms of width, it also stays centered and is not on the left.

i have to put X=-38 to center an image that is not in the same size

Image
image with 150x225

Image
image with a larger width

Image
what should it be (GameImg with X=-38)

Code: Select all

[GameContainer]
Meter=Shape
Shape=Rectangle 0,0,150,225,8 | StrokeWidth 0
Group=Games
X=-5r
Y=-5r

[GameImg]
Meter=Image
ImageName=#ImageGame1#
ImageTint=none
Antialias=1
UpdateDivider=1
Group=Games
X=-38
Y=0
H=225
Container=GameContainer

[GameImgContainer]
Meter=Image
Antialias=1
UpdateDivider=1
Group=Games
X=0
Y=0
W=150
H=225
Container=GameContainer
Last edited by Rafamear on November 16th, 2023, 9:17 pm, edited 1 time in total.
;===========================================Rafamear=================================================
;========================= :welcome: ========== My DeviantArt ========== :Whistle ==============================
User avatar
Yincognito
Rainmeter Sage
Posts: 6399
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: how to center an image in relation to a container/shape

Post by Yincognito »

Rafamear wrote: November 16th, 2023, 7:05 pm I have a container with an image inside that only defines the height, and then the width remains proportional, but I want the image to be centered so that, if I use an image of another size or that has the right size for this container, it stay centered in the same way.

In short, if I use an image of the same width and height as the container, it remains centered and in the same way, if I use an image that is larger in terms of width, it also stays centered and is not on the left.

i have to put X=-38 to center an image that is not in the same size

Image
image with 150x225

Image
image with a larger width

Image
what should it be (GameImg with X=-38)

Code: Select all

[GameContainer]
Meter=Shape
Shape=Rectangle 0,0,150,225,8 | StrokeWidth 0
Group=Games
X=-5r
Y=-5r

[GameImg]
Meter=Image
ImageName=#ImageGame1#
ImageTint=none
Antialias=1
UpdateDivider=1
Group=Games
X=-38
Y=0
H=225
Container=GameContainer

[GameImgContainer]
Meter=Image
Antialias=1
UpdateDivider=1
Group=Games
X=0
Y=0
W=150
H=225
Container=GameContainer
Your problem has a simple mathematical solution: to center GameImg in relation to GameContainer, the former's X should be half of the difference between the latter's W and the former's W.

So, making:

Code: Select all

[GameImg]
...
X=(([GameContainer:W]-[GameImg:W])/2)
...
DynamicVariables=1
should do. See:
https://docs.rainmeter.net/manual/variables/section-variables/#MeterParameters
https://docs.rainmeter.net/manual/variables/#DynamicVariables

Also note that since the 1st meter in a container is automatically relative to the container's top left corner (e.g. the r relative positioning), we can skip writing r after the formula (just in this case). Otherwise (i.e. if the meter was independent and not part of a container) we'd have to also add [GameContainer:X] to the above value. If you wonder, it's the same idea when centering things vertically, but obviously the used coordinates would have to be their vertical equivalents.

P.S. Not sure what's the role of your 3rd meter above, it looks kinda pointless or some leftover duplicate...
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
Rafamear
Posts: 113
Joined: November 15th, 2021, 1:47 am
Location: Brazil

Re: how to center an image in relation to a container/shape

Post by Rafamear »

Yincognito wrote: November 16th, 2023, 7:38 pm Your problem has a simple mathematical solution: to center GameImg in relation to GameContainer, the former's X should be half of the difference between the latter's W and the former's W.

So, making:

Code: Select all

[GameImg]
...
X=(([GameContainer:W]-[GameImg:W])/2)
...
DynamicVariables=1
should do. See:
https://docs.rainmeter.net/manual/variables/section-variables/#MeterParameters
https://docs.rainmeter.net/manual/variables/#DynamicVariables

Also note that since the 1st meter in a container is automatically relative to the container's top left corner (e.g. the r relative positioning), we can skip writing r after the formula (just in this case). Otherwise (i.e. if the meter was independent and not part of a container) we'd have to also add [GameContainer:X] to the above value. If you wonder, it's the same idea when centering things vertically, but obviously the used coordinates would have to be their vertical equivalents.

P.S. Not sure what's the role of your 3rd meter above, it looks kinda pointless or some leftover duplicate...
worked as expected :D
;===========================================Rafamear=================================================
;========================= :welcome: ========== My DeviantArt ========== :Whistle ==============================
User avatar
Yincognito
Rainmeter Sage
Posts: 6399
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: how to center an image in relation to a container/shape

Post by Yincognito »

Rafamear wrote: November 16th, 2023, 9:16 pm worked as expected :D
Excellent! :great:
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth