Animated flip clock widget for Rainmeter?

emvaized · Post by **emvaized** » September 9th, 2023, 6:14 am

I would like to find or create some Rainmeter skin, which would recreate the appearance of HTC Flip clock from Sense 4.0. It should look somewhat like this:

There are few flip clock skins on Devian Art, but neither of them are animated. How difficult could it be to recreate such animations in Rainmeter? In best case scenario, it should implement not only the basic animation (transformation of the card), but also additional visual effects for more realistic view — background gradient on the cards, shadows, small bounce effect in the end, etc.

Post by **balala** » September 9th, 2023, 6:37 am

emvaized wrote: ↑September 9th, 2023, 6:14 am How difficult could it be to recreate such animations in Rainmeter? In best case scenario, it should implement not only the basic animation (transformation of the card), but also additional visual effects for more realistic view — background gradient on the cards, shadows, small bounce effect in the end, etc.

I assume it can be done, but you (we?) have to have the images used by the digits of the clock. Do you have them?
If you have them, should start with the basic animation, the other effects should be added later.
So, you you have the needed images?

xenium · Post by **xenium** » September 9th, 2023, 6:44 am

emvaized wrote: ↑September 9th, 2023, 6:14 am I would like to find or create some Rainmeter skin, which would recreate the appearance of HTC Flip clock from Sense 4.0. It should look somewhat like this:
There are few flip clock skins on Devian Art, but neither of them are animated. How difficult could it be to recreate such animations in Rainmeter? In best case scenario, it should implement not only the basic animation (transformation of the card), but also additional visual effects for more realistic view — background gradient on the cards, shadows, small bounce effect in the end, etc.

Animated Flip Clock skin already exists on Deviantart:
https://www.deviantart.com/hekee/art/Animated-Flip-Clock-557686447

emvaized · Post by **emvaized** » September 9th, 2023, 7:28 am

balala wrote: ↑September 9th, 2023, 6:37 am I assume it can be done, but you (we?) have to have the images used by the digits of the clock. Do you have them?
If you have them, should start with the basic animation, the other effects should be added later.
So, you you have the needed images?

No, I don't — example which I shared generated the whole thing dynamically, including digits, cards, etc.
It probably woudn't look nice and scalable if I just make screenshots of every possible digit?

emvaized · Post by **emvaized** » September 9th, 2023, 7:29 am

xenium wrote: ↑September 9th, 2023, 6:44 am Animated Flip Clock skin already exists on Deviantart:
https://www.deviantart.com/hekee/art/Animated-Flip-Clock-557686447

Thanks, I somehow missed that one.

It doesn't look that good, especially the animation, but probably it could be used as a basis? It seems this skin doesn't apply any complex transformations or things like that, and basically just shows a slideshow of frames for any digit-to-next-digit transition. Maybe I could just cut the gif I shared into frames and use them like that?

emvaized · Post by **emvaized** » September 9th, 2023, 9:26 am

Alright, I just tried to cut my gif in frames, and replace images used in referenced skin with mine — I only modified the Small (24h) version.
Here's the result for now:

It's far from perfect, but I guess if little more work will be done it could look better; probably should cut frames a bit better, as bouncy effect seems not prominent on some digits.

Do you know how to add rounded corners to every card's image?

xenium · Post by **xenium** » September 9th, 2023, 10:10 am

emvaized wrote: ↑September 9th, 2023, 9:26 am Do you know how to add rounded corners to every card's image?

Try this website:
https://round-corner.imageonline.co/
or this one:
https://pinetools.com/round-corners-image

emvaized · Post by **emvaized** » September 9th, 2023, 10:23 am

xenium wrote: ↑September 9th, 2023, 10:10 am Try this website:
https://round-corner.imageonline.co/
or this one:
https://pinetools.com/round-corners-image

Hm, doing this for 100+ images doesn't sound very inspiring... Maybe there's some way to do it in the skin itself? Like applying some sort of mask

xenium · Post by **xenium** » September 9th, 2023, 11:07 am

emvaized wrote: ↑September 9th, 2023, 10:23 am Hm, doing this for 100+ images doesn't sound very inspiring... Maybe there's some way to do it in the skin itself? Like applying some sort of mask

Yes, you can use the Container option:
https://docs.rainmeter.net/manual/meters/general-options/container/
https://forum.rainmeter.net/viewtopic.php?t=30121

Code: Select all

[Rainmeter]
Update=25
MouseActionCursorName=Cross
OnRefreshAction=[!ZPos -1]

[Metadata]
Author=Heke
Name=Animated Flip Clock
Version=1.2

;[FrostedGlass]
;Measure = Plugin
;Plugin = FrostedGlass
;Type = Acrylic
;Corner = Round
;UpdateDivider = -1

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||CLOCK|||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||HOURS|||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

[MEASURE_SCRIPT_HOUR]

Measure=Script

ScriptFile="#@#Scripts\Small\Hour.lua"

[MEASURE_HOUR]
Measure=Time
Format="%H"

[MEASURE_HOUR_1]

Measure=Calc

Formula=Floor(Measure_Hour/10)

[MEASURE_HOUR_2]

Measure=Calc

Formula=10*(Round((Measure_Hour/10),1)-Measure_Hour_1)

;[METER_HOUR_BG]
;Meter=Image
;ImageName="#@#Images\Small\Time_BG.png"
;X=6
;W=120
;H=124

[MeterHour1Container]
Meter=Shape
Shape=Rectangle 0,0,60,110,8 | StrokeWidth 1

[METER_HOUR_1]
Meter=Image
X=0
Y=0
DynamicVariables=1
Container=MeterHour1Container

[MeterHour2Container]
Meter=Shape
Shape=Rectangle 61,0,60,110,8 | StrokeWidth 1

[METER_HOUR_2]
Meter=Image
X=61
Y=0
DynamicVariables=1
Container=MeterHour2Container
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||MINUTES|||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||


[MEASURE_SCRIPT_MIN]

Measure=Script

ScriptFile="#@#Scripts\Small\Minute.lua"

[MEASURE_MIN]

Measure=Time

Format="%M"



[MEASURE_MIN_1]

Measure=Calc

Formula=FLOOR(Measure_Min/10)


[MEASURE_MIN_2]

Measure=Calc

Formula=10*(ROUND((Measure_Min/10),1)-Measure_Min_1)

;[METER_MIN_BG]
;Meter=Image
;ImageName="#@#Images\Small\Time_BG.png"
;X=127
;W=120
;H=124

[MeterMin1Container]
Meter=Shape
Shape=Rectangle 130,0,60,110,8 | StrokeWidth 1

[METER_MIN_1]
Meter=Image
X=130
Y=0
DynamicVariables=1
Container=MeterMin1Container

[MeterMin2Container]
Meter=Shape
Shape=Rectangle 191,0,60,110,8 | StrokeWidth 1

[METER_MIN_2]
Meter=Image
X=191
Y=0
DynamicVariables=1
Container=MeterMin2Container

[METER_MIN_COLON]
Meter=String
X=258
Y=0
FontSize=26
FontColor=FFFFFF
StringStyle=normal
StringEffect=SHADOW
;FontFace=JDWI-WIND
StringAlign=left
;FontEffectColor=#FontEffectColor#
;AntiAlias=1
Text=:
;Angle=(Rad([MeasureWindDirectionAngle]))


|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||SECONDS|||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

[MEASURE_SCRIPT_SEC]

Measure=Script

ScriptFile="#@#Scripts\Small\Second.lua"

[MEASURE_SEC]

Measure=Time

Format="%S"

[MEASURE_SEC_1]

Measure=Calc

Formula=FLOOR(Measure_Sec/10)

[MEASURE_SEC_2]

Measure=Calc

Formula=10*(ROUND((Measure_Sec/10),1)-Measure_Sec_1)

;[METER_SEC_BG]
;Meter=Image
;ImageName="#@#Images\Small\Time_BG.png"
;X=249
;W=120
;H=124

[MeterSec1Container]
Meter=Shape
Shape=Rectangle 259,0,60,110,8 | StrokeWidth 1

[METER_SEC_1]
Meter=Image
X=259
Y=0
DynamicVariables=1
Container=MeterSec1Container

[MeterSec2Container]
Meter=Shape
Shape=Rectangle 320,0,60,110,8 | StrokeWidth 1

[METER_SEC_2]
Meter=Image
X=320
Y=0
DynamicVariables=1
Container=MeterSec2Container

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||DETAILS|||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

;[METER_HOUR_REFLECT]
;Meter=Image
;ImageName="#@#Images\Small\Reflect.png"
;X=15
;Y=14
;W=108
;H=96

;[METER_MIN_REFLECT]
;Meter=Image
;ImageName="#@#Images\Small\Reflect.png"
;X=136
;Y=14
;W=108
;H=96

;[METER_SEC_REFLECT]
;Meter=Image
;ImageName="#@#Images\Small\Reflect.png"
;X=258
;Y=14
;W=108
;H=96

;[METER_DETAILS]
;Meter=Image
;SolidColor=0,0,0,1
;ImageName="#@#Images\Small\Details.png"
;X=10
;Y=42
;W=366
;H=89
;LeftMouseDoubleClickAction=!Execute [RunDll32.exe shell32.dll, Control_RunDLL timedate.cpl][Play "#@#Sounds\Click.wav"]

Capture.PNG

emvaized · Post by **emvaized** » September 9th, 2023, 5:41 pm

xenium wrote: ↑September 9th, 2023, 11:07 am Yes, you can use the Container option:
https://docs.rainmeter.net/manual/meters/general-options/container/
https://forum.rainmeter.net/viewtopic.php?t=30121

Code: Select all

[Rainmeter]
Update=25
MouseActionCursorName=Cross
OnRefreshAction=[!ZPos -1]

[Metadata]
Author=Heke
Name=Animated Flip Clock
Version=1.2

;[FrostedGlass]
;Measure = Plugin
;Plugin = FrostedGlass
;Type = Acrylic
;Corner = Round
;UpdateDivider = -1

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||CLOCK|||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||HOURS|||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

[MEASURE_SCRIPT_HOUR]

Measure=Script

ScriptFile="#@#Scripts\Small\Hour.lua"

[MEASURE_HOUR]
Measure=Time
Format="%H"

[MEASURE_HOUR_1]

Measure=Calc

Formula=Floor(Measure_Hour/10)

[MEASURE_HOUR_2]

Measure=Calc

Formula=10*(Round((Measure_Hour/10),1)-Measure_Hour_1)

;[METER_HOUR_BG]
;Meter=Image
;ImageName="#@#Images\Small\Time_BG.png"
;X=6
;W=120
;H=124

[MeterHour1Container]
Meter=Shape
Shape=Rectangle 0,0,60,110,8 | StrokeWidth 1

[METER_HOUR_1]
Meter=Image
X=0
Y=0
DynamicVariables=1
Container=MeterHour1Container

[MeterHour2Container]
Meter=Shape
Shape=Rectangle 61,0,60,110,8 | StrokeWidth 1

[METER_HOUR_2]
Meter=Image
X=61
Y=0
DynamicVariables=1
Container=MeterHour2Container
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||MINUTES|||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||


[MEASURE_SCRIPT_MIN]

Measure=Script

ScriptFile="#@#Scripts\Small\Minute.lua"

[MEASURE_MIN]

Measure=Time

Format="%M"



[MEASURE_MIN_1]

Measure=Calc

Formula=FLOOR(Measure_Min/10)


[MEASURE_MIN_2]

Measure=Calc

Formula=10*(ROUND((Measure_Min/10),1)-Measure_Min_1)

;[METER_MIN_BG]
;Meter=Image
;ImageName="#@#Images\Small\Time_BG.png"
;X=127
;W=120
;H=124

[MeterMin1Container]
Meter=Shape
Shape=Rectangle 130,0,60,110,8 | StrokeWidth 1

[METER_MIN_1]
Meter=Image
X=130
Y=0
DynamicVariables=1
Container=MeterMin1Container

[MeterMin2Container]
Meter=Shape
Shape=Rectangle 191,0,60,110,8 | StrokeWidth 1

[METER_MIN_2]
Meter=Image
X=191
Y=0
DynamicVariables=1
Container=MeterMin2Container

[METER_MIN_COLON]
Meter=String
X=258
Y=0
FontSize=26
FontColor=FFFFFF
StringStyle=normal
StringEffect=SHADOW
;FontFace=JDWI-WIND
StringAlign=left
;FontEffectColor=#FontEffectColor#
;AntiAlias=1
Text=:
;Angle=(Rad([MeasureWindDirectionAngle]))


|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||SECONDS|||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

[MEASURE_SCRIPT_SEC]

Measure=Script

ScriptFile="#@#Scripts\Small\Second.lua"

[MEASURE_SEC]

Measure=Time

Format="%S"

[MEASURE_SEC_1]

Measure=Calc

Formula=FLOOR(Measure_Sec/10)

[MEASURE_SEC_2]

Measure=Calc

Formula=10*(ROUND((Measure_Sec/10),1)-Measure_Sec_1)

;[METER_SEC_BG]
;Meter=Image
;ImageName="#@#Images\Small\Time_BG.png"
;X=249
;W=120
;H=124

[MeterSec1Container]
Meter=Shape
Shape=Rectangle 259,0,60,110,8 | StrokeWidth 1

[METER_SEC_1]
Meter=Image
X=259
Y=0
DynamicVariables=1
Container=MeterSec1Container

[MeterSec2Container]
Meter=Shape
Shape=Rectangle 320,0,60,110,8 | StrokeWidth 1

[METER_SEC_2]
Meter=Image
X=320
Y=0
DynamicVariables=1
Container=MeterSec2Container

|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||DETAILS|||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||

;[METER_HOUR_REFLECT]
;Meter=Image
;ImageName="#@#Images\Small\Reflect.png"
;X=15
;Y=14
;W=108
;H=96

;[METER_MIN_REFLECT]
;Meter=Image
;ImageName="#@#Images\Small\Reflect.png"
;X=136
;Y=14
;W=108
;H=96

;[METER_SEC_REFLECT]
;Meter=Image
;ImageName="#@#Images\Small\Reflect.png"
;X=258
;Y=14
;W=108
;H=96

;[METER_DETAILS]
;Meter=Image
;SolidColor=0,0,0,1
;ImageName="#@#Images\Small\Details.png"
;X=10
;Y=42
;W=366
;H=89
;LeftMouseDoubleClickAction=!Execute [RunDll32.exe shell32.dll, Control_RunDLL timedate.cpl][Play "#@#Sounds\Click.wav"]

Capture.PNG

Oh, thank you! It looks a ton better already.
Guess I'd just play with numbers a bit now, clean out the code, and it will become quite usable.

Also will think about how to create replacements for 2>0 and 3>0 frames in the original.

Animated flip clock widget for Rainmeter?

Animated flip clock widget for Rainmeter?

Re: Animated flip clock widget for Rainmeter?

Re: Animated flip clock widget for Rainmeter?

Re: Animated flip clock widget for Rainmeter?

Re: Animated flip clock widget for Rainmeter?

Re: Animated flip clock widget for Rainmeter?

Re: Animated flip clock widget for Rainmeter?

Re: Animated flip clock widget for Rainmeter?

Re: Animated flip clock widget for Rainmeter?

Re: Animated flip clock widget for Rainmeter?