diff --git a/index.html b/index.html index 333ec51..31e8025 100644 --- a/index.html +++ b/index.html @@ -148,6 +148,10 @@

1. Paste byte array


+
+ x + px +
@@ -318,6 +322,8 @@ 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.setByIndex = function(index, img) { collection[index] = img; }; this.get = function(img) { if(img) { for(var i = 0; i < collection.length; i++) { @@ -515,6 +521,20 @@ // Handle inserting an image by pasting code function handleTextInput(drawMode){ + images = new Images(); + + var canvas = document.createElement('canvas'); + 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; // Remove Arduino code @@ -531,9 +551,9 @@ var list = input.split(","); if(drawMode == 'horizontal'){ - listToImageHorizontal(list); + listToImageHorizontal(list, canvas); }else{ - listToImageVertical(list); + listToImageVertical(list, canvas); } } @@ -887,8 +907,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 +946,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.first().img = 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) @@ -961,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; @@ -976,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; } @@ -1006,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); }