It is currently March 27th, 2023, 11:29 am

Align Clock Skin horizontal by it :

Get help with creating, editing & fixing problems with skins
deadeye
Posts: 5
Joined: March 14th, 2023, 10:38 am

Align Clock Skin horizontal by it :

Post by deadeye »

Hello,

I'm using striped down version of the Simple Clock 2.0 skin in my rainmeter setup. This is a clock skin that shows a regular digital clock like 12:36.
Now it would like this clock to be centered on my display by the : since the lenght of the clock changes over time 11:11 is "shorter" than 12:36.
It should only be centered horizontal. The vertical postion should be free to choose.

How can I archive that?

Here is the stripped down code of the skin

Code: Select all

[Rainmeter]
Update=1000
AccurateText=1
SolidColor=0,0,0,1

[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.6

;clock formart :    I for 12hr    H for 24hr
cf=H

;================================================================================================
;Do not touch this part (unless u know what u r doing ;) )

Font=Google Sans
Fsize = (#Scale#*60)
subtextsize=12
padding=(6*#Scale#)

;===============================MAIN CODE==============================

[MeasureTime]
Measure=Time
Format=%#cf#:%M

[MeasureDate]
Measure=Time
Format=%#d %B, %Y
FormatLocale=Local


[Clock]
Meter=String
MeasureName=MeasureTime
H=(#Fsize# + (28*#Scale#))
FontSize=#Fsize#
FontFace=#Font#
AntiAlias=1
FontColor=#Color#
DynamicVariables=1
Text="%1"


[Date]
Meter=String
MeasureName=MeasureDate
X=([Clock:X] + ([Clock:W])/2)
Y=([Clock:Y] - (5*#Scale#))
H=(#Fsize# + 5)
FontSize=(#subtextsize#*#Scale#)
FontFace=#Font#
AntiAlias=1
StringAlign=Center
FontWeight=800
DynamicVariables=1
FontColor=#Color#
Text="%1"
User avatar
CodeCode
Posts: 1154
Joined: September 7th, 2020, 2:24 pm
Location: QLD, Australia

Re: Align Clock Skin horizontal by it :

Post by CodeCode »

All of the text meters that take their text from your time measures should be set StringAlign=Cerntercenter

So if they are set to StringAlign:Left thay will have to be adjusted to compensate.

However, your main issue is that the strings have different widths: 1:1:1 or 12:12:12. so using each string for hh:mm:ss will allow you to keep them centered and the : will look more like it is staying still.

Hope that helps.
ƈǟռ'ȶ ʄɨӼ ɨȶ ɨʄ ɨȶ ǟɨռ'ȶ ɮʀօӄɛ - ʊռʟɛֆֆ ɨȶ ɨֆ ɨռ ƈօɖɛ.
deadeye
Posts: 5
Joined: March 14th, 2023, 10:38 am

Re: Align Clock Skin horizontal by it :

Post by deadeye »

Hmm not the perfect solution but close.
What could possible be help would be something like this

cut the time into 3 strings
hours
:
minutes

use the : as reference. align hours to the left, minutes to the right and have both placed in reference to the :
Then the clock should always be centered with the : in the screen middle, right?
User avatar
balala
Rainmeter Sage
Posts: 15069
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Align Clock Skin horizontal by it :

Post by balala »

deadeye wrote: March 14th, 2023, 3:36 pm What could possible be help would be something like this

cut the time into 3 strings
hours
:
minutes

use the : as reference. align hours to the left, minutes to the right and have both placed in reference to the :
Then the clock should always be centered with the : in the screen middle, right?
For this you have to do a more things, namely:
  • Replace the [MeasureTime] measure (which returns the time) with the following two measures, first returning the hour and the second returning the minutes:

    Code: Select all

    [MeasureTimeH]
    Measure=Time
    Format=%#cf#
    
    [MeasureTimeM]
    Measure=Time
    Format=%M
  • Replace the [Clock] meter (which shows the time) with the following three meters (make sure not to alter the order of these meters, because this is extremely important):

    Code: Select all

    [ClockColon]
    Meter=String
    X=(83*#Scale#)
    H=(#Fsize# + (28*#Scale#))
    StringAlign=Center
    FontSize=#Fsize#
    FontFace=#Font#
    AntiAlias=1
    FontColor=#Color#
    DynamicVariables=1
    Text=:
    
    [ClockH]
    Meter=String
    MeasureName=MeasureTimeH
    X=(-22*#Scale#)R
    H=(#Fsize# + (28*#Scale#))
    StringAlign=Right
    FontSize=#Fsize#
    FontFace=#Font#
    AntiAlias=1
    FontColor=#Color#
    DynamicVariables=1
    Text=%1
    
    [ClockM]
    Meter=String
    MeasureName=MeasureTimeM
    X=(13*#Scale#)r
    H=(#Fsize# + (28*#Scale#))
    StringAlign=Left
    FontSize=#Fsize#
    FontFace=#Font#
    AntiAlias=1
    FontColor=#Color#
    DynamicVariables=1
    Text=%1
    As you asked for, these three meters are showing in order:
    • The colon ([ClockColon])
    • Hours ([ClockH])
    • Obviously, the minutes ([ClockM])
    See the alignment of these meters. The first one ([ClockColon]) is aligned to center, the second ([ClockH]), which shows the hour, is aligned to right (so its right side is near the colon), while the third one ([ClockM]) is aligned to left (to get the left side of the number of minutes on position). This is how all these meters are kept in place.
  • Finally to get the date positioned on the same position as previously, alter the X and Y options of the [Date] meter:

    Code: Select all

    [Date]
    ...
    X=([ClockColon:X] + ([ClockColon:W])/2)
    Y=([ClockColon:Y] - (5*#Scale#))
    ...
    This is also needed due to the fact that the [Clock] meter, which originaly has been used into these options, doesn't exist anymore.
Please try out the above updates of your code and let me know if did help.
deadeye
Posts: 5
Joined: March 14th, 2023, 10:38 am

Re: Align Clock Skin horizontal by it :

Post by deadeye »

Hello Balala,

first of all thank you for the very detailed answer and the code you have written. Unfortunately it does not work correctly. I have placed the clock on the left side of my screen and this is what happens with the next minute update
clock_error.png
the skin has not moved to the center of the screen but as you can see it is somehow cut off now.
You do not have the required permissions to view the files attached to this post.
User avatar
balala
Rainmeter Sage
Posts: 15069
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Align Clock Skin horizontal by it :

Post by balala »

deadeye wrote: March 15th, 2023, 12:55 pm first of all thank you for the very detailed answer and the code you have written. Unfortunately it does not work correctly. I have placed the clock on the left side of my screen and this is what happens with the next minute update
First of all, I'm surprised not about the cut of the right side of the skin, but rather by the cut of its upper edge. This is weird. The following solutions will try to fix the cut of the right side, the cut of the upper side will be fixed on a next step.
So, to fix the cut of the right side, for first please try adding a DynamicWindowSize=1 option to the [Rainmeter] section.
If this doesn't help, remove the above option and set a static but enough large area for the skin, by adding the following two options to the same [Rainmeter] section:

Code: Select all

[Rainmeter]
...
SkinWidth=(180*#Scale#)
SkinHeight=(90*#Scale#)
These values are right for the font I am using, with the values of the altered X and Y options. Looking to your screenshot, I realized that these X and Y values are not the best either. This is caused by the fact that I don't have the Google Sans font you're using into the two String meters of your code, [Clock] and [Date]. As such, all these values (the SkinWidth, the SkinHeight and the X and Y options of the String meters) should require some adjustments. I hope you can find some proper values at least for the SkinWidth and SkinHeight. In any case, take care to set the Scale variable to Scale=1 (this is extremely important, don't forget to do this) in the [Variables] section before starting to adjust the size. When you found the best values for the SkinWidth and SkinHeight, obviously you can set back the Scale variable to whatever value you want (Scale=1.6 for instance, as you had it in the posted code).
If this doesn't help either, check please if the Google Sans font resides in the @Resources\Fonts folder. If it does, pack please the whole config (the first folder in the Skins folder, which contains the file having the posted code) and upload the package here. If on the other hand, the font is installed to your computer, upload the font's file or post a link where I can download that font.
Having the font will be able to advice you better.
User avatar
CodeCode
Posts: 1154
Joined: September 7th, 2020, 2:24 pm
Location: QLD, Australia

Re: Align Clock Skin horizontal by it :

Post by CodeCode »

Another way to go would be to use the 24 hour clock. The caveat is that the digit 1 would be less widwe than every other number.

SO what balala said was just what I was trying to convey - independently displaying the HH and MM and SS on separate text meters. Centered so that the also independent text meters for the : would remain static.

The caveat here is the same - the 1 would be less wide than every other number.

I hope these tips prove helpful in your tweaking the clock skin you started with and hoped to end up with your special idea/s.
ƈǟռ'ȶ ʄɨӼ ɨȶ ɨʄ ɨȶ ǟɨռ'ȶ ɮʀօӄɛ - ʊռʟɛֆֆ ɨȶ ɨֆ ɨռ ƈօɖɛ.
User avatar
balala
Rainmeter Sage
Posts: 15069
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Align Clock Skin horizontal by it :

Post by balala »

CodeCode wrote: March 15th, 2023, 10:54 pm Another way to go would be to use the 24 hour clock. The caveat is that the digit 1 would be less widwe than every other number.
Did you mean 12-hour clock? Because based on deadeye's screenshot, he is already using the clock as a 24-hour clock.
deadeye
Posts: 5
Joined: March 14th, 2023, 10:38 am

Re: Align Clock Skin horizontal by it :

Post by deadeye »

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
clock_error.png
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.
Enclosed the hole skin with the fonts
Simple Clock 2.0.zip
The modified skin is under new variant - style1
You do not have the required permissions to view the files attached to this post.
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5038
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: Align Clock Skin horizontal by it :

Post by eclectic-tech »

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.