It is currently April 27th, 2024, 10:24 pm

Center text

Get help with creating, editing & fixing problems with skins
RicardoTM
Posts: 268
Joined: December 28th, 2022, 9:30 pm
Location: México

Center text

Post by RicardoTM »

Hey, I have this test skin where I'm changing the size of the text dynamically. It changes its size according to its number of characters.

The problem is that, although I managed to resize the text using a technique I found somewhere in the forums, I can't manage to keep the text centered. I'm out of ideas.

The text will have a maximum of 12 characters and a minimum of 1
it goes from size 35 to size 12
fsa.jpg
fssa.jpg
Captura de pantalla 2024-01-12 023759.jpg
The dark grey rectangle represents the text's height

I did find a solution but it wouldn't do it as good as I want to, so any ideas are welcomed.

What I'm doing right now is: I'm using a measure to count the number of characters

Code: Select all

[Characters]
Measure = String
DynamicVariables=1
String = [#Text]
RegExpSubstitute = 1
Substitute = "(?s)^(.{1})$" : "1", "(?s)^(.{2})$" : "2", "(?s)^(.{3})$" : "3", "(?s)^(.{4})$" : "4", "(?s)^(.{5})$" : "5", "(?s)^(.{6})$" : "6", "(?s)^(.{7})$" : "7", "(?s)^(.{8})$" : "8", "(?s)^(.{9})$" : "9", "(?s)^(.{10})$" : "10", "(?s)^(.{11})$" : "11", "(?s)^(.{12})$" : "12", "(?s)^(.{13})$" : "13", "(?s)^(.{14})$" : "14", "(?s)^(.{15})$" : "15", "(?s)^(.{16})$" : "16", "(?s)^(.{17})$" : "17", "(?s)^(.{18})$" : "18", "(?s)^(.{19})$" : "19", "(?s)^(.{20})$" : "20", "(?s)^(.{21})$" : "21", "(?s)^(.{22})$" : "22", "(?s)^(.{23})$" : "23", "(?s)^(.{24})$" : "24", "(?s)^(.{25})$" : "25", "(?s)^(.{26})$" : "26", "(?s)^(.{27})$" : "27", "(?s)^(.{28})$" : "28", "(?s)^(.{29})$" : "29", "(?s)^(.{30})$" : "30", "(?s)^(.{31})$" : "31", "(?s)^(.{32})$" : "32", "(?s)^(.{33})$" : "33", "(?s)^(.{34})$" : "34", "(?s)^(.{35})$" : "35", "(?s)^(.{36})$" : "36", "(?s)^(.{37})$" : "37", "(?s)^(.{38})$" : "38", "(?s)^(.{39})$" : "39", "(?s)^(.{40})$" : "40", "(?s)^(.{41})$" : "41", "(?s)^(.{42})$" : "42", "(?s)^(.{43})$" : "43", "(?s)^(.{44})$" : "44", "(?s)^(.{45})$" : "45", "(?s)^(.{46})$" : "46", "(?s)^(.{47})$" : "47", "(?s)^(.{48})$" : "48", "(?s)^(.{49})$" : "49", "(?s)^(.{50})$" : "50", "(?s)^(.{51})$" : "51", "(?s)^(.{52})$" : "52", "(?s)^(.{53})$" : "53", "(?s)^(.{54})$" : "54", "(?s)^(.{55})$" : "55", "(?s)^(.{56})$" : "56", "(?s)^(.{57})$" : "57", "(?s)^(.{58})$" : "58", "(?s)^(.{59})$" : "59", "(?s)^(.{60})$" : "60", "(?s)^(.{61})$" : "61", "(?s)^(.{62})$" : "62", "(?s)^(.{63})$" : "63", "(?s)^(.{64})$" : "64", "(?s)^(.{65})$" : "65", "(?s)^(.{66})$" : "66", "(?s)^(.{67})$" : "67", "(?s)^(.{68})$" : "68", "(?s)^(.{69})$" : "69", "(?s)^(.{70})$" : "70", "(?s)^(.{71})$" : "71", "(?s)^(.{72})$" : "72", "(?s)^(.{73})$" : "73", "(?s)^(.{74})$" : "74", "(?s)^(.{75})$" : "75", "(?s)^(.{76})$" : "76", "(?s)^(.{77})$" : "77", "(?s)^(.{78})$" : "78", "(?s)^(.{79})$" : "79", "(?s)^(.{80})$" : "80", "(?s)^(.{81})$" : "81", "(?s)^(.{82})$" : "82", "(?s)^(.{83})$" : "83", "(?s)^(.{84})$" : "84", "(?s)^(.{85})$" : "85", "(?s)^(.{86})$" : "86", "(?s)^(.{87})$" : "87", "(?s)^(.{88})$" : "88", "(?s)^(.{89})$" : "89", "(?s)^(.{90})$" : "90", "(?s)^(.{91})$" : "91", "(?s)^(.{92})$" : "92", "(?s)^(.{93})$" : "93", "(?s)^(.{94})$" : "94", "(?s)^(.{95})$" : "95", "(?s)^(.{96})$" : "96", "(?s)^(.{97})$" : "97", "(?s)^(.{98})$" : "98", "(?s)^(.{99})$" : "99", "(?s)^(.{100})$" : "100"
and I have a rectangle and a text, in the text fontsize i'm using this

Code: Select all

FontSize=(35/(clamp([Characters]/3,1,3)))
It divides the number of characters by 3 and clamps it between 1 and 3, and the fontsize is divided by that. That is to keep the size between the range I want. It also makes it not too linear so it starts scaling at 3 or more characters. (StringAlign=Center)

Whatever I need to do, I need to add it to the Y position, so it accounts for the size change. What I did was: (I actually did a lot of tests and this is the closest I got to what I want)

Code: Select all

y=([BG:H]-((((clamp([Characters]*0.3,1,3))-1)*((88-71)/(3-1))+88)-((([#CURRENTSECTION#:H]-51)/(18-51))*(33-0))))
but it won't do exactly what I want, is not perfect.
Even tho the start and the end look good, on the middle it looks like this:
Captura de pantalla 2024-01-12 030204.jpg
Thanks in advance.

Edit.

Well, it seems like the answer is

Code: Select all

y=(Initial Y position) + ((MaxTextHeight-[Text:H])/2)
You do not have the required permissions to view the files attached to this post.
User avatar
Yincognito
Rainmeter Sage
Posts: 7178
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Center text

Post by Yincognito »

Your approach will not work if you change the font face or its style. Unless you're using monospaced fonts where the width of a character is the same regardless of the character and you can base your calculations on how many chars are in the string, the size of a string meter is not proportional with the length of the text.

A more suitable (though still not perfect, due to pixels vs points measurements) approach would be to use a transparent color string meter initially, get its size via the corresponding section variable parameters, then multiply its font size with the minimum between its desired width / actual width and its desired height / actual height (where / means division). Or something along these lines. Of course, whatever padding on the text will have to be accounted for as well.

As for the positioning, set it to the middle of the desired box and use StringAlign=CenterCenter. This will require basing whatever relative positioning afterwards on the proper r offset from that center, instead of the standard R relative positioning.

Just saying. If you're happy with the current approach or you don't change the font, you can very well keep it, though the text length can be found in other ways too (like replacing every character with "+1" and pass the resulting string to a Calc to compute that formula).
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
User avatar
nek
Posts: 105
Joined: November 3rd, 2019, 12:00 am

Re: Center text

Post by nek »

RicardoTM wrote: January 12th, 2024, 9:07 am
I couldn't imagine what kind of skin you are creating, is this match with what you are trying to do?
something.gif
Font size: 12-34 point

Code:
Skin.ini

Code: Select all

;; 2024-01-13 | UTF-16 LE BOM 

[Variables]
TEXT1=555

[Rainmeter]
Update=-1
DefaultUpdateDivider=-1
AccurateText=1
MouseActionCursor=0

[I]
Measure=Script
ScriptFile=#@#Scripts\init.lua
Disabled=1
;;
;; Script Measure | https://docs.rainmeter.net/manual/measures/script/
;;

[Background]
Meter=Image
W=160
H=80
SolidColor=1E293B

[tButton]
AntiAlias=1
FontColor=CBD5E1
FontFace=Segoe UI Symbol
FontSize=20
SolidColor=334155

[Button1]
Meter=String
MeterStyle=tButton
Y=10R
Text=[\xE109]
LeftMouseUpAction=[!SetVariable TEXT1 "[&I:string_append('[#TEXT1]')]"][!UpdateMeter Label1][!UpdateMeter Ninja][!Redraw]
;;
;; Nesting Variables | https://docs.rainmeter.net/manual/variables/nesting-variables/
;; Inline Lua        | https://docs.rainmeter.net/manual/lua-scripting/inline-lua/
;;

[Button2]
Meter=String
MeterStyle=tButton
X=10R
Y=0r
Text=[\xE108]
LeftMouseUpAction=[!SetVariable TEXT1 "[&I:string_remove('[#TEXT1]')]"][!UpdateMeter Label1][!UpdateMeter Ninja][!Redraw]

[Label1]
Meter=String
AntiAlias=1
DynamicVariables=1
FontColor=1E293B
FontFace=Segoe UI
FontSize=([&I:font_size('#TEXT1#')])
FontWeight=700
; InlinePattern=\d+
; InlineSetting=Typography|tnum
SolidColor=E2E8F0
Text=#TEXT1#
;;
;; Inline Lua | https://docs.rainmeter.net/manual/lua-scripting/inline-lua/
;;
;; String meter Inline Options | https://docs.rainmeter.net/manual/meters/string/inline/
;; Font Typography Features    | https://docs.rainmeter.net/tips/font-features/
;; Tabular figures (tnum)      | https://helpx.adobe.com/fonts/using/open-type-syntax.html#tnum
;;

[Ninja]
Meter=String
Hidden=1
UpdateDivider=-1
OnUpdateAction=[!SetOption Label1 X "([Background:W]/2-[Label1:W]/2)"][!SetOption Label1 Y "([Background:H]/2-[Label1:H]/2)"][!UpdateMeter Label1]
@Resources\Scripts\init.lua

Code: Select all

-- 2024-01-13 | UTF-16 LE BOM | Lua 5.1

-----------------------------------------------------------------------------
-- Return font size by a string length.
--
-- @param  {string}  s  a string. 1-12 characters.
-- @return {number}     return 12-34 as a font size.
-----------------------------------------------------------------------------
function font_size(s)

	local string_length = string.len(s)
	string_length = math.min(12, string_length)
	string_length = math.max(1, string_length)
	return 12 + (12 - string_length) * 2

end


-----------------------------------------------------------------------------
-- Return a string with appended `5` to the tail.
--
-- @param  {string}  s  a string. 1-12 characters.
-- @return {string}
-----------------------------------------------------------------------------
function string_append(s)

	return #s<12 and s..'5' or s

end

-----------------------------------------------------------------------------
-- Return a string with removing the tailing character.
--
-- @param  {string}  s  a string. 1-12 characters.
-- @return {string}
-----------------------------------------------------------------------------
function string_remove(s)

	return 1<#s and string.sub(s, 1, #s-1) or s

end
You do not have the required permissions to view the files attached to this post.
RicardoTM
Posts: 268
Joined: December 28th, 2022, 9:30 pm
Location: México

Re: Center text

Post by RicardoTM »

Yincognito wrote: January 12th, 2024, 12:47 pm
nek wrote: January 12th, 2024, 5:43 pm
Hey, what I did worked fine.

I wanted my gauges to be able to display greater numbers, and also change the title to larger titles. So using any sensor is possible now.
ezgif.com-video-to-gif-converter (1).gif
Now I see what you referred to with monospaced fonts Yin. I don't dislike how the other fonts look tho, in reality numbers won't go up that fast so won't be that noticeable.
Captura de pantalla 2024-01-12 141609.jpg
Captura de pantalla 2024-01-12 141700.jpg
And yup, that's pretty much the same I wanted nek, didn't try your method tho, mine worked as I needed.
ezgif.com-video-to-gif-converter (1).gif
You do not have the required permissions to view the files attached to this post.
Last edited by RicardoTM on January 12th, 2024, 10:48 pm, edited 2 times in total.
User avatar
Yincognito
Rainmeter Sage
Posts: 7178
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Center text

Post by Yincognito »

There are many ways to do it, indeed. Great work, both of you - I'm sure others will enjoy and find your solutions useful! :thumbup:
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
RicardoTM
Posts: 268
Joined: December 28th, 2022, 9:30 pm
Location: México

Re: Center text

Post by RicardoTM »

Yincognito wrote: January 12th, 2024, 8:57 pm
That's right. I'm happy this time it was the less complicated the one that worked lol
User avatar
Yincognito
Rainmeter Sage
Posts: 7178
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: Center text

Post by Yincognito »

RicardoTM wrote: January 12th, 2024, 10:29 pm That's right. I'm happy this time it was the less complicated the one that worked lol
:great:
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth