arcollector/scaling.bitmap.in.js.html

## scaling.bitmap.in.js.html
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Scaling 2D bitmap</title>
		<style>
			body {
				background: peru;
				font: 12px Tahoma, Ubuntu;
			}

			.screen {
				width: 320px;
				height: 200px;
				margin: 100px auto 0;
				border: 1px solid blue;
				background: pink;
				position: relative;
			}

			.bitmap {
				margin-left: auto;
				margin-right: auto;
				border-collapse: collapse;
			}
			.bitmap > span {
				display: inline-block;
				height: 1px;
				width: 1px;
			}

			.msg {
				width: 320px;
				margin: 10px auto;
				text-align: center;
				font-size: 15px;
			}
		</style>
	</head>
	<body>

		<div class="screen">
			<table class="bitmap"></table>
		</div>

		<div class="msg">
			Use the +/- keys to scale the bitmap
		</div>

	</body>
</html>
<script>

	var w = '#fff';
	var r = '#f00';
	var c = '#fda';
	var u = '#b37314';
	var b = '#000';
	var y = '#fd0';
	var a = '#01f';
	// 15x14
	var bitmap = [
		w,w,w,w,r,r,r,r,r,w,w,c,c,c,w,
		w,w,w,r,r,r,r,r,r,r,r,r,c,c,w,
		w,w,w,u,u,u,c,c,b,c,w,r,r,r,w,
		w,w,u,c,u,c,c,c,b,c,c,c,r,r,w,
		w,w,u,c,u,u,c,c,c,b,c,c,c,r,w,
		w,w,u,u,c,c,c,c,b,b,b,b,r,w,w,
		w,w,w,w,c,c,c,c,c,c,c,r,r,w,w,
		w,r,r,r,r,a,r,r,r,a,r,r,w,w,u,
		w,r,r,r,r,r,a,r,r,r,a,w,w,u,u,
		w,w,r,r,r,r,a,a,a,a,y,a,a,u,u,
		w,w,w,a,a,a,a,y,a,a,a,a,a,u,u,
		w,u,u,a,a,a,a,a,a,a,a,a,a,u,u,
		u,u,u,a,a,a,a,a,a,w,w,w,w,w,w,
		u,u,w,w,w,w,w,w,w,w,w,w,w,w,w
	];
	var BITMAPWIDTH = 15;
	var BITMAPHEIGHT = 14;
	var $bitmap = document.querySelector( '.bitmap' );
	var $screen = document.querySelector( '.screen' );

	function drawBitmap( bitmap, width, height ) {
		// clean prev bitmap
		$bitmap.innerHTML = '';
		// center the elem
		$bitmap.style.marginTop = $screen.clientHeight/2 - height + 'px';

		// draw
		var countCells = 0,
			$tr = document.createElement( 'tr' ), $td,
			i = 0, l = bitmap.length;

		for( ; i < l; i++ ) {
			$td = document.createElement( 'td' );
			$td.style.backgroundColor = bitmap[i];
			$tr.appendChild( $td );
			if( ++countCells == width ) {
				$bitmap.appendChild( $tr );
				countCells = 0;
				$tr = document.createElement( 'tr' );
			}
		}
	}

	function scaleBitmap( scale ) {

		var newBitmap = [];

		var scaleStepY = BITMAPHEIGHT / scale;
		var scaleStepX = BITMAPWIDTH / scale;

		var i, j, scaleIndexX, scaleIndexY;
		var scaleInt = Math.floor( scale );
		var offsetY = 0;

		scaleIndexY = 0;
		for( i = 0; i < scaleInt; i++ ) {
			scaleIndexX = 0;
			for( j = 0; j < scaleInt; j++ ) {
				newBitmap.push( bitmap[offsetY + Math.floor( scaleIndexX )] );
				scaleIndexX += scaleStepX;
			}
			scaleIndexY += scaleStepY;
			offsetY = Math.floor( scaleIndexY ) * BITMAPWIDTH;
		}

		drawBitmap( newBitmap, scaleInt, scaleInt );
	}

	var PLUSNUMPAD = 107;
	var MINUSNUMPAD = 109;
	var PLUS = 171;
	var MINUS = 173;
	var scaleTo = BITMAPWIDTH;
	document.onkeydown = function( e ) {
		var ch = e.keyCode;

		if( ch == PLUS || ch == PLUSNUMPAD ) {
			scaleBitmap( ++scaleTo );

		} else if( ch == MINUS || ch == MINUSNUMPAD ) {
			scaleBitmap( --scaleTo );
		}

	};

	// init default
	drawBitmap( bitmap, BITMAPWIDTH, BITMAPHEIGHT );

</script>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Scaling 2D bitmap</title>
	<style>
	body {
	background: peru;
	font: 12px Tahoma, Ubuntu;
	}

	.screen {
	width: 320px;
	height: 200px;
	margin: 100px auto 0;
	border: 1px solid blue;
	background: pink;
	position: relative;
	}

	.bitmap {
	margin-left: auto;
	margin-right: auto;
	border-collapse: collapse;
	}
	.bitmap > span {
	display: inline-block;
	height: 1px;
	width: 1px;
	}

	.msg {
	width: 320px;
	margin: 10px auto;
	text-align: center;
	font-size: 15px;
	}
	</style>
	</head>
	<body>

	<div class="screen">
	<table class="bitmap"></table>
	</div>

	<div class="msg">
	Use the +/- keys to scale the bitmap
	</div>

	</body>
	</html>
	<script>

	var w = '#fff';
	var r = '#f00';
	var c = '#fda';
	var u = '#b37314';
	var b = '#000';
	var y = '#fd0';
	var a = '#01f';
	// 15x14
	var bitmap = [
	w,w,w,w,r,r,r,r,r,w,w,c,c,c,w,
	w,w,w,r,r,r,r,r,r,r,r,r,c,c,w,
	w,w,w,u,u,u,c,c,b,c,w,r,r,r,w,
	w,w,u,c,u,c,c,c,b,c,c,c,r,r,w,
	w,w,u,c,u,u,c,c,c,b,c,c,c,r,w,
	w,w,u,u,c,c,c,c,b,b,b,b,r,w,w,
	w,w,w,w,c,c,c,c,c,c,c,r,r,w,w,
	w,r,r,r,r,a,r,r,r,a,r,r,w,w,u,
	w,r,r,r,r,r,a,r,r,r,a,w,w,u,u,
	w,w,r,r,r,r,a,a,a,a,y,a,a,u,u,
	w,w,w,a,a,a,a,y,a,a,a,a,a,u,u,
	w,u,u,a,a,a,a,a,a,a,a,a,a,u,u,
	u,u,u,a,a,a,a,a,a,w,w,w,w,w,w,
	u,u,w,w,w,w,w,w,w,w,w,w,w,w,w
	];
	var BITMAPWIDTH = 15;
	var BITMAPHEIGHT = 14;
	var $bitmap = document.querySelector( '.bitmap' );
	var $screen = document.querySelector( '.screen' );

	function drawBitmap( bitmap, width, height ) {
	// clean prev bitmap
	$bitmap.innerHTML = '';
	// center the elem
	$bitmap.style.marginTop = $screen.clientHeight/2 - height + 'px';

	// draw
	var countCells = 0,
	$tr = document.createElement( 'tr' ), $td,
	i = 0, l = bitmap.length;

	for( ; i < l; i++ ) {
	$td = document.createElement( 'td' );
	$td.style.backgroundColor = bitmap[i];
	$tr.appendChild( $td );
	if( ++countCells == width ) {
	$bitmap.appendChild( $tr );
	countCells = 0;
	$tr = document.createElement( 'tr' );
	}
	}
	}

	function scaleBitmap( scale ) {

	var newBitmap = [];

	var scaleStepY = BITMAPHEIGHT / scale;
	var scaleStepX = BITMAPWIDTH / scale;

	var i, j, scaleIndexX, scaleIndexY;
	var scaleInt = Math.floor( scale );
	var offsetY = 0;

	scaleIndexY = 0;
	for( i = 0; i < scaleInt; i++ ) {
	scaleIndexX = 0;
	for( j = 0; j < scaleInt; j++ ) {
	newBitmap.push( bitmap[offsetY + Math.floor( scaleIndexX )] );
	scaleIndexX += scaleStepX;
	}
	scaleIndexY += scaleStepY;
	offsetY = Math.floor( scaleIndexY ) * BITMAPWIDTH;
	}

	drawBitmap( newBitmap, scaleInt, scaleInt );
	}

	var PLUSNUMPAD = 107;
	var MINUSNUMPAD = 109;
	var PLUS = 171;
	var MINUS = 173;
	var scaleTo = BITMAPWIDTH;
	document.onkeydown = function( e ) {
	var ch = e.keyCode;

	if( ch == PLUS \|\| ch == PLUSNUMPAD ) {
	scaleBitmap( ++scaleTo );

	} else if( ch == MINUS \|\| ch == MINUSNUMPAD ) {
	scaleBitmap( --scaleTo );
	}

	};

	// init default
	drawBitmap( bitmap, BITMAPWIDTH, BITMAPHEIGHT );

	</script>