• Home
• News
• FAQ
• Documentation
• Community
• Contribute
• About

joon hee - Animation.Tabular-1.201

    window["mytable"] = new Animation.Tabular(5, "25", "35", "#ffffff", "#00ff00", "#ffff00", "mytable");
    mytable.create(document.body);
    mytable.animateRadius('mytable', 0, 100, 1);

        this.create(document.body);

        this.setCellColor(8, "green");
        this.setCellColor(16, "yellow");
        this.setCellColor(32, "orange");

        this.setRadius(2, 4);

        this.setSquare(1, 5);

        this.colorCellGroup(this.getRow(1), "red");
        this.colorCellGroup(this.getRow(2), "blue");

Class('Animation.Tabular', {
	
	constructor: function(size, bw, bh, bgcolor, hlcolor, midcolor, id) {

		this.size = size;		
		this.bw = bw;
		this.bh = bh;
		this.bgcolor = bgcolor;
		this.hlcolor = hlcolor;
		this.midcolor = midcolor;
		this.id = id;
		
		this.tablewidth = (this.size*2)+1;
		this.tableheight = (this.size*2)+1;

	},	

	has: {
		size: {},
		bw: {},
		bh: {},
		bgcolor: {},
		hlcolor: {},
		midcolor: {},
		id: {}
	},
	
	isa: Widget.Table,
	
	methods: {

		create: function(parent) {
						
			// Now finally append the HTML to the parents HTML:
			var cellWidth  = this.bw, 
				cellHeight = this.bh, 
				color      = this.bgcolor,
				style      = "background-color: " + color + "; width: " + cellWidth + "; height:" + cellHeight + ";";
			
			parent.innerHTML += this.createHTML( function(point) {
				return "<td style='" + style + "'></td>";
			});
			
		},
		
		setCellColor: function(cellNumber, color) {
			this.getCell(cellNumber).style.backgroundColor = color;
		},

		setRadius: function(min, max) {

			var size = (this.size * 2) + 1;
			var center = Math.floor(size / 2) + 1;
			
			for (var ht = 1; ht <= size; ht++) {
			
				for (var wt = 1; wt <= size; wt++) {
									
					var coord = ( (ht - 1) * size) + wt;
					var self = this;
					
					this.setCellColor(coord.toString(), (function() {
						var dist = Math.abs(center - wt) + Math.abs(center - ht);
						var mycol = "";

						if (dist >= min && dist <= max) {
							mycol = self.hlcolor;
						} else if (dist <= min) {
							mycol = self.midcolor;		
						} else {
							mycol = self.bgcolor;
						}
						
						return mycol;
					})());
					
				}
			
			}


		},

		setSquare: function(min, max) {

			var size = (this.size * 2) + 1;
			var center = Math.floor(size / 2) + 1;
			
			for (var ht = 1; ht <= size; ht++) {
			
				for (var wt = 1; wt <= size; wt++) {
				
					// Variables for computation:					
					var coord = ( (ht - 1) * size) + wt;
					var self = this;
					
					this.setCellColor(coord.toString(), (function() {
						
						var dist = Math.abs(center - wt);
						var mycol = "";
				
						if (Math.abs(center - ht) > Math.abs(center - wt)) {
							dist = Math.abs(center - ht);
						}

						if (dist >= min && dist <= max) {
							mycol = self.hlcolor;
						} else if (dist <= min) {
							mycol = self.midcolor;		
						} else {
							mycol = self.bgcolor;
						}
						
						return mycol;
						
					})());
					
				}
			
			}

		},

		colorCellGroup: function(group, color) {
			
			for (var i = 0, l = group.length; i < l; i++) {
				group[i].style.backgroundColor = color;
			}

		},

		// Animation:

		animateRadius: function(id, to, interval, direction) {

			// Absolute size:
			var asize = (this.size * 2) + 1;
			
			// Determine whether or not to go through a forwards loop or a backwards loop.
			if (direction === "forwards" || typeof direction === "undefined" || direction === 1) {
				direction = true;
			} else {
				direction = false;
			}
			
			var init = direction ? 0: asize;
			var cond = function(i) {
				return direction ? i <= asize : i >= 0;	
			};
			
			var inc = direction ? 1: -1;
			
			// Finally do the loop:
			for (var i = init; cond(i); i += inc) {

				var myset = new Function("window['" + id + "'].setRadius(0, " + i + ");");
				setTimeout(myset, to);
				to += interval;
				
				for (var subi = 0; subi <= i; subi++) {
				
					if (subi < 10) {
						var newcolor = "#" + subi.toString() + subi.toString() + 'ff00';
						
						setTimeout(function(){ 
							this.hlcolor = newcolor 
						}, to);
						
					}
					
					var myf = new Function("window['" + id + "'].setRadius(" + subi + ", " + i + ");");
					setTimeout(myf, to);
					to += interval;
					
				}
				
			}
			
			return to;

		},

		animateSquare: function(id, to, interval, direction) {

			var asize = (this.size * 2) + 1;
			
			if (direction === 1 || direction === "forwards" || typeof direction === "undefined") {
				for (var i = 0; i <= (asize - 1); i++) {
					setTimeout("window['" + id + "'].setSquare(0, " + i + ");", to);
					to += interval;
				}
			} else {
				for (var i = (asize - 1); i >= 0; i--) {
					setTimeout("window['" + id + "'].setSquare(0, " + i + ");", to);
					to += interval;
				}
			}
			
			return to;

		}
	
	}


}); // End Prototype




/*


=pod

=head1 NAME

Animation.Tabular - A class in which is used for HTML table graphics and animations.

=head1 VERSION

Version 1.2

=head1 SYNOPSIS

    window["mytable"] = new Animation.Tabular(5, "25", "35", "#ffffff", "#00ff00", "#ffff00", "mytable");
    mytable.create(document.body);
    mytable.animateRadius('mytable', 0, 100, 1);

=head1 DESCRIPTION

This is a class which essentially provides several general purpose functions that will
be very useful for the purpose of animating a table. This can be a very useful
form of visualization and it performs quite well.

=head1 DEPENDENCIES

Widget.Table

=head1 ATTRIBUTES

=head2 size

This is the amount of rows and columns that will be output in the new table, the value will be multiplied
by two and added to one for absolute size ((size * 2) + 1).

=head2 bw

This is the width size of the table cells to be output in HTML.

=head2 bh

This is the height size of the table cells to be output in HTML.

=head2 bgcolor

This is essentially just the backgroundcolor to be used in the animation and other effects to be implemented
in the table graphics.

=head2 hlcolor

This is the highlight color to be used in animation and effects.

=head2 midcolor

This is the middle color, this color will be seen in between the radius and in between the squares in the
setRadius and setSquare methods.

=head2 id

This is the identifier of the table to be highlighted. This is essentially for the getCell method in which
is a method for getting all of the cells in the table, setCellColor and all other methods call getCell.

=head1 METHODS

=head2 Inherited

The following methods are inherited from Widget.Table: 

createHTML, getCell, getCellByPoint, getRow, getColumn, getDiagonal,

=head2 create(parent)

This function is essential for initalizing the table, this function will essentially create the
table and then it will place all the cells in the respective order according to the size attribute.

	this.create(document.body);

=head2 setCellColor(no, color)

This function is an intermediate to getCell, this function calls getCell based on no and then it
uses style.backgroundColor to set the cells color according to the parameters.

	this.setCellColor(8, "green");
	this.setCellColor(16, "yellow");
	this.setCellColor(32, "orange");

=head2 setRadius(min, max)

This function is useful for highlighting the cells in a radius fashion, the end result is a graphic
in which is displayed without a side of more then one length.

	this.setRadius(2, 4);

=head2 setSquare(min, max)

This creates a square graphic in the table from 0 to min is midcolor and from min to max is the
hlcolor. This then uses setCellColor to immediately animate the table.

	this.setSquare(1, 5);

=head2 colorCellGroup(group, color)

This function takes an array of td elements and colors them all in. Useful in conjunction with getRow,
getColumn, and getDiagonal, for example: colorCellGroup(getRow(1), "red").

	this.colorCellGroup(this.getRow(1), "red");
	this.colorCellGroup(this.getRow(2), "blue");

=head2 animateRadius(id, to, interval, direction)

This function starts at to in terms of time and from there it goes by interval and does the required animation
in accordance with direction. This function requires that the object be in the window namespace and
that objects placement in the window namespace is correspondent to id. This function returns the amount
of time it takes to accomplish the task. If you need to do this multiple times then use the return
value and then add that value to to.

=head2 animateSquare(id, to, interval, direction)

This function is similar to animateRadius it starts at to time index, using window['id'] it animates
in accordance with the direction and increments with interval and then returns the time taken
for the function to work effectively.

=head1 AUTHORS

Jhuni, <jhuni_x@yahoo.com>

=head1 COPYRIGHT

Public Domain

=cut


*/