It is currently March 24th, 2019, 10:46 pm

String meter: New StringAlign options

Changes made during the Rainmeter 2.5 beta cycle and earlier.
User avatar
Brian
Developer
Posts: 1852
Joined: November 24th, 2011, 1:42 am
Location: Utah

String meter: New StringAlign options

Brian » May 20th, 2012, 4:04 pm

StringAlign now has the ability to vertically align text within a String meter.

Here are the options:
  • Left (default) or LeftTop
  • Right or RightTop
  • Center or CenterTop
  • LeftBottom
  • RightBottom
  • CenterBottom
  • LeftCenter
  • RightCenter
  • CenterCenter
The first word (Left, Right, or Center) represents horizontal alignment, and the second word (Top, Bottom, and Center) represents vertical alignment. Top is optional (for backwards compatibility).

The string will be aligned using the values of the X and / or Y settings as the anchor point. So to CenterCenter align a string within a meter with a width and height of 100, you would set X=50, Y=50 and StringAlign=CenterCenter.



-Brian
User avatar
jsmorley
Developer
Posts: 19076
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: String meter: New StringAlign options

jsmorley » June 3rd, 2012, 12:12 pm

Makes doing stuff like this a breeze, instead of the huge hassle with X and Y it was before!

Click for animation
Test.gif
You do not have the required permissions to view the files attached to this post.
Arne Anka
Posts: 102
Joined: April 18th, 2009, 11:31 am
Location: Denmark

Re: String meter: New StringAlign options

Arne Anka » June 6th, 2012, 5:07 pm

Brian wrote:StringAlign now has the ability to vertically align text within a String meter.
Does this mean we have to use exact positioning instead of relative? Using relative positioning (like Y=20r or Y=2R) makes things look strange.

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1
Blur=1
BlurRegion="1,0,0,#bgWidth#,#bgHeight#"
;BlurRegion2="1,0,34,100,159"
;BlurRegion3="1,100,34,200,159"

[Variables]
TxtSize=7
MenuSize=12
TxtFont=Slider
MenuColor=0,0,0,128
ColorN=49,153,198,255
ColorA=255,156,91,255
bgWidth=500
bgHeight=32

[Style]
FontFace=#TxtFont#
FontColor=#ColorN#
FontSize=#TxtSize#
AntiAlias=1

[StyleA]
FontFace=#TxtFont#
FontColor=#ColorA#
FontSize=#TxtSize#
Antialias=1

;=================================================
[BackGround]
Meter=IMAGE
;Path=#PathToPics#
;ImageName=#Back#
SolidColor=#MenuColor#
X=0
Y=0
W=#bgWidth#
H=#bgHeight#

;=================================================
[MeterMenuPlaces]
Meter=STRING
X=150
Y=16
MeterStyle=Style
FontSize=#MenuSize#
StringAlign=CenterCenter
StringStyle=Normal
Text="Places"
DynamicVariables=1
MouseOverAction=[!SetOption MeterMenuPlaces MeterStyle StyleA][!SetOption MeterMenuPlaces StringStyle Bold][!Update]
MouseLeaveAction=[!SetOption MeterMenuPlaces MeterStyle Style][!SetOption MeterMenuPlaces StringStyle Normal][!Update]
LeftMouseUpAction=[!ToggleMeterGroup MenuPlaces][!Update]

[MeterMenuPlacesBg]
Meter=IMAGE
X=100
Y=34
W=100
H=125
SolidColor=#MenuColor#
Hidden=1
Group=MenuPlaces
LeftMouseUpAction=[!HideMeterGroup MenuPlaces][!Update]

[MeterMenuPlacesItem1]
Meter=STRING
X=190
Y=50
MeterStyle=Style
FontSize=#MenuSize#
StringAlign=RightCenter
StringStyle=Normal
Text=Google
Hidden=1
Group=MenuPlaces
MouseOverAction=[!SetOption MeterMenuPlacesItem1 MeterStyle StyleA][!SetOption MeterMenuPlacesItem1 FontSize 14][!Update]
MouseLeaveAction=[!SetOption MeterMenuPlacesItem1 MeterStyle Style][!SetOption MeterMenuPlacesItem1 FontSize #MenuSize#][!Update]

[MeterMenuPlacesItem2]
Meter=STRING
X=0r
Y=70
MeterStyle=Style
FontSize=#MenuSize#
StringAlign=RightCenter
StringStyle=Normal
Text=Netvibes
Hidden=1
Group=MenuPlaces

[MeterMenuPlacesItem3]
Meter=STRING
X=0r
Y=90
MeterStyle=Style
FontSize=#MenuSize#
StringAlign=RightCenter
StringStyle=Normal
Text=Biblioteker
Hidden=1
Group=MenuPlaces

[MeterMenuPlacesItem4]
Meter=STRING
X=0r
Y=20r
MeterStyle=Style
FontSize=#MenuSize#
StringAlign=RightCenter
StringStyle=Normal
Text=Banken
Hidden=1
Group=MenuPlaces

[MeterMenuPlacesItem5]
Meter=STRING
X=0r
Y=2R
MeterStyle=Style
FontSize=#MenuSize#
StringAlign=RightCenter
StringStyle=Normal
Text=E-boks
Hidden=1
Group=MenuPlaces
places.png
Or did I get something wrong (again)? :o
Livet är bara en period man ska överleva.
Som filosoferna säger: man föds, man lever och man dör ensam...
User avatar
Brian
Developer
Posts: 1852
Joined: November 24th, 2011, 1:42 am
Location: Utah

Re: String meter: New StringAlign options

Brian » June 6th, 2012, 5:40 pm

Arne Anka wrote:Does this mean we have to use exact positioning instead of relative? Using relative positioning (like Y=20r or Y=2R) makes things look strange.
You can use relative positioning, however you have to remember that vertical alignment modifies the Y value. To correctly line up your meters, you might have to compensate for this adjustment.

For instance, since there is no W= or H=, the height of your meter will be roughly the size of your font. In this case your font size is 12, which means your meter height will be 16. (see http://rainmeter.net/cms/Tips-FontSizeToPixels). So, when using a center vertical alignment, your Y value actually repositions upward (on your screen) half the amount of the height of the meter. That's 8 pixels. So, when using relative positioning, you need to increase your Y values by 8 pixels. Instead of using Y=20r in [MeterMenuPlacesItem4], use Y=28r. For [MeterMenuPlacesItem5] use Y=10R.

Hope that helps.

-Brian
Arne Anka
Posts: 102
Joined: April 18th, 2009, 11:31 am
Location: Denmark

Re: String meter: New StringAlign options

Arne Anka » June 8th, 2012, 1:40 pm

Brian wrote:For instance, since there is no W= or H=,
Sorry, but I don't understand. If I use W= and H= on a string-meter, and use X= and Y= to position in that meter, how do I position the different meters relative to each other? Could you please use the menu as an example, then maybe I can understand it... :?
Livet är bara en period man ska överleva.
Som filosoferna säger: man föds, man lever och man dör ensam...
User avatar
Brian
Developer
Posts: 1852
Joined: November 24th, 2011, 1:42 am
Location: Utah

Re: String meter: New StringAlign options

Brian » June 8th, 2012, 5:39 pm

Arne Anka wrote: Sorry, but I don't understand. If I use W= and H= on a string-meter, and use X= and Y= to position in that meter, how do I position the different meters relative to each other? Could you please use the menu as an example, then maybe I can understand it... :?
Sorry, I should have explained it a little better.

When vertically aligning text, the Y value gets modified (except Top alignment).
  1. Top alignment does not adjust the Y value.
  2. Center alignment subtracts half of the height of the meter from the Y value Y = Y - (H / 2). If no height is given, the height of the meter is the height of the font (in pixels). Use this for reference: http://rainmeter.net/cms/Tips-FontSizeToPixels
  3. Bottom alignment subtracts the entire height of the meter from the Y value Y = Y - H. Again, if no height is given, the height of the meter is the height of the font (in pixels).
  • Note: If specifying a H=, then a W= must also be set since text reads from left to right (or right to left) and not top to bottom (or bottom to top).
The reason the Y value is adjusted is to match horizontal alignment (which modifies the X value in the same fashion). Horizontal alignment cannot be changed for backwards-compatibility, so vertical alignment needs to match.

When you use vertical alignment and relative positioning, you need to compensate for the Y value adjustment. For center alignment, you need to add half the height of the meter to your Y value. For bottom alignment, you need to add the height of the meter to your Y value. If no height is given (or you do not know the height), use: http://rainmeter.net/cms/Tips-FontSizeToPixels to determine the amount of pixels to add to your Y value. Horizontal alignment works in a similar way.



So Arne Anka, for your skin we are going to compensate (or adjust) the Y value(s) because of the vertical alignment (StringAlign=RightCenter).

In meter [MeterMenuPlacesItem4], your Y value is Y=20r.
This seems perfectly logical, however, it does not look right. The reason is because vertical alignment has changed your Y value. So, instead of starting the meter at 110 (which is 90 from the previous meter and adding 20 pixels to it), it is starting at 102.

How did I come up with 102? Simple. Your previous meter Y value is 90. This meter is 20r. So the new Y value is Y = 90 + 20 - 8. Wait. Hold on. 8? Where did I come up with 8? Since you did not specify a height to the meter, you have to use the FontSize (which is 12 in this case) to find out the height of the meter. Using this, the meter's height is 16, so half of 16 is 8.

So to fix your problem, add 8 to your meters Y value. Y=28r

Same goes for the meter [MeterMenuPlacesItem5]. Use Y=10R

I hope that helps to clear things up a bit. I know it can be confusing and sometimes it takes a little trial and error to fully understand what is going on.

-Brian