[DEV] Countdown bar

[d0nut]

Last updated on 8/2/2005, 13.18 [GMT+1].

Hi,

As promised, I developped a little countdown bar.

Main features.

[x] Inspired by the Windows XP installation progress bar.

[x] CSS-based, so easy to adjust all parameters.

[x] Easy to integrate in existing themes.

Installation.

[x] In WpiScripts, edit timers.js.

position="timers.js";

/* Countdown */
var interval = "";
var m;
var passed = 0;
var startSecs = secs;
if(secs>3600) secs=3600;
if(secs>60){
	m=parseInt(secs/60)
	secs=secs-(m*60);
}
else m=0;

function startInterval(){
  position="timers.js";
	interval = window.setInterval("tTimer()",1000);
}
function stopInterval(){
  position="timers.js";
	window.clearInterval (interval);
	interval="";
}
function tTimer(){
  position="timers.js";
  var txt = "";
	if(secs==0) secs=1;

	txt = m+":"+--secs;

	if (secs == 0 && m==0){
  stopInterval();
  CreateFile(false);
	}

	if (secs == 0){
  txt = m+":"+"0"+secs;
  m--;
  secs=60;
	}
	if(secs<10&&secs>-1)  txt = m+":"+"0"+secs;

	if (!document.display) return txt;
	document.display.innerHTML = txt;
passed++;
var timerImg = document.getElementById('timerImg');
timerImg.width = 120 - ((120 / ((60 * m) + startSecs)) * passed);
}

/* Stop watch */
var stwms = 0;
var stwstate = 0;
var stwthen, stwnow;
function swreset() {
  position="timers.js";
	stwstate = 0;	stwms = 0; 
  if (!document.stpw || !document.stpw.time) return stwms;
	document.stpw.time.value = stwms;
}

function startstop() {
  position="timers.js";
	if (stwstate == 0) {
  swreset(); stwstate = 1; 
  stwthen = new Date(); 
  stwthen.setTime(stwthen.getTime() - stwms);
	} else {
  stwstate = 0;	
  stwnow = new Date();	
  stwms = stwnow.getTime() - stwthen.getTime();
	}
  if (!document.stpw || !document.stpw.time) return stwms;
	document.stpw.time.value = stwms;
}

[x] Add these ones in wpi.htm.

<table width="124" border="0" cellpadding="0" cellspacing="0" class="timer">
   <tr>
      <td><img src="./themes/Default/timer.gif" height="10" width="120" id="timerImg" /></td>
   </tr>
</table>

[x] Make a timer.gif.

In Photoshop e.g. make a 1 by 1 pixel image in your desired color.

[x] And last, update wpi.css.

.timer {
   background-color: #8FB6E3;
   border: 1px solid #000040;
   padding: 1px;
}

Example.

Edited August 2, 2005 by d0nut

[glent]

Great work d0nut

[Lost Soul]

any chance of a image ?

[almulder]

Would like screen shot if posible.

[Kelsenellenelvian]

Same here

[blinkdt]

Looks nice, background color and border can be changed, keeps time with the music. Nice work.

[Kelsenellenelvian]

Nice added in!...

[Kelsenellenelvian]

Hmmm this still shows when the timer is still disabled.

Any ideas.

[d0nut]

I will try to post a screenshot later on.

I noticed blinkdt didn't put a timer.gif in his theme folder, but he couldn't know; I didn't mentioned it in the start post, that is, until now.

Updated!

[Kelsenellenelvian]

Blinkdt modified the code now so the bar does not show when the timer is inactive.

[Lost Soul]

looks nice