Thanks to sunnycydup
Created this thread to capture my progress in developing/theming a realistic (functional) analog clock on the homescreen and/or lockscreen. The challenge was to make a more realistic looking clock that used .png images for all elements, including the hands, and shadow effects. Initially started with modifying the CoolClock script, but switched to the CSS3 version (open source) once discovered here: [You must be registered and logged in to see this link.].
Ultimately, was able to develop using an .html widget/wallpaper that incorporated background wallpapers and overlays. It's coded using CSS3
and jquery, and introduces a "rotate" function. (FYI - the rotate function can only be viewed with Safari and Chrome browsers.)
So, this was my goal (image is a mock-up) ... and the finished version (actual screenshot)
Here's how it progressed. First pass - recreated the background clock dial from my original image, added and configured the Cool Clock script...
Second pass - enhanced the script and introduced a bordered effect... and third pass - introduced a more realistic look to the hands - still script, not images:
EXAMPLES, LINKS, INSTALLATION, AND NOTES:
Examples of round and square clocks (scroll through the thread for other examples created by both myself and other Xsellizers [thanks!]):
Blue Stripes ... and Black Stitched
Blue Stripes Download Link: [You must be registered and logged in to see this link.]
Black Stripes Download Link: [You must be registered and logged in to see this link.]
UPDATE 2010.01.13: Lexs has kindly provided a download for a lockscreen version here: [You must be registered and logged in to see this link.]
INSTALLATION:
1) Unzip files. Open Widget folder, and navigate to Widgets/Configs/Weather-Config.js.
2) Locate the following string:
var locale = "XXXXX"
3) Replace XXXXX with your zip/country code.
4) Using SSH or other file transfer app, upload Round (Square) Clock.theme and Widgets to /Library/Themes.
5) Activate in WinterBoard. Make sure Widgets is above Round (Square) Clock.theme.
6) When used on homescreen, create blank icons to satisfy your layout.
Notes:
1) This beta release contains sample wallpapers and overlays. The PSD is supplied on Page 5 of this thread.
2) Only default homescreen icons are included - you can use any set that you want.
3) Please report any problems/issues/requests. Aside from the text
icons, I won't be able to fulfill any requests for customized icons.
4) Post your mods here for sharing.
Note1: Citizen and Rolex watch versions coming soon. (Continued issue
related to clock hands and overlay for the Citizen watch - trying to
resolve.)
Thanks to:
- Patrese for his widgets
- BlueMetal for the default homescreen icons (used with permission)
- Lexs for the lockscreen mod
- the unknown creative talents who generated the additional sample wallpapers (leathers and black fabric modified by me)
- and all those who've provided inputs and suggestions, and support of this concept.
Thanks,
Admin
Created this thread to capture my progress in developing/theming a realistic (functional) analog clock on the homescreen and/or lockscreen. The challenge was to make a more realistic looking clock that used .png images for all elements, including the hands, and shadow effects. Initially started with modifying the CoolClock script, but switched to the CSS3 version (open source) once discovered here: [You must be registered and logged in to see this link.].
Ultimately, was able to develop using an .html widget/wallpaper that incorporated background wallpapers and overlays. It's coded using CSS3
and jquery, and introduces a "rotate" function. (FYI - the rotate function can only be viewed with Safari and Chrome browsers.)
So, this was my goal (image is a mock-up) ... and the finished version (actual screenshot)
Here's how it progressed. First pass - recreated the background clock dial from my original image, added and configured the Cool Clock script...
Second pass - enhanced the script and introduced a bordered effect... and third pass - introduced a more realistic look to the hands - still script, not images:
EXAMPLES, LINKS, INSTALLATION, AND NOTES:
Examples of round and square clocks (scroll through the thread for other examples created by both myself and other Xsellizers [thanks!]):
Blue Stripes ... and Black Stitched
Blue Stripes Download Link: [You must be registered and logged in to see this link.]
Black Stripes Download Link: [You must be registered and logged in to see this link.]
UPDATE 2010.01.13: Lexs has kindly provided a download for a lockscreen version here: [You must be registered and logged in to see this link.]
Both are provided in Download with Notifications
For Notifications to work you require Lockinfo and have it enabled to on in iPhone settings
If you do not want the Notifications these can be deleted from the file Just remove Bundles file
To change Notifications to icons of your choice go to Bundles/com.ashman/Private/Notifiericons
If you require the Unlock slider let me know
I have used sunnycydup wallpaper and clock from page1
If you want a different wallpaper post and I will do that for you
Here is the Download: [You must be registered and logged in to see this link.]
Have Fun
INSTALLATION:
1) Unzip files. Open Widget folder, and navigate to Widgets/Configs/Weather-Config.js.
2) Locate the following string:
var locale = "XXXXX"
3) Replace XXXXX with your zip/country code.
4) Using SSH or other file transfer app, upload Round (Square) Clock.theme and Widgets to /Library/Themes.
5) Activate in WinterBoard. Make sure Widgets is above Round (Square) Clock.theme.
6) When used on homescreen, create blank icons to satisfy your layout.
Notes:
1) This beta release contains sample wallpapers and overlays. The PSD is supplied on Page 5 of this thread.
2) Only default homescreen icons are included - you can use any set that you want.
3) Please report any problems/issues/requests. Aside from the text
icons, I won't be able to fulfill any requests for customized icons.
4) Post your mods here for sharing.
Note1: Citizen and Rolex watch versions coming soon. (Continued issue
related to clock hands and overlay for the Citizen watch - trying to
resolve.)
Thanks to:
- Patrese for his widgets
- BlueMetal for the default homescreen icons (used with permission)
- Lexs for the lockscreen mod
- the unknown creative talents who generated the additional sample wallpapers (leathers and black fabric modified by me)
- and all those who've provided inputs and suggestions, and support of this concept.
Thanks,
Admin