<commit_before><html>
<head>
	<title>TinyDuino Image Code Generator</title>
	<link rel="stylesheet" type="text/css" href="style.css"></link>
	<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
</head>
<body>
	<h1>TinyDuino Image Code Generator</h1>
	<p>This page enables you to convert images into C code. The resulting 
		source code is compiled into the binary and can be displayed 
		on the TinyScreen using the functionality of other libraries.</p>
	<div>
		<h1>Step 1: Select an image</h1>
		<input id="f" type="file" />
	</div>
	<div id="previewdiv" style="display:none">
		<h1>Step 2: Export options</h1>
		<table>
			<tr>
				<td>
					<h2>Options</h2>
					<table>
						<tr><td>Name:</td><td><input type="text" id="name" /></td></tr>
						<tr><td>Background color: </td><td>
						<select onchange="document.getElementById('canvas').style.background=this.value">
							<option value='#fff'>White</option>
							<option value='#000'>Black</option>
							<option value='#f00'>Red</option>
							<option value='#0f0'>Green</option>
							<option value='#00f'>Blue</option>
						</select></td></tr>

						<tr><td>Zoom: </td><td><select onchange="setZoom(this.value)">
							<option value="1">1x</option>
							<option value="2" selected="1">2x</option>
							<option value="3">3x</option>
							<option value="4">4x</option>
						</select></td></tr>

						<tr><td>Size: </td><td><select onchange="setSize(this.value.split(/,/))">
							<option value="96,64">96x64 (Tiny Screen)</option>
							<option value="-1,-1">Image size</option>
						</select></td></tr>

						<tr><td>Color conversion: </td><td><select onchange="setConverter(encoder[value])">
							<option value="RGBA">RGB(A)</option>
							<option value="RGB233">RGB-332 (8bit)</option>
							<option value="RGB233RLE">RGB-332 (8bit) + Run length encoding</option>
							<option value="RGB565">RGB-565 (16bit)</option>
						</select></td></tr>
						<tr><td>Transparency mask color:</td><td>
							<input id="mask" type="checkbox" checked="true" onchange="updateTransparency()" /><input type='color' id='maskcolor' value="#ff00ff" onchange="updateTransparency()" /></td></tr>
						<tr><td>Error diffusion:</td><td><input type="checkbox" checked="true" onchange="updateErrorDiffusion(this.checked)" /></td></tr>
						</table>
						
						<button onclick="generateOutput()">Generate C Code</button>
					</div>
				</td>
				<td id='canvasBackground'>
					<h2>Preview</h2>
					<canvas id="canvas" width="192" height="128" style='border:1px solid black'></canvas>
				</td>
			</tr>
		</table>
	</div>

	<div style="display:none" id='outputDiv'>
		<h1>C Code Output</h1>
		<div id="rgbaHint" class='hint'>
		</div>
		<div id="outputinfo"></div>
		Copy the source code into your header.<br />
		<textarea onclick="this.select()" id='output' readonly="true" cols="80" rows="8" wrap="soft"></textarea>
	</div>
	<script type="text/javascript">
	
	var encoder = {}
	encoder.RGBA = function (data, orig, i, bytes) {
		bytes.push(data[i]);
		bytes.push(data[i+1]);
		bytes.push(data[i+2]);
		bytes.push(data[i+3]);
	};
	encoder.RGBA.hint = 
		"Exporting data as RGBA (32bit) is rarely useful! The TinyScreen can "+
		"only display 16bit color depth."
	encoder.RGBA.bytesPerPixel = 4;
	encoder.RGB565 = function(data, orig, i, bytes) {
		if (data[i+3] < 128) {
			data[i] = Settings.transparentColor[0];
			data[i+1] = Settings.transparentColor[1];
			data[i+2] = Settings.transparentColor[2];
			data[i+3] = Settings.transparentColor[3];
		}
		var r = data[i] & (31 << 3);
		var g = data[i+1] & (63 << 2);
		var b = data[i+2] & (31 << 3);
		var rb = r | r >> 5;
		var gb = g | g >> 6;
		var bb = b | b >> 5;
		changePixel(data,i,rb,gb,bb);
		bytes.push(b|g>>5);
		bytes.push((g<<3)&0xff|(r>>3));
	}
	encoder.RGB565.bytesPerPixel = 2;

	encoder.RGB233 = function(data,orig, i, bytes) {
		if (data[i+3] < 128) {
			data[i] = Settings.transparentColor[0];
			data[i+1] = Settings.transparentColor[1];
			data[i+2] = Settings.transparentColor[2];
			data[i+3] = Settings.transparentColor[3];
		}

		var r = data[i] & (3 << 6);
		var g = data[i+1] & (7 << 5);
		var b = data[i+2] & (7 << 5);
		var rb = r | r >> 2 | r >> 4;
		var gb = g | g >> 3 | g >> 6;
		var bb = b | b >> 3 | b >> 6;
		changePixel(data,i,rb,gb,bb);
		bytes.push(r|g>>2|b>>5);
	}
	encoder.RGB233.bytesPerPixel = 1;

	encoder.RGB233X16B1 = function (data,orig,i,bytes) {
		encoder.RGB233
	} 

	encoder.RGB233RLE = function(data,orig,i,bytes) {
		return encoder.RGB233(data,orig,i,bytes);
	}
	encoder.RGB233RLE.bytesPerPixel = 1;
	encoder.RGB233RLE.hint = "Run length encoding compresses data by counting repeating "+
		"symbols and storing the number of occurences. So AAABB become 3A2B - which can "+
		"be shorter than the original sequence (not necessarily!). <br /><br />"+
		"The data can not be accessed out of order, which makes it a bad choice for "+
		"tile maps / texture atlases. It's better suited for large images that are "+
		"drawn entirely.<br /><br />Disabling error diffusion helps compression.";
	encoder.RGB233RLE.postConversion = function(bytes) {
		var compressed = [];
		var current = -1;
		var len = 0;
		for (var i=0;i<bytes.length;i+=1) {
			var val = bytes[i];
			if (val == current && len < 254) {
				len+=1;
			} else {
				if (len > 0) 
					compressed.push(val,len);<commit_msg>Fixing JS tool for generating rgb233 output<commit_after><html>
<head>
	<title>TinyDuino Image Code Generator</title>
	<link rel="stylesheet" type="text/css" href="style.css"></link>
	<script type="text/javascript" src="jquery-2.1.4.min.js"></script>
</head>
<body>
	<h1>TinyDuino Image Code Generator</h1>
	<p>This page enables you to convert images into C code. The resulting 
		source code is compiled into the binary and can be displayed 
		on the TinyScreen using the functionality of other libraries.</p>
	<div>
		<h1>Step 1: Select an image</h1>
		<input id="f" type="file" />
	</div>
	<div id="previewdiv" style="display:none">
		<h1>Step 2: Export options</h1>
		<table>
			<tr>
				<td>
					<h2>Options</h2>
					<table>
						<tr><td>Name:</td><td><input type="text" id="name" /></td></tr>
						<tr><td>Background color: </td><td>
						<select onchange="document.getElementById('canvas').style.background=this.value">
							<option value='#fff'>White</option>
							<option value='#000'>Black</option>
							<option value='#f00'>Red</option>
							<option value='#0f0'>Green</option>
							<option value='#00f'>Blue</option>
						</select></td></tr>

						<tr><td>Zoom: </td><td><select onchange="setZoom(this.value)">
							<option value="1">1x</option>
							<option value="2" selected="1">2x</option>
							<option value="3">3x</option>
							<option value="4">4x</option>
						</select></td></tr>

						<tr><td>Size: </td><td><select onchange="setSize(this.value.split(/,/))">
							<option value="96,64">96x64 (Tiny Screen)</option>
							<option value="-1,-1">Image size</option>
						</select></td></tr>

						<tr><td>Color conversion: </td><td><select onchange="setConverter(encoder[value])">
							<option value="RGBA">RGB(A)</option>
							<option value="RGB233">RGB-332 (8bit)</option>
							<option value="RGB233RLE">RGB-332 (8bit) + Run length encoding</option>
							<option value="RGB565">RGB-565 (16bit)</option>
						</select></td></tr>
						<tr><td>Transparency mask color:</td><td>
							<input id="mask" type="checkbox" checked="true" onchange="updateTransparency()" /><input type='color' id='maskcolor' value="#ff00ff" onchange="updateTransparency()" /></td></tr>
						<tr><td>Error diffusion:</td><td><input type="checkbox" checked="true" onchange="updateErrorDiffusion(this.checked)" /></td></tr>
						</table>
						
						<button onclick="generateOutput()">Generate C Code</button>
					</div>
				</td>
				<td id='canvasBackground'>
					<h2>Preview</h2>
					<canvas id="canvas" width="192" height="128" style='border:1px solid black'></canvas>
				</td>
			</tr>
		</table>
	</div>

	<div style="display:none" id='outputDiv'>
		<h1>C Code Output</h1>
		<div id="rgbaHint" class='hint'>
		</div>
		<div id="outputinfo"></div>
		Copy the source code into your header.<br />
		<textarea onclick="this.select()" id='output' readonly="true" cols="80" rows="8" wrap="soft"></textarea>
	</div>
	<script type="text/javascript">
	
	var encoder = {}
	encoder.RGBA = function (data, orig, i, bytes) {
		bytes.push(data[i]);
		bytes.push(data[i+1]);
		bytes.push(data[i+2]);
		bytes.push(data[i+3]);
	};
	encoder.RGBA.hint = 
		"Exporting data as RGBA (32bit) is rarely useful! The TinyScreen can "+
		"only display 16bit color depth."
	encoder.RGBA.bytesPerPixel = 4;
	encoder.RGB565 = function(data, orig, i, bytes) {
		if (data[i+3] < 128) {
			data[i] = Settings.transparentColor[0];
			data[i+1] = Settings.transparentColor[1];
			data[i+2] = Settings.transparentColor[2];
			data[i+3] = Settings.transparentColor[3];
		}
		var r = data[i] & (31 << 3);
		var g = data[i+1] & (63 << 2);
		var b = data[i+2] & (31 << 3);
		var rb = r | r >> 5;
		var gb = g | g >> 6;
		var bb = b | b >> 5;
		changePixel(data,i,rb,gb,bb);
		bytes.push(b|g>>5);
		bytes.push((g<<3)&0xff|(r>>3));
	}
	encoder.RGB565.bytesPerPixel = 2;

	encoder.RGB233 = function(data,orig, i, bytes) {
		if (data[i+3] < 128) {
			data[i] = Settings.transparentColor[0];
			data[i+1] = Settings.transparentColor[1];
			data[i+2] = Settings.transparentColor[2];
			data[i+3] = Settings.transparentColor[3];
		}

		var r = data[i] & (3 << 6);
		var g = data[i+1] & (7 << 5);
		var b = data[i+2] & (7 << 5);
		var rb = r | r >> 2 | r >> 4;
		var gb = g | g >> 3 | g >> 6;
		var bb = b | b >> 3 | b >> 6;
		changePixel(data,i,rb,gb,bb);
		bytes.push(r>>6|g>>3|b);
	}
	encoder.RGB233.bytesPerPixel = 1;

	encoder.RGB233X16B1 = function (data,orig,i,bytes) {
		encoder.RGB233
	} 

	encoder.RGB233RLE = function(data,orig,i,bytes) {
		return encoder.RGB233(data,orig,i,bytes);
	}
	encoder.RGB233RLE.bytesPerPixel = 1;
	encoder.RGB233RLE.hint = "Run length encoding compresses data by counting repeating "+
		"symbols and storing the number of occurences. So AAABB become 3A2B - which can "+
		"be shorter than the original sequence (not necessarily!). <br /><br />"+
		"The data can not be accessed out of order, which makes it a bad choice for "+
		"tile maps / texture atlases. It's better suited for large images that are "+
		"drawn entirely.<br /><br />Disabling error diffusion helps compression.";
	encoder.RGB233RLE.postConversion = function(bytes) {
		var compressed = [];
		var current = -1;
		var len = 0;
		for (var i=0;i<bytes.length;i+=1) {
			var val = bytes[i];
			if (val == current && len < 254) {
				len+=1;
			} else {
				if (len > 0) 
					compressed.push(val,len);
{'fraction_non_alphanumeric': 0.19332096474953617, 'fraction_numerical': 0.036085343228200374, 'mean_word_length': 3.693513278188942, 'pattern_counts': {'":': 0, '<': 323, '<?xml version=': 0, '>': 341, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '243690', 'n_tokens_mistral': 4718, 'n_tokens_neox': 3876, 'n_words': 901}