Zegar binarny (HTML5 canvas)

Zegar binarny

O zegarze binarnym i kodzie BCD możesz przeczytać w rozdziale 5 książki Matematyka dla programistów Java oraz w rozdziale 5 książki Matematyka dla programistów JavaScript.

Strona używa skryptu binary.js

Zawartość możesz zobaczyć w
przeglądarce obsługującej element <canvas>
z kontekstem "2d"

Listing

var clock = new BinaryClock();
timer = setInterval("clock.run()", 1000);
            

Listing skryptu binary.js

var cv = document.getElementById('canvas');
var ctx = cv.getContext('2d');
var width = cv.width;
var height = cv.height;
var hh = [];
var mm = [];
var ss = [];
var h1, h2, m1, m2, s1, s2;
var kod_bcd = [ "0000", "0001", "0010", "0011", "0100", "0101", "0110", "0111",
		"1000", "1001" ];
var timer;
var date;
function BinaryClock() {
};
BinaryClock.prototype.run = function() {
	date = new Date();
	hh = this.toBcdIndex(date.getHours());
	mm = this.toBcdIndex(date.getMinutes());
	ss = this.toBcdIndex(date.getSeconds());
	h1 = kod_bcd[hh[0]];
	h2 = kod_bcd[hh[1]];
	m1 = kod_bcd[mm[0]];
	m2 = kod_bcd[mm[1]];
	s1 = kod_bcd[ss[0]];
	s2 = kod_bcd[ss[1]];
	this.drawClock();
};
BinaryClock.prototype.drawClock = function(){
	ctx.save();
	ctx.beginPath();
	ctx.fillStyle = "#000000";
	ctx.fillRect(0, 0, 210, 200);
	ctx.fillStyle = "#FFFFFF";
	ctx.font = "12px dialog";
	ctx.fillText("8", 11, 45);
	ctx.fillText("4", 11, 65);
	ctx.fillText("2", 11, 85);
	ctx.fillText("1", 11, 105);
	ctx.fillText("h", 50, 21);
	ctx.fillText("m", 108, 21);
	ctx.fillText("s", 168, 21);
	ctx.beginPath();
	var i = 0;
	var j = 20;
	for (i = 0; i < h1.length; i++) {
		var c = h1.substring(i, i + 1);
		if (c == "0") {
			ctx.fillStyle = "#FFFFFF";
		} else {
			ctx.fillStyle = "#FF0000";
		}
		ctx.beginPath();
		ctx.arc(i + 40, j + 20, 10, 0, 2 * Math.PI, false);
		ctx.fill();
		j += 20;
		if (j > 80) {
			j = 20;
		}
	}

	j = 20;
	for (i = 0; i < h2.length; i++) {
		var c = h2.substring(i, i + 1);
		if (c == "0") {
			ctx.fillStyle = "#FFFFFF";
		} else {
			ctx.fillStyle = "#FF0000";
		}
		ctx.beginPath();
		ctx.arc(i + 60, j + 20, 10, 0, 2 * Math.PI, false);
		ctx.fill();
		j += 20;
		if (j > 80) {
			j = 20;
		}
	}
	j = 20;
	for (i = 0; i < m1.length; i++) {
		var c = m1.substring(i, i + 1);
		if (c == "0") {
			ctx.fillStyle = "#FFFFFF";
		} else {
			ctx.fillStyle = "#FF0000";
		}
		ctx.beginPath();
		ctx.arc(i + 100, j + 20, 10, 0, 2 * Math.PI, false);
		ctx.fill();
		j += 20;
		if (j > 80) {
			j = 20;
		}
	}
	j = 20;
	for (i = 0; i < m2.length; i++) {
		var c = m2.substring(i, i + 1);
		if (c == "0") {
			ctx.fillStyle = "#FFFFFF";
		} else {
			ctx.fillStyle = "#FF0000";
		}
		ctx.beginPath();
		ctx.arc(i + 120, j + 20, 10, 0, 2 * Math.PI, false);
		ctx.fill();
		j += 20;
		if (j > 80) {
			j = 20;
		}
	}
	j = 20;
	for (i = 0; i < s1.length; i++) {
		var c = s1.substring(i, i + 1);
		if (c == "0") {
			ctx.fillStyle = "#FFFFFF";
		} else {
			ctx.fillStyle = "#FF0000";
		}
		ctx.beginPath();
		ctx.arc(i + 160, j + 20, 10, 0, 2 * Math.PI, false);
		ctx.fill();
		j += 20;
		if (j > 80) {
			j = 20;
		}
	}
	j = 20;
	for (i = 0; i < s2.length; i++) {
		var c = s2.substring(i, i + 1);
		if (c == "0") {
			ctx.fillStyle = "#FFFFFF";
		} else {
			ctx.fillStyle = "#FF0000";
		}
		ctx.beginPath();
		ctx.arc(i + 180, j + 20, 10, 0, 2 * Math.PI, false);
		ctx.fill();
		j += 20;
		if (j > 80) {
			j = 20;
		}
	}
	j = 20;
	ctx.restore();
};
BinaryClock.prototype.toBcdIndex = function(jednCzasu) {
	var tabl = [];
	if (jednCzasu < 10) {
		tabl[0] = 0;
		tabl[1] = jednCzasu;
	} else {
		var t = jednCzasu.toString();
		tabl[0] = parseInt(t.substring(0, 1));
		tabl[1] = parseInt(t.substring(1, 2));
	}
	return tabl;
};