Refactor Pixel2CPP to support multiple draw modes and output formats. Added horizontal and vertical packing options for 1-bit and alpha images. Updated UI to allow selection of draw mode and output format. Enhanced packing functions for better organization and maintainability.

Author: CodeRandomMC

src/Pixel2CPP.jsx

@@ -1,13 +1,14 @@
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import PixelCanvas from "./components/PixelCanvas.jsx";
 import { clamp, transparent, black, white, rgbaEq, rgbaToHex, parseCssColor } from "./lib/colors.js";
-import { pack1bit, packRGB565, packRGB24, packRGB332, packGray4, rgbTo332, hex565 } from "./lib/packers.js";
+import { pack1bit, pack1bitAlpha, packRGB565, packRGB24, packRGB332, packGray4, rgbTo332, hex565 } from "./lib/packers.js";
 import { download, copyToClipboard } from "./lib/io.js";
 
 // ---------- Component ----------
 export default function Pixel2CPP() {
   // Core state (make sure w/h are defined before any use)
-  const [mode, setMode] = useState("1BIT"); // "1BIT" | "RGB565" | "RGB24" | "RGB332" | "GRAY4"
+  const [drawMode, setDrawMode] = useState("HORIZONTAL_1BIT"); // Draw mode from dropdown
+  const [outputFormat, setOutputFormat] = useState("ARDUINO_CODE"); // Output format from dropdown
   const [displayType, setDisplayType] = useState("SSD1306"); // Display-specific options
   const [w, setW] = useState(64);
   const [h, setH] = useState(64);
@@ -173,7 +174,7 @@ export default function Pixel2CPP() {
         b: id[i * 4 + 2],
         a: id[i * 4 + 3],
       }));
-      if (mode === "1BIT") {
+      if (drawMode.includes("1BIT") || drawMode.includes("ALPHA")) {
         for (let i = 0; i < out.length; i++) {
           const p = out[i];
           const luma = 0.2126 * p.r + 0.7152 * p.g + 0.0722 * p.b;
@@ -190,9 +191,57 @@ export default function Pixel2CPP() {
 
   const generateCppCode = () => {
     const safeName = name.replace(/[^a-zA-Z0-9_]/g, "_");
-    if (mode === "1BIT") {
-      const bytes = pack1bit(data, w, h);
-      const byteStr = bytes.map((b) => "0x" + b.toString(16).toUpperCase().padStart(2, "0")).join(", ");
+    
+    // Determine data and format based on draw mode
+    let bytes, byteStr, dataType, dataFormat;
+    
+    if (drawMode === "HORIZONTAL_1BIT") {
+      bytes = pack1bit(data, w, h, 'horizontal');
+      dataType = "uint8_t";
+      dataFormat = "bits";
+    } else if (drawMode === "VERTICAL_1BIT") {
+      bytes = pack1bit(data, w, h, 'vertical');
+      dataType = "uint8_t";
+      dataFormat = "bits";
+    } else if (drawMode === "HORIZONTAL_ALPHA") {
+      bytes = pack1bitAlpha(data, w, h, 'horizontal');
+      dataType = "uint8_t";
+      dataFormat = "alpha";
+    } else if (drawMode === "HORIZONTAL_RGB565") {
+      bytes = packRGB565(data, w, h);
+      dataType = "uint16_t";
+      dataFormat = "pixels";
+    } else if (drawMode === "HORIZONTAL_RGB888_24") {
+      bytes = packRGB24(data, w, h);
+      dataType = "uint8_t";
+      dataFormat = "pixels";
+    } else if (drawMode === "HORIZONTAL_RGB888_32") {
+      // 32-bit RGBA format
+      bytes = [];
+      for (let y = 0; y < h; y++) {
+        for (let x = 0; x < w; x++) {
+          const p = data[y * w + x];
+          bytes.push(p.r, p.g, p.b, p.a);
+        }
+      }
+      dataType = "uint8_t";
+      dataFormat = "pixels";
+    }
+    
+    // Generate byte string based on output format
+    if (outputFormat === "PLAIN_BYTES") {
+      return generatePlainBytes(bytes, safeName, w, h, dataType);
+    } else if (outputFormat === "ARDUINO_CODE") {
+      return generateArduinoCode(bytes, safeName, w, h, dataType, dataFormat, drawMode);
+    } else if (outputFormat === "ARDUINO_SINGLE_BITMAP") {
+      return generateArduinoSingleBitmap(bytes, safeName, w, h, dataType, dataFormat);
+    } else if (outputFormat === "GFX_BITMAP_FONT") {
+      return generateGFXBitmapFont(bytes, safeName, w, h);
+    }
+    
+    // Legacy fallback for old mode system
+    if (drawMode === "HORIZONTAL_1BIT") {
+      byteStr = bytes.map((b) => "0x" + b.toString(16).toUpperCase().padStart(2, "0")).join(", ");
       return `// Generated by Pixel2CPP (1-bit)
 #include <Adafruit_GFX.h>
 #include <Adafruit_SSD1306.h>
@@ -213,7 +262,7 @@ void setup(){
 }
 
 void loop(){}`;
-    } else if (mode === "RGB565") {
+    } else if (drawMode === "HORIZONTAL_RGB565") {
       const words = packRGB565(data, w, h);
       const wordStr = words.map(hex565).join(", ");
       return `// Generated by Pixel2CPP (RGB565 for TFT displays)
@@ -443,6 +492,130 @@ void drawGrayImage(int16_t x0, int16_t y0) {
     }
   };
 
+  // Output format generators
+  const generatePlainBytes = (bytes, safeName, w, h, dataType) => {
+    const formatByte = (b) => dataType === "uint16_t" 
+      ? "0x" + b.toString(16).toUpperCase().padStart(4, "0")
+      : "0x" + b.toString(16).toUpperCase().padStart(2, "0");
+    
+    const byteStr = bytes.map(formatByte).join(", ");
+    
+    return `// Generated by Pixel2CPP - Plain bytes format
+// ${w}x${h} pixels, ${bytes.length} bytes total
+// Data type: ${dataType}
+
+${byteStr}`;
+  };
+
+  const generateArduinoCode = (bytes, safeName, w, h, dataType, dataFormat, drawMode) => {
+    const formatByte = (b) => dataType === "uint16_t" 
+      ? "0x" + b.toString(16).toUpperCase().padStart(4, "0")
+      : "0x" + b.toString(16).toUpperCase().padStart(2, "0");
+    
+    const byteStr = bytes.map(formatByte).join(", ");
+    
+    if (drawMode.includes("1BIT")) {
+      return `// Generated by Pixel2CPP (${drawMode})
+#include <Adafruit_GFX.h>
+#include <Adafruit_SSD1306.h>
+
+const uint16_t ${safeName}_w = ${w};
+const uint16_t ${safeName}_h = ${h};
+const ${dataType} ${safeName}_${dataFormat}[] PROGMEM = {
+  ${byteStr}
+};
+
+Adafruit_SSD1306 display(128, 64, &Wire, -1);
+
+void setup() {
+  display.begin(SSD1306_SWITCHCAPVCC, 0x3C);
+  display.clearDisplay();
+  display.drawBitmap(0, 0, ${safeName}_${dataFormat}, ${safeName}_w, ${safeName}_h, 1);
+  display.display();
+}
+
+void loop() {}`;
+    } else if (drawMode.includes("RGB565")) {
+      return `// Generated by Pixel2CPP (RGB565)
+#include <Adafruit_GFX.h>
+#include <Adafruit_ST7735.h>
+
+const uint16_t ${safeName}_w = ${w};
+const uint16_t ${safeName}_h = ${h};
+const ${dataType} ${safeName}_${dataFormat}[] PROGMEM = {
+  ${byteStr}
+};
+
+#define TFT_CS   10
+#define TFT_RST  9
+#define TFT_DC   8
+
+Adafruit_ST7735 tft = Adafruit_ST7735(TFT_CS, TFT_DC, TFT_RST);
+
+void setup() {
+  tft.initR(INITR_BLACKTAB);
+  tft.fillScreen(ST77XX_BLACK);
+  drawImage(0, 0);
+}
+
+void drawImage(int16_t x0, int16_t y0) {
+  tft.startWrite();
+  tft.setAddrWindow(x0, y0, ${safeName}_w, ${safeName}_h);
+  for (uint16_t i = 0; i < ${safeName}_w * ${safeName}_h; i++) {
+    uint16_t color = pgm_read_word(&${safeName}_${dataFormat}[i]);
+    tft.writePixel(color);
+  }
+  tft.endWrite();
+}
+
+void loop() {}`;
+    } else {
+      return `// Generated by Pixel2CPP (${drawMode})
+#include <Adafruit_GFX.h>
+
+const uint16_t ${safeName}_w = ${w};
+const uint16_t ${safeName}_h = ${h};
+const ${dataType} ${safeName}_${dataFormat}[] PROGMEM = {
+  ${byteStr}
+};
+
+// Add your display setup and drawing code here`;
+    }
+  };
+
+  const generateArduinoSingleBitmap = (bytes, safeName, w, h, dataType, dataFormat) => {
+    const formatByte = (b) => dataType === "uint16_t" 
+      ? "0x" + b.toString(16).toUpperCase().padStart(4, "0")
+      : "0x" + b.toString(16).toUpperCase().padStart(2, "0");
+    
+    const byteStr = bytes.map(formatByte).join(", ");
+    
+    return `// Single bitmap array - ${safeName}
+// ${w}x${h} pixels, ${bytes.length} bytes
+const ${dataType} ${safeName}[] PROGMEM = { ${byteStr} };`;
+  };
+
+  const generateGFXBitmapFont = (bytes, safeName, w, h) => {
+    const byteStr = bytes.map((b) => "0x" + b.toString(16).toUpperCase().padStart(2, "0")).join(", ");
+    
+    return `// GFX Bitmap Font format - ${safeName}
+#include <Adafruit_GFX.h>
+
+const uint8_t ${safeName}Bitmaps[] PROGMEM = {
+  ${byteStr}
+};
+
+const GFXglyph ${safeName}Glyphs[] PROGMEM = {
+  { 0, ${w}, ${h}, ${w}, 0, 0 } // Single glyph covering entire bitmap
+};
+
+const GFXfont ${safeName} PROGMEM = {
+  (uint8_t *)${safeName}Bitmaps,
+  (GFXglyph *)${safeName}Glyphs,
+  0, 0, ${h}
+};`;
+  };
+
   const exportCpp = () => {
     const code = generateCppCode();
     const safeName = name.replace(/[^a-zA-Z0-9_]/g, "_");
@@ -477,26 +650,46 @@ void drawGrayImage(int16_t x0, int16_t y0) {
   const runTests = () => {
     const results = [];
 
-    // Test 1: 1-bit exact 8 pixels 10101010 → 0xAA
+    // Test 1: 1-bit horizontal exact 8 pixels 10101010 → 0xAA
     {
       const tw = 8, th = 1;
       const px = [];
       for (let i = 0; i < 8; i++) px.push((i % 2 === 0) ? black() : white()); // 1,0,1,0,... (black=1)
-      const bytes = pack1bit(px, tw, th);
+      const bytes = pack1bit(px, tw, th, 'horizontal');
       const expect = [0xAA];
-      results.push({ name: "1BIT 8px 10101010", pass: JSON.stringify(bytes) === JSON.stringify(expect), got: bytes, expect });
+      results.push({ name: "1BIT Horizontal 8px 10101010", pass: JSON.stringify(bytes) === JSON.stringify(expect), got: bytes, expect });
     }
 
-    // Test 2: 1-bit width 10, row of all ones → [0xFF, 0xC0]
+    // Test 2: 1-bit horizontal width 10, row of all ones → [0xFF, 0xC0]
     {
       const tw = 10, th = 1;
       const px = Array.from({ length: tw * th }, () => black());
-      const bytes = pack1bit(px, tw, th);
+      const bytes = pack1bit(px, tw, th, 'horizontal');
       const expect = [0xFF, 0xC0];
-      results.push({ name: "1BIT 10px row all 1s", pass: JSON.stringify(bytes) === JSON.stringify(expect), got: bytes, expect });
+      results.push({ name: "1BIT Horizontal 10px row all 1s", pass: JSON.stringify(bytes) === JSON.stringify(expect), got: bytes, expect });
     }
 
-    // Test 3: RGB565 primary colors
+    // Test 3: 1-bit vertical packing
+    {
+      const tw = 1, th = 8;
+      const px = [];
+      for (let i = 0; i < 8; i++) px.push((i % 2 === 0) ? black() : white()); // 1,0,1,0,... (black=1)
+      const bytes = pack1bit(px, tw, th, 'vertical');
+      const expect = [0xAA]; // Same pattern but vertical
+      results.push({ name: "1BIT Vertical 1x8 10101010", pass: JSON.stringify(bytes) === JSON.stringify(expect), got: bytes, expect });
+    }
+
+    // Test 4: 1-bit alpha map
+    {
+      const tw = 8, th = 1;
+      const px = [];
+      for (let i = 0; i < 8; i++) px.push({ r: 255, g: 255, b: 255, a: (i % 2 === 0) ? 255 : 0 }); // alpha pattern
+      const bytes = pack1bitAlpha(px, tw, th, 'horizontal');
+      const expect = [0xAA];
+      results.push({ name: "1BIT Alpha map 8px pattern", pass: JSON.stringify(bytes) === JSON.stringify(expect), got: bytes, expect });
+    }
+
+    // Test 5: RGB565 primary colors
     {
       const tw = 3, th = 1;
       const px = [
@@ -509,7 +702,7 @@ void drawGrayImage(int16_t x0, int16_t y0) {
       results.push({ name: "RGB565 R,G,B", pass: JSON.stringify(words) === JSON.stringify(expect), got: words, expect });
     }
 
-    // Test 4: RGB24 format - 2x2 image with RGB colors
+    // Test 6: RGB24 format - 2x2 image with RGB colors
     {
       const tw = 2, th = 2;
       const px = [
@@ -528,7 +721,7 @@ void drawGrayImage(int16_t x0, int16_t y0) {
       results.push({ name: "RGB24 2x2 colors", pass: JSON.stringify(rgb24Data) === JSON.stringify(expect), got: rgb24Data, expect });
     }
 
-    // Test 5: RGB332 format - primary colors
+    // Test 7: RGB332 format - primary colors
     {
       const tw = 3, th = 1;
       const px = [
@@ -545,7 +738,7 @@ void drawGrayImage(int16_t x0, int16_t y0) {
       results.push({ name: "RGB332 R,G,B", pass: JSON.stringify(rgb332Data) === JSON.stringify(expect), got: rgb332Data, expect });
     }
 
-    // Test 6: GRAY4 format - grayscale values
+    // Test 8: GRAY4 format - grayscale values
     {
       const tw = 4, th = 1;
       const px = [
@@ -626,13 +819,25 @@ void drawGrayImage(int16_t x0, int16_t y0) {
                   <label className="flex items-center gap-1"><input type="checkbox" checked={mirrorX} onChange={(e) => setMirrorX(e.target.checked)} />Mirror X</label>
                   <label className="flex items-center gap-1"><input type="checkbox" checked={mirrorY} onChange={(e) => setMirrorY(e.target.checked)} />Mirror Y</label>
                 </div>
-                <select value={mode} onChange={(e) => setMode(e.target.value)} className="bg-neutral-800 rounded px-2 py-1 text-sm">
-                  <option value="1BIT">1-bit (SSD1306 OLED)</option>
-                  <option value="RGB565">RGB565 (ST7735/ILI9341 TFT)</option>
-                  <option value="RGB24">RGB24 (ESP32/High Memory)</option>
-                  <option value="RGB332">RGB332 (SSD1331/Low Memory)</option>
-                  <option value="GRAY4">4-bit Grayscale (E-ink/EPD)</option>
-                </select>
+                <div className="space-y-2 w-full">
+                  <label className="block text-sm font-medium">Draw mode:</label>
+                  <select value={drawMode} onChange={(e) => setDrawMode(e.target.value)} className="w-full bg-neutral-800 rounded px-2 py-1 text-sm">
+                    <option value="HORIZONTAL_1BIT">Horizontal - 1 bit per pixel</option>
+                    <option value="VERTICAL_1BIT">Vertical - 1 bit per pixel</option>
+                    <option value="HORIZONTAL_RGB565">Horizontal - 2 bytes per pixel (565)</option>
+                    <option value="HORIZONTAL_ALPHA">Horizontal - 1 bit per pixel alpha map</option>
+                    <option value="HORIZONTAL_RGB888_24">Horizontal - 3 bytes per pixel (rgb888)</option>
+                    <option value="HORIZONTAL_RGB888_32">Horizontal - 4 bytes per pixel (rgba888)</option>
+                  </select>
+                  
+                  <label className="block text-sm font-medium mt-2">Code output format:</label>
+                  <select value={outputFormat} onChange={(e) => setOutputFormat(e.target.value)} className="w-full bg-neutral-800 rounded px-2 py-1 text-sm">
+                    <option value="ARDUINO_CODE">Arduino code</option>
+                    <option value="PLAIN_BYTES">Plain bytes</option>
+                    <option value="ARDUINO_SINGLE_BITMAP">Arduino code, single bitmap</option>
+                    <option value="GFX_BITMAP_FONT">Adafruit GFXbitmapFont</option>
+                  </select>
+                </div>
                 <div className="flex gap-2 w-full">
                   <button onClick={clearCanvas} className="px-3 py-1.5 rounded-xl bg-neutral-800 hover:bg-neutral-700 text-sm">Clear</button>
                   <button onClick={() => { if (canUndo) setRedo((r) => [data.map(p=>({...p})), ...r]); if (canUndo) { const last = history[history.length - 1]; setHistory((h) => h.slice(0, -1)); setData(last.map(p => ({ ...p }))); } }} disabled={!canUndo} className={`px-3 py-1.5 rounded-xl text-sm ${canUndo ? "bg-neutral-800 hover:bg-neutral-700" : "bg-neutral-900 opacity-50"}`}>Undo</button>
@@ -659,7 +864,8 @@ void drawGrayImage(int16_t x0, int16_t y0) {
                 </div>
                 <button onClick={swapColors} className="px-3 py-1.5 rounded-xl bg-neutral-800 hover:bg-neutral-700 text-sm">Swap</button>
               </div>
-              <div className="text-sm opacity-80">Mode: <span className="font-mono">{mode}</span></div>
+              <div className="text-sm opacity-80">Draw mode: <span className="font-mono text-xs">{drawMode}</span></div>
+              <div className="text-sm opacity-80">Output: <span className="font-mono text-xs">{outputFormat}</span></div>
               <div className="text-xs opacity-70">Tip: Right‑click draws with Secondary. Eyedropper picks Primary from canvas.</div>
             </div>
           </aside>