Formatting JS

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])) {