From eaf55aec004d24ba009756442dee6c5445e70695 Mon Sep 17 00:00:00 2001 From: vince damiani Date: Fri, 4 Nov 2016 16:37:01 +0100 Subject: [PATCH 1/9] multiple-files MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 1. Re-arranged html structure, used html5 features. 2. Added multiple images capability, images can be added one-by-one or selecting them with ctrl/cmd from the file dialog. 4. Output for multiple images can be represented by a single byte array or with a byte array for each images, its identifier will be increased with a trailing counter. 3. Added ‘GFXfontBitmap’ support. 4. Other smaller improvement. NOTE: still under testing. --- index.html | 797 ++++++++++++++++++++++++++++++++++++++++------------- 1 file changed, 606 insertions(+), 191 deletions(-) diff --git a/index.html b/index.html index 60b0dee..ef43c5b 100644 --- a/index.html +++ b/index.html @@ -3,161 +3,341 @@ Original utility by: https://jaspervanloenen.com - This is a modified version by: - https://wiredolphine.net + This is the 2nd revision of the modified version by: + https://wiredolphin.net --> image2cpp +
-

image2cpp

-

- - - - - -
-

1. Select image

-
- no image selected - - 		or -

1. Paste byte array

-
+
+

image2cpp

+

Click here to visit the Github repo for this tool.

+
+
+
+
+

1. Select image

+
+
+
+

or

+
+
+

1. Paste byte array

+
-
-

-
- -

+

+ + +

2. Image Settings

- * pixels
- - -
- 0 - 255; pixels with brightness above become white, below become black.
- -
- -
-
- Centering the image only works when using a canvas larger than the selected image.
- -

- -
- -

+

+
+
+
+
+
    +
    Only images file type are allowed
    + +
    +
    +
    +
    +
    + + + + +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    0 - 255; pixels with brightness above become white, below become black.
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + + + + +
    +
    +
    +
    + NOTE: Centering the image only works when using a canvas larger than the selected image. +
    +
    +
    +

    3. Preview

    - -

    - -
    - -

    +

    +
    +
    +
    +

    4. Output

    -
    - Adds some extra Arduino code around the output for easy copy-paste into this example.
    -

    - - -

    -
    - - -
    - If your image looks all messed up on your display, like the image below, try the other mode.
    -
    -

    -

    - -

    +
    +
    +
    +
    +
    + +
    +
    + Adds some extra Arduino code around the output for easy copy-paste into + this example. + If multiple images are loaded, generates a byte array for each and appends a counter to the identifier. +
    +
    + Adds some extra Arduino code around the output for easy copy-paste. + If multiple images are loaded, generates a single byte array. +
    +
    + Creates a GFXbitmapFont formatted ouput. Used by a modified version of the Adafruit GFX library. + GitHub project and example here. +
    + First ASCII character value is used only if a glyph identifier of length equal to 1 is not provided for each image. The value itself will be incremented by 1 for each glyph. +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    + +
    +
    +
    +
    +
    +
    +
    +
    +
    + + + + +
    +
    +
    +
    + If your image looks all messed up on your display, like the image below, try the other mode. +
    + +
    +
    + + +
    +
    + + From bfe60c590da39ca77a8121450ad0936f09e8dc6a Mon Sep 17 00:00:00 2001 From: vincent Date: Fri, 4 Nov 2016 16:57:15 +0100 Subject: [PATCH 2/9] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 5471ad5..c21f364 100644 --- a/README.md +++ b/README.md @@ -15,4 +15,4 @@ You can find a simple Arduino example sketch [over here](https://github.com/javl I wrote the code with my 128x64 pixel monochrome OLED display in mind, but it should work with most similar displays. You might need to change some export settings; those are explained in the tool. ### Credit ### -Initial code by [javl](https://github.com/javl), with aditional code by [wiredolphine](https://github.com/wiredolphin). The example sketch was made by Adafruit. +Initial code by [javl](https://github.com/javl), with aditional code by [wiredolphin](https://github.com/wiredolphin). The example sketch was made by Adafruit. From 88634133401ef9d11f82603024845d2b8bcf1576 Mon Sep 17 00:00:00 2001 From: vince damiani Date: Sat, 5 Nov 2016 08:33:45 +0100 Subject: [PATCH 3/9] integrated image and minor improvements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Example image encoded within html, no more external file required. Added “no files selected” if no images are added. --- index.html | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index ef43c5b..0c273ef 100644 --- a/index.html +++ b/index.html @@ -117,7 +117,8 @@ } #extra-settings-container { } #arduino-identifier, #adafruit-gfx-settings, #all-same-size { display: none; } - .error-msg { color: #ff0000; font-size: 1.2em; display: none; } + .msg { font-size: 1.2em; } + .error-msg { color: #ff0000; display: none; } @@ -151,7 +152,8 @@
      -
      Only images file type are allowed
      +
      Only images file type are allowed
      +
      No files selected
      @@ -279,7 +281,9 @@
      If your image looks all messed up on your display, like the image below, try the other mode.
      - +
      @@ -334,6 +338,8 @@ var allSameSizeButton = document.getElementById('all-same-size'); // error message var onlyImagesFileError = document.getElementById("only-images-file-error"); + // initial message + var noFileSelected = document.getElementById("no-file-selected"); // The variable to hold our images. Global so we can easily reuse it when the // user updates the settings (change canvas size, scale, invert, etc) @@ -549,6 +555,10 @@ var files = evt.target.files; onlyImagesFileError.style.display = "none"; + files.length > 0 ? + noFileSelected.style.display = "none" : + noFileSelected.style.display = "block"; + for (var i = 0, f; f = files[i]; i++) { // Only process image files. @@ -614,6 +624,7 @@ if(imageSizeSettings.children.length == 1) { allSameSizeButton.style.display = "none"; } + if(images.length() == 0) noFileSelected.style.display = "block"; update(); }; From 561f4d7c2e4b673dda5659cea5db1787032b2b3e Mon Sep 17 00:00:00 2001 From: vincent Date: Sat, 5 Nov 2016 08:37:11 +0100 Subject: [PATCH 4/9] Delete error.jpg --- img/error.jpg | Bin 7330 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 img/error.jpg diff --git a/img/error.jpg b/img/error.jpg deleted file mode 100644 index 9109b259bdd7801b2991c0a7ca827a0ec2d2c266..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 7330 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 Date: Sat, 5 Nov 2016 09:03:08 +0100 Subject: [PATCH 5/9] minor improvements and restyles --- index.html | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 0c273ef..62233c5 100644 --- a/index.html +++ b/index.html @@ -42,8 +42,13 @@ } .column { float: left; - min-width: 100px; - margin: 0 20px 0 0; + } + .column-center { + min-width: 160px; + text-align: center; + } + .column-right { + float: right; } .sub-section-title { margin: 0 0 10px; @@ -70,15 +75,15 @@ color: #505050; } .byte-input { - min-width: 400px; - min-height: 200px; + min-width: 360px; + min-height: 160px; } .code-output { width: 100%; height: 200px; } .note { color: #666666; margin: 3px 0; font-size: .9em; line-height: 1.4em; } - button { + button, input[type="file"]::-webkit-file-upload-button { margin: 10px 0; background: #00CB99; border: none; @@ -88,6 +93,10 @@ font-size: .9em; border-radius: 3px; } + input[type="file"]::-webkit-file-upload-button { + padding: 6px 20px; + font-size: 1.6em; + } .generate-button { margin: 40px 0 20px; } @@ -133,10 +142,10 @@

      1. Select image


      -
      +

      or

      -
      +

      1. Paste byte array


      From 26b8a5c628eb73d973d83691e4ab2e9e206bf75f Mon Sep 17 00:00:00 2001 From: vince damiani Date: Sat, 5 Nov 2016 09:24:46 +0100 Subject: [PATCH 6/9] GFXbitmapFont correction --- index.html | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 62233c5..2e606d2 100644 --- a/index.html +++ b/index.html @@ -822,7 +822,8 @@ output_string = output_string.substring(0, output_string.length - 3); output_string = "const unsigned char " - + getIdentifier() + + getIdentifier() + + "Bitmap" + " [] PROGMEM = {" + "\n" + output_string + "\n};\n\n" + "const GFXbitmapGlyph " @@ -858,7 +859,7 @@ + getIdentifier() + "Font PROGMEM = {\n" + "\t(uint8_t *)" - + getIdentifier() + ",\n" + + getIdentifier() + "Bitmap,\n" + "\t(GFXbitmapGlyph *)" + getIdentifier() + "Glyphs,\n" From 94f4166995caee8bfa7d1ee25f21bc51f6280afc Mon Sep 17 00:00:00 2001 From: vince damiani Date: Sat, 5 Nov 2016 09:40:22 +0100 Subject: [PATCH 7/9] GFXbitmapFont correction --- index.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/index.html b/index.html index 2e606d2..c4ee8b4 100644 --- a/index.html +++ b/index.html @@ -846,9 +846,8 @@ image.glyph : String.fromCharCode(firstAschiiChar++)) + "'" + " }" - + " // '" + image.glyph + "'" if(image != images.last()) code += ","; - code += "\n"; + code += " // '" + image.glyph + "'\n"; offset += image.canvas.width; }); code += "};\n"; From df7ccac4829799efa591af6dd396bf8987c4a407 Mon Sep 17 00:00:00 2001 From: vince damiani Date: Sat, 12 Nov 2016 18:49:31 +0100 Subject: [PATCH 8/9] 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 Date: Sat, 12 Nov 2016 18:55:16 +0100 Subject: [PATCH 9/9] 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 @@

      1. Paste byte array


      +
      + x + px +
      @@ -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); }