From 044a4e3db9b9af9f8f1885ffcdfe41b4b075dda5 Mon Sep 17 00:00:00 2001
From: javl <mail@jaspervanloenen.com>
Date: Thu, 24 May 2018 11:31:54 +0200
Subject: [PATCH 1/4] Fix way trailing whitespace+comma gets removed from code

Closes #18

Instead of removing an x-amount of characters from the strings to get
rid of trailing commas, a regular expression is now used.
---
 index.html | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index b0bfdaa..e6b53cb 100644
--- a/index.html
+++ b/index.html
@@ -805,12 +805,12 @@
 					images.each(function(image) {
 						code = imageToString(settings['drawMode'], image);
 
-						// remove last comma and space chars
-						code = code.substring(0, code.length - 3);
+						// Trim whitespace from end and remove trailing comma
+						code = code.replace(/,\s*$/,"");
 
 						code = "\t" + code.split("\n").join("\n\t") + "\n";
 						var variableCount = images.length() > 1 ? count++ : "";
-						var comment = " // '" + image.glyph + "', "+image.canvas.width+"x"+image.canvas.height+"px\n";
+						var comment = "// '" + image.glyph + "', "+image.canvas.width+"x"+image.canvas.height+"px\n";
 
 						code = comment + "const unsigned char "
 							+ getIdentifier()
@@ -831,7 +831,8 @@
 						output_string += comment + code;
 					});
 
-					output_string = output_string.substring(0, output_string.length - 3);
+					output_string = output_string.replace(/,\s*$/,"");
+
 					output_string = "const unsigned char "
 						+ getIdentifier()
 						+ " [] PROGMEM = {"
@@ -850,7 +851,7 @@
 						if(image.glyph.length == 1) useGlyphs++;
 					});
 
-					output_string = output_string.substring(0, output_string.length - 3);
+					output_string = output_string.replace(/,\s*$/,"");
 					output_string = "const unsigned char "
 						+ getIdentifier()
 						+ "Bitmap"
@@ -877,7 +878,7 @@
 									String.fromCharCode(firstAschiiChar++)) + "'"
 							+ " }"
 						if(image != images.last()) code += ",";
-						code += " // '" + image.glyph + "'\n";
+						code += "// '" + image.glyph + "'\n";
 						offset += image.canvas.width;
 					});
 					code += "};\n";
@@ -896,15 +897,16 @@
 						+ "\n};\n"
 					break;
 				};
-				default: {
+				default: { // plain
 					images.each(function(image) {
 						code = imageToString(settings['drawMode'], image);
-						var comment = image.glyph ? (" // '" + image.glyph + "', " + image.canvas.width+"x"+image.canvas.height+"px\n") : "";
+						var comment = image.glyph ? ("// '" + image.glyph + "', " + image.canvas.width+"x"+image.canvas.height+"px\n") : "";
 						if(image.img != images.first().img) comment = "\n" + comment;
 						code = comment + code;
 						output_string += code;
 					});
-					output_string = output_string.substring(0, output_string.length - 2);
+					// Trim whitespace from end and remove trailing comma
+					output_string = output_string.replace(/,\s*$/gm,"");
 				}
 			}
 

From 5c38e85d58a95aad3614a47640d967f9059d686a Mon Sep 17 00:00:00 2001
From: javl <mail@jaspervanloenen.com>
Date: Thu, 24 May 2018 11:36:53 +0200
Subject: [PATCH 2/4] CSS formatting

---
 index.html | 126 +++++++++++++++++++++++++++++++++++++----------------
 1 file changed, 88 insertions(+), 38 deletions(-)

diff --git a/index.html b/index.html
index e6b53cb..67236e1 100644
--- a/index.html
+++ b/index.html
@@ -21,10 +21,10 @@
 			font-family: arial;
 		}
 		.wrapper {
-			width: 800px;
-			margin: auto;
 			display: flex;
 			flex-direction: column;
+			margin: auto;
+			width: 800px;
 		}
 		.section {
 			margin: 10px 0;
@@ -37,7 +37,8 @@
 			clear: both;
 			margin-bottom: 1px;
 		}
-		.section, .sub-section {
+		.section,
+		.sub-section {
 			width: 100%;
 		}
 		.column {
@@ -56,46 +57,77 @@
 		p {
 			margin: 20px 0;
 		}
-		.table { display: table; width: 100%; margin: 10px 0 0;}
-		.table-row { display: table-row; width: 100%; }
-		.table-cell { display: table-cell; padding: 5px 0;}
-		.table-cell:first-child { width: 30%; }
-		.table-cell:last-child { width: 70%; }
-		.table-cell:first-child label {font-weight: bold; }
-		.table-cell:last-child label { margin-right: 10px; }
-		.nested-table { margin: 0; }
-		.nested-table .table-cell { font-size: .9em; color: #666; width: 200px; }
-		.nested-table .table-cell:first-child {	}
-		#format-caption-container div {
-			display: none;
+		.table {
+			display: table;
+			margin: 10px 0 0;
 			width: 100%;
-			padding: 10px 0 15px;
+		}
+		.table-row {
+			display: table-row;
+			width: 100%;
+		}
+		.table-cell {
+			display: table-cell;
+			padding: 5px 0;
+		}
+		.table-cell:first-child {
+			width: 30%;
+		}
+		.table-cell:last-child {
+			width: 70%;
+		}
+		.table-cell:first-child label {
+			font-weight: bold;
+		}
+		.table-cell:last-child label {
+			margin-right: 10px;
+		}
+		.nested-table {
+			margin: 0;
+		}
+		.nested-table .table-cell {
+			color: #666;
+			font-size: .9em;
+			width: 200px;
+		}
+		.nested-table .table-cell:first-child {	}
+
+		#format-caption-container div {
+			color: #505050;
+			display: none;
 			font-size: .9em;
 			line-height: 1.4em;
-			color: #505050;
+			padding: 10px 0 15px;
+			width: 100%;
 		}
 		.byte-input {
-			min-width: 360px;
 			min-height: 160px;
+			min-width: 360px;
 		}
 		.code-output {
-			width: 100%;
 			height: 200px;
+			width: 100%;
 		}
-		.note { color: #666666; margin: 3px 0; font-size: .9em; line-height: 1.4em; }
-		button, input[type="file"]::-webkit-file-upload-button {
-			margin: 10px 0;
-			background: #00CB99;
-			border: none;
-			padding: 4px 8px;
-			color: #fff;
-			font-weight: 100;
+		.note {
+			color: #666666;
 			font-size: .9em;
+			line-height: 1.4em;
+			margin: 3px 0;
+		}
+		button,
+		input[type="file"]::-webkit-file-upload-button {
+			background: #00CB99;
 			border-radius: 3px;
+			border: none;
+			color: #fff;
+			font-size: .9em;
+			font-weight: 100;
+			margin: 10px 0;
+			padding: 4px 8px;
 		}
 		input[type="file"]::-webkit-file-upload-button {
-			padding: 6px 20px;
 			font-size: 1.6em;
+			padding: 6px 20px;
 		}
 		.generate-button {
 			margin: 40px 0 20px;
@@ -105,29 +137,47 @@
 			padding: 1px 4px;
 		}
 		.file-info {
-			font-size: .7em;
 			color: #505050;
+			font-size: .7em;
 			margin-left: 20px;
-			white-space: pre;
 			max-width: 300px;
+			white-space: pre;
+		}
+		.size-input{
+			width: 45px;
+		}
+		.glyph-input {
+			width: 80px;
+			margin-left: 10px;
+		}
+		#image-size-settings {
+			list-style-type: none;
+		}
+		#image-size-settings li {
+			margin: 4px 0;
 		}
-		.size-input{ width: 45px; }
-		.glyph-input { width: 80px; margin-left: 10px; }
-		#image-size-settings { list-style-type: none; }
-		#image-size-settings li { margin: 4px 0; }
 		#images-canvas-container canvas {
 			border: 3px solid #88DAC5;
 			margin: 10px 15px;
 		}
 		#images-canvas-container {
+			align-items: flex-start;
 			display: flex;
 			flex-wrap: wrap;
-			align-items: flex-start;
 		}
 		#extra-settings-container {	}
-		#arduino-identifier, #adafruit-gfx-settings, #all-same-size { display: none; }
-		.msg { font-size: 1.2em; }
-		.error-msg { color: #ff0000; display: none; }
+		#arduino-identifier,
+		#adafruit-gfx-settings,
+		#all-same-size {
+			display: none;
+		}
+		.msg {
+			font-size: 1.2em;
+		}
+		.error-msg {
+			color: #ff0000;
+			display: none;
+		}
 	</style>
 </head>
 <body>

From 84d4091ac7a5f349622890d6dc66ce3a241bc2d3 Mon Sep 17 00:00:00 2001
From: javl <mail@jaspervanloenen.com>
Date: Thu, 24 May 2018 12:04:18 +0200
Subject: [PATCH 3/4] Formatting JS

---
 index.html | 190 ++++++++++++++++++++++++++---------------------------
 1 file changed, 94 insertions(+), 96 deletions(-)

diff --git a/index.html b/index.html
index 67236e1..365d7b6 100644
--- a/index.html
+++ b/index.html
@@ -358,7 +358,6 @@
 
 
 	<script type="text/javascript">
-
 		// An images collection with helper methods
 		function Images() {
 			var collection = [];
@@ -389,19 +388,19 @@
 		}
 
 		// Add events to the file input button
-		var fileInput = document.getElementById('file-input');
-		fileInput.addEventListener('click', function(){this.value = null;}, false);
-		fileInput.addEventListener('change', handleImageSelection, false);
+		var fileInput = document.getElementById("file-input");
+		fileInput.addEventListener("click", function(){this.value = null;}, false);
+		fileInput.addEventListener("change", handleImageSelection, false);
 
 		// Filetypes accepted by the file picker
-		var fileTypes = ['jpg', 'jpeg', 'png', 'bmp', 'gif', 'svg'];
+		var fileTypes = ["jpg", "jpeg", "png", "bmp", "gif", "svg"];
 
 		// The canvas we will draw on
-		var canvasContainer = document.getElementById('images-canvas-container');
+		var canvasContainer = document.getElementById("images-canvas-container");
 		// multiple images settings container
-		var imageSizeSettings = document.getElementById('image-size-settings');
+		var imageSizeSettings = document.getElementById("image-size-settings");
 		// all images same size button
-		var allSameSizeButton = document.getElementById('all-same-size');
+		var allSameSizeButton = document.getElementById("all-same-size");
 		// error message
 		var onlyImagesFileError = document.getElementById("only-images-file-error");
 		// initial message
@@ -420,15 +419,15 @@
 			centerHorizontally: false,
 			centerVertically: false,
 			backgroundColor: "white",
-			scale: '1',
-			drawMode: 'horizontal',
+			scale: "1",
+			drawMode: "horizontal",
 			threshold: 128,
 			outputFormat: "plain",
 			invertColors: false
 		};
 
-		// Variable name, when 'arduino code' is required
-		var identifier = 'myBitmap';
+		// Variable name, when "arduino code" is required
+		var identifier = "myBitmap";
 
 		function update() {
 			images.each(function(image) { place_image(image); });
@@ -462,7 +461,7 @@
 
 			var caption = document.getElementById("format-caption-container");
 			var adafruitGfx = document.getElementById("adafruit-gfx-settings");
-			var arduino = document.getElementById('arduino-identifier');
+			var arduino = document.getElementById("arduino-identifier");
 
 			for(var i = 0; i < caption.children.length; i++) {
 				caption.children[i].style.display = "none";
@@ -471,9 +470,9 @@
 			if(caption) caption.style.display = "block";
 
 			elm.value != "plain" ? arduino.style.display = "block" : arduino.style.display = "none";
-			elm.value == "adafruit_gfx" ? adafruitGfx.style.display = "block" : adafruitGfx.style.display = " none";
+			elm.value == "adafruit_gfx" ? adafruitGfx.style.display = "block" : adafruitGfx.style.display = "none";
 
-			settings['outputFormat'] = elm.value;
+			settings["outputFormat"] = elm.value;
 		}
 
 		// Make the canvas black and white
@@ -482,13 +481,13 @@
 			var data = imageData.data;
 			for (var i = 0; i < data.length; i += 4) {
 				var avg = (data[i] + data[i +1] + data[i +2]) / 3;
-				avg > settings['threshold'] ? avg = 255 : avg = 0;
+				avg > settings["threshold"] ? avg = 255 : avg = 0;
 				data[i]     = avg; // red
 				data[i + 1] = avg; // green
 				data[i + 2] = avg; // blue
 			}
 			ctx.putImageData(imageData, 0, 0);
-		};
+		}
 
 
 		// Invert the colors of the canvas
@@ -501,25 +500,25 @@
 				data[i + 2] = 255 - data[i + 2]; // blue
 			}
 			ctx.putImageData(imageData, 0, 0);
-		};
+		}
 
 		// Draw the image onto the canvas, taking into account color and scaling
 		function place_image(image){
 
 			var img = image.img;
 			var canvas = image.canvas;
-			var ctx = canvas.getContext('2d');
+			var ctx = canvas.getContext("2d");
 			image.ctx = ctx;
 
 			// Make sure we're using the right canvas size
-			//canvas.width = settings['screenWidth'];
-			//canvas.height = settings['screenHeight'];
+			//canvas.width = settings["screenWidth"];
+			//canvas.height = settings["screenHeight"];
 
 			// Invert background if needed
-			if (settings['invertColors']){
-				settings['backgroundColor'] == 'white' ? ctx.fillStyle = 'black' : ctx.fillStyle = 'white';
+			if (settings["invertColors"]){
+				settings["backgroundColor"] == "white" ? ctx.fillStyle = "black" : ctx.fillStyle = "white";
 			}else{
-				ctx.fillStyle = settings['backgroundColor'];
+				ctx.fillStyle = settings["backgroundColor"];
 			}
 			ctx.fillRect(0, 0, canvas.width, canvas.height);
 
@@ -527,35 +526,35 @@
 			var offset_x = 0;
 			var offset_y = 0;
 
-			switch(settings['scale']){
-				case '1': // Original
-					if(settings['centerHorizontally']){ offset_x = (canvas.width - img.width) / 2; }
-					if(settings['centerVertically']){ offset_y = (canvas.height - img.height) / 2; }
+			switch(settings["scale"]){
+				case "1": // Original
+					if(settings["centerHorizontally"]){ offset_x = (canvas.width - img.width) / 2; }
+					if(settings["centerVertically"]){ offset_y = (canvas.height - img.height) / 2; }
 					ctx.drawImage(img, 0, 0, img.width, img.height,
 						offset_x, offset_y, img.width, img.height);
 				break;
-				case '2': // Fit (make as large as possible without changing ratio)
+				case "2": // Fit (make as large as possible without changing ratio)
 					var horRatio = canvas.width / img.width;
 					var verRatio =  canvas.height / img.height;
 					var useRatio  = Math.min(horRatio, verRatio);
 
-					if(settings['centerHorizontally']){ offset_x = (canvas.width - img.width*useRatio) / 2; }
-					if(settings['centerVertically']){ offset_y = (canvas.height - img.height*useRatio) / 2; }
+					if(settings["centerHorizontally"]){ offset_x = (canvas.width - img.width*useRatio) / 2; }
+					if(settings["centerVertically"]){ offset_y = (canvas.height - img.height*useRatio) / 2; }
 					ctx.drawImage(img, 0, 0, img.width, img.height,
 						offset_x, offset_y, img.width * useRatio, img.height * useRatio);
 				break;
-				case '3': // Stretch x+y (make as large as possible without keeping ratio)
+				case "3": // Stretch x+y (make as large as possible without keeping ratio)
 					ctx.drawImage(img, 0, 0, img.width, img.height,
 						offset_x, offset_y, canvas.width, canvas.height);
 				break;
-				case '4': // Stretch x (make as wide as possible)
+				case "4": // Stretch x (make as wide as possible)
 					offset_x = 0;
-					if(settings['centerVertically']){ offset_y = (canvas.height - img.height) / 2; }
+					if(settings["centerVertically"]){ offset_y = (canvas.height - img.height) / 2; }
 					ctx.drawImage(img, 0, 0, img.width, img.height,
 						offset_x, offset_y, canvas.width, img.height);
 				break;
-				case '5': // Stretch y (make as tall as possible)
-					if(settings['centerHorizontally']){ offset_x = (canvas.width - img.width) / 2; }
+				case "5": // Stretch y (make as tall as possible)
+					if(settings["centerHorizontally"]){ offset_x = (canvas.width - img.width) / 2; }
 					offset_y = 0;
 					ctx.drawImage(img, 0, 0, img.width, img.height,
 						offset_x, offset_y, img.width, canvas.height);
@@ -563,7 +562,7 @@
 			}
 			// Make sure the image is black and white
 			blackAndWhite(canvas, ctx);
-			if(settings['invertColors']){
+			if(settings["invertColors"]){
 				invert(canvas, ctx);
 			}
 		}
@@ -572,7 +571,7 @@
 		// Handle inserting an image by pasting code
 		function handleTextInput(drawMode){
 
-			var canvas = document.createElement('canvas');
+			var canvas = document.createElement("canvas");
 			canvas.width = parseInt(document.getElementById("text-input-width").value);
 			canvas.height = parseInt(document.getElementById("text-input-height").value);
 
@@ -584,7 +583,7 @@
 			var image = new Image();
 			images.setByIndex(0, {"img": image, "canvas" : canvas});
 
-			var input = document.getElementById('byte-input').value;
+			var input = document.getElementById("byte-input").value;
 
 			// Remove Arduino code
 			input = input.replace(/const unsigned char myBitmap \[\] PROGMEM = \{/g, "");
@@ -604,7 +603,7 @@
 			var list = input.split(",");
 			console.log(list);
 
-			if(drawMode == 'horizontal'){
+			if(drawMode == "horizontal"){
 				listToImageHorizontal(list, canvas);
 			}else{
 				listToImageVertical(list, canvas);
@@ -645,7 +644,7 @@
 			for (var i = 0, f; f = files[i]; i++) {
 
 				// Only process image files.
-				if(!f.type.match('image.*')) {
+				if(!f.type.match("image.*")) {
 				onlyImagesFileError.style.display = "block";
 					continue;
 				}
@@ -659,12 +658,12 @@
 
 						img.onload = function(){
 
-							var canvas = document.createElement('canvas');
+							var canvas = document.createElement("canvas");
 
-							var imageEntry = document.createElement('li');
-							imageEntry.setAttribute('data-img', file.name);
+							var imageEntry = document.createElement("li");
+							imageEntry.setAttribute("data-img", file.name);
 
-							var w = document.createElement('input');
+							var w = document.createElement("input");
 							w.type = "number";
 							w.name = "width";
 							w.min = 0;
@@ -672,7 +671,7 @@
 							w.value = img.width;
 							w.oninput = function() { canvas.width = this.value; update(); };
 
-							var h = document.createElement('input');
+							var h = document.createElement("input");
 							h.type = "number";
 							h.name = "height";
 							h.min = 0;
@@ -680,11 +679,11 @@
 							h.value = img.height;
 							h.oninput = function() { canvas.height = this.value; update(); };
 
-							var gil = document.createElement('span');
+							var gil = document.createElement("span");
 							gil.innerHTML = "glyph";
 							gil.className = "file-info";
 
-							var gi = document.createElement('input');
+							var gi = document.createElement("input");
 							gi.type = "text";
 							gi.name = "glyph";
 							gi.className = "glyph-input";
@@ -693,12 +692,12 @@
 								image.glyph = gi.value;
 							};
 
-							var fn = document.createElement('span');
+							var fn = document.createElement("span");
 							fn.className = "file-info";
 							fn.innerHTML = file.name + "  (file resolution: " + img.width + " x " + img.height + ")";
 							fn.innerHTML += "<br />";
 
-							var rb = document.createElement('button');
+							var rb = document.createElement("button");
 							rb.className = "remove-button";
 							rb.innerHTML = "remove";
 							rb.onclick = function() {
@@ -727,10 +726,10 @@
 							canvas.height = img.height;
 							canvasContainer.appendChild(canvas);
 
-							images.push(img, canvas, file.name.split('.')[0]);
+							images.push(img, canvas, file.name.split(".")[0]);
 							place_image(images.last());
 							allSameSize(images, files);
-						}
+						};
 						img.src = e.target.result;
 					};
 				})(f);
@@ -739,7 +738,7 @@
 		}
 
 		function imageToString(orientation, image){
-			if(orientation == 'horizontal')
+			if(orientation == "horizontal")
 				return imageToStringHorizontal(image);
 			return imageToStringVertical(image);
 		}
@@ -761,7 +760,7 @@
 			for(var index = 0; index < imageData.data.length; index += 4){
 				// Get the average of the RGB (we ignore A)
 				var avg = (imageData.data[index] + imageData.data[index + 1] + imageData.data[index + 2]) / 3;
-				if(avg > settings['threshold']){
+				if(avg > settings["threshold"]){
 					number += Math.pow(2, byteIndex);
 				}
 				byteIndex--;
@@ -795,8 +794,6 @@
 
 		// Output the image as a string for vertically drawing displays
 		function imageToStringVertical(image){
-			var x = 0;
-			var y = 7;
 			var page = 0;
 			var ctx = image.ctx;
 			var canvas = image.canvas;
@@ -807,15 +804,15 @@
 			var output_string = "";
 			var output_index = 0;
 
-			for(var p=0; p < Math.ceil(settings['screenHeight'] / 8); p++){
-				for(var x = 0;x <= settings['screenWidth']; x++){
+			for(var p=0; p < Math.ceil(settings["screenHeight"] / 8); p++){
+				for(var x = 0; x <= settings["screenWidth"]; x++){
 					var byteIndex = 7;
 					var number = 0;
 
 					for (var y = 7; y >= 0; y--){
-						var index = ((p*8)+y)*(settings['screenWidth']*4)+x;
+						var index = ((p*8)+y)*(settings["screenWidth"]*4)+x;
 						var avg = (data[index] + data[index +1] + data[index +2]) / 3;
-						if (avg > settings['threshold']){
+						if (avg > settings["threshold"]){
 							number += Math.pow(2, byteIndex);
 						}
 						byteIndex--;
@@ -837,7 +834,7 @@
 
 		// Get the custom arduino output variable name, if any
 		function getIdentifier() {
-			var vn = document.getElementById('identifier');
+			var vn = document.getElementById("identifier");
 			return vn && vn.value.length ? vn.value : identifier;
 		}
 
@@ -848,12 +845,12 @@
 			var output_string = "", count = 1;
 			var code = "";
 
-			switch(settings['outputFormat']) {
+			switch(settings["outputFormat"]) {
 
 				case "arduino": {
 
 					images.each(function(image) {
-						code = imageToString(settings['drawMode'], image);
+						code = imageToString(settings["drawMode"], image);
 
 						// Trim whitespace from end and remove trailing comma
 						code = code.replace(/,\s*$/,"");
@@ -862,20 +859,21 @@
 						var variableCount = images.length() > 1 ? count++ : "";
 						var comment = "// '" + image.glyph + "', "+image.canvas.width+"x"+image.canvas.height+"px\n";
 
-						code = comment + "const unsigned char "
-							+ getIdentifier()
-							+ variableCount
-							+ " [] PROGMEM = {"
-							+ "\n" + code + "};\n";
+						code = comment + "const unsigned char " +
+								getIdentifier() +
+								variableCount +
+								" [] PROGMEM = {" +
+								"\n" + code + "};\n";
 
 						output_string += code;
 					});
 					break;
-				};
+				}
+
 				case "arduino_single": {
 					var comment = "";
 					images.each(function(image) {
-						code = imageToString(settings['drawMode'], image);
+						code = imageToString(settings["drawMode"], image);
 						code = "\t" + code.split("\n").join("\n\t") + "\n";
 						comment = "\t// '" + image.glyph + ", " + image.canvas.width+"x"+image.canvas.height+"px\n";
 						output_string += comment + code;
@@ -888,13 +886,13 @@
 						+ " [] PROGMEM = {"
 						+ "\n" + output_string + "\n};";
 					break;
-				};
-				case "adafruit_gfx": {
-					// bitmap
+				}
+
+				case "adafruit_gfx": { // bitmap
 					var comment = "";
 					var useGlyphs = 0;
 					images.each(function(image) {
-						code = imageToString(settings['drawMode'], image);
+						code = imageToString(settings["drawMode"], image);
 						code = "\t" + code.split("\n").join("\n\t") + "\n";
 						comment = "\t// '" + image.glyph + ", " + image.canvas.width+"x"+image.canvas.height+"px\n";
 						output_string += comment + code;
@@ -926,8 +924,8 @@
 							+ "'" + (images.length() == useGlyphs ?
 								image.glyph :
 									String.fromCharCode(firstAschiiChar++)) + "'"
-							+ " }"
-						if(image != images.last()) code += ",";
+							+ " }";
+						if(image != images.last()){ code += ","; }
 						code += "// '" + image.glyph + "'\n";
 						offset += image.canvas.width;
 					});
@@ -944,12 +942,12 @@
 						+ getIdentifier()
 						+ "Glyphs,\n"
 						+ "\t" + images.length()
-						+ "\n};\n"
+						+ "\n};\n";
 					break;
-				};
+				}
 				default: { // plain
 					images.each(function(image) {
-						code = imageToString(settings['drawMode'], image);
+						code = imageToString(settings["drawMode"], image);
 						var comment = image.glyph ? ("// '" + image.glyph + "', " + image.canvas.width+"x"+image.canvas.height+"px\n") : "";
 						if(image.img != images.first().img) comment = "\n" + comment;
 						code = comment + code;
@@ -960,13 +958,13 @@
 				}
 			}
 
-			document.getElementById('code-output').value = output_string;
+			document.getElementById("code-output").value = output_string;
 		}
 
 		// Use the horizontally oriented list to draw the image
 		function listToImageHorizontal(list, canvas){
 
-			var ctx = canvas.getContext('2d');
+			var ctx = canvas.getContext("2d");
 			ctx.clearRect(0, 0, canvas.width, canvas.height);
 
 			var imgData = ctx.createImageData(canvas.width, canvas.height);
@@ -994,7 +992,7 @@
 				// Check if pixel is white or black
 				for(var k=0; k<binString.length; k++){
 					var color = 0;
-					if(binString.charAt(k) == '1'){
+					if(binString.charAt(k) == "1"){
 						color = 255;
 					}
 					imgData.data[index] = color;
@@ -1002,7 +1000,7 @@
 					imgData.data[index+2] = color;
 					imgData.data[index+3] = 255;
 
-					index += 4
+					index += 4;
 				}
 			}
 
@@ -1011,7 +1009,7 @@
 			// we want to scale / invert, etc.
 			ctx.putImageData(imgData, 0, 0);
 			var img = new Image();
-			img.src = canvas.toDataURL('image/png');
+			img.src = canvas.toDataURL("image/png");
 			images.first().img = img;
 		}
 
@@ -1019,7 +1017,7 @@
 		// Use the vertically oriented list to draw the image
 		function listToImageVertical(list, canvas){
 
-			var ctx = canvas.getContext('2d');
+			var ctx = canvas.getContext("2d");
 			ctx.clearRect(0, 0, canvas.width, canvas.height);
 
 			var index = 0;
@@ -1045,7 +1043,7 @@
 				// Check if pixel is white or black
 				for(var k=0; k<binString.length; k++){
 					var color = 0;
-					if(binString.charAt(k) == '1'){
+					if(binString.charAt(k) == "1"){
 						color = 255;
 					}
 					drawPixel(ctx, x, (page*8)+y, color);
@@ -1053,7 +1051,7 @@
 					if(y < 0){
 						y = 7;
 						x++;
-						if(x >= settings['screenWidth']){
+						if(x >= settings["screenWidth"]){
 							x = 0;
 							page++;
 						}
@@ -1064,7 +1062,7 @@
 			// Save the canvas contents inside the img object. This way we can
 			// reuse the img object when we want to scale / invert, etc.
 			var img = new Image();
-			img.src = canvas.toDataURL('image/png');
+			img.src = canvas.toDataURL("image/png");
 			images.first().img = img;
 		}
 
@@ -1072,15 +1070,15 @@
 		// Convert hex to binary
 		function hexToBinary(s) {
 
-			var i, k, part, ret = '';
-			// lookup table for easier conversion. '0' characters are padded for '1' to '7'
+			var i, k, part, ret = "";
+			// lookup table for easier conversion. "0" characters are
+			// padded for "1" to "7"
 			var lookupTable = {
-				'0': '0000', '1': '0001', '2': '0010', '3': '0011', '4': '0100',
-				'5': '0101', '6': '0110', '7': '0111', '8': '1000', '9': '1001',
-				'a': '1010', 'b': '1011', 'c': '1100', 'd': '1101',
-				'e': '1110', 'f': '1111',
-				'A': '1010', 'B': '1011', 'C': '1100', 'D': '1101',
-				'E': '1110', 'F': '1111'
+				"0": "0000", "1": "0001", "2": "0010", "3": "0011", "4": "0100",
+				"5": "0101", "6": "0110", "7": "0111", "8": "1000", "9": "1001",
+				"a": "1010", "b": "1011", "c": "1100", "d": "1101", "e": "1110",
+				"f": "1111", "A": "1010", "B": "1011", "C": "1100", "D": "1101",
+				"E": "1110", "F": "1111"
 			};
 			for (i = 0; i < s.length; i += 1) {
 				if (lookupTable.hasOwnProperty(s[i])) {

From c2dbefed979395d1be09d6a442260974494cc27e Mon Sep 17 00:00:00 2001
From: javl <mail@jaspervanloenen.com>
Date: Thu, 24 May 2018 12:19:04 +0200
Subject: [PATCH 4/4] Update text

---
 index.html | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 365d7b6..69c6769 100644
--- a/index.html
+++ b/index.html
@@ -184,8 +184,10 @@
 	<div class="wrapper">
 		<section class="section">
 			<h1>image2cpp</h1>
-			<p><a href="https://github.com/javl/image2cpp" target="_blank">Click here to visit the Github repo for this tool.</a></p>
-			<p><b>Note:</b> the tool was updated to let you select and convert multiple files at the same time (among some other changes). Do let us know if this update broke anything by <a href="https://github.com/javl/image2cpp/issues" target="_blank">opening an issue on Github</a>.</p>
+			<p>This tool helps you convert images into bytestrings, which can be used with Arduino and OLED displays (among other platforms).
+				It was originally made to work with the Adafruit OLED library. An example sketch for Arduino and this library can be found <a href="https://github.com/javl/image2cpp/blob/master/oled_example/oled_example.ino" target="_blank">here</a>.</p>
+			<p>More info can be found in the <a href="https://github.com/javl/image2cpp" target="_blank">Github repository</a>. This is also where you report any <a href="https://github.com/javl/image2cpp/issues" target="_blank">issues</a> you might come across.</p>
+			<p>This tool also works offline. Simply save this page to your computer and open the file in your browser.</p>
 		</section>
 		<section class="section bottom-divider">
 			<section class="sub-section">