Quantcast
Channel: Rainmeter Forums
Viewing all articles
Browse latest Browse all 1056

Help: Rainmeter Skins • Position text in the center of a meter (Advanced)

$
0
0
Im trying to position some text in the center of another meter using meter styles. It looks something like this

.Inc file with meter styles:

Code:

[Rainmeter]Update=-1DynamicWindowSize=1AlwaysOnTop=2[Variables]ResetGeneratedVars=[!CommandMeasure ResetGeneratedVars "skinSetOption()"]Win.PadX=6Win.PadY=6Win.W=282Win.Radius=8Item.W=(#Win.W#-#Win.PadX#*2)Item.H=30Item.PadX=8Item.PadY=8Item.FontSize=18Item.IconSize.L=10Item.IconSize.R=10Item.Prev=Item.Cur=Item.Bg.Base=Item.Bg.Alpha.Default=10Item.Bg.Alpha.Hover=20Item.Bg.Alpha=#Item.Bg.Alpha.Default#[Win.Frame]Meter=ShapeDynamicVariables=1Shape=Rectangle 0,0,#Win.W#,#Win.H#,#Win.Radius# | StrokeWidth 0 | FillColor 0,0,0,240UpdateDivider=-1[MeasureFader]Measure=PluginPlugin=ActionTimerActionList1=Repeat FadeOut, 10, 10ActionList2=Repeat FadeIn, 10, 10FadeOut=[!SetVariable Item.Bg.Alpha "(Clamp(#Item.Bg.Alpha#-(#Item.Bg.Alpha.Hover#/10), #Item.Bg.Alpha.Default#, #Item.Bg.Alpha.Hover#))"][!UpdateMeasure #CURRENTSECTION#][!UpdateMeter #Item.Cur#][!Redraw]FadeIn=[!SetVariable Item.Bg.Alpha "(Clamp(#Item.Bg.Alpha#+(#Item.Bg.Alpha.Hover#/10), #Item.Bg.Alpha.Default#, #Item.Bg.Alpha.Hover#))"][!UpdateMeasure #CURRENTSECTION#][!UpdateMeter #Item.Cur#][!Redraw]DynamicVariables=1[Item.Box]Shape=Rectangle 0,0,#Item.W#,#Item.H#,(#Win.Radius#/2) | StrokeWidth 0 | Extend FillY=#Win.PadY#RX=#Win.PadX#Fill=FillColor 180,200,210,40DynamicVariables=1Group=Item.#CURRENTSECTION#[Item.Text]Y=0rX=(#Win.PadX#+#Item.PadX#+#Item.IconSize.L#+8)rH=#Item.H#FontFace=Segoe UIFontSize=#Item.FontSize#FontColor=255,255,255AntiAlias=1Padding=0,(#Item.FontSize#/2),0,(#Item.FontSize#/-2)DynamicVariables=1Group=Item.#CURRENTSECTION#MouseOverAction=[!ZPos 1]MouseLeaveAction=[!ZPos 2]SolidColor=255,0,0,100[Item.Text.NoIcon]Y=0rX=(#Win.PadX#+#Item.PadX#)rH=#Item.H#FontFace=Segoe UIFontSize=#Item.FontSize#FontColor=255,255,255AntiAlias=1Padding=0,(#Item.FontSize#/2),0,(#Item.FontSize#/-2)DynamicVariables=1Group=Item.#CURRENTSECTION#MouseOverAction=[!ZPos 1]MouseLeaveAction=[!ZPos 2][Item.Icon:L]H=#Item.H#Y=0rX=(#Win.PadX#+#Item.PadX#)FontFace=Segoe Fluent IconsFontSize=#Item.IconSize.L#FontColor=220,230,240; "-1" offset added to padding because windows icons are weirdPadding=0,((#Item.IconSize.L#-1)),0,(-(#Item.IconSize.L#-1))AntiAlias=1Group=Item.#CURRENTSECTION#; SolidColor=255,0,0,100[Item.Icon:R]H=#Item.H#Y=0rX=(#Win.W#-#Win.PadX#-#Item.PadX#-[#CURRENTSECTION#:W])FontFace=Segoe Fluent IconsFontSize=#Item.IconSize.R#FontColor=220,230,240; "-1" offset added to padding because windows icons are weirdPadding=0,((#Item.IconSize.R#-1)),0,(-(#Item.IconSize.R#-1))AntiAlias=1Group=Item.#CURRENTSECTION#DynamicVariables=1Text=[\xe76c]; SolidColor=255,0,0,100[Item.Div.Measure]Measure=CalcFormula=0[Item.Div]MeasureName=Item.Div.MeasureX=#Win.PadX#Y=0RH=#Item.H#W=(#Win.W# - #Win.PadX#*2)Padding=0,((#Item.H#+1)/-2),0,(((#Item.H#-2)/2)-#Win.PadY#)LineCount=1LineColor=255,255,255,31AntiAlias=1; SolidColor=255,0,0,100
.Ini file utilizing meters

Code:

[Rainmeter]@include=MenuItemStyle.inc[Variables]Win.H=((#Item.H#*8)+(#Win.PadY#*7))Ctx.CursorX=0Ctx.CursorY=0Ctx.TargSkinConfig=0Ctx.TargFile=0Ctx.SkinW=0Ctx.SkinH=0Ctx.SkinX=0Ctx.SkinY=0@include2=MenuItemStyle.inc; ------------------------------------------------------------; MENU ITEMS; ------------------------------------------------------------[Unload.Box]Meter=ShapeMeterStyle=Item.Box | Unload:Exe[Unload.Text]Meter=StringMeterStyle=Item.TextText=Unload; Container=Unload.BoxToolTipText=Unload the current skin[Unload.Icon:L]Meter=StringMeterStyle=Item.Icon:LText=[\xe8bb][Refresh.Box]Meter=ShapeMeterStyle=Item.Box | Refresh:Exe[Refresh.Text]Meter=StringMeterStyle=Item.TextText=RefreshToolTipText=Refresh the current skin[Refresh.Icon:L]Meter=StringMeterStyle=Item.Icon:LText=[\xe72c][ZPos.Box]Meter=ShapeMeterStyle=Item.Box | ZPos:Exe[ZPos.Text]Meter=StringMeterStyle=Item.TextText=LayerToolTipText=Change the Z-Position of the current skin.[ZPos.Icon:L]Meter=StringMeterStyle=Item.Icon:LText=[\xe81e][ZPos.Icon:R]Meter=StringMeterStyle=Item.Icon:RText=[\xe76c][Position.Box]Meter=ShapeMeterStyle=Item.Box | Position:Exe[Position.Text]Meter=StringMeterStyle=Item.TextText=AlignToolTipText=Align the current skin on your screen[Position.Icon:L]Meter=StringMeterStyle=Item.Icon:LText=[\xe744][Position.Icon:R]Meter=StringMeterStyle=Item.Icon:RText=[\xe76c][Div1]Meter=LineMeterStyle=Item.Div[Variants.Box]Meter=ShapeMeterStyle=Item.Box | Variants:Exe[Variants.Text]Meter=StringMeterStyle=Item.TextText=VariantsToolTipText=View variants of the current skin[Variants.Icon:L]Meter=StringMeterStyle=Item.Icon:LText=[\xe71d][Variants.Icon:R]Meter=StringMeterStyle=Item.Icon:RText=[\xe76c][RainmeterActions.Box]Meter=ShapeMeterStyle=Item.Box | RainmeterActions:Exe[RainmeterActions.Text]Meter=StringMeterStyle=Item.TextText=Rainmeter ActionsToolTipText=View Rainmeter actions for the current skin[RainmeterActions.Icon:L]Meter=StringMeterStyle=Item.Icon:LText=[\xeb42][RainmeterActions.Icon:R]Meter=StringMeterStyle=Item.Icon:RText=[\xe76c][RefreshApp]Meter=ShapeMeterStyle=Item.Box | RefreshApp:Exe[RefreshApp.Text]Meter=StringMeterStyle=Item.TextText=Reload RainmeterToolTipText=Full reload of the Rainmeter app[RefreshApp.Icon:L]Meter=StringMeterStyle=Item.Icon:LText=[\xe7e8]
My method at the moment is to set the height of Item.Text to be the same as its Box. The I use padding to pisition it vertically centered. It works, but only if the font sizes are 11 or 10 (this works best). For bigger font sizes, the text seems to shift downwards a little more. This is the same for the Item.Icon:L / R meterstyles.

Looks something like this (fontsize: 18):
Image

Compared to a set fontsize of 11:
Image

The difference could either mean that the text isnt actually centered, and just looks like it, or it's a sizing issue. (im really not sure myself)

Here's the font for the Icons used (you only need to download it if you're in Windows10. it's included with windows 11): https://learn.microsoft.com/en-us/windows/apps/design/downloads/#fonts:~:text=Segoe%20UI%20Variable-,Segoe%20Fluent%20Icons,-Segoe%20UI

I tried to simplify the code as much as possible but there may still be things from my original code. I need a better way to position the text centered which doesnt comprimise the position of the rest of the options. (Using y values and StringAlign options causes various issues which is why im using padding in the first place). I hope this is clear enough, if not, I'll create a full skin so you can download it and test for yourself.

Help is much appreciated! :pray:

Statistics: Posted by Hazrd — Yesterday, 9:49 am



Viewing all articles
Browse latest Browse all 1056

Trending Articles