From 8146ef5b1386004ae00af19a5432c7df34caa647 Mon Sep 17 00:00:00 2001 From: Jochen Derwae Date: Tue, 12 Nov 2019 15:14:26 +0100 Subject: [PATCH 1/5] 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/5] 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/5] 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/5] 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); + } + } }