From 8146ef5b1386004ae00af19a5432c7df34caa647 Mon Sep 17 00:00:00 2001 From: Jochen Derwae Date: Tue, 12 Nov 2019 15:14:26 +0100 Subject: [PATCH 1/7] Added support for RGB 565 images (16 bit colors) and transparency bitmasks for use with a ST7789 (or similar) display. Look at the Adafruit_GFX::drawRGBBitmap functions for using these bitmaps. UI changes: - added a "Transparent" option in "Background color" selection - replaced drawMode radio buttons with a drop-down list - added a div (id=note1bit) around the note to switch to vertical mode Code changes: - added a ConversionFunctions object to hold the conversion functions (this makes it extendable towards more formats) - renamed imageToStringHorizontal() to horizontal1bit() - renamed imageToStringVertical() to vertical1bit() - added horizontal565() to generate 16 bit 565 RGB images - added horizontalAlpha() to generate transparency masks based on the image alpha value - added conversionFunction to settings object - added updateDrawMode() to handle the draw mode selection - also hides the note when using the new modes - updated place_image() to skip background fill in case transparency is selected - updated place_image(), commented out the conversion to black & white. Not sure at this time how to enable it again... drawMode? - updated imageToString() to use the conversionFunction from settings - moved getting the image raw data array from the conversion functions imageToString() --- index.html | 308 +++++++++++++++++++++++++++++++++++------------------ 1 file changed, 202 insertions(+), 106 deletions(-) diff --git a/index.html b/index.html index 257f9fd..1655415 100644 --- a/index.html +++ b/index.html @@ -235,6 +235,8 @@ + +
@@ -244,10 +246,10 @@
-
+
-
0 - 255; pixels with brightness above become white, below become black.
+
0 - 255; pixels with brightness above become white, below become blackpixels with alpha above become opaque, below transparent.
@@ -342,19 +344,23 @@
- - - - +
-
- If your image looks all messed up on your display, like the image below, try the other mode. +
+
+ If your image looks all messed up on your display, like the image below, try the other mode. +
+
-
@@ -365,6 +371,163 @@ From 0178ece9e302bc25598d1bb514cebe906b4a92bf Mon Sep 17 00:00:00 2001 From: Jochen Derwae Date: Tue, 12 Nov 2019 16:41:55 +0100 Subject: [PATCH 3/7] Updated imageToString() to remove the now deprecated orientation parameter Updated outputString() to deal with the updated imageToString() --- index.html | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 48639f0..74b970e 100644 --- a/index.html +++ b/index.html @@ -926,7 +926,7 @@ } } - function imageToString(orientation, image){ + function imageToString(image){ // extract raw image data var ctx = image.ctx; var canvas = image.canvas; @@ -955,7 +955,7 @@ case "arduino": { images.each(function(image) { - code = imageToString(settings["drawMode"], image); + code = imageToString(image); // Trim whitespace from end and remove trailing comma code = code.replace(/,\s*$/,""); @@ -964,7 +964,6 @@ var variableCount = images.length() > 1 ? count++ : ""; var comment = "// '" + image.glyph + "', "+image.canvas.width+"x"+image.canvas.height+"px\n"; - //uint16_t - unsigned char code = comment + "const " + getType() + " " + getIdentifier() + variableCount + @@ -979,7 +978,7 @@ case "arduino_single": { var comment = ""; images.each(function(image) { - code = imageToString(settings["drawMode"], image); + code = imageToString(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; @@ -998,7 +997,7 @@ var comment = ""; var useGlyphs = 0; images.each(function(image) { - code = imageToString(settings["drawMode"], image); + code = imageToString(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; @@ -1053,7 +1052,7 @@ } default: { // plain images.each(function(image) { - code = imageToString(settings["drawMode"], image); + code = imageToString(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; From eab5bd744ff23fa92e456f62f0ce9a19e27f1f1f Mon Sep 17 00:00:00 2001 From: Jochen Derwae Date: Tue, 12 Nov 2019 20:10:23 +0100 Subject: [PATCH 4/7] Added fill style for transparent background (erase buffer to full transparency) --- index.html | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 74b970e..fd73a99 100644 --- a/index.html +++ b/index.html @@ -696,14 +696,18 @@ //canvas.height = settings["screenHeight"]; // Invert background if needed - if (settings["backgroundColor"] != "transparent") { + if (settings["backgroundColor"] == "transparent") { + ctx.fillStyle = "rgba(0,0,0,0.0)"; + ctx.globalCompositeOperation = 'copy'; + } else { if (settings["invertColors"]){ settings["backgroundColor"] == "white" ? ctx.fillStyle = "black" : ctx.fillStyle = "white"; - }else{ + } else { ctx.fillStyle = settings["backgroundColor"]; } - ctx.fillRect(0, 0, canvas.width, canvas.height); + ctx.globalCompositeOperation = 'source-over'; } + ctx.fillRect(0, 0, canvas.width, canvas.height); // Offset used for centering the image when requested var offset_x = 0; From 9654bb6582452ff88d6f0efdfaadfdd2db372c6b Mon Sep 17 00:00:00 2001 From: Jochen Derwae Date: Tue, 19 Nov 2019 17:03:11 +0100 Subject: [PATCH 5/7] Reinstated the code to convert canvas contents to black and white and made it conditional based on the selected conversion function --- index.html | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index fd73a99..d1ecfe9 100644 --- a/index.html +++ b/index.html @@ -748,10 +748,13 @@ break; } // Make sure the image is black and white - /*blackAndWhite(canvas, ctx); - if(settings["invertColors"]){ - invert(canvas, ctx); - }*/ + if(settings.conversionFunction == ConversionFunctions.horizontal1bit + || settings.conversionFunction == ConversionFunctions.vertical1bit) { + blackAndWhite(canvas, ctx); + if(settings["invertColors"]){ + invert(canvas, ctx); + } + } } From 94c07d359517bdcbab317f4524a1947e27c9c596 Mon Sep 17 00:00:00 2001 From: javl Date: Sat, 30 Nov 2019 14:57:14 +0100 Subject: [PATCH 6/7] update some notes on page --- index.html | 41 ++++++++++++++++++++++++++--------------- 1 file changed, 26 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index d1ecfe9..ec1cc48 100644 --- a/index.html +++ b/index.html @@ -220,7 +220,7 @@
-
+
    Only images file type are allowed
    @@ -246,10 +246,11 @@
    -
    +
    -
    0 - 255; pixels with brightness above become white, below become blackpixels with alpha above become opaque, below transparent.
    +
    + 0 - 255; if the brightness of a pixel is above the given level the pixel becomes white, otherwise they become black. When using alpha, opaque and transparent are used instead.
    @@ -275,7 +276,7 @@
    - NOTE: Centering the image only works when using a canvas larger than the selected image. + Note: centering the image only works when using a canvas larger than the original image.
    @@ -348,14 +349,14 @@ - +
    - If your image looks all messed up on your display, like the image below, try the other mode. + If your image looks all messed up on your display, like the image below, try using a different mode.
    > 3); - // Split up the color value in two bytes var firstByte = (rgb >> 8) & 0xff; var secondByte = rgb & 0xff; @@ -481,7 +480,7 @@ } return output_string; }, - + // Output the alpha mask as a string for horizontally drawing displays horizontalAlpha: function (data, canvasWidth, canvasHeight){ var output_string = ""; @@ -523,7 +522,7 @@ return output_string; } }; - + // An images collection with helper methods function Images() { var collection = []; @@ -641,7 +640,7 @@ settings["outputFormat"] = elm.value; } - + function updateDrawMode(elm) { var note = document.getElementById("note1bit"); if(elm.value == "horizontal1bit" || elm.value == "vertical1bit") { @@ -649,7 +648,21 @@ } else { note.style.display = "none"; } - + + var conversionFunction = ConversionFunctions[elm.value]; + if(conversionFunction) { + settings.conversionFunction = conversionFunction; + } + } + + function updateDrawMode(elm) { + var note = document.getElementById("note1bit"); + if(elm.value == "horizontal1bit" || elm.value == "vertical1bit") { + note.style.display = "block"; + } else { + note.style.display = "none"; + } + var conversionFunction = ConversionFunctions[elm.value]; if(conversionFunction) { settings.conversionFunction = conversionFunction; @@ -940,7 +953,6 @@ var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); var data = imageData.data; - return settings.conversionFunction(data, canvas.width, canvas.height); } @@ -1215,7 +1227,6 @@ d[3] = 255; ctx.putImageData(single_pixel, x, y); } - // get the type (in arduino code) of the output image // this is a bit of a hack, it's better to make this a property of the conversion function (should probably turn it into objects) function getType() { From 0d87fa98e6da71600122a03d2d8585b36ed649ac Mon Sep 17 00:00:00 2001 From: javl Date: Sat, 30 Nov 2019 14:57:20 +0100 Subject: [PATCH 7/7] Update credits --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 64e79e4..bca110b 100644 --- a/README.md +++ b/README.md @@ -17,4 +17,5 @@ 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 [wiredolphin](https://github.com/wiredolphin), [davidalim](https://github.com/davidalim) and [whoisnian](https://github.com/whoisnian). The example sketch was made by [Adafruit](https://github.com/adafruit). +Initial code by [javl](https://github.com/javl), with aditional code by (in alphabetical order) [davidalim](https://github.com/davidalim), [jochenderwae](https://github.com/jochenderwae), [whoisnian](https://github.com/whoisnian) and [wiredolphin](https://github.com/wiredolphin). +The example sketch is based on code by [Adafruit](https://github.com/adafruit).