It is currently March 29th, 2024, 5:52 am

I want to flip a clock to look like reflection on water

Get help with creating, editing & fixing problems with skins
Samisnotsad
Posts: 1
Joined: March 15th, 2023, 5:02 am

I want to flip a clock to look like reflection on water

Post by Samisnotsad »

https://forum.rainmeter.net/viewtopic.php?t=13538 I found this thread talking about the same topic and I got that I need to use the transformation matrix but I don't know where that is. "TransformationMatrix=1;0;0;-1;0;250" I got this line but I can't figure out where to put it
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: I want to flip a clock to look like reflection on water

Post by balala »

Samisnotsad wrote: March 15th, 2023, 5:05 am https://forum.rainmeter.net/viewtopic.php?t=13538 I found this thread talking about the same topic and I got that I need to use the transformation matrix but I don't know where that is. "TransformationMatrix=1;0;0;-1;0;250" I got this line but I can't figure out where to put it
The TransformationMatrix option has to be added to a String meter (a meter having a Meter=String option), which shows the time, as is it returned by a Time measure. Most probably you'll want to duplicate the probably already existing String meter, to have a not-reflected meter and another having the desired effect. So, where to use the option depends on many things. The effect is most probably possible, however for first we need to see the code you're using on your skin, so post it please.
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5384
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: I want to flip a clock to look like reflection on water

Post by eclectic-tech »

Samisnotsad wrote: March 15th, 2023, 5:05 am https://forum.rainmeter.net/viewtopic.php?t=13538 I found this thread talking about the same topic and I got that I need to use the transformation matrix but I don't know where that is. "TransformationMatrix=1;0;0;-1;0;250" I got this line but I can't figure out where to put it
Here is an example using TransformationMatrix to flip a string...

Code: Select all

[Rainmeter]
Update=1000
AccurateText=1
; Set this to prevent clipping of the time at the bottom
SkinHeight=280

[Variables]
fontName=SegoeUI
colorText=255,255,255

[measureTime]
Measure=Time
Format=%H:%M:%S

[styleTitle]
StringAlign=Center
StringCase=Upper
StringStyle=Bold
StringEffect=Shadow
FontEffectColor=255,0,0,0
FontFace=#fontName#
FontSize=100
AntiAlias=1

[meterTitle]
Meter=String
MeterStyle=styleTitle
MeasureName=measureTime
X=260
Y=0
FontColor=#ColorText#,200
Text=%1

[meterTitleFlip]
Meter=String
MeterStyle=styleTitle
MeasureName=measureTime
X=260
Y=0
Text=%1
; Set the alpha value to 100 so it looks pale
FontColor=#ColorText#,100
; Set the last value to position this string at the bottom of the upright time: [meterTitle]
TransformationMatrix=1;0;0;-1;0;290

reflecttime.png
You do not have the required permissions to view the files attached to this post.
User avatar
SilverAzide
Rainmeter Sage
Posts: 2588
Joined: March 23rd, 2015, 5:26 pm

Re: I want to flip a clock to look like reflection on water

Post by SilverAzide »

Samisnotsad wrote: March 15th, 2023, 5:05 am https://forum.rainmeter.net/viewtopic.php?t=13538 I found this thread talking about the same topic and I got that I need to use the transformation matrix but I don't know where that is. "TransformationMatrix=1;0;0;-1;0;250" I got this line but I can't figure out where to put it
And in case you are not standing directly in front of the clock... ;-)

Change:

Code: Select all

[Rainmeter]
...
; Set this to prevent clipping of the time at the bottom and right
SkinHeight=280
SkinWidth=550

...

[meterTitleFlip]
...
TransformationMatrix=1;0;(tan(rad(-15)));-1;38;290
Screenshot 2023-03-16 165723.png
(Thanks for the tip, E-T! I don't know the trick to moving the flipped text to offset the 15 degree tilt without hardcoding the offset value. Too much math for my feeble brain, maybe. :-( )
You do not have the required permissions to view the files attached to this post.
Gadgets Wiki GitHub More Gadgets...
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: I want to flip a clock to look like reflection on water

Post by balala »

eclectic-tech wrote: March 16th, 2023, 5:54 pm Here is an example using TransformationMatrix to flip a string...
You probably will hate me if I add once again something to your code, however as a small improvement of your code, let me do this. Since the font used in the String meters (this is set into the [styleTitle] section) of the code is set as a variable (fontName=SegoeUI, set in the [Variables] section), it is normal in my opinion to set the font size same way as a variable, to can easily increase the size of the digits and accordingly the size of the whole clock. But this means that we have to alter more options, on different sections of the code.
Another thing I'd do is a gradient of the color of the flipped meter.
See below the altered options, which are ensure us to can easily set a desired size for the digits. Here is the altered code, which got a fontSize variable, depending on which, the size and position of the meters are set in a way to always keep them on place:

Code: Select all

[Rainmeter]
Update=1000
AccurateText=1
; Set this to prevent clipping of the time at the bottom
SkinHeight=(2.45*#fontSize#)
BackgroundMode=2
SolidColor=0,0,0,1

[Variables]
fontName=SegoeUI
colorText=255,255,255
fontSize=100

[measureTime]
Measure=Time
Format=%H:%M:%S

[styleTitle]
StringAlign=Center
StringCase=Upper
StringStyle=Bold
StringEffect=Shadow
FontEffectColor=255,0,0,0
FontFace=#fontName#
FontSize=#fontSize#
AntiAlias=1

[meterTitle]
Meter=String
MeterStyle=styleTitle
MeasureName=measureTime
X=(2.6*#fontSize#)
Y=0
FontColor=#ColorText#,200
Text=%1

[meterTitleFlip]
Meter=String
MeterStyle=styleTitle
MeasureName=measureTime
X=0r
Y=0
Text=%1
; Set the alpha value to 100 so it looks pale
FontColor=#ColorText#,100
; Set the last value to position this string at the bottom of the upright time: [meterTitle]
TransformationMatrix=1;0;0;-1;0;(2*0.82*[meterTitle:YH])
DynamicVariables=1
InlineSetting=GradientColor | 90 | #colorText#,100 ; 0.0 | #colorText#,0 ; 0.75 | #colorText#,0 ; 1.0
I altered and added the following options:
  • SkinHeight of the [Rainmeter] section.
  • Added the BackgroundMode and SolidColor options to the [Rainmeter] section (to make the skin easier clickable).
  • Added the fontSize variable into the [Variables] section.
  • FontSize of the [styleTitle] section.
  • X of both, the [meterTitle] and [meterTitleFlip] meters.
  • TransformationMatrix of the [meterTitleFlip] meter.
  • Added an InlineSetting option to the [meterTitleFlip] meter.
  • Finally added the DynamicVariables=1 option to the same [meterTitleFlip] meter.
For now the setting of size can be done only manually. No scrolling or other way to set the size on the flight. However this is also possible, if needed.
User avatar
eclectic-tech
Rainmeter Sage
Posts: 5384
Joined: April 12th, 2012, 9:40 pm
Location: Cedar Point, Ohio, USA

Re: I want to flip a clock to look like reflection on water

Post by eclectic-tech »

I have no problem with any changes... nice additions.

I kind of threw this together as an example and wasn't thinking much about optimizing at that time.
Ugh, the Font used should be "Segoe UI", I left out the 'space'... :Whistle

I like the use of the inline gradient on the flipped meter; I have used that method and like the results. :thumbup:
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: I want to flip a clock to look like reflection on water

Post by balala »

eclectic-tech wrote: March 17th, 2023, 5:23 pm I kind of threw this together as an example and wasn't thinking much about optimizing at that time.
Yep, probably it's not even needed in fact.
eclectic-tech wrote: March 17th, 2023, 5:23 pm Ugh, the Font used should be "Segoe UI", I left out the 'space'... :Whistle
And I just took it over and didn't even realize the mistake either. Sorry...
eclectic-tech wrote: March 17th, 2023, 5:23 pm I like the use of the inline gradient on the flipped meter; I have used that method and like the results. :thumbup:
Right, that's a great feature.
User avatar
Yincognito
Rainmeter Sage
Posts: 7029
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: I want to flip a clock to look like reflection on water

Post by Yincognito »

balala wrote: March 17th, 2023, 5:14 pm You probably will hate me if I add once again something to your code, however as a small improvement of your code, let me do this.
It looks cool, I like it too. One observation though, for anyone else reading this (you know this already, of course): the factors used to multiply things in such cases (e.g. 2.45, 2.6, 0.82, etc.) are font dependant, so they will need to be adjusted when using another font.
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
User avatar
Yincognito
Rainmeter Sage
Posts: 7029
Joined: February 27th, 2015, 2:38 pm
Location: Terra Yincognita

Re: I want to flip a clock to look like reflection on water

Post by Yincognito »

SilverAzide wrote: March 16th, 2023, 9:01 pmI don't know the trick to moving the flipped text to offset the 15 degree tilt without hardcoding the offset value.
I believe it's simply the tangent of the opposite skew angle multiplied with the vertical offset, the math seems to check out.

For example, in your code, if you use TransformationMatrix=1;0;(tan(rad(-15)));-1;(tan(rad(15))*144);290 it produces the correct result. It's the opposite skew angle because the vertical flip changes the sign of the angle, and if you move the skin in your top left corner of your screen, take a screenshot and measure the distance from the top of the image (or skin, in this case) to where the original digits end, you'll notice that 144 is precisely that height / offset. Unfortunately, due to the fact that the side bearings (aka font glypth paddings) around characters are font dependant, there is no easy way to calculate such a value (e.g. the sum between the up bearing and the actual character bounding box). In balala's code above, using TransformationMatrix=1;0;(tan(rad(-15)));-1;(0.82*[meterTitle:YH]*tan(rad(15)));(2*0.82*[meterTitle:YH]) gives more or less the same result, give or take 1 pixel horizontally.
Profiles: Rainmeter ProfileDeviantArt ProfileSuites: MYiniMeterSkins: Earth
User avatar
balala
Rainmeter Sage
Posts: 16110
Joined: October 11th, 2010, 6:27 pm
Location: Gheorgheni, Romania

Re: I want to flip a clock to look like reflection on water

Post by balala »

Yincognito wrote: March 21st, 2023, 7:11 pm One observation though, for anyone else reading this (you know this already, of course): the factors used to multiply things in such cases (e.g. 2.45, 2.6, 0.82, etc.) are font dependant, so they will need to be adjusted when using another font.
Obviously!