Clock Gadgets Customize

newtek · 02 Nov 2009

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"

Code:

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

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"

Code:

 
<html>
<head>
<meta http-equiv="MSThemeCompatible" CONTENT="yes" />
<meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
<title>Clock</title>
<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";
 
 
</script>
</head>
<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="https://www.sevenforums.com/images/spacer_highlights.png" style="position:absolute;left:3px;top:3px;width:124px;height:124px;z-index:30" />
<g:image id="dot" unselectable="on" src="https://www.sevenforums.com/images/trad_dot.png" style="position:absolute;left:58px;top:0px;width:13px;height:129px;z-index:23" />
<g:image id="s" unselectable="on" src="https://www.sevenforums.com/images/trad_s.png" style="position:absolute;left:58px;top:0px;width:13px;height:129px;z-index:22" />
<g:image id="m" unselectable="on" src="https://www.sevenforums.com/images/trad_m.png" style="position:absolute;left:58px;top:0px;width:13px;height:129px;z-index:21" />
<g:image id="h" unselectable="on" src="https://www.sevenforums.com/images/trad_h.png" 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>
</div>
 
<script type="text/javascript"><!--
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
//-->
</script>
<script type="text/javascript"><!--
try {
var pageTracker = _gat._getTracker("UA-1848300-2");
pageTracker._trackPageview();
} catch(err) {}
//-->
</script>
</body>
</html>

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 one...how 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

Generator · 03 Nov 2009

In "clock.js" it's the following line thats locking it in place vertically with the rest of them:

Code:

dot.style.top = h.style.top = m.style.top = s.style.top = clockPartsTop;

so change that line to exclude the 's.style.top' like so:

Code:

dot.style.top = h.style.top = m.style.top = clockPartsTop;

then, further up the file where the 'case' blocks of code are, you could add the following line:

Code:

s.style.top = 60;

so it would resemble something like this (notice the line added just before 'break;'):

Code:

case "trad":
   clockFont = "Constantia, " + clockFont;
   clockFontColor = "#2F2E2E";
   topPX += -3;
   leftPX += -1;
   maxClockNameWidth = 66;
   clockPartsWidth = 13;
   clockPartsHeight = 129;
   clockPartsTop = -1;
   clockPartsLeft = 57;
   s.style.top = 60;
   break;

newtek · 03 Nov 2009

cool thanks I'll give it go

newtek · 03 Nov 2009

worked like a charm..thank you..all I need to do is tweak the artwork

Generator · 03 Nov 2009

No problem newtek! Glad it worked for you.

Welcome to SevenForum's too btw.