From cf74b95ae9d83a3bc4352d8901d871e960c2fe03 Mon Sep 17 00:00:00 2001 From: javl Date: Fri, 14 Aug 2026 18:41:09 +0200 Subject: [PATCH] add some more formatting options --- index.html | 25 +++++++++-------- js/script.js | 79 ++++++++++++++++++++++------------------------------ 2 files changed, 48 insertions(+), 56 deletions(-) diff --git a/index.html b/index.html index c4d0343..5c2706c 100644 --- a/index.html +++ b/index.html @@ -287,22 +287,25 @@
+ Swap between MSB and LSB. Useful when working with the u8g2 library.
-
-
-
- Useful when working with the u8g2 library. -
-
- - -
+
- - +
+ + +
+
+ + +
+
+ + +
diff --git a/js/script.js b/js/script.js index f61f39a..d69915b 100644 --- a/js/script.js +++ b/js/script.js @@ -14,10 +14,12 @@ const settings = { backgroundColor: 'white', scale: 1, drawMode: 'horizontal', - removeZeroesCommas: false, + prefix: '0x', ditheringThreshold: 128, ditheringMode: 0, outputFormat: 'plain', + separator: ', ', + outputComments: true, invertColors: false, rotation: 0, }; @@ -64,16 +66,10 @@ const ConversionFunctions = { if (byteIndex < 0) { let byteSet = bitswap(number).toString(16); if (byteSet.length === 1) { byteSet = `0${byteSet}`; } - if (!settings.removeZeroesCommas) { - stringFromBytes += `0x${byteSet}, `; - } else { - stringFromBytes += byteSet; - } + stringFromBytes += `${settings.prefix}${byteSet}${settings.separator}`; outputIndex++; if (outputIndex >= 16) { - if (!settings.removeZeroesCommas) { - stringFromBytes += '\n'; - } + stringFromBytes += '\n'; outputIndex = 0; } number = 0; @@ -103,11 +99,7 @@ const ConversionFunctions = { } let byteSet = bitswap(number).toString(16); if (byteSet.length === 1) { byteSet = `0${byteSet}`; } - if (!settings.removeZeroesCommas) { - stringFromBytes += `0x${byteSet.toString(16)}, `; - } else { - stringFromBytes += byteSet.toString(16); - } + stringFromBytes += `${settings.prefix}${byteSet}${settings.separator}`; outputIndex++; if (outputIndex >= 16) { stringFromBytes += '\n'; @@ -139,11 +131,7 @@ const ConversionFunctions = { let byteSet = bitswap(rgb).toString(16); while (byteSet.length < 4) { byteSet = `0${byteSet}`; } - if (!settings.removeZeroesCommas) { - stringFromBytes += `0x${byteSet}, `; - } else { - stringFromBytes += byteSet; - } + stringFromBytes += `${settings.prefix}${byteSet}${settings.separator}`; // add newlines every 16 bytes outputIndex++; if (outputIndex >= 16) { @@ -173,11 +161,7 @@ const ConversionFunctions = { let byteSet = bitswap(rgb).toString(16); while (byteSet.length < 8) { byteSet = `0${byteSet}`; } - if (!settings.removeZeroesCommas) { - stringFromBytes += `0x${byteSet}, `; - } else { - stringFromBytes += byteSet; - } + stringFromBytes += `${settings.prefix}${byteSet}${settings.separator}`; // add newlines every 16 bytes outputIndex++; @@ -214,11 +198,7 @@ const ConversionFunctions = { if (byteIndex < 0) { let byteSet = bitswap(number).toString(16); if (byteSet.length === 1) { byteSet = `0${byteSet}`; } - if (!settings.removeZeroesCommas) { - stringFromBytes += `0x${byteSet}, `; - } else { - stringFromBytes += byteSet; - } + stringFromBytes += `${settings.prefix}${byteSet}${settings.separator}`; outputIndex++; if (outputIndex >= 16) { stringFromBytes += '\n'; @@ -478,6 +458,13 @@ function updateBoolean(fieldName) { updateAllImages(); } +// Easy way to update settings controlled by a text input +// eslint-disable-next-line no-unused-vars +function updateString(fieldName) { + settings[fieldName] = document.getElementById(fieldName).value; + updateAllImages(); +} + // Convert hex to binary function hexToBinary(s) { let i; @@ -912,7 +899,7 @@ function generateOutputString() { code = `\t${code.split('\n').join('\n\t')}\n`; // const variableCount = images.length() > 1 ? count++ : ''; - const comment = `// '${image.glyph}', ${image.canvas.width}x${image.canvas.height}px\n`; + const comment = settings.outputComments ? `// '${image.glyph}', ${image.canvas.width}x${image.canvas.height}px\n` : ''; bytesUsed += code.split('\n').length * 16; // 16 bytes per line. const varname = getIdentifier() + (image.glyph ? image.glyph.replace(/[^a-zA-Z0-9]/g, '_') : ''); @@ -922,7 +909,12 @@ function generateOutputString() { }); varQuickArray.sort(); - outputString += `\n// Array of all bitmaps for convenience. (Total bytes used to store images in PROGMEM = ${bytesUsed})\n`; + if (outputString.length > 0) { + outputString += '\n'; + } + if (settings.outputComments) { + outputString += `// Array of all bitmaps for convenience. (Total bytes used to store images in PROGMEM = ${bytesUsed})\n`; + } outputString += `const int ${getIdentifier()}_allArray_LEN = ${varQuickArray.length};\n`; outputString += `const ${getImageType()}* ${getIdentifier()}_allArray[${varQuickArray.length}] = {\n\t${varQuickArray.join(',\n\t')}\n};\n`; break; @@ -933,7 +925,7 @@ function generateOutputString() { images.each((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`; + comment = settings.outputComments ? `\t// '${image.glyph}, ${image.canvas.width}x${image.canvas.height}px\n` : ''; outputString += comment + code; }); @@ -952,7 +944,7 @@ function generateOutputString() { images.each((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`; + comment = settings.outputComments ? `\t// '${image.glyph}', ${image.canvas.width}x${image.canvas.height}px\n` : ''; outputString += comment + code; if (image.glyph.length === 1) { useGlyphs++; @@ -988,7 +980,7 @@ function generateOutputString() { if (image !== images.last()) { code += ','; } - code += `// '${image.glyph}'\n`; + code += settings.outputComments ? `// '${image.glyph}'\n` : '\n'; offset += image.canvas.width; }); code += '};\n'; @@ -1011,7 +1003,7 @@ function generateOutputString() { images.each((image) => { code = imageToString(image); let comment = ''; - if (image.glyph) { + if (image.glyph && settings.outputComments) { comment = (`// '${image.glyph}', ${image.canvas.width}x${image.canvas.height}px\n`); } if (image.img !== images.first().img) { @@ -1073,7 +1065,6 @@ function updateOutputFormat(elm) { let caption = document.getElementById('format-caption-container'); const adafruitGfx = document.getElementById('adafruit-gfx-settings'); const arduino = document.getElementById('arduino-identifier'); - const removeZeroesCommasContainer = document.getElementById('remove-zeroes-commas-container'); document.getElementById('code-output').value = ''; for (let i = 0; i < caption.children.length; i++) { @@ -1082,15 +1073,13 @@ function updateOutputFormat(elm) { caption = document.querySelector(`div[data-caption='${elm.value}']`); if (caption) caption.style.display = 'block'; - if (elm.value !== 'plain') { - arduino.style.display = 'block'; - removeZeroesCommasContainer.style.display = 'none'; - settings.removeZeroesCommas = false; - document.getElementById('removeZeroesCommas').checked = false; - } else { - arduino.style.display = 'none'; - removeZeroesCommasContainer.style.display = 'table-row'; - } + arduino.style.display = elm.value !== 'plain' ? 'block' : 'none'; + + settings.prefix = '0x'; + document.getElementById('prefix').value = '0x'; + settings.separator = ', '; + document.getElementById('separator').value = ', '; + if (elm.value === 'adafruit_gfx') { adafruitGfx.style.display = 'block'; } else {