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.
It is currently April 27th, 2024, 8:19 am
Animated flip clock widget for Rainmeter?
-
- Posts: 10
- Joined: September 2nd, 2023, 7:33 pm
-
- Rainmeter Sage
- Posts: 16175
- Joined: October 11th, 2010, 6:27 pm
- Location: Gheorgheni, Romania
Re: Animated flip clock widget for Rainmeter?
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?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.
If you have them, should start with the basic animation, the other effects should be added later.
So, you you have the needed images?
-
- Posts: 868
- Joined: January 4th, 2018, 9:52 pm
Re: Animated flip clock widget for Rainmeter?
Animated Flip Clock skin already exists on Deviantart: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.
https://www.deviantart.com/hekee/art/Animated-Flip-Clock-557686447
-
- Posts: 10
- Joined: September 2nd, 2023, 7:33 pm
Re: Animated flip clock widget for Rainmeter?
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?
Last edited by emvaized on September 9th, 2023, 7:30 am, edited 1 time in total.
-
- Posts: 10
- Joined: September 2nd, 2023, 7:33 pm
Re: Animated flip clock widget for Rainmeter?
Thanks, I somehow missed that one.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
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?
-
- Posts: 10
- Joined: September 2nd, 2023, 7:33 pm
Re: Animated flip clock widget for Rainmeter?
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?
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?
You do not have the required permissions to view the files attached to this post.
-
- Posts: 868
- Joined: January 4th, 2018, 9:52 pm
Re: Animated flip clock widget for Rainmeter?
Try this website:
https://round-corner.imageonline.co/
or this one:
https://pinetools.com/round-corners-image
-
- Posts: 10
- Joined: September 2nd, 2023, 7:33 pm
Re: Animated flip clock widget for Rainmeter?
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 maskxenium wrote: ↑September 9th, 2023, 10:10 am Try this website:
https://round-corner.imageonline.co/
or this one:
https://pinetools.com/round-corners-image
-
- Posts: 868
- Joined: January 4th, 2018, 9:52 pm
Re: Animated flip clock widget for Rainmeter?
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"]
You do not have the required permissions to view the files attached to this post.
-
- Posts: 10
- Joined: September 2nd, 2023, 7:33 pm
Re: Animated flip clock widget for Rainmeter?
Oh, thank you! It looks a ton better already.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=30121Capture.PNGCode: 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"]
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.