It is currently March 29th, 2024, 10:15 am

Vertically spelled text or rotated metres

Get help with creating, editing & fixing problems with skins
User avatar
Thundordan
Posts: 11
Joined: November 23rd, 2010, 4:30 pm

Vertically spelled text or rotated metres

Post by Thundordan »

I'm tinkering with a simple music title + progress meter, and it would fit my graphs marvellously if I could print the song name text vertically. As in:

L
I
K
E
-
T
H
I
S

I didn't find any text direction commands in the docs, e.g. right-to-left or top-to-bottom.
I thought instead I could fake it by using a rotated font like this one: http://www.1001fonts.com/vertigo-font.html or https://www.fontsquirrel.com/fonts/bungee and then rotate the whole meter by 90 degrees clockwise - but that also seems to not be possible. It seems only pictures or ring graphs can be rotated.

Did anyone ever figure this out or see any meters that have vertical text?

PS: Here's the simple old windamp meter I'm tinkering with:

Code: Select all

; ENIGMA TASKBAR MUSIC

[Rainmeter]
Author=Kaelri.LCD@gmail.com
AppVersion=1001000
Update=1000
MiddleMouseDownAction=!RainmeterActivateConfig #CURRENTCONFIG# Music-Mini-Winamp.ini

[Metadata]
Name=Enigma Music (Winamp)
Config=Enigma | Taskbar
Description=This skin shows the song currently playing in Winamp.
Instructions=Press the icon to plays & pauses the song. 
Version=2.7
Tags=Taskbar | Music | Winamp
License=Creative Commons Attribution-Non-Commercial-Share Alike 3.0
Preview=#SKINSPATH#Enigma\Resources\Images\Preview.png

[Variables]
@include=#SKINSPATH#Enigma\Resources\Variables\UserVariables.inc
;-------------------------

[MeasureTrack]
Measure=Plugin
Plugin=Plugins\WindowMessagePlugin.dll
WindowClass=Winamp v1.x
Substitute="[Paused]":""," - Winamp":"","[Stopped]":""

[MeasureProgressFull]
Measure=Plugin
Plugin=Plugins\WindowMessagePlugin.dll
WindowClass=Winamp v1.x
WindowMessage=1024 1 105

[MeasureProgressCurrent]
Measure=Plugin
Plugin=Plugins\WindowMessagePlugin.dll
WindowClass=Winamp v1.x
WindowMessage=1024 0 105

[MeasureProgress]
Measure=Calc
Formula=(MeasureProgressCurrent<=0)?0:(MeasureProgressCurrent/(MeasureProgressFull*1000+1)) 

[MeasureTMinute]
Measure=Calc
Formula=((MeasureProgressCurrent / 1000) - ((MeasureProgressCurrent / 1000) % 60)) /60

[MeasureTSecond]
Measure=Calc
Formula=(MeasureProgressCurrent / 1000) % 60 = 60 ? 0 : (MeasureProgressCurrent / 1000) % 60

[MeasureTZero]
Measure=Calc
Formula=(((MeasureProgressCurrent) / 1000) % 60)  < 9 ? 0 : 1
Substitute="1":""

[MeasureFMinute]
Measure=Calc
Formula=(MeasureProgressFull - (MeasureProgressFull % 60)) /60

[MeasureFSecond]
Measure=Calc
Formula=MeasureProgressFull % 60

[MeasureFZero]
Measure=Calc
Formula=(MeasureProgressFull % 60)  < 9 ? 0 : 1
Substitute="1":""

;-------------------------

;[Background]
;Meter=IMAGE
;SolidColor=0, 0, 0, 255
;X=0
;Y=1
;W=25
;H=25

[Track]
Meter=STRING
MeasureName=MeasureTrack
X=0
Y=-3
H=20
W=480
FontColor=#Color1#
FontFace=#Font#;Vertigo 2 BRK
FontSize=11;#Height3#
StringAlign=LEFT
StringEffect=SHADOW
StringStyle=NORMAL
AntiAlias=1
ClipString=1

[Time]
Meter=STRING
MeasureName=MeasureTMinute
MeasureName2=MeasureTZero
MeasureName3=MeasureTSecond
MeasureName4=MeasureFMinute
MeasureName5=MeasureFZero
MeasureName6=MeasureFSecond
X=0
Y=20r
H=20
W=280
FontColor=#Color2#
FontFace=#Font#;Vertigo 2 BRK
FontSize=11;#Height2#
StringAlign=LEFT
StringEffect=SHADOW
StringStyle=NORMAL
AntiAlias=1
Text="%1:%2%3 | %4:%5%6"
ClipString=1
Substitute="0.00 | ":""


[ProgressBackground]
Meter=IMAGE
SolidColor=192, 192, 192, 255
X=0
Y=18
W=180
H=1

[Progress]
MeasureName=MeasureProgress
Meter=BAR
X=r
Y=17
H=3
W=180
BarColor=60,120,255,250;#ColorActive#
BarOrientation=HORIZONTAL
Last edited by Thundordan on March 10th, 2018, 9:30 pm, edited 1 time in total.
User avatar
Thundordan
Posts: 11
Joined: November 23rd, 2010, 4:30 pm

Re: Vertically spelled text or rotated metres

Post by Thundordan »

Of course after searching, giving up, and finally posting the question, I came across the PC Master Race skin: https://c0nn0.deviantart.com/art/SYSMonitor-1-0-722203412 which uses `Angle=(Rad(270))`.

For some reason I can't get the custom font to load by using `FontFace=Vertigo 2 BRK`, but at least I can rotate everything!
[Edit: Does anyone know of any more natural looking rotated fonts? Like a Calibri.]

My code looks like this now:

Code: Select all

; ENIGMA TASKBAR MUSIC

[Rainmeter]
Author=Kaelri.LCD@gmail.com
AppVersion=1001000
Update=1000
MiddleMouseDownAction=!RainmeterActivateConfig #CURRENTCONFIG# Music-Mini-Winamp.ini

[Metadata]
Name=Enigma Music (Winamp)
Config=Enigma | Taskbar
Description=This skin shows the song currently playing in Winamp.
Instructions=Press the icon to plays & pauses the song. 
Version=2.7
Tags=Taskbar | Music | Winamp
License=Creative Commons Attribution-Non-Commercial-Share Alike 3.0
Preview=#SKINSPATH#Enigma\Resources\Images\Preview.png

[Variables]
@include=#SKINSPATH#Enigma\Resources\Variables\UserVariables.inc
;-------------------------

[MeasureTrack]
Measure=Plugin
Plugin=Plugins\WindowMessagePlugin.dll
WindowClass=Winamp v1.x
Substitute="[Paused]":""," - Winamp":"","[Stopped]":""

[MeasureProgressFull]
Measure=Plugin
Plugin=Plugins\WindowMessagePlugin.dll
WindowClass=Winamp v1.x
WindowMessage=1024 1 105

[MeasureProgressCurrent]
Measure=Plugin
Plugin=Plugins\WindowMessagePlugin.dll
WindowClass=Winamp v1.x
WindowMessage=1024 0 105

[MeasureProgress]
Measure=Calc
Formula=(MeasureProgressCurrent<=0)?0:(MeasureProgressCurrent/(MeasureProgressFull*1000+1)) 

[MeasureTMinute]
Measure=Calc
Formula=((MeasureProgressCurrent / 1000) - ((MeasureProgressCurrent / 1000) % 60)) /60

[MeasureTSecond]
Measure=Calc
Formula=(MeasureProgressCurrent / 1000) % 60 = 60 ? 0 : (MeasureProgressCurrent / 1000) % 60

[MeasureTZero]
Measure=Calc
Formula=(((MeasureProgressCurrent) / 1000) % 60)  < 9 ? 0 : 1
Substitute="1":""

[MeasureFMinute]
Measure=Calc
Formula=(MeasureProgressFull - (MeasureProgressFull % 60)) /60

[MeasureFSecond]
Measure=Calc
Formula=MeasureProgressFull % 60

[MeasureFZero]
Measure=Calc
Formula=(MeasureProgressFull % 60)  < 9 ? 0 : 1
Substitute="1":""

;-------------------------

;[Background]
;Meter=IMAGE
;SolidColor=0, 0, 0, 255
;X=0
;Y=1
;W=25
;H=25

[Track]
Meter=STRING
MeasureName=MeasureTrack
X=0
Y=480
H=20
W=480
FontColor=#Color1#
FontFace=#Font#;Vertigo 2 BRK
FontSize=11;#Height3#
StringAlign=LEFT
StringEffect=SHADOW
StringStyle=NORMAL
AntiAlias=1
ClipString=1
Angle=(Rad(270))

[Time]
Meter=STRING
MeasureName=MeasureTMinute
MeasureName2=MeasureTZero
MeasureName3=MeasureTSecond
MeasureName4=MeasureFMinute
MeasureName5=MeasureFZero
MeasureName6=MeasureFSecond
X=24r
Y=-2r
H=20
W=280
FontColor=#Color2#
FontFace=#Font#;Vertigo 2 BRK
FontSize=11;#Height2#
StringAlign=LEFT
StringEffect=SHADOW
StringStyle=NORMAL
AntiAlias=1
Text="%1:%2%3 | %4:%5%6"
ClipString=1
Substitute="0.00 | ":""
Angle=(Rad(270))

[ProgressBackground]
Meter=IMAGE
SolidColor=192, 192, 192, 255
X=22
Y=-180r
W=1
H=180
Angle=(Rad(270))

[Progress]
MeasureName=MeasureProgress
Meter=BAR
X=-1r
Y=298
H=180
W=3
BarColor=60,120,255,250;#ColorActive#
BarOrientation=Vertical
;Angle=(Rad(270))
Last edited by Thundordan on March 10th, 2018, 7:39 pm, edited 1 time in total.
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: Vertically spelled text or rotated metres

Post by jsmorley »

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1

[MeterVert]
Meter=String
X=23
H=240
InlineSetting=Face | Vertigo 2 BRK
InlineSetting2=Size | 15
InlineSetting3=Weight | 400
InlineSetting4=Color | 255,255,255,255
Angle=(Rad(90))
AntiAlias=1
Text=Hello World
1.png
https://docs.rainmeter.net/manual/meters/string/#Angle
https://forum.rainmeter.net/viewtopic.php?p=104103

The font file must be in the @Resources\Fonts folder under your skin, or you can just install it in Windows. In either case, be sure to Refresh all Rainmeter after installing the font.
You do not have the required permissions to view the files attached to this post.
User avatar
Thundordan
Posts: 11
Joined: November 23rd, 2010, 4:30 pm

Re: Vertically spelled text or rotated metres

Post by Thundordan »

jsmorley wrote:

Code: Select all

InlineSetting=Face | Vertigo 2 BRK
Ooo, I like the InlineSetting thing.
jsmorley wrote: In either case, be sure to Refresh all Rainmeter after installing the font.
That was my problem. Had included it in the folder but didn't refresh all Rainmeter.


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

Re: Vertically spelled text or rotated metres

Post by jsmorley »

Glad to help. Do be aware that for purposes of relative positioning or mouse actions, the meter will remain in the original size and orientation that it was before the Angle was applied. The "text" in the meter is angled, but the meter is not. The "text" will almost certainly be all or part of the way "out of" the meter entirely. Mouse actions and relative positioning are based on the "meter", not the "contents".

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1
SkinHeight=240
BackgroundMode=2
SolidColor=255,0,0,90

[MeterVert]
Meter=String
X=23
InlineSetting=Face | Vertigo 2 BRK
InlineSetting2=Size | 15
InlineSetting3=Weight | 400
InlineSetting4=Color | 255,255,255,255
SolidColor=0,255,0,120
Angle=(Rad(90))
AntiAlias=1
Text=Hello World
1.png
It is tricky to get mouse actions or relative positioning to work right on angled strings. You will likely need an almost invisible Image meter behind it, that uses the size and orientation that the resulting string will have. Then put the mouse action(s) on that, and have any future relative positioning use the size and position of that Image meter. Very difficult to get it right with strings that are dynamic and variable in length. I really recommend that Angle be used for static strings.

Note that the skin "size" will not dynamically change as the text is angled, as the meter container does not move or change. You will need to force the size of the skin to be large enough to hold the result.

Here is how the text is angled... It uses the top left corner of the string as the anchor point of the rotation.
GIF.gif
You do not have the required permissions to view the files attached to this post.