acspike/skog.html

## skog.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">

Array.prototype.shuffle = function() {
  var i = this.length, j, temp;
  if ( i == 0 ) return this;
  while ( --i ) {
     j = Math.floor( Math.random() * ( i + 1 ) );
     temp = this[i];
     this[i] = this[j];
     this[j] = temp;
  }
  return this;
};

var update = function(){
  $('#skog').html('');
  var white_canvas = function (width, height) {
    var canvas = document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;

    var ctx = canvas.getContext('2d');
    ctx.rect(0, 0, width, height);
    ctx.fillStyle="white";
    ctx.fill();
    return {'canvas': canvas, 'ctx': ctx};
  }
  var i,j,x,y;
  var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
  var cell_size = 30;
  var img_width, img_height;
  var img = new Image();
  img.addEventListener('load', function(){
    img_width = img.width;
    img_height = img.height;

    var width = Math.ceil(img_width / cell_size);
    var height = Math.ceil(img_height /cell_size);

    var buffer = white_canvas(width * cell_size, height * cell_size);
    buffer.ctx.drawImage(img, 0, 0);

    var img_data = buffer.canvas.toDataURL("image/png");

    // generate cells in random order and omit empty cells
    var cells = [];
    for (i = 0; i < width; i++) {
      for (j = 0; j < height; j++) {
        cells.push([i,j]);
      }
    }
    cells.shuffle();

    var empty = white_canvas(cell_size, cell_size);
    var empty_data = empty.ctx.getImageData(0, 0, cell_size, cell_size).data;

    for (i = 0; i < cells.length; i++) {
      x = cells[i][0];
      y = cells[i][1];

      var imgdata = buffer.ctx.getImageData((x*cell_size), (y*cell_size), cell_size, cell_size).data;
      var not_empty = false;
      for (j = 0; j < empty_data.length; j++) {
        if (empty_data[j] != imgdata[j]) {
          not_empty = true;
          break;
        }
      }

      if (not_empty) {
        var cell_html = '<div class="boxes">'+letters[y]+(x+1)+'<div class="cell" style="background-position: '+(-cell_size*x)+'px '+(-cell_size*y)+'px"></div></div>';
        $('#skog').append(cell_html);
      }
    }

    $('.boxes .cell').css({'background-image':"url(" + img_data + ")"});

    // generate the table to draw in
    var table_txt = ['<table><tr><td></td>'];
    for (j = 0; j < width; j++) {
      table_txt.push('<td>'+(j+1)+'</td>');
    }
    table_txt.push('</tr>');
    for (i = 0; i < height; i++) {
      table_txt.push('<tr>','<td>'+letters[i]+'</td>');
      for (j = 0; j < width; j++) {
        table_txt.push('<td class="cell"></td>');
      }
      table_txt.push('</tr>');
    }
    table_txt.push('</table>');
    $('#skog').append(table_txt.join(''));


  });
  img.src = $('#img-filename').val();

};

$(function(){

  update();
  $('#img-update').click(update);

});

</script>
<style type="text/css">

.boxes {
  text-align: center;
  margin: 10px;
  float: left;
}
.boxes .cell {
  width: 30px;
  height: 30px;
  margin-top: 5px;
  border: 1px solid black;
  background-color: white;
  background-repeat: no-repeat;
}

#skog table {
  border-collapse: collapse;
  clear: both;
}

#skog table td {
  width: 30px;
  height: 30px;
  vertical-align: middle;
  text-align: center;
}
#skog table td.cell {
  border: 1px solid black;
}

@media print {
  .noprint {
    display: none;
  }
}

</style>
</head>
<body>
<div class="noprint">
    <input type="text" id="img-filename" value="./004.png" />
    <button type="button" id="img-update">Update</button>
</div>
<div id="skog"></div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<script type="text/javascript">

	Array.prototype.shuffle = function() {
	var i = this.length, j, temp;
	if ( i == 0 ) return this;
	while ( --i ) {
	j = Math.floor( Math.random() * ( i + 1 ) );
	temp = this[i];
	this[i] = this[j];
	this[j] = temp;
	}
	return this;
	};

	var update = function(){
	$('#skog').html('');
	var white_canvas = function (width, height) {
	var canvas = document.createElement('canvas');
	canvas.width = width;
	canvas.height = height;

	var ctx = canvas.getContext('2d');
	ctx.rect(0, 0, width, height);
	ctx.fillStyle="white";
	ctx.fill();
	return {'canvas': canvas, 'ctx': ctx};
	}
	var i,j,x,y;
	var letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz';
	var cell_size = 30;
	var img_width, img_height;
	var img = new Image();
	img.addEventListener('load', function(){
	img_width = img.width;
	img_height = img.height;

	var width = Math.ceil(img_width / cell_size);
	var height = Math.ceil(img_height /cell_size);

	var buffer = white_canvas(width * cell_size, height * cell_size);
	buffer.ctx.drawImage(img, 0, 0);

	var img_data = buffer.canvas.toDataURL("image/png");

	// generate cells in random order and omit empty cells
	var cells = [];
	for (i = 0; i < width; i++) {
	for (j = 0; j < height; j++) {
	cells.push([i,j]);
	}
	}
	cells.shuffle();

	var empty = white_canvas(cell_size, cell_size);
	var empty_data = empty.ctx.getImageData(0, 0, cell_size, cell_size).data;

	for (i = 0; i < cells.length; i++) {
	x = cells[i][0];
	y = cells[i][1];

	var imgdata = buffer.ctx.getImageData((xcell_size), (ycell_size), cell_size, cell_size).data;
	var not_empty = false;
	for (j = 0; j < empty_data.length; j++) {
	if (empty_data[j] != imgdata[j]) {
	not_empty = true;
	break;
	}
	}

	if (not_empty) {
	var cell_html = '<div class="boxes">'+letters[y]+(x+1)+'<div class="cell" style="background-position: '+(-cell_sizex)+'px '+(-cell_sizey)+'px"></div></div>';
	$('#skog').append(cell_html);
	}
	}

	$('.boxes .cell').css({'background-image':"url(" + img_data + ")"});

	// generate the table to draw in
	var table_txt = ['<table><tr><td></td>'];
	for (j = 0; j < width; j++) {
	table_txt.push('<td>'+(j+1)+'</td>');
	}
	table_txt.push('</tr>');
	for (i = 0; i < height; i++) {
	table_txt.push('<tr>','<td>'+letters[i]+'</td>');
	for (j = 0; j < width; j++) {
	table_txt.push('<td class="cell"></td>');
	}
	table_txt.push('</tr>');
	}
	table_txt.push('</table>');
	$('#skog').append(table_txt.join(''));


	});
	img.src = $('#img-filename').val();

	};

	$(function(){

	update();
	$('#img-update').click(update);

	});

	</script>
	<style type="text/css">

	.boxes {
	text-align: center;
	margin: 10px;
	float: left;
	}
	.boxes .cell {
	width: 30px;
	height: 30px;
	margin-top: 5px;
	border: 1px solid black;
	background-color: white;
	background-repeat: no-repeat;
	}

	#skog table {
	border-collapse: collapse;
	clear: both;
	}

	#skog table td {
	width: 30px;
	height: 30px;
	vertical-align: middle;
	text-align: center;
	}
	#skog table td.cell {
	border: 1px solid black;
	}

	@media print {
	.noprint {
	display: none;
	}
	}

	</style>
	</head>
	<body>
	<div class="noprint">
	<input type="text" id="img-filename" value="./004.png" />
	<button type="button" id="img-update">Update</button>
	</div>
	<div id="skog"></div>
	</body>
	</html>