Windows 7 Forums
Welcome to Windows 7 Forums. Our forum is dedicated to helping you find support and solutions for any problems regarding your Windows 7 PC be it Dell, HP, Acer, Asus or a custom build. We also provide an extensive Windows 7 tutorial section that covers a wide range of tips and tricks.

Windows 7: Clock Gadgets Customize

02 Nov 2009   #1

windows 7 pro
Clock Gadgets Customize

Hello I'm new to the SevenForums. and yes I did search for my question but no one as asked this before. first I am not a programmer...but this does nto mean I do not understand teh basics.

It is easier for me to backward engeneer simple code than to learn from scratch. What I ahve already accomplished.

1. have edited the iamges to the system clock gadget to suit my needs. the H hand, min hand and Second hand and face

2. the main artwork is based on the system clock defauylt of 129 x 129 px and the hands based on 129 x 13 px.

3. teh default for all these is base on center of the artwork and every clock has the second hand rotating from the center an d on top of the hour an d min hands..

what I want to do is have my second had off center as per this watch here

I have gone through all html an dCss an dJS file the only one that changes the actual postion of teh parts is "clock.js"

case "system":
clockFont = "Arial Narrow, " + clockFont;
clockFontColor = "#666666";
topPX += 3;
leftPX += 1;
maxClockNameWidth = 72;
clockPartsWidth = 16;
clockPartsHeight = 129;
clockPartsTop = 0; 
clockPartsLeft = 58;

I've hilighted teh code that change this but it effects all the clock parts so if I add clockpartstop = 60; teh hall the hand move down 60 px

teh other code which I thought would work is the "Clock.html"

<meta http-equiv="MSThemeCompatible" CONTENT="yes" />
<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
<link href="css/clock.css" rel="stylesheet" type="text/css" />
<script src="js/timeZones.js" language="javascript" type="text/javascript"></script>
<script src="js/settings.js" language="javascript" type="text/javascript"></script>
<script src="js/clock.js" language="javascript" type="text/javascript"></script>
<script type="text/javascript">
window.google_analytics_uacct = "UA-1848300-2";
<body scroll="no" unselectable="on" onload="loadMain()" onmouseover="updateTooltip()">
<img id="clockTime" style="position:absolute;top:-1px;left:-1px;width:1px;height:1px" tabindex="1" />
<g:background id="clockBg" style="position:absolute;width:130px;height:130px;z-index:-1" />
<g:image id="highlights" unselectable="on" src="" style="position:absolute;left:3px;top:3px;width:124px;height:124px;z-index:30" />
<g:image id="dot" unselectable="on" src="" style="position:absolute;left:58px;top:0px;width:13px;height:129px;z-index:23" />
<g:image id="s" unselectable="on" src="" style="position:absolute;left:58px;top:0px;width:13px;height:129px;z-index:22" />
<g:image id="m" unselectable="on" src="" style="position:absolute;left:58px;top:0px;width:13px;height:129px;z-index:21" />
<g:image id="h" unselectable="on" src="" style="position:absolute;left:58px;top:0px;width:13px;height:129px;z-index:20" />
<div id="clockNamePosition" style="position:absolute;top:75px;left:-1px;width:130px;text-align:center;z-index:10">
<div id="clockName" style="text-overflow:ellipsis;white-space:nowrap;overflow:hidden"></div>
<script type="text/javascript"><!--
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "' type='text/javascript'%3E%3C/script%3E"));
<script type="text/javascript"><!--
try {
var pageTracker = _gat._getTracker("UA-1848300-2");
} catch(err) {}
but as you can see the default code is for Trad...I did change this to "system_h, s m and dot" but made no difference.

The other thing I tried was editing the default 16x129 parts for the second d had to 64 x 16...this seemed to work but the second had is now located to the top look good but in the wrong position...since we cannot edit the default setting without effecting the other hands too

so back to square can I edit this code to add another string for the second hand only so that it aligns as per the example image above?

Thank in advance for taking the time to read and hopefully point me in the right direction

My System SpecsSystem Spec
03 Nov 2009   #2

XP Pro SP3 x86/Vista SP2 x64/Win7 x64 Triple-boot

In "clock.js" it's the following line thats locking it in place vertically with the rest of them:
Code: = = = = clockPartsTop;
so change that line to exclude the '' like so:

Code: = = = clockPartsTop;

then, further up the file where the 'case' blocks of code are, you could add the following line:
Code: = 60;
so it would resemble something like this (notice the line added just before 'break;'):
case "trad":
   clockFont = "Constantia, " + clockFont;
   clockFontColor = "#2F2E2E";
   topPX += -3;
   leftPX += -1;
   maxClockNameWidth = 66;
   clockPartsWidth = 13;
   clockPartsHeight = 129;
   clockPartsTop = -1;
   clockPartsLeft = 57; = 60;
My System SpecsSystem Spec
03 Nov 2009   #3

windows 7 pro

cool thanks I'll give it go
My System SpecsSystem Spec
03 Nov 2009   #4

windows 7 pro

worked like a charm..thank you..all I need to do is tweak the artwork
My System SpecsSystem Spec
03 Nov 2009   #5

XP Pro SP3 x86/Vista SP2 x64/Win7 x64 Triple-boot

No problem newtek! Glad it worked for you.

Welcome to SevenForum's too btw.
My System SpecsSystem Spec

 Clock Gadgets Customize

Thread Tools

Our Sites

Site Links

About Us

Find Us

Windows 7 Forums is an independent web site and has not been authorized, sponsored, or otherwise approved by Microsoft Corporation. "Windows 7" and related materials are trademarks of Microsoft Corp.

Designer Media Ltd

All times are GMT -5. The time now is 09:28 PM.
Twitter Facebook Google+

Windows 7 Forums

Seven Forums Android App Seven Forums IOS App