illustro Clock Help-2

[jsmorley]

The entire concept of StringAlign follows these reasonably simple rules...

A string is always aligned based on the value of X you put on the meter. That is where the string starts.

StringAlign=Left (the default by the way)
The string starts at X, and is drawn from there out to the right.
The result is that the string begins at X, and ends where it ends based on the length of the string.

StringAlign=Center
The string starts at X, and is drawn 1/2 back to the left, and 1/2 out to the right.
The result is that the string is centered on X. It begins where it begins and ends where it ends based on the length of the string.

StringAlignt=Right
The string starts at X, and is draw from there back to the left.
The result is that the string ends at X, and begins where it begins based on the length of the string.

The only important thing to remember to use StringAlign is that it is always based on the value of X, and that is always where the string starts. By "starts" I really mean "is anchored", but that is a concept that not everyone knows or is comfortable with. Just think of X with strings as "starts here, and then does whatever work it needs to do.".

The value of X is a measurement relative to the "skin". How many pixels to the right of the edge of the skin should this meter start? It has nothing to do with how the "skin" is positioned on the "screen". That is an entirely different discussion.

[MourningStar]

^
thank you - can you link me to a 'Rainmeter-centric' glossary/dictionary? I need to learn what means meter and string in 'rainmeter' context.

[jsmorley]

^
thank you - can you link me to a 'Rainmeter-centric' glossary/dictionary? I need to learn what means meter and string in 'rainmeter' context.

https://docs.rainmeter.net/manual/getting-started/skin-anatomy/

[mak_kawa]

Hi MourningStar

I am not sure whether this post is helpful or not for you, but I made sample skin illustrates StringAlign option setting.

Untitled-1.png

Code: Select all

[Rainmeter]
Update=1000
Background=Background.png
BackgroundMode=3
BackgroundMargins=0,34,0,14

[Variables]
fontName=Trebuchet MS
textSize=8
colorBar=235,170,0,255
colorText=255,255,255,205
colorLabel=0,255,255,205
LongTimeString=Wednesday - September 30 2020 - 15:55:55
ShortTimeString=Monday - May 01 2020 - 15:55:55

[meterTitle]
Meter=String
StringAlign=Center
StringCase=Upper
StringStyle=Bold
StringEffect=Shadow
FontEffectColor=0,0,0,50
FontColor=#colorText#
FontFace=#fontName#
FontSize=10
AntiAlias=1
ClipString=1
X=150
Y=12
W=290
H=18
Text=String Align Test

[meterCenterLabel]
Meter=String
StringAlign=Center
StringStyle=Bold
StringEffect=Shadow
FontEffectColor=0,0,0,20
FontColor=#colorLabel#
FontFace=#fontName#
FontSize=#textSize#
AntiAlias=1
ClipString=1
X=150
Y=40
W=290
H=30
Text=Center Align

[meterCenterDate]
Meter=String
StringAlign=Center
StringEffect=Shadow
FontEffectColor=0,0,0,20
FontColor=#colorText#
FontFace=#fontName#
FontSize=#textSize#
AntiAlias=1
ClipString=1
X=150
Y=15r
W=290
H=30
Text=#LongTimeString##CRLF##ShortTimeString#

[meterLeftLabel]
Meter=String
StringAlign=Left
StringStyle=Bold
StringEffect=Shadow
FontEffectColor=0,0,0,20
FontColor=#colorLabel#
FontFace=#fontName#
FontSize=#textSize#
AntiAlias=1
ClipString=1
X=10
Y=30r
W=290
H=30
Text=Left Align

[meterLeftDate]
Meter=String
StringAlign=Left
StringEffect=Shadow
FontEffectColor=0,0,0,20
FontColor=#colorText#
FontFace=#fontName#
FontSize=#textSize#
AntiAlias=1
ClipString=1
X=10
Y=15r
W=290
H=30
Text=#LongTimeString##CRLF##ShortTimeString#

[meterRightLabel]
Meter=String
StringAlign=Right
StringStyle=Bold
StringEffect=Shadow
FontEffectColor=0,0,0,20
FontColor=#colorLabel#
FontFace=#fontName#
FontSize=#textSize#
AntiAlias=1
ClipString=1
X=290
Y=30r
W=290
H=30
Text=Right Align

[meterRightDate]
Meter=String
StringAlign=Right
StringEffect=Shadow
FontEffectColor=0,0,0,20
FontColor=#colorText#
FontFace=#fontName#
FontSize=#textSize#
AntiAlias=1
ClipString=1
X=290
Y=15r
W=290
H=30
Text=#LongTimeString##CRLF##ShortTimeString#

Note that the X= option of the center-aligned meters is the middle of the meter display, left edge for left-aligned, right edge for right-aligned, as jsmorley already said.

[MourningStar]

Hi MourningStar

I am not sure whether this post is helpful or not for you, but I made sample skin illustrates StringAlign option setting.
...

thank you so much - If I understand this, the lines of text below the posted image is rainmeter code in a file named xxxx.ini? This file is somehow 'installed/imported' via the Manage Rainmeter utility? The resulting image that appears on the desktop is known as a skin and is then manipulated by the various configuration settings in the Manage Rainmeter dialogue?

If I understand eclectic-tech correctly this requested mod to the 'text' alone cannot be done because the text itself is the skin.

eclectic-tech, did I at least understand this part? IOW, the L-C-R justification is assigned to the entire skin?

https://docs.rainmeter.net/manual/getting-started/skin-anatomy/

awesome, I will bookmark this chapter -thx

[Yincognito]

thank you so much - If I understand this, the lines of text below the posted image is rainmeter code in a file named xxxx.ini? This file is somehow 'installed/imported' via the Manage Rainmeter utility? The resulting image that appears on the desktop is known as a skin and is then manipulated by the various configuration settings in the Manage Rainmeter dialogue?

Something like that, yes. For example:

String Align Text - Skin.jpg

Top Left: The Manage Rainmeter window (various Rainmeter configuration options, along with managing your skins)
Top Right: The skin (how it looks, i.e. the visual result of the code), loaded using the Manage Rainmeter window (this is just one way of loading it)
Bottom Right: The skin code, which basically instructs Rainmeter what to do in that skin (what / where / how to display, what / how various values are processed, etc.)

P.S. The Notepad window with the skin code can be shown (and thus, the code can be modified) by clicking on Edit in the Manage Rainmeter window, or right clicking on the skin and choosing Edit skin.

[mak_kawa]

Hi MourningStar

Ah...sorry, I have not posted the demo skin as a rmskin install package. It's just a demo code. The way to launch the skin manually is as Yincognito said.

Ps.1 To manually install the demo skin, copy/paste the code to Notepad and save as ini file to a subfolder to your skin folder, probably C:\Users\(username)\Documents\Rainmeter\Skins\(some subfolder). And Refresh All from Manage Rainmeter Utility, then Load newly appeared skin config.

Ps.2 The demo skin uses illustro skin background image, so you have to copy the image png file from illustro @Resources folder to your skin folder. Or, remove the background description in [Rainmeter] section and modify as Yincognito did.

[MourningStar]

The fact that you reference "illustro Clock" in your post does not make any sense since that skin never expands left or right based on the text. It is a fixed size with a centered title time, a left-aligned day, and right-aligned date.

If you are asking "in general" how to align a METER in a skin, then StringAlign is what you would use.

However, it appears you want to know how to align a SKIN so it expands to the right-to-left instead of the default left-to-right. In that case you need to change the AnchorX setting in your Rainmeter.ini. Click 'Edit settings' button in the Manage dialog, and set the AnchorX value for the Config you are using to 100%; now the skin will expand from right-to-left as the contents change.

I give up. I wanted to put this near the right screen edge. No joy, it just pushed it further to the right and off the screen. StringAlign, same result.

Solution : Leave all as is and put it on the screen's left edge. Done.

thx all
-MS

[eclectic-tech]

MS... I apologize for not looking closer at the code you posted, and now I realize you completely changed the illustro clock code.

If you replace [meterTitle] with the code below, you can align the text. The real problem was caused by you setting the meter width equal to 700 pixels; I removed that line, the skin will expand the string meter to contain whatever the text is when loaded.

I would recommend adding DynamicWindowSize=1 to your [Rainmeter] section so the skin can adapt to changes in the displayed text.

New meter code (this is right-align):

Code: Select all

[meterTitle]
Meter=String
MeterStyle=styleTitle
; Using MeterStyle=styleTitle will basically "copy" the
; contents of the [styleTitle] section here during runtime.
MeasureName=measureTime

; Comment/uncomment the sets of 2 lines below to set your desired alignment

; Uncomment the 2 lines below to align the text to the left edge
; StringAlign=left
; X=0

; Use these 2 lines to align the text in the center
; StringAlign=Center
; X=([meterTitle:W]/2)

; Use these 2 lines to align the text to the right edge
StringAlign=Right
X=([meterTitle:W])

; Requires dynamic variables when using a section variable: [meterTitle:W]
DynamicVariables=1
Y=12

; You do not want to set the width manually. This was why your alignment did not work as expected.
; Rainmeter will expand the meter to contain the text.
;W=700
H=18
Text=%1
StringEffect=shadow
FontEffectColor=0,0,0
; %1 stands for the value of MeasureName (measureTime in this case).

[MourningStar]

MS... I apologize for not looking closer at the code you posted ...

Thank you for your time to re-visit my issue and for providing the solution. I will apply this as soon as I am able and will report back

-MS