It is currently April 23rd, 2024, 8:17 am

Aligning Text to a Ring

Tips and Tricks from the Rainmeter Community
oni5115
Posts: 27
Joined: October 4th, 2010, 3:33 pm

Aligning Text to a Ring

Post by oni5115 »

Ever tried creating and wondering how to get the text on the angles? Wonder no more! This tutorial can help you align text around a circle or arc. Note that this guide is only for "vertical text" and not writing text in an arc - that will be a different guide.

The thing to remember here is that we are dealing with a circle. To get the X of any position of a circle, is you take the COS(angle). To get the Y, you take the SIN(angle). This however, is only in 1 unit. We need to multiply this by the Size of our Arc/Circle, but we want the center of the circle

Center=[LineLength] - ([LineLength]-[LineStart])/2
X=COS(angle)*Center
Y=SIN(angle)*Center

This however, gives you the (X,Y) from the center of the circle; not the top left of the skin. So you need to add the radius to both X and Y.

Center=[LineLength] - ([LineLength]-[LineStart])/2
X=COS(angle)*Center + [Radius]
Y=SIN(angle)*Center + [Radius]

But the text isn't centered!?!?! You did remember to put StringAlign=CENTER right? But it's still not centered!?!?! Ok, there is one exception here. There is no vertical alignment for text - so we have to do that manually.

This is a two step process, first we need to know the pixel height of our font. Then we need to adjust the Y coordinate by Font_Pixels/2.

Center=[LineLength] - ([LineLength]-[LineStart])/2
X=COS(angle)*Center + [Radius]
Y=SIN(angle)*Center + [Radius] - Font_Pixels/2

And there you have it - Centered Text! Now for a fun example of what can be done with this: Text aligned to an Arc!

Code: Select all

[Rainmeter]
update=300
DynamicWindowSize=1

[Variables]
FontSize=8
FontPixels=10

NumObjects=4
NumSections=2
StartAngle=270 * (PI/180)
AngleGap=60  * (PI/180)
StartLabelGap=5 * (PI/180)
EndLabelGap=10 * (PI/180)

CenterSize = 100
RingSize = 20
SizeGap = 4

; Text going from inner ring to outter ring
Text_Section1_Ring1=1
Text_Section1_Ring2=2
Text_Section2_Ring1=3
Text_Section2_Ring2=4

Text_Section1_Ring1_Bottom=100.0%
Text_Section2_Ring1_Bottom=100.0%

; Color
RingColor=0,255,0,150
FontColor=255,255,255,255
BGColor1=111,111,111,255
BGColor2=111,111,111,200
BGColor3=111,111,111,255
BGColor4=111,111,111,200
BGColor5=111,111,111,255
BGColor6=111,111,111,200
BGColor7=111,111,111,255
BGColor8=111,111,111,200

;;;;;;;;;;;;;;;;;;;;
; CALCULATIONS
;;;;;;;;;;;;;;;;;;;;

[NumRings]
Measure=CALC
Formula=CEIL(#NumObjects#/#NumSections#)

; Calculate the Start and "Length" of Arcs
[SectionSize]
Measure=CALC
Formula=(((2*PI)/#NumSections#)-#AngleGap#)
[StartAngle_Section1]
Measure=CALC
;Formula=(#StartAngle#+(#AngleGap#/2))
Formula=((Counter % 100)/100) * 360 * (PI/180)
DynamicVariables=1
MaxValue=6.283183

[StartAngle_Section1_StartText]
Measure=CALC
Formula=[StartAngle_Section1] - #StartLabelGap#
DynamicVariables=1

[StartAngle_Section1_EndText]
Measure=CALC
Formula=[StartAngle_Section1] + [SectionSize] + #EndLabelGap#
DynamicVariables=1

[StartAngle_Section2]
Measure=CALC
Formula=([StartAngle_Section1] + [SectionSize]) + #AngleGap#
DynamicVariables=1


[StartAngle_Section2_StartText]
Measure=CALC
Formula=[StartAngle_Section2] - #StartLabelGap#
DynamicVariables=1

[StartAngle_Section2_EndText]
Measure=CALC
Formula=[StartAngle_Section2] + [SectionSize] + #EndLabelGap#
DynamicVariables=1


; Calculate the Start and "Width" of Arcs
; Ring 1
[LineStart_Ring1]
Measure=CALC
Formula=#CenterSize# + #SizeGap#
[LineLength_Ring1]
Measure=CALC
Formula=[LineStart_Ring1] + #RingSize#
DynamicVariables=1

[LineStart_Ring2]
Measure=CALC
Formula=[LineLength_Ring1] + #SizeGap#
DynamicVariables=1
[LineLength_Ring2]
Measure=CALC
Formula=[LineStart_Ring2] + #RingSize#
DynamicVariables=1

[Radius]
Measure=CALC
Formula=[LineLength_Ring2] + #SizeGap#
DynamicVariables=1
[Circumference]
Measure=CALC
Formula=[Radius]*2
DynamicVariables=1

;;;;;;;;;;;;;;;;;;;;
; TEXT POSITION
;;;;;;;;;;;;;;;;;;;;
; [Center] = [LineLength_Ring1] - ([LineLength_Ring1]-[LineStart_Ring1])/2
; X=COS([StartAngle_Section1])*[X_Center] + [Radius]
; Y=SIN([StartAngle_Section1])*[Y_Center] + [Radius] -#FontPixels#/2
;
; The -(#RingSize#-#FontPixels#)/2 is to help the vAlign be centered.
; Since there is no StringVAlignment=CENTER option.
;

[Center_Ring1]
Measure=CALC
Formula=[LineLength_Ring1] - ([LineLength_Ring1]-[LineStart_Ring1])/2
DynamicVariables=1
[Center_Ring2]
Measure=CALC
Formula=[LineLength_Ring2] - ([LineLength_Ring2]-[LineStart_Ring2])/2
DynamicVariables=1


[X_Section1_Ring1]
Measure=CALC
Formula=COS([StartAngle_Section1_StartText])*[Center_Ring1] + [Radius]
DynamicVariables=1
[Y_Section1_Ring1]
Measure=CALC
Formula=SIN([StartAngle_Section1_StartText])*[Center_Ring1] + [Radius] -#FontPixels#/2
DynamicVariables=1

[X_Section1_Ring2]
Measure=CALC
Formula=COS([StartAngle_Section1_StartText])*[Center_Ring2] + [Radius]
DynamicVariables=1
[Y_Section1_Ring2]
Measure=CALC
Formula=SIN([StartAngle_Section1_StartText])*[Center_Ring2] + [Radius] -#FontPixels#/2
DynamicVariables=1

[X_Section1_Ring1_Bottom]
Measure=CALC
Formula=COS([StartAngle_Section1_EndText])*[Center_Ring1] + [Radius]
DynamicVariables=1
[Y_Section1_Ring1_Bottom]
Measure=CALC
Formula=SIN([StartAngle_Section1_EndText])*[Center_Ring1] + [Radius] -#FontPixels#/2
DynamicVariables=1

;;;;;;;;;;;;;;;;;
; Section 2
;;;;;;;;;;;;;;;;;
[X_Section2_Ring1]
Measure=CALC
Formula=COS([StartAngle_Section2_StartText])*[Center_Ring1] + [Radius]
DynamicVariables=1
[Y_Section2_Ring1]
Measure=CALC
Formula=SIN([StartAngle_Section2_StartText])*[Center_Ring1] + [Radius] -#FontPixels#/2
DynamicVariables=1

[X_Section2_Ring2]
Measure=CALC
Formula=COS([StartAngle_Section2_StartText])*[Center_Ring2] + [Radius]
DynamicVariables=1
[Y_Section2_Ring2]
Measure=CALC
Formula=SIN([StartAngle_Section2_StartText])*[Center_Ring2] + [Radius] -#FontPixels#/2
DynamicVariables=1

[X_Section2_Ring1_Bottom]
Measure=CALC
Formula=COS([StartAngle_Section2_EndText])*[Center_Ring1] + [Radius]
DynamicVariables=1
[Y_Section2_Ring1_Bottom]
Measure=CALC
Formula=SIN([StartAngle_Section2_EndText])*[Center_Ring1] + [Radius] -#FontPixels#/2
DynamicVariables=1


;;;;;;;;;;;;;;;;;;;;
; MEASUREMENTS
;;;;;;;;;;;;;;;;;;;;
; Used for making the Backgrounds
[MeasureBG]
Measure=Calc
Formula=100
MaxValue=100
UpdateDivider=86400

;;;;;;;;;;;;;;;;;;;;
; METERS
;;;;;;;;;;;;;;;;;;;;
[MeterBackground1]
Meter=ROUNDLINE
MeasureName=MeasureBG
W=[Circumference]
H=[Circumference]
StartAngle=0
RotationAngle=0.7853
LineStart=0
LineLength=[Radius]
LineColor=#BGColor1#
Solid=1
AntiAlias=1
DynamicVariables=1

[MeterBackground2]
Meter=ROUNDLINE
MeasureName=MeasureBG
W=[Circumference]
H=[Circumference]
StartAngle=0.7853
RotationAngle=0.7853
LineStart=0
LineLength=[Radius]
LineColor=#BGColor2#
Solid=1
AntiAlias=1
DynamicVariables=1

[MeterBackground3]
Meter=ROUNDLINE
MeasureName=MeasureBG
W=[Circumference]
H=[Circumference]
StartAngle=1.570796
RotationAngle=0.7853
LineStart=0
LineLength=[Radius]
LineColor=#BGColor3#
Solid=1
AntiAlias=1
DynamicVariables=1

[MeterBackground4]
Meter=ROUNDLINE
MeasureName=MeasureBG
W=[Circumference]
H=[Circumference]
StartAngle=2.356194
RotationAngle=0.7853
LineStart=0
LineLength=[Radius]
LineColor=#BGColor4#
Solid=1
AntiAlias=1
DynamicVariables=1

[MeterBackground5]
Meter=ROUNDLINE
MeasureName=MeasureBG
W=[Circumference]
H=[Circumference]
StartAngle=3.141592
RotationAngle=0.7853
LineStart=0
LineLength=[Radius]
LineColor=#BGColor5#
Solid=1
AntiAlias=1
DynamicVariables=1

[MeterBackground6]
Meter=ROUNDLINE
MeasureName=MeasureBG
W=[Circumference]
H=[Circumference]
StartAngle=3.926989
RotationAngle=0.7853
LineStart=0
LineLength=[Radius]
LineColor=#BGColor6#
Solid=1
AntiAlias=1
DynamicVariables=1

[MeterBackground7]
Meter=ROUNDLINE
MeasureName=MeasureBG
W=[Circumference]
H=[Circumference]
StartAngle=4.712387
RotationAngle=0.7853
LineStart=0
LineLength=[Radius]
LineColor=#BGColor7#
Solid=1
AntiAlias=1
DynamicVariables=1

[MeterBackground8]
Meter=ROUNDLINE
MeasureName=MeasureBG
W=[Circumference]
H=[Circumference]
StartAngle=5.497785
RotationAngle=0.7853
LineStart=0
LineLength=[Radius]
LineColor=#BGColor8#
Solid=1
AntiAlias=1
DynamicVariables=1

;;;;;;;;;;;;;;;;
; BG Section1
;;;;;;;;;;;;;;;;
[Meter_Section1_Ring1]
Meter=ROUNDLINE
MeasureName=MeasureBG
W=[Circumference]
H=[Circumference]
StartAngle=[StartAngle_Section1]
RotationAngle=[SectionSize]
LineStart=[LineStart_Ring1]
LineLength=[LineLength_Ring1]
LineColor=#RingColor#
Solid=1
AntiAlias=1
DynamicVariables=1

[Meter_Section1_Ring2]
Meter=ROUNDLINE
MeasureName=MeasureBG
W=[Circumference]
H=[Circumference]
StartAngle=[StartAngle_Section1]
RotationAngle=[SectionSize]
LineStart=[LineStart_Ring2]
LineLength=[LineLength_Ring2]
LineColor=#RingColor#
Solid=1
AntiAlias=1
DynamicVariables=1

;;;;;;;;;;;;;;;;
; BG Section2
;;;;;;;;;;;;;;;;
[Meter_Section2_Ring1]
Meter=ROUNDLINE
MeasureName=MeasureBG
W=[Circumference]
H=[Circumference]
StartAngle=[StartAngle_Section2]
RotationAngle=[SectionSize]
LineStart=[LineStart_Ring1]
LineLength=[LineLength_Ring1]
LineColor=#RingColor#
Solid=1
AntiAlias=1
DynamicVariables=1

[Meter_Section2_Ring2]
Meter=ROUNDLINE
MeasureName=MeasureBG
W=[Circumference]
H=[Circumference]
StartAngle=[StartAngle_Section2]
RotationAngle=[SectionSize]
LineStart=[LineStart_Ring2]
LineLength=[LineLength_Ring2]
LineColor=#RingColor#
Solid=1
AntiAlias=1
DynamicVariables=1

;;;;;;;;;;;;;;;;;;;;;
; TEXT
;;;;;;;;;;;;;;;;;;;;;
[Meter_Text_Section1_Ring1]
Meter=STRING
X=[X_Section1_Ring1]
Y=[Y_Section1_Ring1]
FontSize=#FontSize#
FontColor=#FontColor#
StringAlign=CENTER
AntiAlias=1
Text=#Text_Section1_Ring1#
DynamicVariables=1

[Meter_Text_Section1_Ring1_Bottom]
Meter=STRING
X=[X_Section1_Ring1_Bottom]
Y=[Y_Section1_Ring1_Bottom]
FontSize=#FontSize#
FontColor=#FontColor#
StringAlign=CENTER
AntiAlias=1
Text=#Text_Section1_Ring1_Bottom#
DynamicVariables=1

[Meter_Text_Section1_Ring2]
Meter=STRING
X=[X_Section1_Ring2]
Y=[Y_Section1_Ring2]
FontSize=#FontSize#
FontColor=#FontColor#
StringAlign=CENTER
AntiAlias=1
Text=#Text_Section1_Ring2#
DynamicVariables=1

;;;;;;;;;;;;;;;;;;;
; TEXT SECTION 2
;;;;;;;;;;;;;;;;;;;
[Meter_Text_Section2_Ring1]
Meter=STRING
X=[X_Section2_Ring1]
Y=[Y_Section2_Ring1]
FontSize=#FontSize#
FontColor=#FontColor#
StringAlign=CENTER
AntiAlias=1
Text=#Text_Section2_Ring1#
DynamicVariables=1

[Meter_Text_Section2_Ring1_Bottom]
Meter=STRING
X=[X_Section2_Ring1_Bottom]
Y=[Y_Section2_Ring1_Bottom]
FontSize=#FontSize#
FontColor=#FontColor#
StringAlign=CENTER
AntiAlias=1
Text=#Text_Section2_Ring1_Bottom#
DynamicVariables=1

[Meter_Text_Section2_Ring2]
Meter=STRING
X=[X_Section2_Ring2]
Y=[Y_Section2_Ring2]
FontSize=#FontSize#
FontColor=#FontColor#
StringAlign=CENTER
AntiAlias=1
Text=#Text_Section2_Ring2#
DynamicVariables=1


; [Meter_Test]
; Meter=STRING
; MeasureName=StartAngle_Section1
; MeasureName2=Y_Section1_Ring1
; X=10
; Y=50
; FontSize=#FontSize#
; FontColor=#FontColor#
; AntiAlias=1
; NumOfDecimals=2
; Text=(%1, %2)
; DynamicVariables=1
Everyone loves the [url=http://db.tt/qV9oIZZ]Dropbox[/url]!
Top

Return to “Community Tips & Tricks”