deadeye wrote: ↑March 16th, 2023, 9:48 pm
Well I tried both variants DynamicWindowSize=1 as well as skin width and hight. Now the left side cut of while still a little bit on the top is missing
width cuts the skin from right to left
hight from bottom to top
so none of those commands is solving the cut of parts of the skin.
The modified skin is under new variant - style1
The previous suggestions are all valid options, but the clipping is happening because you did not position the Center X Value of [ClockColon] to leave enough space to the left of it for the hours and set the SkinWidth to twice that value.
You are using a proportional font that will have differing widths for every character.
Let's start by determining positions and size based on Scale=1.0 and a default FontSize.
You have '60' as the default FontSize and are using the [ClockColon] meter as the centering position. This means the X value of [ClockColon] should be roughly twice the FontSize, so set
X=(120*#Scale#) on that meter. This means the SkinWidth should be twice that value;
SkinWidth=(240*#Scale#) in [Rainmeter].
By setting [ClockH] values of
X=[ClockColon:X] and
StringAlign=Right and the [ClockM] values to
X=[ClockColon:XW] and
StringAlign=Left you should get a display that does not clip.
TIP: By holding 'Ctrl+Alt' keys and left click the skin you will shade the entire skin content. You can see how much space is used and adjust the SkinWidth and SkinHeiight values in [Rainmeter] and determine the best value for the colon meter X-position.
Once you have those settings, the clock can be scaled as large or small and will not clip characters.
I usually avoid using relative positioning when creating a scalable skin and for simplfication I removed all Width and Height settings in the string meters; the FontSize will control the size. All you need to do is position the [ClockColon] centered so it allows enough space for the [ClockH] minutes to display in front of it without clipping.
I added a mouse scroll to test different scale values.
Here is your code with suggested values for SkinWidth, SkinHeight, and the center X-value for the [ClockColon] meter.
Code: Select all
[Rainmeter]
Update=1000
AccurateText=1
DynamicWindowSize=1
; Set the width to twice the center X value of the colon meter
SkinWidth=(240*#Scale#)
; Set the height to prevent any clipping at Scale=1
SkinHeight=(100*#Scale#)
; Tests of changing scale effect. Can be commented out if desired
MouseScrollUpAction=[!WriteKeyValue Variables Scale (Clamp(#Scale#+0.1,0.5,5))][!Refresh]
MouseScrollDownAction=[!WriteKeyValue Variables Scale (Clamp(#Scale#-0.1,0.5,5))][!Refresh]
[Metadata]
Name= Simple Clock 2.0
Author=StarLender
Information= A rainmeter skin of digital clock ,date,weather.
Version=v1.0
License=Creative Commons Attribution - Non - Commercial - Share Alike 3.0
[Variables] ; ur configuration part...
@include=#@#variables.inc
;====================SKIN SETTINGS==============================
;primary color of the clock text
Color=0,0,0,255
;size of overall widget
Scale =1.0
;clock formart : I for 12hr H for 24hr
cf=H
;================================================================================================
;Do not touch this part (unless u know what u r doing ;) )
; This is a proportional font, so you must design enough width in your skin to prevent clipping as the letters change
Font=Google Sans
Fsize = (#Scale#*60)
subtextsize=(12*#Scale#)
; padding=(2*#Scale#),0,0,(2*#Scale#)
;===============================MAIN CODE==============================
[MeasureTimeH]
Measure=Time
Format=%#cf#
[MeasureTimeM]
Measure=Time
Format=%M
[MeasureDate]
Measure=Time
Format=%#d %B, %Y
FormatLocale=Local
; Set the X value to a center position that allows room for the preceeding characters
; Set the SkinWidth in [Rainmeter] to twice this X value
; If there is clipping on the sides, increase the X value and update SkinWidth in [Rainmeter]
[ClockColon]
Meter=String
X=(120*#Scale#)
Y=(1*#Scale#)
StringAlign=Center
FontSize=#Fsize#
FontFace=#Font#
AntiAlias=1
FontColor=#Color#
DynamicVariables=1
SolidColor=0,0,0,1
Text=:
[ClockH]
Meter=String
MeasureName=MeasureTimeH
X=[ClockColon:X]
Y=(8*#Scale#)
StringAlign=Right
FontSize=#Fsize#
FontFace=#Font#
AntiAlias=1
FontColor=#Color#
DynamicVariables=1
SolidColor=0,0,0,1
Text=%1
[ClockM]
Meter=String
MeasureName=MeasureTimeM
X=[ClockColon:XW]
Y=(8*#Scale#)
StringAlign=Left
FontSize=#Fsize#
FontFace=#Font#
AntiAlias=1
FontColor=#Color#
DynamicVariables=1
SolidColor=0,0,0,1
Text=%1
[Date]
Meter=String
MeasureName=MeasureDate
X=([ClockColon:X] + ([ClockColon:W])/2)
Y=(1*#Scale#)
FontSize=#subtextsize#
FontFace=#Font#
AntiAlias=1
StringAlign=Center
FontWeight=800
DynamicVariables=1
FontColor=#Color#
SolidColor=0,0,0,1
Text="%1"
clockclip.gif
You do not have the required permissions to view the files attached to this post.