Ok, so I have admit this is a bit out of the ordinary (read ‘Nerdy’) but I sometimes like to write quirky scripts just to see what I can do. In this case, I’m making a JavaScript binary (BCD) clock.
I always wanted to make a binary clock with chips and LEDs (admittedly ‘nerdy’) but I figured I’d make it in JavaScript first to see if I could actually use it in the first place. The idea is to use images to represent the LEDs at ‘0’ and at ‘1’ to make it look like the real thing. I’ll have one row of 4 image LEDs for Hours, a row of 6 LEDs for Minutes and another row of 6 for seconds.
Making the clock work is actually pretty simple because JavaScript has the conversion and date/time capabilities ready to go…
I’ve got the decimal to binary case decimal converter:
function decConvert(num) {
num = parseInt(num);
var binarynum = num.toString(2);
return binarynum;
}
I’ve got the guts of my clock in a function called updateClock() that I call at page load and then setInterval(‘updateClock()’, 1000); It updates the innerHTML of a couple of named spans.
function updateClock() {
var now = new Date();
var thisHour = now.getHours();
var ampm = ( thisHour < 12 ) ? "AM" : "PM";
thisHour = ( thisHour > 12 ) ? thisHour - 12 : thisHour;
binHour.innerHTML = decConvert(thisHour);
binMinute.innerHTML = decConvert(now.getMinutes());
binSecond.innerHTML = decConvert(now.getSeconds());
}
So what I’m stuck on is writing the code to take a binary number and returning images for zero and one or off and on. I realize I could create a sort of matrix using a switch statement but I don’t think that would be a very elegant solution. Any ideas?
As far as I can tell from a quick look at your script you are creating a binary output and not a BCD output. Binary Coded Decimal is not the same as Binary for numbers greater than 9.
To do a BCD version you’d need a separate binary output for each decimal digit.
Just one possible problem with the x = parseInt(x); statement which will assume that the input value is octal if it has a leading zero and so will return zero if it is passed ‘08’ or ‘09’. You need a second parameter of 10 to tell it to convert the string to a decimal number.
A simpler dec2bin without the parseInt on the front (which is used to convert to decimal which your number already is) would be:
Thanks for the clarification I’ve updated my local script but I don’t think I can edit my earlier post…
I’ve always dealt with straight binary machine language (hex) and up until now really had no use for BCD because it doesn’t represent A - F. Now that I know a little more about it, I might add true BCD to it to make easier to read or I could add octal and hex to make it even less readable
I’ve implemented you’re streamlined function thanks for that. I think a typo was introduced though because a (+) sign was introduced in front of the x.toString(2) which breaks the function.
So the updates for what it’s worth are:
function dec2bin(x) {
return x.toString(2);
}
And:
function newBin2ledConverter(bits, binary) {
if(binary.length < bits) {
y = bits - binary.length;
for(x=0; x<y; x++) {
binary = '0' + binary;
}
}
var arrbinary = binary.split('');
var limit = arrbinary.length;
var stringOut = '';
for (x = 0; x < limit; x++) {
if(arrbinary[x] == '1') {
stringOut += '<img src="images/one.png" />';
} else {
stringOut += '<img src="images/zero.png" />';
}
}
return stringOut;
}
It’s just a novelty script but I always find things like this can be a good break from regular coding.
Well it turns out it wasn’t difficult at all… First I created a couple of massive lookup tables that spanned 200+ lines just so I could see what it was I wanted to achieve. The lookup functions would just take a number like 5, 9, 10, 20, etc… and create a string of images that represented the number in binary with images for ‘1’ or ‘0’.
Then once I saw it work, I created a nice little fucntion that did the same thing in about 20 lines. You tell it how many bits the number is 4, 6, 8, etc… and then give it a string representing the binary number ‘000001’, ‘000010’, etc… and it will return a string of images you can use to update the clock display:
function newBin2ledConverter(bits, bcdNumber) {
if(bcdNumber.length < bits) { //Add the correct number of zeros to the front of the string
y = bits - bcdNumber.length;
for(x=0; x<y; x++) {
bcdNumber = '0' + bcdNumber;
}
}
var arrBCD = bcdNumber.split('');
var limit = arrBCD.length;
var stringOut = '';
for (x = 0; x < limit; x++) {
if(arrBCD[x] == '1') {
stringOut += '<img src="images/one.png" />';
} else {
stringOut += '<img src="images/zero.png" />';
}
}
return stringOut;
}
If anyone was interested here’s the full binary clock (12 Hour Mode) with a digital clock above it for reference… Put the attached images in an images folder. It’s pretty rough but kind of cool. I’ll have to make a nice am/pm indicator for the binary part:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Binary Clock Experiment</title>
<script type="text/javascript">
function newBin2ledConverter(bits, bcdNumber) {
if(bcdNumber.length < bits) { //Add the correct number of zeros to the front of the string
y = bits - bcdNumber.length;
for(x=0; x<y; x++) {
bcdNumber = '0' + bcdNumber;
}
}
var arrBCD = bcdNumber.split('');
var limit = arrBCD.length;
var stringOut = '';
for (x = 0; x < limit; x++) {
if(arrBCD[x] == '1') {
stringOut += '<img src="images/one.png" />';
} else {
stringOut += '<img src="images/zero.png" />';
}
}
return stringOut;
}
function dec2bin(x) {
x = parseInt(x);
var bin = x.toString(2);
return bin;
}
function updateClock() {
var now = new Date();
var thisHour = now.getHours();
var thisMinute = now.getMinutes();
var thisSecond = now.getSeconds();
var ampm = ( thisHour < 12 ) ? "AM" : "PM";
thisHour = ( thisHour > 12 ) ? thisHour - 12 : thisHour;
thisMinute = ( thisMinute < 10 ? "0" : "" ) + thisMinute;
thisSecond = ( thisSecond < 10 ? "0" : "" ) + thisSecond;
var clock = document.getElementById('clock');
clock.innerHTML = thisHour + ":" + thisMinute + ":" + thisSecond + " " + ampm;
var hourBlock = document.getElementById('hourBlock');
var minuteBlock = document.getElementById('minuteBlock');
var secondBlock = document.getElementById('secondBlock');
bcdHour = dec2bin(thisHour);
bcdMinute = dec2bin(now.getMinutes());
bcdSecond = dec2bin(now.getSeconds());
hourBlock.innerHTML = newBin2ledConverter(4, bcdHour);
minuteBlock.innerHTML = newBin2ledConverter(6, bcdMinute);
secondBlock.innerHTML = newBin2ledConverter(6, bcdSecond);
}
</script>
</head>
<body onload="updateClock(); setInterval('updateClock()', 1000 );">
<p>Clock: <span id="clock"></span></p>
Binary Clock:
<div id="hourBlock"></div>
<div id="minuteBlock"></div>
<div id="secondBlock"></div>
</body>
</html>
