...

View Full Version : A graphic odometer



stockton
09-21-2011, 01:33 PM
I have the following code which works fine until I try and display graphics.
Please tell me how I could/should display the odometer in graphics format rather than text.
I have all the necessary images as .png(0 through 9) in the same folder as the following code. It is just that the text counter displays but not the graphics?


<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;
function GraphicOdo(Nommer)
{
d = Nommer.toString();
for (i=0; i<d.length; i++)
{
var image="<IMG SRC=c"+d[i]+".gif>";
// alert(image);
document.getElementById('GraphicCounter').innerHtml=image;
}
}

function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
GraphicOdo(c);
t=setTimeout("timedCount()",1000);
}

function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onclick="doTimer()">
<input type="text" id="txt" /><br /><br />
<div id="GraphicCounter">
<img src="c0.gif" alt="zero"/>
</div>
</form>
</body>
</html>

xelawho
09-21-2011, 03:27 PM
document.getElementById('GraphicCounter').innerHTML=image;

stockton
09-21-2011, 03:39 PM
Thank you, solved.:o

stockton
09-21-2011, 03:47 PM
Next step is how do I allow for multiple images.
1 through 9 works fine but now how do I have two or more graphic images as in 10 thru 999999 display as graphics?
BTW You can see what I am speaking of at http://www.k9t.za.net/odometer/

xelawho
09-21-2011, 03:58 PM
how about a little bit of simplification?



<html>
<head>
<script type="text/javascript">
var c=0;
var t;
var timer_is_on=0;

function timedCount()
{
document.getElementById('txt').value=c;
c=c+1;
document.getElementById('GraphicCounter').innerHTML="<IMG SRC=c"+c+".gif>";
t=setTimeout("timedCount()",1000);
}

function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
timedCount();
}
}
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onclick="doTimer()">
<input type="text" id="txt" /><br /><br />
<div id="GraphicCounter">
<img src="c0.gif" alt="zero"/>
</div>
</form>
</body>
</html>

stockton
09-21-2011, 04:07 PM
I am afraid the simplified version stops after the first display, namely displaying graphic !.

xelawho
09-21-2011, 04:15 PM
yeah, sorry - that was a dud attempt. tried the edited version above - I think that works.

xelawho
09-21-2011, 04:19 PM
ah, no - I think I misunderstood the question. Are you asking that say when it clicks over to 10 how do you display a 1 and a 0 and once it clicks to 100, a 1 and a 0 and a 0 (supposing that you do not have 999999 separate graphics files)?

jmrker
09-21-2011, 04:44 PM
Or you could use: http://www.brock-family.org/gavin/software/web/odometer.html

stockton
09-21-2011, 04:48 PM
Thank you xelawho. That almost works but stops displaying images after 9.

stockton
09-21-2011, 04:49 PM
xelawho, Yes that is what I meant.

stockton
09-21-2011, 04:50 PM
jmrker, I could not get the example at that website working for me.

xelawho
09-21-2011, 04:51 PM
well, if that's the case, there's probably a fancier way of doing this but the hack method would be to set separate intervals calling separate functions. Below is how it would go up to 99 seconds...



<html>
<head>
<script type="text/javascript">
var c=0;
var d=0;
var t;
var u;
var timer_is_on=0;

function secCount()
{
document.getElementById('txt').value=c;
c=c+1;
if (c==10){c=0}
document.getElementById('secCounter').innerHTML="<IMG SRC=c"+c+".gif>";
}

function tenCount()
{
d=d+1;
if (d==10){d=0}
document.getElementById('tenCounter').innerHTML="<IMG SRC=c"+d+".gif>";
}

function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
t=setInterval("secCount()",1000);
u=setInterval("tenCount()",10000);
}
}
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onclick="doTimer()">
<input type="text" id="txt" /><br /><br />
<div style="float:left" id="tenCounter"></div><div style="float:left" id="secCounter">
<img src="c0.gif" alt="zero"/>
</div>
</form>
</body>
</html>

stockton
09-21-2011, 05:00 PM
xelawho, sorry if I confused anyone but the display is not for timing.
What I need for 10, as an example, to display the image for one followed by the image for zero and following from that 101 would be c1.gif c0.gif c1.gif and 1234 should be c1.gif c2.gif c3.gif c4.gif.
I hope that this makes things a little clearer.

xelawho
09-21-2011, 05:06 PM
kind of assumed that... that's what the code in #13 does, up to 99 (and then I assume you can figure out how to replicate from there, but if not, post back)

or am I still missing the point?

stockton
09-21-2011, 05:26 PM
It stops displaying images after 9. The counter carries on after 9 but the graphic images for 10 never appear.

xelawho
09-21-2011, 05:36 PM
mmm.., I don't know if you saw my updated version. But anyway. Here's the new improved slightly less hackish model:



<html>
<head>
<style type="text/css">
.count{
display:none;
}
</style>
<script type="text/javascript">
var c=0;
var d=0;
var e=0;
var f=0;
var t;
var timer_is_on=0;


function secCount()
{
document.getElementById('txt').value=c;
c++;
if (c==10){
document.getElementById('tenCounter').style.display="inline";
d++;
c=0}
if (d==10){
document.getElementById('hunCounter').style.display="inline";
e++;
d=0}
if (e==10){
document.getElementById('thouCounter').style.display="inline";
f++;
e=0}
document.getElementById('secCounter').innerHTML="<IMG SRC=marker"+c+".png>";
document.getElementById('tenCounter').innerHTML="<IMG SRC=marker"+d+".png>";
document.getElementById('hunCounter').innerHTML="<IMG SRC=marker"+e+".png>";
document.getElementById('thouCounter').innerHTML="<IMG SRC=marker"+f+".png>";

}


function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
t=setInterval("secCount()",1000);
}
}
</script>
</head>



which I believe goes up to 9999... you will have to swap your image file names for mine, though - that was getting a little boring

xelawho
09-21-2011, 05:43 PM
so, I finally got around to grabbing your images... here it is ready to rock:



<html>
<head>
<style type="text/css">
.count{
display:none;
}
</style>
<script type="text/javascript">
var c=0;
var d=0;
var e=0;
var f=0;
var t;
var timer_is_on=0;


function secCount()
{
document.getElementById('txt').value=c;
c++;
if (c==10){
document.getElementById('tenCounter').style.display="inline";
d++;
c=0}
if (d==10){
document.getElementById('hunCounter').style.display="inline";
e++;
d=0}
if (e==10){
document.getElementById('thouCounter').style.display="inline";
f++;
e=0}
document.getElementById('secCounter').innerHTML="<IMG SRC=c"+c+".gif>";
document.getElementById('tenCounter').innerHTML="<IMG SRC=c"+d+".gif>";
document.getElementById('hunCounter').innerHTML="<IMG SRC=c"+e+".gif>";
document.getElementById('thouCounter').innerHTML="<IMG SRC=c"+f+".gif>";

}


function doTimer()
{
if (!timer_is_on)
{
timer_is_on=1;
t=setInterval("secCount()",1000);
}
}
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onclick="doTimer()">
<input type="text" id="txt" /><br /><br />
<div class="count" style="float:left" id="thouCounter"></div><div style="float:left" class="count" id="hunCounter"></div><div class="count" style="float:left" id="tenCounter"></div><div style="float:left" id="secCounter">
<img src="c0.gif" alt="zero"/>
</div>
</form>
</body>
</html>

jmrker
09-21-2011, 09:26 PM
Simplified a bit while allowing for continued expansion... :D


<html>
<head>

<style type="text/css">
.count{ display:inline; }
</style>

<script type="text/javascript">
// Modified for: http://www.codingforums.com/showthread.php?p=1138362#post1138362

var baseURL = 'http://www.k9t.za.net/odometer/';
var cnt = [0,0,0,0,0,0,0,0]; // one extra element than images for overflow

var t;
var timer_is_on=0;

function secCount() {
cnt[0]++
for (var i=0; i<cnt.length-1; ++i) {
if (cnt[i] == 10) { cnt[(i+1)]++; cnt[i] = 0; }
document.getElementById('Counter'+i).innerHTML="<IMG SRC="+baseURL+"c"+cnt[i]+".gif>";
}
}

function doTimer() {
if (!timer_is_on) {
timer_is_on=1;
t=setInterval("secCount()",100);
} else {
timer_is_on=0;
clearTimeout(t);
}
}
</script>
</head>

<body>
<form>
<input type="button" value="Start count!" onclick="doTimer()">
<input type="button" value="Stop count!" onclick="timer_is_on=0;clearTimeout(t)">
<p />
<div class="count" id="Counter6"></div>
<div class="count" id="Counter5"></div>
<div class="count" id="Counter4"></div>
<div class="count" id="Counter3"></div>
<div class="count" id="Counter2"></div>
<div class="count" id="Counter1"></div>
<div class="count" id="Counter0"></div>
</form>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum