diff --git a/index.html b/index.html
index cc26f51..c72b2fc 100644
--- a/index.html
+++ b/index.html
@@ -323,6 +323,11 @@
+
+
+
+ Set to 0 to wrap using the image's width instead, e.g. an 8px wide image adds a newline every 8th byte.
+
diff --git a/js/script.js b/js/script.js
index d5de5b5..3831f4e 100644
--- a/js/script.js
+++ b/js/script.js
@@ -23,6 +23,7 @@ const settings = {
invertColors: false,
rotation: 0,
esp32Format: false,
+ bytesPerRow: 16,
};
function bitswap(b) {
@@ -37,11 +38,17 @@ function bitswap(b) {
return b;
}
+// settings.bytesPerRow of 0 means "wrap using the image's width instead",
+// so a 8px-wide image gets a newline every 8 bytes.
+function resolveWrapWidth(canvasWidth) {
+ return settings.bytesPerRow > 0 ? settings.bytesPerRow : canvasWidth;
+}
+
// Accumulates formatted bytes (prefix/value/separator, wrapped every
// wrapWidth bytes) so our ConversionFunctions can use this formatting.
-// wrapWidth defaults to 16 bytes per line; horizontal888 wraps
-// once per image row (canvasWidth) instead.
-function makeByteWriter(wrapWidth = 16) {
+// horizontal888 always wraps once per image row (canvasWidth) regardless
+// of settings.bytesPerRow.
+function makeByteWriter(wrapWidth) {
let out = '';
let count = 0;
return {
@@ -87,7 +94,7 @@ function packBitsHorizontal(data, canvasWidth, writer, sampleAt) {
const ConversionFunctions = {
// Output the image as a string for horizontally drawing displays
horizontal1bit(data, canvasWidth) {
- const writer = makeByteWriter();
+ const writer = makeByteWriter(resolveWrapWidth(canvasWidth));
const avgRgb = (d, i) => (d[i] + d[i + 1] + d[i + 2]) / 3;
packBitsHorizontal(data, canvasWidth, writer, avgRgb);
return writer.result();
@@ -95,7 +102,7 @@ const ConversionFunctions = {
// Output the image as a string for vertically drawing displays
vertical1bit(data, canvasWidth, canvasHeight) {
- const writer = makeByteWriter();
+ const writer = makeByteWriter(resolveWrapWidth(canvasWidth));
for (let p = 0; p < Math.ceil(canvasHeight / 8); p++) {
for (let x = 0; x < canvasWidth; x++) {
let byteIndex = 7;
@@ -118,7 +125,7 @@ const ConversionFunctions = {
// Output the image as a string for 565 displays (horizontally)
// eslint-disable-next-line no-unused-vars
horizontal565(data, canvasWidth) {
- const writer = makeByteWriter();
+ const writer = makeByteWriter(resolveWrapWidth(canvasWidth));
// format is RGBA, so move 4 steps per pixel
for (let index = 0; index < data.length; index += 4) {
const r = data[index];
@@ -149,7 +156,7 @@ const ConversionFunctions = {
},
// Output the alpha mask as a string for horizontally drawing displays
horizontalAlpha(data, canvasWidth) {
- const writer = makeByteWriter();
+ const writer = makeByteWriter(resolveWrapWidth(canvasWidth));
packBitsHorizontal(data, canvasWidth, writer, (d, i) => d[i + 3]);
return writer.result();
},
@@ -885,7 +892,7 @@ function generateOutputString() {
code = `\t${code.split('\n').join('\n\t')}\n`;
// const variableCount = images.length() > 1 ? count++ : '';
const comment = glyphComment(image);
- bytesUsed += code.split('\n').length * 16; // 16 bytes per line.
+ bytesUsed += code.split('\n').length * resolveWrapWidth(image.canvas.width);
const varname = getIdentifier() + (image.glyph ? `${image.glyph.replace(/[^a-zA-Z0-9]/g, '_')}` : '');
varQuickArray.push(varname);