add option to output entire example script

index.html

@@ -86,15 +86,16 @@
         <div class="table settings-grid">
 
           <div class="table-row">
-            <div class="table-cell"><label>Canvas size(s): </label></div>
+            <div class="table-cell"><label>Canvas size(s): </label>
+              <div class="note" id="glyph-name-note">
+                Glyph name is used to identify the image in the code.
+              </div>
+            </div>
             <div class="table-cell">
               <ul id="image-size-settings"></ul>
               <div id="only-images-file-error" class="msg error-msg">Only images file type are allowed</div>
               <div class="no-file-selected msg">Select one or more images at <a href="#step-1">step 1</a> first.</div>
               <button id="all-same-size" onclick="allSameSize()">Apply first image size to all images</button>
-              <div class="note" id="glyph-name-note">
-                <i>Glyph name is used to identify the image in the code.</i>
-              </div>
             </div>
           </div>
 
@@ -126,6 +127,19 @@
             </div>
           </div>
 
+          <div class="table-row">
+            <div class="table-cell">
+              <label>Center image:</label>
+              <div class="note">Centering the image only works when using a canvas larger than the original image.</div>
+            </div>
+            <div class="table-cell">
+              <input id="centerHorizontally" type="checkbox" onchange="updateBoolean('centerHorizontally')" />
+              <label for="centerHorizontally">horizontally</label>
+              <input id="centerVertically" type="checkbox" onchange="updateBoolean('centerVertically')" />
+              <label for="centerVertically">vertically</label>
+            </div>
+          </div>
+
           <div class="table-row">
             <div class="table-cell"><label for="invertColors">Invert image colors</label></div>
             <div class="table-cell">
@@ -157,18 +171,6 @@
             </div>
           </div>
 
-          <div class="table-row">
-            <div class="table-cell">
-              <label>Center image:</label>
-              <div class="note">Centering the image only works when using a canvas larger than the original image.</div>
-            </div>
-            <div class="table-cell">
-              <input id="centerHorizontally" type="checkbox" onchange="updateBoolean('centerHorizontally')" />
-              <label for="centerHorizontally">horizontally</label>
-              <input id="centerVertically" type="checkbox" onchange="updateBoolean('centerVertically')" />
-              <label for="centerVertically">vertically</label>
-            </div>
-          </div>
 
           <div class="table-row">
             <div class="table-cell"><label for="rotation">Rotate image:</label></div>
@@ -225,10 +227,10 @@
 
               <div class="note">
                 <i>If your image looks all messed up on your display, like the image below, try using a different mode.</i>
-              </div>
               <img class="inlineImg"
                 src="data:image/jpeg;base64,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 truncated
               width="150" height="64" alt="" />
+              </div>
 
             </div>
           </div>
@@ -236,14 +238,12 @@
           <div class="table-row">
             <div class="table-cell"><label>Code output format</label></div>
             <div class="table-cell">
-              <input id="outputFormatPlain" type="radio" name="outputFormat" value="plain" onchange="updateOutputFormat(this)"/>
-              <label for="outputFormatPlain" class="smallLabel">Plain bytes</label>
-              <input id="outputFormatArduino" type="radio" name="outputFormat" value="arduino" checked="checked" onchange="updateOutputFormat(this)"/>
-              <label for="outputFormatArduino" class="smallLabel">Arduino code</label>
-              <input id="outputFormatArduinoSingle" type="radio" name="outputFormat" value="arduino_single" onchange="updateOutputFormat(this)"/>
-              <label for="outputFormatArduinoSingle" class="smallLabel">Arduino code, single bitmap</label>
-              <input id="outputFormatAdafruitGfx" type="radio" name="outputFormat" value="adafruit_gfx" onchange="updateOutputFormat(this)"/>
-              <label for="outputFormatAdafruitGfx" class="smallLabel">Adafruit GFXbitmapFont</label>
+              <select id="outputFormat" name="outputFormat" onchange="updateOutputFormat(this)">
+                <option value="plain">Plain bytes</option>
+                <option value="arduino" selected="selected">Arduino code</option>
+                <option value="arduino_single">Arduino code, single bitmap</option>
+                <option value="adafruit_gfx">Adafruit GFXbitmapFont</option>
+              </select>
               <div id="format-caption-container">
                 <div data-caption="plain">
                   Outputs just the raw bytes of the image(s).
@@ -286,11 +286,18 @@
                       <input id="identifier" class="text-input" type="text" name="identifier" value="epd_bitmap_"/>
                     </div>
                   </div>
+                  <div class="table-row">
+                    <div class="table-cell"><label for="fullExample">Full example code:</label></div>
+                    <div class="table-cell">
+                      <input id="fullExample" type="checkbox" onchange="updateBoolean('fullExample')" />
+                      <span class="note">Include a full example displaying first image.</span>
+                    </div>
+                  </div>
                   <div class="table-row">
                     <div class="table-cell"><label for="esp32Format">ESP32 formatting:</label></div>
                     <div class="table-cell">
                       <input id="esp32Format" type="checkbox" onchange="updateBoolean('esp32Format')" />
-                      <i class="note">Use <code>uint8_t</code> instead of <code>unsigned char</code> and drops <code>PROGMEM</code>, which is a no-op on ESP32.</i>
+                      <span class="note">Use <code>uint8_t</code> instead of <code>unsigned char</code> and <code>PROGMEM</code>.</span>
                     </div>
                   </div>
                 </div>

js/script.js

@@ -23,6 +23,7 @@ const settings = {
   invertColors: false,
   rotation: 0,
   esp32Format: false,
+  fullExample: false,
   bytesPerRow: 16,
   showAsciiPreview: false,
 };
@@ -959,6 +960,41 @@ function glyphComment(image, indent = '') {
   return `${indent}// '${image.glyph}', ${image.canvas.width}x${image.canvas.height}px\n`;
 }
 
+// Wraps generated bitmap array code in a full Arduino sketch, based on
+// oled_example/oled_example.ino, that compiles against the Adafruit
+// SSD1306/GFX libraries and draws the first bitmap on the display.
+function wrapFullExample(arrayCode, varName, width, height) {
+  return `#include <SPI.h>
+#include <Wire.h>
+#include <Adafruit_GFX.h>
+#include <Adafruit_SSD1306.h>
+
+#define OLED_RESET 4
+Adafruit_SSD1306 display(OLED_RESET);
+
+#if (SSD1306_LCDHEIGHT != ${settings.screenHeight})
+#error("Height incorrect, please fix Adafruit_SSD1306.h!");
+#endif
+
+${arrayCode}
+void setup()   {
+  display.begin(SSD1306_SWITCHCAPVCC, 0x3D);  // initialize with the I2C addr 0x3D (for the 128x64)
+
+  display.clearDisplay(); // Make sure the display is cleared
+  // Draw the bitmap:
+  // drawBitmap(x position, y position, bitmap data, bitmap width, bitmap height, color)
+  display.drawBitmap(0, 0, ${varName}, ${width}, ${height}, WHITE);
+
+  // Update the display
+  display.display();
+}
+
+void loop() {
+
+}
+`;
+}
+
 // Removes the trailing separator comma left after the last byte value.
 // When settings.showAsciiPreview is on, the string always ends with a
 // dot/hash ascii-art comment line instead (see makeAsciiRowTracker), so the
@@ -1009,6 +1045,12 @@ function generateOutputString() {
       }
       outputString += `const int ${getIdentifier()}allArray_LEN = ${varQuickArray.length};\n`;
       outputString += `const ${getImageType()}* ${getIdentifier()}allArray[${varQuickArray.length}] = {\n\t${varQuickArray.join(',\n\t')}\n};\n`;
+
+      if (settings.fullExample) {
+        const first = images.first();
+        const firstVarName = getIdentifier() + (first.glyph ? `${first.glyph.replace(/[^a-zA-Z0-9]/g, '_')}` : '');
+        outputString = wrapFullExample(outputString, firstVarName, first.canvas.width, first.canvas.height);
+      }
       break;
     }
 
@@ -1027,6 +1069,11 @@ function generateOutputString() {
         getIdentifier()
       } []${progmemKeyword()} = {`
             + `\n${outputString}\n};`;
+
+      if (settings.fullExample) {
+        const first = images.first();
+        outputString = wrapFullExample(outputString, getIdentifier(), first.canvas.width, first.canvas.height);
+      }
       break;
     }
 
@@ -1219,7 +1266,7 @@ window.onload = () => {
   const fileInput = document.getElementById('file-input');
   fileInput.addEventListener('click', () => { this.value = null; }, false);
   fileInput.addEventListener('change', handleImageSelection, false);
-  const outputFormatArduino = document.getElementById('outputFormatArduino');
-  outputFormatArduino.checked = true;
-  outputFormatArduino.onchange();
+  const outputFormat = document.getElementById('outputFormat');
+  outputFormat.value = 'arduino';
+  updateOutputFormat(outputFormat);
 };