It is currently March 28th, 2024, 11:37 pm

How to properly Center a Skin?

Get help with creating, editing & fixing problems with skins
Toku
Posts: 8
Joined: April 30th, 2016, 7:55 pm

How to properly Center a Skin?

Post by Toku »

Currently using my own Spotify skin, and trying to properly and automatically Center my Skin, is my code below correct?

(My monitor resolution is 2560x1440)

Code: Select all

[MeasureArtist]
Measure=Plugin
Plugin=SpotifyPlugin.dll
Type=ArtistName

[MeasureTitle]
Measure=Plugin
Plugin=SpotifyPlugin.dll
Type=TrackName

[Text]
Meter=STRING
MeasureName=MeasureArtist
MeasureName2=MeasureTitle
FontFace=TeXGyreHeros
FontSize=12
FontColor=ffffff
StringStyle=bold
StringAlign=Center
StringCase=Upper
X=1280
Y=15
Width=2560
AntiAlias=2
ClipString=2
Text="%1 - %2"
DynamicWindowSize=1
User avatar
ikarus1969
Posts: 571
Joined: February 28th, 2011, 3:20 pm
Location: Vienna, Austria

Re: How to properly Center a Skin?

Post by ikarus1969 »

Hi Toku!

2 things:
  1. DynamicWindowSize is an option for the "[Rainmeter]"-section only. Please put it there; otherwise it won't have any effect
  2. If it's only about centering text i would do X=(#WORKAREAWIDTH# / 2), Y=(#WORKAREAHEIGHT# / 2) and StringAlign=CENTERCENTER on the String-meter
User avatar
FreeRaider
Posts: 826
Joined: November 20th, 2012, 11:58 pm

Re: How to properly Center a Skin?

Post by FreeRaider »

Another solution (if you have only that "text" meter):

Code: Select all

[Text]
Meter=STRING
MeasureName=MeasureArtist
MeasureName2=MeasureTitle
FontFace=TeXGyreHeros
FontSize=12
FontColor=ffffff
StringStyle=bold
StringAlign=Left
StringCase=Upper
X=( ( #WORKAREAWIDTH# - [Text:W] ) / 2 ) 
Y=( ( #WORKAREAHEIGHT#  - [Text:H] ) / 2 )
AntiAlias=1
ClipString=2
Text="%1 - %2"
DynamicVariables=1
Be careful about ClipString=2: read this https://docs.rainmeter.net/manual/meters/string/#ClipString

I hope this helps you
User avatar
jsmorley
Developer
Posts: 22628
Joined: April 19th, 2009, 11:02 pm
Location: Fort Hunt, Virginia, USA

Re: How to properly Center a Skin?

Post by jsmorley »

Are you sure you guys want to center a skin on the screen by just making the skin gigantic using X and Y to position some meter(s)?

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1
OnRefreshAction=[!Move (#SCREENAREAWIDTH#/2-(#SkinW#/2)) (#SCREENAREAHEIGHT#/2-(#SkinH#/2))]

[Variables]
SkinW=400
SkinH=200

[MeterBackground]
Meter=Image
W=400
H=200
SolidColor=47,47,47,255

[MeterOne]
Meter=String
X=10
Y=10
StringAlign=Left
FontSize=13
FontColor=255,255,255,255
AntiAlias=1
Text=I'm left aligned

[MeterTwo]
Meter=String
X=390
Y=170
StringAlign=Right
FontSize=13
FontColor=255,255,255,255
AntiAlias=1
Text=I'm right aligned

[MeterThree]
Meter=String
X=200
Y=100
StringAlign=CenterCenter
FontSize=13
FontColor=255,255,255,255
AntiAlias=1
Text=I'm center aligned
2.png
Meters are positioned relative to the skin, not the screen. Center the skin, and you won't have to do anything out of the ordinary with the meters.

That approach is predicated on knowing the width and height of the skin of course. If you don't, then you might look at something like:

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1
AccurateText=1

[MeasureCenterWidth]
Measure=Calc
Formula=(#SCREENAREAWIDTH#/2-(#CURRENTCONFIGWIDTH#/2))
DynamicVariables=1

[MeasureCenterHeight]
Measure=Calc
Formula=(#SCREENAREAHEIGHT#/2-(#CURRENTCONFIGHEIGHT#/2))
DynamicVariables=1

[MeasureCenterSkin]
Measure=Calc
Formula=MeasureCenterWidth + MeasureCenterHeight
IfCondition=MeasureCenterSkin > 0
IfTrueAction=[!Move "[MeasureCenterWidth]" "[MeasureCenterHeight]"]
OnChangeAction=[!Move "[MeasureCenterWidth]" "[MeasureCenterHeight]"]

[MeterText]
Meter=String
X=0
Y=0
StringAlign=Left
FontSize=25
FontColor=255,255,255,255
SolidColor=47,47,47,255
Padding=5,5,5,5
AntiAlias=1
Text=I'm a centered string
You do not have the required permissions to view the files attached to this post.
User avatar
ikarus1969
Posts: 571
Joined: February 28th, 2011, 3:20 pm
Location: Vienna, Austria

Re: How to properly Center a Skin?

Post by ikarus1969 »

jsmorley wrote:Are you sure you guys want to center a skin on the screen by just making the skin gigantic using X and Y to position some meter(s)?
Well...no. :?

Meters are positioned relative to the skin, not the screen.
Meters are positioned relative to the skin, not the screen.
Meters are positioned relative to the skin, not the screen.
Meters are positioned relative to the skin, not the screen.

Meters are positioned relative to the skin, not the screen.
...
Another 100 times and then i hopefully will remember that :)

Thank you!
ThePocketGamer
Posts: 5
Joined: July 22nd, 2018, 9:47 am

Re: How to properly Center a Skin?

Post by ThePocketGamer »

I'm probably way to late on this, but does somebody know how to "center"(/position) the Skin "Cleartext" on every refresh?
I tried the dynamic way from jsmorley after editing it to fit my needs, but in this way it won't center after the song changes, because the width of the skin doesn't change (I think).
My goal is to position the skin at about the position where it is in the screenshot when the song changes/refreshes.

Image
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: How to properly Center a Skin?

Post by balala »

ThePocketGamer wrote:I tried the dynamic way from jsmorley after editing it to fit my needs, but in this way it won't center after the song changes, because the width of the skin doesn't change (I think).
But I think it should have to change, since the title and / or the artist change, along with the length of these names.
So right now I didn't read again jsmorley's reply, but I'd recommend the following solution:

Code: Select all

[MeasurePlayer]
Measure=NowPlaying
PlayerName=ADD-THE-USED-PLAYER-HERE
PlayerType=TITLE
OnUpdateAction=[!Move "((#SCREENAREAWIDTH#-#CURRENTCONFIGWIDTH#)/2)" "((#SCREENAREAHEIGHT#-#CURRENTCONFIGHEIGHT#)/2)"]
DynamicVariables=1

[MeasureArtist]
Measure=NowPlaying
PlayerName=[MeasurePlayer]
PlayerType=ARTIST
The most important option in the above measures is the OnUpdateAction, added here to the [MeasurePlayer] measure. You should have to add a this kind of option to the measure which returns the title, whatever is it named in your code.
The above OnUpdateAction option repositions the skin both horizontally and vertically. If you want to move it just horizontally, then replace the second parameter of the !Move bang with the needed value. Eg the OnUpdateAction=[!Move "((#SCREENAREAWIDTH#-#CURRENTCONFIGWIDTH#)/2)" "100"] option will center the skin horizontally, but vertically it moves the skin to 100 pixels below the upper edge of the screen.
ThePocketGamer
Posts: 5
Joined: July 22nd, 2018, 9:47 am

Re: How to properly Center a Skin?

Post by ThePocketGamer »

balala wrote: So right now I didn't read again jsmorley's reply, but I'd recommend the following solution: ...
I'm either way too inexperienced or its not working (99,9% on me xd).
It's shakey and not centered for me.

Animated Screenshot:
https://i.gyazo.com/8243c20df63dab70e42855b3fecaeb0e.mp4

Here is what I used from your solution:

Code: Select all

[MeasurePlayer]
Measure=NowPlaying
;PlayerName=ADD-THE-USED-PLAYER-HERE
;PlayerType=TITLE
OnUpdateAction=[!Move "((#SCREENAREAWIDTH#-#CURRENTCONFIGWIDTH#)/2)" 810"]
DynamicVariables=1
And thats the full code(added because it might be useful, not sure though):

Code: Select all

[Rainmeter]
Update=1000
MouseOverAction=[!ShowMeterGroup Hover][!ShowMeterGroup #stowAwayName#][!UpdateMeter *][!Redraw]
MouseLeaveAction=[!HideMeterGroup Hover][!HideMeterGroup #stowAwayName#][!UpdateMeter *][!Redraw]
AccurateText=1
DynamicWindowSize=1
SkinHeight=(#skinSize#*0.25)

[MeasurePlayer]
Measure=NowPlaying
OnUpdateAction=[!Move "((#SCREENAREAWIDTH#-#CURRENTCONFIGWIDTH#)/2)" 810"]
DynamicVariables=1


ContextTitle=Open Settings panel
ContextAction=!ActivateConfig "Cleartext\Settings"
ContextTitle2=Use Cleartext Pure
ContextAction2=!ActivateConfig "Cleartext"

[Metadata]
Name=Cleartext
Author=Redsaph
Description=Displays track information from various media players.
Version=5.0.2
License=Creative Commons BY-NC-SA 3.0

[Variables]
@include=#@#base.ini
currentlySetAlign=right



; STYLES ==========================================
[styleTextControls]
FontFace=#controlsFont#
FontSize=(#skinSize#*0.027)
AntiAlias=1
FontColor=#translucent#
StringAlign=#interfaceTextAlignment#
DynamicVariables=1
Hidden=1
Group=Hover | Visible
MouseActionCursor=1

[styleTextMini]
FontFace=#controlsFont#
FontSize=(#skinSize#*0.0175)
AntiAlias=1
FontColor=#opaque#
StringAlign=#interfaceTextAlignment#
DynamicVariables=1
Hidden=1
Group=Hover | Visible

[styleTextMajor]
H=(#skinSize#*0.085)
FontSize=(#skinSize#*0.0625)
FontColor=#opaque#
AntiAlias=1
Group=Visible

; =================================================
; Meters

[LuaSettings]
Measure=Script
ScriptFile=#@#settings.lua

[mBottomTextWidth]
Measure=Calc
Formula=[BottomText:W]
OnChangeAction=[!WriteKeyValue Variables bottomTextWidth [mBottomTextWidth] "#@#variables.inc"]
DynamicVariables=1
Group=AlignmentMeasure

[mTrackChange]
Measure=Calc
Formula=mProgress#MusicSwitch#P
IfCondition=(#alignRight# = 1) && (([mTrackChange] > 0) && ([mTrackChange] < 00.5))
IfTrueAction=[!UpdateMeasureGroup AlignmentMeasure][!UpdateMeterGroup Visible][!CommandMeasure "LuaSettings" "alignRight()"][!HideMeterGroup #stowAwayName#]
DynamicVariables=1
Group=AlignmentMeasure

[Background]
Meter=Image
X=0
Y=0
W=((#skinSize# > [mBottomTextWidth]) ? (#skinSize#+(#skinSize#*0.35)) : ([mBottomTextWidth]+(#skinSize#*0.35)))
H=(#skinSize#*0.25)
SolidColor=0,0,0,1
DynamicVariables=1
Group=Visible

[UpdateIndicator]
Meter=String
Text=""
StringAlign=#interfaceTextAlignment#
FontSize=(#skinSize#*0.025)
FontColor=220,0,0,255
X=#indicatorPositionHor#
Y=(#currentVersion# < [mVersionEvaluator] ? (#skinSize#*0.09) : #skinSize#)
AntiAlias=1
FontFace=FontAwesome
Hidden=#stowAway#
Group=Stow | Visible
ToolTipText="An update to Cleartext is available."
LeftMouseUpAction=["http://fav.me/d8lh1a9"]
DynamicVariables=1

[ConflictIndicator]
Meter=String
Text=""
StringAlign=#interfaceTextAlignment#
FontSize=(#skinSize#*0.025)
FontColor=220,0,0,255
X=#conflictIndicatorPositionHor#
Y=([mAutoSwitch] = 2 ? (#skinSize#*0.09) : #skinSize#)
AntiAlias=1
FontFace=FontAwesome
Hidden=#stowAway#
Group=Stow | Visible
ToolTipText="Two music players are running. Please close one to continue. If closing does not fix the issue, check if its process is closed in the Task Manager. Refresh the skin afterwards."
DynamicVariables=1

[Now]
Meter=String
Text=Now
StringCase=Upper
StringAlign=#interfaceTextAlignment#
FontSize=(#skinSize#*0.03)
FontColor=#opaque#
X=#nowTextPositionHor#
Y=(#skinSize#*0.09)
AntiAlias=1
FontFace=#controlsFont#
UpdateDivider=-1
Hidden=#stowAway#
Group=Stow | Visible

[Playing]
Meter=String
Text=Playing
StringCase=Upper
StringAlign=#interfaceTextAlignment#
FontSize=(#skinSize#*0.03)
FontColor=#opaque#
X=r
Y=(#skinSize#*0.125)
AntiAlias=1
FontFace=#controlsFont#
UpdateDivider=-1
Hidden=#stowAway#
Group=Stow | Visible

[Hairline]
Meter=Bar
MeasureName=mProgress#MusicSwitch#P
X=#hairlinePositionHor#
W=(#skinSize#*0.005)
H=(#skinSize#*0.25)
BarColor=#over#
SolidColor=#opaque#
BarOrientation=Vertical
ToolTipText="Progress Bar"
UpdateDivider=4
Hidden=#stowAway#
Group=Stow | Visible

[TopText]
Meter=String
MeterStyle=styleTextMajor
MeasureName=#topText##MusicSwitch#
X=#topTextPositionHor#
Y=(#skinSize#*0.14)
FontFace=#thinFont#
Text="%1" 
StringAlign=#mediaTextAlignment#

[BottomText]
Meter=String 
MeterStyle=styleTextMajor
MeasureName=#bottomText##MusicSwitch#
X=r
Y=R
FontFace=#thickFont#
Text="%1" 
StringAlign=#mediaTextAlignment#

[Time]
Meter=STRING
MeterStyle=styleTextMini
MeasureName=mPosition#MusicSwitch#
MeasureName2=mLength#MusicSwitch#
X=#nowTextPositionHor#
Y=(#skinSize#*0.02)
Text="%1/%2"
UpdateDivider=4

[Progress]
Meter=String
MeterStyle=styleTextMini
MeasureName=mProgress#MusicSwitch#W
X=r
Y=(#skinSize#*0.0465)
Text="%1%"

[Play]
MeterStyle=styleTextControls
Meter=String
MeasureName=mStateButton#MusicSwitch#
X=#playCtrlPositionHor#
Y=(#skinSize#*0.2)
Text="%1"
LeftMouseUpAction=!CommandMeasure "m#playerController#" "PlayPause"
UpdateDivider=4
SolidColor=0,0,0,1

[Previous]
MeterStyle=styleTextControls
Meter=String
X=#nowTextPositionHor#
Y=(#skinSize#*0.17)
Text="previous"
LeftMouseUpAction=!CommandMeasure "m#playerController#" "Previous"
UpdateDivider=-1

[Next]
MeterStyle=styleTextControls
Meter=String
X=#nowTextPositionHor#
Y=(#skinSize#*0.2)
Text="next"
LeftMouseUpAction=!CommandMeasure "m#playerController#" "Next"
UpdateDivider=-1
SolidColor=0,0,0,1

[Settings]
Meter=String
MeterStyle=styleTextMini
FontColor=#translucent#
X=#settingsTextPositionHor#
Y=(#skinSize#*0.0465)
Text="settings"
MouseActionCursor=1
LeftMouseUpAction=!ActivateConfig "Cleartext\Settings"
UpdateDivider=-1

User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: How to properly Center a Skin?

Post by balala »

ThePocketGamer wrote:Here is what I used from your solution:

Code: Select all

[MeasurePlayer]
Measure=NowPlaying
;PlayerName=ADD-THE-USED-PLAYER-HERE
;PlayerType=TITLE
OnUpdateAction=[!Move "((#SCREENAREAWIDTH#-#CURRENTCONFIGWIDTH#)/2)" 810"]
DynamicVariables=1
A NowPlaying measure must have a PlayerName and a PlayerType option. You've commented out both, this way the measure won't work.
Another mistake above is that you've forgot opening the quotation on the 810 value. The OnUpdateAction option should look like: OnUpdateAction=[!Move "((#SCREENAREAWIDTH#-#CURRENTCONFIGWIDTH#)/2)" [color=#FF0000]"[/color]810"].
And one ore: your code uses some files which I don't have. Probably those files would be important.
And I'm also not very sure what meter you would like to center. Please come back with some details.
ThePocketGamer
Posts: 5
Joined: July 22nd, 2018, 9:47 am

Re: How to properly Center a Skin?

Post by ThePocketGamer »

balala wrote:And one ore: your code uses some files which I don't have. Probably those files would be important.
And I'm also not very sure what meter you would like to center. Please come back with some details.
Thats the skin I want to center:
https://www.deviantart.com/redsaph/art/Cleartext-for-Rainmeter-v5-0-2-17-Jun-2018-519796161

I'm on Rainmeter Version: 4.2.0 r3111 64-bit

Image
p.s. thanks alot for using your time trying to help me