emhoracek · September 22, 2015 00:51
diff --git a/viewer.html b/viewer.html
 <html>

 <head><title>reading some cels and palettes!</title></head>

 <body>

 <div id="filepicker">
 <p>Palette: <input type="file" id="pal-files" name="file" /> </p>
 <p>Cel:<input type="file" id="cel-files" name="file" /> </p>
 <span class="readBytesButtons">
    <button>entire file</button>
 </span>
 </div>

 <div id="info" style="width:33%; float: left">
 <div id="kiss-marker"></div>
 <div id="cel-marker"></div>
 <div id="cel-width"></div>
 <div id="cel-height"></div>
 <div id="cel-colors"></div>
 <div id="cel-offx"></div>
 <div id="cel-offy"></div>
 <div id="pal-marker"></div>
 <div id="bits-per-color"></div>
 <div id="number-colors"></div>
 </div>

 <canvas style="float:right" id="cel-image" width=300 height=300></canvas>

 <script>
 function readPaletteBlob() {

  var files = document.getElementById('pal-files').files;
  if (!files.length) {
    alert('Please select a file!');
    return;
  }

  var file = files[0];

  var reader = new FileReader();

  // If we use onloadend, we need to check the readyState.
  reader.onloadend = function(evt) {
    if (evt.target.readyState == FileReader.DONE) { // DONE == 2
      var dv = new DataView(evt.target.result);
      var kmarker = ""
      for (var i = 0; i < 4; i++) {
        kmarker+= String.fromCharCode(dv.getUint8(i));
      }
      if (dv.getUint8(4) == 16) {
        cmarker = "Palette file marker found.";
      }
      else {
        cmarker = "Not a palette file.";
      }
      var bpc = dv.getInt8(5);
      var numcolors   = dv.getInt8(8) + (256 * dv.getInt8(9));
      var colors = [];
      
      for (var i = 0, off = 32; i < numcolors * 3; i++) {
        colors[i] = dv.getUint8(i+off);
      }

      document.getElementById('kiss-marker').textContent = kmarker;
      document.getElementById('pal-marker').textContent = cmarker;
      document.getElementById('bits-per-color').textContent = bpc; 
      document.getElementById('number-colors').textContent = numcolors; 

      readCelBlob(colors);
    }
  };

  reader.readAsArrayBuffer(file);
 }

 function readCelBlob(palette) {
 
  var palette = palette;
  
  var files = document.getElementById('cel-files').files;
  if (!files.length) {
    alert('Please select a file!');
    return;
  }

  var file = files[0];

  var reader = new FileReader();

  // If we use onloadend, we need to check the readyState.
  reader.onloadend = function(evt) {
    if (evt.target.readyState == FileReader.DONE) { // DONE == 2
      var dv = new DataView(evt.target.result);
      var kmarker = ""
      for (var i = 0; i < 4; i++) {
        kmarker+= String.fromCharCode(dv.getUint8(i));
      }
      if (dv.getUint8(4) == 32) {
        cmarker = "Cel file marker found.";
      }
      else {
        cmarker = "Not a cel file.";
      }
      var width  = dv.getUint8(8)  + (256 * dv.getUint8(9));
      var height = dv.getUint8(10) + (256 * dv.getUint8(11));
      var offx   = dv.getUint8(12) + (256 * dv.getUint8(13));
      var offy   = dv.getUint8(14) + (256 * dv.getUint8(15));
      
      var pixels = new Uint8ClampedArray(width*height);
      for (var i = 0, off = 32; i < (width * height); i++) {
        pixels[i] = dv.getUint8(i+off);
      }
      var pixeldata = new Uint8ClampedArray(width * height * 4);
      for (var i = 0, j = 0; i < width * height * 4; i = i + 4, j++) {
        var palentry   = pixels[j] * 3;
        pixeldata[i]   = palette[palentry]
        pixeldata[i+1] = palette[palentry + 1];
        pixeldata[i+2] = palette[palentry + 2];
        if (palentry == 0) {
          pixeldata[i+3] = 0;
        }
        else {
          pixeldata[i+3] = 255;
        }
      }
      var screen = document.getElementById('cel-image').getContext('2d');
 
      document.getElementById('kiss-marker').textContent = kmarker;
      document.getElementById('cel-marker').textContent = cmarker;
      document.getElementById('cel-width').textContent = width;
      document.getElementById('cel-height').textContent = height;
      document.getElementById('cel-offx').textContent = offx;
      document.getElementById('cel-offy').textContent = offy;
      
      var idata = new ImageData (pixeldata, width, height); 
      screen.putImageData(idata, 0,0);  
      
    }
  };

  reader.readAsArrayBuffer(file);
 }
  
 document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
  if (evt.target.tagName.toLowerCase() == 'button') {
    readPaletteBlob();
  }
 }, false);
 </script>

 </body>

 </html>
	<html>

	<head><title>reading some cels and palettes!</title></head>

	<body>

	<div id="filepicker">
	<p>Palette: <input type="file" id="pal-files" name="file" /> </p>
	<p>Cel:<input type="file" id="cel-files" name="file" /> </p>
	<span class="readBytesButtons">
	<button>entire file</button>
	</span>
	</div>

	<div id="info" style="width:33%; float: left">
	<div id="kiss-marker"></div>
	<div id="cel-marker"></div>
	<div id="cel-width"></div>
	<div id="cel-height"></div>
	<div id="cel-colors"></div>
	<div id="cel-offx"></div>
	<div id="cel-offy"></div>
	<div id="pal-marker"></div>
	<div id="bits-per-color"></div>
	<div id="number-colors"></div>
	</div>

	<canvas style="float:right" id="cel-image" width=300 height=300></canvas>

	<script>
	function readPaletteBlob() {

	var files = document.getElementById('pal-files').files;
	if (!files.length) {
	alert('Please select a file!');
	return;
	}

	var file = files[0];

	var reader = new FileReader();

	// If we use onloadend, we need to check the readyState.
	reader.onloadend = function(evt) {
	if (evt.target.readyState == FileReader.DONE) { // DONE == 2
	var dv = new DataView(evt.target.result);
	var kmarker = ""
	for (var i = 0; i < 4; i++) {
	kmarker+= String.fromCharCode(dv.getUint8(i));
	}
	if (dv.getUint8(4) == 16) {
	cmarker = "Palette file marker found.";
	}
	else {
	cmarker = "Not a palette file.";
	}
	var bpc = dv.getInt8(5);
	var numcolors = dv.getInt8(8) + (256 * dv.getInt8(9));
	var colors = [];

	for (var i = 0, off = 32; i < numcolors * 3; i++) {
	colors[i] = dv.getUint8(i+off);
	}

	document.getElementById('kiss-marker').textContent = kmarker;
	document.getElementById('pal-marker').textContent = cmarker;
	document.getElementById('bits-per-color').textContent = bpc;
	document.getElementById('number-colors').textContent = numcolors;

	readCelBlob(colors);
	}
	};

	reader.readAsArrayBuffer(file);
	}

	function readCelBlob(palette) {

	var palette = palette;

	var files = document.getElementById('cel-files').files;
	if (!files.length) {
	alert('Please select a file!');
	return;
	}

	var file = files[0];

	var reader = new FileReader();

	// If we use onloadend, we need to check the readyState.
	reader.onloadend = function(evt) {
	if (evt.target.readyState == FileReader.DONE) { // DONE == 2
	var dv = new DataView(evt.target.result);
	var kmarker = ""
	for (var i = 0; i < 4; i++) {
	kmarker+= String.fromCharCode(dv.getUint8(i));
	}
	if (dv.getUint8(4) == 32) {
	cmarker = "Cel file marker found.";
	}
	else {
	cmarker = "Not a cel file.";
	}
	var width = dv.getUint8(8) + (256 * dv.getUint8(9));
	var height = dv.getUint8(10) + (256 * dv.getUint8(11));
	var offx = dv.getUint8(12) + (256 * dv.getUint8(13));
	var offy = dv.getUint8(14) + (256 * dv.getUint8(15));

	var pixels = new Uint8ClampedArray(width*height);
	for (var i = 0, off = 32; i < (width * height); i++) {
	pixels[i] = dv.getUint8(i+off);
	}
	var pixeldata = new Uint8ClampedArray(width * height * 4);
	for (var i = 0, j = 0; i < width * height * 4; i = i + 4, j++) {
	var palentry = pixels[j] * 3;
	pixeldata[i] = palette[palentry]
	pixeldata[i+1] = palette[palentry + 1];
	pixeldata[i+2] = palette[palentry + 2];
	if (palentry == 0) {
	pixeldata[i+3] = 0;
	}
	else {
	pixeldata[i+3] = 255;
	}
	}
	var screen = document.getElementById('cel-image').getContext('2d');

	document.getElementById('kiss-marker').textContent = kmarker;
	document.getElementById('cel-marker').textContent = cmarker;
	document.getElementById('cel-width').textContent = width;
	document.getElementById('cel-height').textContent = height;
	document.getElementById('cel-offx').textContent = offx;
	document.getElementById('cel-offy').textContent = offy;

	var idata = new ImageData (pixeldata, width, height);
	screen.putImageData(idata, 0,0);

	}
	};

	reader.readAsArrayBuffer(file);
	}

	document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
	if (evt.target.tagName.toLowerCase() == 'button') {
	readPaletteBlob();
	}
	}, false);
	</script>

	</body>

	</html>