add some more formatting options

index.html

@@ -287,22 +287,25 @@
             <div class="table-cell">
               <input id="bitswap" type="checkbox" onchange="updateBoolean('bitswap')">
               <label for="bitswap">swap</label>
+              <i class="note">Swap between MSB and LSB. Useful when working with the u8g2 library.</i>
             </div>
           </div>
 
-          <div class="table-row">
+          <div class="table-row" id="prefix-separator-container">
-            <div class="table-cell"></div>
-            <div class="table-cell">
-              <i class="note">Useful when working with the u8g2 library.</i>
-            </div>
-          </div>
-
-
-          <div class="table-row" id="remove-zeroes-commas-container">
             <div class="table-cell"><label>Extra formatting options:</label></div>
             <div class="table-cell">
-              <input id="removeZeroesCommas" type="checkbox" onchange="updateBoolean('removeZeroesCommas')"/>
+              <div class="sub-field">
-              <label for="removeZeroesCommas">Remove '0x' and commas from output</label>
+                <input id="outputComments" type="checkbox" checked onchange="updateBoolean('outputComments')">
+                <label for="outputComments">Add comments to code output</label>
+              </div>
+              <div class="sub-field">
+                <label for="prefix" class="sub-field-label">Byte prefix:</label>
+                <input id="prefix" class="size-input" type="text" value="0x" oninput="updateString('prefix')"/>
+              </div>
+              <div class="sub-field">
+                <label for="separator" class="sub-field-label">Separator between bytes:</label>
+                <input id="separator" class="size-input" type="text" value=", " oninput="updateString('separator')"/>
+              </div>
             </div>
           </div>
         </div>

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 += `${settings.prefix}${byteSet}${settings.separator}`;
-          stringFromBytes += `0x${byteSet}, `;
-        } else {
-          stringFromBytes += byteSet;
-        }
         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 += `${settings.prefix}${byteSet}${settings.separator}`;
-          stringFromBytes += `0x${byteSet.toString(16)}, `;
-        } else {
-          stringFromBytes += byteSet.toString(16);
-        }
         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 += `${settings.prefix}${byteSet}${settings.separator}`;
-        stringFromBytes += `0x${byteSet}, `;
-      } else {
-        stringFromBytes += byteSet;
-      }
       // 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 += `${settings.prefix}${byteSet}${settings.separator}`;
-        stringFromBytes += `0x${byteSet}, `;
-      } else {
-        stringFromBytes += byteSet;
-      }
 
       // 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 += `${settings.prefix}${byteSet}${settings.separator}`;
-          stringFromBytes += `0x${byteSet}, `;
-        } else {
-          stringFromBytes += byteSet;
-        }
         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 = elm.value !== 'plain' ? 'block' : 'none';
-    arduino.style.display = 'block';
+
-    removeZeroesCommasContainer.style.display = 'none';
+  settings.prefix = '0x';
-    settings.removeZeroesCommas = false;
+  document.getElementById('prefix').value = '0x';
-    document.getElementById('removeZeroesCommas').checked = false;
+  settings.separator = ', ';
-  } else {
+  document.getElementById('separator').value = ', ';
-    arduino.style.display = 'none';
+
-    removeZeroesCommasContainer.style.display = 'table-row';
-  }
   if (elm.value === 'adafruit_gfx') {
     adafruitGfx.style.display = 'block';
   } else {