It is currently April 18th, 2024, 12:42 pm

Rotating a string meter for a clock

Get help with creating, editing & fixing problems with skins
Derenaya
Posts: 13
Joined: January 7th, 2018, 3:14 am

Rotating a string meter for a clock

Post by Derenaya »

Hello everyone

I had an idea for a clock skin but I've ran into two problems where I'm not sure how to solve or work around them. I'll just start with the first problem since the second one is a consequence of the first one once it has been resolved. Basically I made this minimalistic analogue clock with two images for the pointers. The analogue clock is only there because I like it from a design perspective but since I prefer a digital clock to actually read the time I'd like to add the digital time at the end of each pointer that changes according to their position (see the picture).

So from what I've seen I'd need to make a string to display the time and then rotate it at the end of the pointers of the analogue clock but is this even possible? At least I didn't find another example where this was used and from reading the documentation it doesn't seem possible just using Rainmeter since you can't combine two Meters :???: Would I need a Lua script for that or am I just missing the obvious answer?

Image
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: Rotating a string meter for a clock

Post by ikarus1969 »

As a starting point you can do the following. It envolves just a little bit of trigonometry. The code is just the skin and not the complete structure in a rmskin.

Code: Select all

[Rainmeter]
Update=100
; Update=1000
DynamicWindowSize=1

[MeterBackground}
Meter=Image
W=360
H=360
SolidColor=0,0,0,50
UpdateDivider=-1

[Variables]
ImageWMinutes=240
ImageHMinutes=3
ImageWHours=100
ImageHHours=3

[MeasureTime]
Measure=Time

[MeasureTimeSeconds]
Measure=Time
Format=%S

[MeasureTimeMinutes]
Measure=Time
Format=%M

[MeasureTimeHours]
Measure=Time
Format=%H

[MeasureTimeMinutesDec]
Measure=CALC
Formula=MeasureTimeMinutes + MeasureTimeSeconds / 60


[MeasureTimeHoursDec]
Measure=CALC
Formula=(MeasureTimeHours % 12) + MeasureTimeMinutes / 60 + MeasureTimeSeconds / 3600

[MeasureTimeHoursAngle]
Measure=CALC
Formula=((360 * MeasureTimeHoursDec) / 12) - 90

[MeasureTimeMinutesAngle]
Measure=CALC
Formula=((360 * MeasureTimeMinutes) / 60) - 90



[MeterRotateMinutes]
Meter=Rotator
MeasureName=MeasureTime
ImageName=Pointers\Minutes.png
X=60
Y=60
OffsetX=(#ImageWMinutes# / 2)
OffsetY=(#ImageHMinutes# / 2)
W=(SQRT(#ImageWMinutes# ** 2 + #ImageHMinutes# ** 2))
H=(SQRT(#ImageWMinutes# ** 2 + #ImageHMinutes# ** 2))
StartAngle=4.7123889
RotationAngle=6.2831853
ValueReminder=3600
AntiAlias=1

[MeterRotateHours]
Meter=Rotator
MeasureName=MeasureTime
ImageName=Pointers\Hours.png
X=130
Y=130
OffsetX=(#ImageWHours# / 2)
OffsetY=(#ImageHHours# / 2)
W=(SQRT(#ImageWHours# ** 2 + #ImageHHours# ** 2))
H=(SQRT(#ImageWHours# ** 2 + #ImageHHours# ** 2))
StartAngle=4.7123889
RotationAngle=6.2831853
ValueReminder=43200
AntiAlias=1

[MeterHoursDigital]
Meter=String
MeasureName=MeasureTimeHours
X=(180 + (0.5 * #ImageWHours# + 20) * COS(RAD([MeasureTimeHoursAngle])))
Y=(180 + (0.5 * #ImageWHours# + 20) * SIN(RAD([MeasureTimeHoursAngle])))
InlineSetting= Face  | Arial
InlineSetting2=Size  | 16
InlineSetting3=Color | 232,191,187
StringAlign=CENTERCENTER
AntiAlias=1
DynamicVariables=1

[MeterMinutesDigital]
Meter=String
MeasureName=MeasureTimeMinutes
X=(180 + (0.5 * #ImageWMinutes# + 20) * COS(RAD([MeasureTimeMinutesAngle])))
Y=(180 + (0.5 * #ImageWMinutes# + 20) * SIN(RAD([MeasureTimeMinutesAngle])))
InlineSetting= Face  | Arial
InlineSetting2=Size  | 16
InlineSetting3=Color | 255,255,255
StringAlign=CENTERCENTER
AntiAlias=1
DynamicVariables=1

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

Re: Rotating a string meter for a clock

Post by balala »

ikarus1969 wrote: January 29th, 2023, 5:44 pm As a starting point you can do the following. It envolves just a little bit of trigonometry. The code is just the skin and not the complete structure in a rmskin.
Good solution, but there is a small thing which should be improved. I'd replace the MeasureTimeMinutes measure name in the Formula option of the [MeasureTimeMinutesAngle] measure by MeasureTimeMinutesDec:

Code: Select all

[MeasureTimeMinutesAngle]
Measure=CALC
Formula=((360 * MeasureTimeMinutesDec) / 60) - 90
The movement of the "digital minutes" improves with this trick.

And one more, however this is most probably addressed to Derenaya (the OP). why to use such a low Update? The Update of the original skin has been set to Update=50, which means 20 updates per second. In your code ikarus1969, this has been increased to Update=100 (10 updates per second), but even this is a little bit low. The default Update=1000 works well (at least if there isn't something I missed).
Derenaya
Posts: 13
Joined: January 7th, 2018, 3:14 am

Re: Rotating a string meter for a clock

Post by Derenaya »

Thanks a lot ikarus1969 and balala that works (almost) flawless :thumbup: Just on small issue I've spotted. The minute number (obviously) moves on the X and Y-axis instead of a circle which, when staring at it, is pretty noticeable. Is there a way to improve / smooth this? You'd probably need it moving on an actual circular path I'd imagine :???:
And one more, however this is most probably addressed to Derenaya (the OP). why to use such a low Update? The Update of the original skin has been set to Update=50, which means 20 updates per second. In your code ikarus1969, this has been increased to Update=100 (10 updates per second), but even this is a little bit low. The default Update=1000 works well (at least if there isn't something I missed).
Uh, no special (or good) reason. I just used this skin here as a base / start an then forgot to change it :D
https://forum.rainmeter.net/viewtopic.php?p=85585#p85585

Code: Select all

[Rainmeter]
Update=100
DynamicWindowSize=1

[MeterBackground}
Meter=Image
W=360
H=360
SolidColor=0,0,0,50
UpdateDivider=-1

[Variables]
ImageWMinutes=240
ImageHMinutes=4
ImageWHours=100
ImageHHours=4

[MeasureTime]
Measure=Time

[MeasureTimeSeconds]
Measure=Time
Format=%S

[MeasureTimeMinutes]
Measure=Time
Format=%M

[MeasureTimeHours]
Measure=Time
Format=%H

[MeasureTimeMinutesDec]
Measure=CALC
Formula=MeasureTimeMinutes + MeasureTimeSeconds / 60

[MeasureTimeHoursDec]
Measure=CALC
Formula=(MeasureTimeHours % 12) + MeasureTimeMinutes / 60 + MeasureTimeSeconds / 3600

[MeasureTimeHoursAngle]
Measure=CALC
Formula=((360 * MeasureTimeHoursDec) / 12) - 90

[MeasureTimeMinutesAngle]
Measure=CALC
Formula=((360 * MeasureTimeMinutesDec) / 60) - 90

[MeterRotateMinutes]
Meter=Rotator
MeasureName=MeasureTime
ImageName=Pointers\Minutes.png
X=60
Y=60
OffsetX=(#ImageWMinutes# / 2)
OffsetY=(#ImageHMinutes# / 2)
W=(SQRT(#ImageWMinutes# ** 2 + #ImageHMinutes# ** 2))
H=(SQRT(#ImageWMinutes# ** 2 + #ImageHMinutes# ** 2))
StartAngle=4.7123889
RotationAngle=6.2831853
ValueReminder=3600
AntiAlias=1

[MeterRotateHours]
Meter=Rotator
MeasureName=MeasureTime
ImageName=Pointers\Hours.png
X=130
Y=130
OffsetX=(#ImageWHours# / 2)
OffsetY=(#ImageHHours# / 2)
W=(SQRT(#ImageWHours# ** 2 + #ImageHHours# ** 2))
H=(SQRT(#ImageWHours# ** 2 + #ImageHHours# ** 2))
StartAngle=4.7123889
RotationAngle=6.2831853
ValueReminder=43200
AntiAlias=1

[MeterHoursDigital]
Meter=String
MeasureName=MeasureTimeHours
X=(180 + (0.5 * #ImageWHours# + 20) * COS(RAD([MeasureTimeHoursAngle])))
Y=(180 + (0.5 * #ImageWHours# + 20) * SIN(RAD([MeasureTimeHoursAngle])))
InlineSetting= Face  | Arial
InlineSetting2=Size  | 16
InlineSetting3=Color | 232,191,187
StringAlign=CENTERCENTER
AntiAlias=1
DynamicVariables=1

[MeterMinutesDigital]
Meter=String
MeasureName=MeasureTimeMinutes
X=(180 + (0.5 * #ImageWMinutes# + 20) * COS(RAD([MeasureTimeMinutesAngle])))
Y=(180 + (0.5 * #ImageWMinutes# + 20) * SIN(RAD([MeasureTimeMinutesAngle])))
InlineSetting= Face  | Arial
InlineSetting2=Size  | 16
InlineSetting3=Color | 255,255,255
StringAlign=CENTERCENTER
AntiAlias=1
DynamicVariables=1
User avatar
balala
Rainmeter Sage
Posts: 16143
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: Rotating a string meter for a clock

Post by balala »

Derenaya wrote: January 29th, 2023, 7:28 pm Just on small issue I've spotted. The minute number (obviously) moves on the X and Y-axis instead of a circle which, when staring at it, is pretty noticeable. Is there a way to improve / smooth this? You'd probably need it moving on an actual circular path I'd imagine :???:
No, at least as far as I can tell, there is not too much to do about this. In fact ikarus1969's code moves the strings on a circle (by using the cosinus and sinus functions, they are in fact moving on a circle). However due to the fact that String meters can have only positions described by integers (so their X and Y values have to be integers), the position of the meter is changing in steps, causing the described issue. I don't see at the moment a solution for this.
Sorry, but maybe someone else will have a better idea...
Derenaya wrote: January 29th, 2023, 7:28 pm Uh, no special (or good) reason. I just used this skin here as a base / start an then forgot to change it :D
https://forum.rainmeter.net/viewtopic.php?p=85585#p85585
Yep, but that skin has to have such a low Update, because its seconds pointer is moving continuously. There is nothing in your skin which could require lower update value than the default Update=1000. Recommend this, because this way you can reduce the load of CPU (even if for this code, it can't be too huge, even not with the original Update=50).
Derenaya
Posts: 13
Joined: January 7th, 2018, 3:14 am

Re: Rotating a string meter for a clock

Post by Derenaya »

No, at least as far as I can tell, there is not too much to do about this. In fact ikarus1969's code moves the strings on a circle (by using the cosinus and sinus functions, they are in fact moving on a circle). However due to the fact that String meters can have only positions described by integers (so their X and Y values have to be integers), the position of the meter is changing in steps, causing the described issue. I don't see at the moment a solution for this.
Okay, no big deal as it's really not noticeable outside of staring at it.
Yep, but that skin has to have such a low Update, because its seconds pointer is moving continuously. There is nothing in your skin which could require lower update value than the default Update=1000. Recommend this, because this way you can reduce the load of CPU (even if for this code, it can't be too huge, even not with the original Update=50).
Yeah I changed it back :thumbup:


Also then for my second problem. Currently if the pointers are overlapping the numbers are in front of the pointers for which I was thinking of calculating when this will happen to then swap out the image of the minutes pointer with one that has a gap there as shown in the second picture. Figuring out at which times that will happen isn't that hard but I'm not sure how I'd then implement this or if that's even possible. I was also thinking about detecting overlapping pixels to trigger it but I doubt Rainmeter can do this. :???:

Image
Image

Code: Select all

[Rainmeter]
Update=1000
DynamicWindowSize=1

[MeterBackground}
Meter=Image
W=360
H=360
SolidColor=0,0,0,1
UpdateDivider=-1

[Variables]
ImageWMinutes=240
ImageHMinutes=4
ImageWHours=100
ImageHHours=4

[MeasureTime]
Measure=Time

[MeasureTimeSeconds]
Measure=Time
Format=%S

[MeasureTimeMinutes]
Measure=Time
Format=%M

[MeasureTimeHours]
Measure=Time
Format=%H

[MeasureTimeMinutesDec]
Measure=CALC
Formula=MeasureTimeMinutes + MeasureTimeSeconds / 60

[MeasureTimeHoursDec]
Measure=CALC
Formula=(MeasureTimeHours % 12) + MeasureTimeMinutes / 60 + MeasureTimeSeconds / 3600

[MeasureTimeHoursAngle]
Measure=CALC
Formula=((360 * MeasureTimeHoursDec) / 12) - 90

[MeasureTimeMinutesAngle]
Measure=CALC
Formula=((360 * MeasureTimeMinutesDec) / 60) - 90

[MeterRotateMinutes]
Meter=Rotator
MeasureName=MeasureTime
ImageName=Pointers\Minutes.png
X=60
Y=60
OffsetX=(#ImageWMinutes# / 2)
OffsetY=(#ImageHMinutes# / 2)
W=(SQRT(#ImageWMinutes# ** 2 + #ImageHMinutes# ** 2))
H=(SQRT(#ImageWMinutes# ** 2 + #ImageHMinutes# ** 2))
StartAngle=4.7123889
RotationAngle=6.2831853
ValueReminder=3600
AntiAlias=1

[MeterRotateHours]
Meter=Rotator
MeasureName=MeasureTime
ImageName=Pointers\Hours.png
X=130
Y=130
OffsetX=(#ImageWHours# / 2)
OffsetY=(#ImageHHours# / 2)
W=(SQRT(#ImageWHours# ** 2 + #ImageHHours# ** 2))
H=(SQRT(#ImageWHours# ** 2 + #ImageHHours# ** 2))
StartAngle=4.7123889
RotationAngle=6.2831853
ValueReminder=43200
AntiAlias=1

[MeterHoursDigital]
Meter=String
MeasureName=MeasureTimeHours
X=(180 + (0.5 * #ImageWHours# + 20) * COS(RAD([MeasureTimeHoursAngle])))
Y=(180 + (0.5 * #ImageWHours# + 20) * SIN(RAD([MeasureTimeHoursAngle])))
InlineSetting= Face  | Shinrinyoku
InlineSetting2=Size  | 18
InlineSetting3=Color | 232,191,187
StringAlign=CENTERCENTER
AntiAlias=1
DynamicVariables=1

[MeterMinutesDigital]
Meter=String
MeasureName=MeasureTimeMinutes
X=(180 + (0.5 * #ImageWMinutes# + 20) * COS(RAD([MeasureTimeMinutesAngle])))
Y=(180 + (0.5 * #ImageWMinutes# + 20) * SIN(RAD([MeasureTimeMinutesAngle])))
InlineSetting= Face  | Shinrinyoku
InlineSetting2=Size  | 18
InlineSetting3=Color | 255,255,255
StringAlign=CENTERCENTER
AntiAlias=1
DynamicVariables=1

[Middle]
Meter=Image
ImageName=Middle\Circle.png
X=178
Y=178
W=4
H=4
User avatar
ikarus1969
Posts: 571
Joined: February 28th, 2011, 3:20 pm
Location: Vienna, Austria

Re: Rotating a string meter for a clock

Post by ikarus1969 »

Add to your [MeterHoursDigital] or at least to the [MeterMinutesDigital] the following 2 lines:

Code: Select all

Padding=10,8, 10, 4
SolidColor=[please insert the color of your background here; the grey color on the screenshot]
For explanation please read the manual:
Padding: https://docs.rainmeter.net/manual/meters/general-options/#Padding
SolidColor: https://docs.rainmeter.net/manual/meters/general-options/#SolidColor

Short: with Padding you extend the dimensions of the meter and with SolidColor you set the background color of the meter.

Experiment with the values of Padding to match your needs
Derenaya
Posts: 13
Joined: January 7th, 2018, 3:14 am

Re: Rotating a string meter for a clock

Post by Derenaya »

Damn that's actually genius. Thanks a lot, works as I've imagined it :thumbup: