From df7ccac4829799efa591af6dd396bf8987c4a407 Mon Sep 17 00:00:00 2001
From: vince damiani <rebeldevil@vodafone.it>
Date: Sat, 12 Nov 2016 18:49:31 +0100
Subject: [PATCH 1/2] Text input feature: corrected a critic error

---
 index.html | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index c4ee8b4..834d5b6 100644
--- a/index.html
+++ b/index.html
@@ -318,6 +318,7 @@
 			this.length = function() { return collection.length; };
 			this.first = function() { return collection[0]; };
 			this.last = function() { return collection[collection.length - 1]; };
+			this.getByIndex = function(index) { return collection[index]; };
 			this.get = function(img) {
 				if(img) {
 					for(var i = 0; i < collection.length; i++) {
@@ -515,6 +516,13 @@
 		// Handle inserting an image by pasting code
 		function handleTextInput(drawMode){
 
+			images = new Images();
+			
+			var canvas = document.createElement('canvas');
+			canvas.width = 128;
+			canvas.height = 64;
+			canvasContainer.appendChild(canvas);
+			
 			var input = document.getElementById('byte-input').value;
 
 			// Remove Arduino code
@@ -531,9 +539,9 @@
 			var list = input.split(",");
 
 			if(drawMode == 'horizontal'){
-				listToImageHorizontal(list);
+				listToImageHorizontal(list, canvas);
 			}else{
-				listToImageVertical(list);
+				listToImageVertical(list, canvas);
 			}
 		}
 
@@ -887,8 +895,9 @@
 		}
 
 		// Use the horizontally oriented list to draw the image
-		function listToImageHorizontal(list){
+		function listToImageHorizontal(list, canvas){
 
+			var ctx = canvas.getContext('2d');
 			ctx.clearRect(0, 0, canvas.width, canvas.height);
 
 			var imgData = ctx.createImageData(canvas.width, canvas.height);
@@ -925,13 +934,16 @@
 			// inside the img object. This way we can reuse the img object when
 			// we want to scale / invert, etc.
 			ctx.putImageData(imgData, 0, 0);
+			var img = new Image();
 			img.src = canvas.toDataURL('image/png');
+			images.push(img);
 		}
 
 
 		// Use the vertically oriented list to draw the image
-		function listToImageVertical(list){
+		function listToImageVertical(list, canvas){
 
+			var ctx = canvas.getContext('2d');
 			ctx.clearRect(0, 0, canvas.width, canvas.height);
 
 			// Create a new imageData object, but 90 degrees rotates (height x width)

From b4c553cb5637399f33020b781b6b253c6491a494 Mon Sep 17 00:00:00 2001
From: vince damiani <rebeldevil@vodafone.it>
Date: Sat, 12 Nov 2016 18:55:16 +0100
Subject: [PATCH 2/2] text input field corrected critic error

---
 index.html | 39 +++++++++++++++++++++++++--------------
 1 file changed, 25 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index 834d5b6..0b20ba1 100644
--- a/index.html
+++ b/index.html
@@ -148,6 +148,10 @@
 				<div class="column column-right">
 					<h2 class="sub-section-title">1. Paste byte array</h2>
 					<textarea id="byte-input" class="byte-input"></textarea><br />
+					<div class="text-input-size">
+						<input type="text" id="text-input-width" class="size-input" value="128" /> x
+						<input type="text" id="text-input-height" class="size-input" value="64" /> px
+					</div>
 					<button onclick="handleTextInput('horizontal')">Read as horizontal</button>
 					<button onclick="handleTextInput('vertical')">Read as vertical</button>
 				</div>
@@ -319,6 +323,7 @@
 			this.first = function() { return collection[0]; };
 			this.last = function() { return collection[collection.length - 1]; };
 			this.getByIndex = function(index) { return collection[index]; };
+			this.setByIndex = function(index, img) { collection[index] = img; };
 			this.get = function(img) {
 				if(img) {
 					for(var i = 0; i < collection.length; i++) {
@@ -517,11 +522,18 @@
 		function handleTextInput(drawMode){
 
 			images = new Images();
-			
+	
 			var canvas = document.createElement('canvas');
-			canvas.width = 128;
-			canvas.height = 64;
+			canvas.width = parseInt(document.getElementById("text-input-width").value);
+			canvas.height = parseInt(document.getElementById("text-input-height").value);
+
+			if(canvasContainer.children.length) {
+				canvasContainer.removeChild(canvasContainer.firstChild);
+			}
 			canvasContainer.appendChild(canvas);
+
+			var image = new Image();
+			images.setByIndex(0, {"img": image, "canvas" : canvas});
 			
 			var input = document.getElementById('byte-input').value;
 
@@ -936,7 +948,7 @@
 			ctx.putImageData(imgData, 0, 0);
 			var img = new Image();
 			img.src = canvas.toDataURL('image/png');
-			images.push(img);
+			images.first().img = img;
 		}
 
 
@@ -973,7 +985,7 @@
 						color = 255;
 					}
 					// color = 0;
-					drawPixel(x, (page*8)+y, color);
+					drawPixel(ctx, x, (page*8)+y, color);
 					y--;
 					if(y < 0){
 						y = 7;
@@ -988,7 +1000,9 @@
 			}
 			// 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');
+			images.first().img = img;
 		}
 
 
@@ -1018,18 +1032,15 @@
 
 		// Quick and effective way to draw single pixels onto the canvas
 		// using a global 1x1px large canvas
-		var ctx = images && images.last() ? images.last().ctx : undefined;
-		if(ctx) {
+		function drawPixel(ctx, x, y, color) {
 			var single_pixel = ctx.createImageData(1,1);
 			var d  = single_pixel.data;
 
-			function drawPixel(x, y, color){
-				d[0] = color;
-				d[1] = color;
-				d[2] = color;
-				d[3] = 255;
-				ctx.putImageData(single_pixel, x, y);
-			}/**/
+			d[0] = color;
+			d[1] = color;
+			d[2] = color;
+			d[3] = 255;
+			ctx.putImageData(single_pixel, x, y);
 		}
 	</script>
 </body>