Enhance Pixel2CPP and PixelCanvas components with improved error handling, logging, and support for additional draw modes. Added validation for input data and generated bytes, along with fallback mechanisms for unknown formats. Updated PixelCanvas to handle transparent pixels based on selected background color, ensuring accurate rendering. Refactored packing logic to correctly identify lighter pixels for 1-bit packing.

Author: CodeRandomMC

src/Pixel2CPP.jsx

@@ -222,27 +222,47 @@ export default function Pixel2CPP() {
   const generateCppCode = () => {
     const safeName = name.replace(/[^a-zA-Z0-9_]/g, "_");
 
+    console.log('generateCppCode called with:', { drawMode, outputFormat, w, h, dataLength: data.length });
+    
+    // Validate data
+    if (!data || data.length !== w * h) {
+      console.error('Invalid data:', { dataLength: data?.length, expectedLength: w * h, w, h });
+      return `// Error: Invalid data array (length: ${data?.length}, expected: ${w * h})`;
+    }
+    
+    // Helper function to safely call packer functions
+    const safePack = (packerFunc, ...args) => {
+      try {
+        const result = packerFunc(...args);
+        console.log(`${packerFunc.name} result:`, result.length, 'bytes');
+        return result;
+      } catch (error) {
+        console.error(`Error in ${packerFunc.name}:`, error);
+        return [];
+      }
+    };
+    
     // Determine data and format based on draw mode
-    let bytes, byteStr, dataType, dataFormat;
+    let bytes = [], byteStr, dataType = "uint8_t", dataFormat = "pixels";
 
     if (drawMode === "HORIZONTAL_1BIT") {
-      bytes = pack1bit(data, w, h, 'horizontal');
+      bytes = safePack(pack1bit, data, w, h, 'horizontal');
       dataType = "uint8_t";
       dataFormat = "bits";
     } else if (drawMode === "VERTICAL_1BIT") {
-      bytes = pack1bit(data, w, h, 'vertical');
+      bytes = safePack(pack1bit, data, w, h, 'vertical');
       dataType = "uint8_t";
       dataFormat = "bits";
     } else if (drawMode === "HORIZONTAL_ALPHA") {
-      bytes = pack1bitAlpha(data, w, h, 'horizontal');
+      bytes = safePack(pack1bitAlpha, data, w, h, 'horizontal');
       dataType = "uint8_t";
       dataFormat = "alpha";
     } else if (drawMode === "HORIZONTAL_RGB565") {
-      bytes = packRGB565(data, w, h);
+      bytes = safePack(packRGB565, data, w, h);
       dataType = "uint16_t";
       dataFormat = "pixels";
     } else if (drawMode === "HORIZONTAL_RGB888_24") {
-      bytes = packRGB24(data, w, h);
+      bytes = safePack(packRGB24, data, w, h);
       dataType = "uint8_t";
       dataFormat = "pixels";
     } else if (drawMode === "HORIZONTAL_RGB888_32") {
@@ -256,17 +276,47 @@ export default function Pixel2CPP() {
       }
       dataType = "uint8_t";
       dataFormat = "pixels";
+    } else if (drawMode === "HORIZONTAL_RGB332") {
+      bytes = safePack(packRGB332, data, w, h);
+      dataType = "uint8_t";
+      dataFormat = "pixels";
+    } else if (drawMode === "HORIZONTAL_GRAY4") {
+      bytes = safePack(packGray4, data, w, h);
+      dataType = "uint8_t";
+      dataFormat = "pixels";
+    } else {
+      // Fallback for unknown draw modes - use 1-bit horizontal
+      console.warn(`Unknown draw mode: ${drawMode}, falling back to HORIZONTAL_1BIT`);
+      bytes = safePack(pack1bit, data, w, h, 'horizontal');
+      dataType = "uint8_t";
+      dataFormat = "bits";
+    }
+    
+    console.log('Generated bytes:', { bytesLength: bytes.length, dataType, dataFormat });
+    
+    // Validate bytes were generated
+    if (!bytes || bytes.length === 0) {
+      console.error('No bytes generated');
+      return `// Error: No bytes generated for ${drawMode} format`;
     }
 
     // Generate byte string based on output format
-    if (outputFormat === "PLAIN_BYTES") {
-      return generatePlainBytes(bytes, safeName, w, h, dataType, dataFormat, drawMode);
-    } 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);
+    try {
+      if (outputFormat === "PLAIN_BYTES") {
+        return generatePlainBytes(bytes, safeName, w, h, dataType, dataFormat, drawMode);
+      } 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);
+      } else {
+        console.warn(`Unknown output format: ${outputFormat}, falling back to ARDUINO_CODE`);
+        return generateArduinoCode(bytes, safeName, w, h, dataType, dataFormat, drawMode);
+      }
+    } catch (error) {
+      console.error('Error generating output format:', error);
+      return `// Error generating ${outputFormat} format: ${error.message}`;
     }
 
     // Legacy fallback for old mode system
@@ -351,7 +401,7 @@ void drawImagePixelByPixel(int16_t x0, int16_t y0) {
   }
 }
 */`;
-    } else if (mode === "RGB24") {
+    } else if (drawMode === "HORIZONTAL_RGB888_24") {
       const bytes = packRGB24(data, w, h);
       const byteStr = bytes.map((b) => "0x" + b.toString(16).toUpperCase().padStart(2, "0")).join(", ");
       return `// Generated by Pixel2CPP (RGB24 for ESP32/high-memory displays)
@@ -402,7 +452,7 @@ void drawImage(int16_t x0, int16_t y0) {
     }
   }
 }`;
-    } else if (mode === "RGB332") {
+    } else if (drawMode === "HORIZONTAL_RGB332") {
       const bytes = packRGB332(data, w, h);
       const byteStr = bytes.map((b) => "0x" + b.toString(16).toUpperCase().padStart(2, "0")).join(", ");
       return `// Generated by Pixel2CPP (RGB332 for low-memory/retro displays)
@@ -452,7 +502,7 @@ void drawImage(int16_t x0, int16_t y0) {
    - Green: 3 bits (0-7)
    - Blue: 2 bits (0-3)
 */`;
-    } else if (mode === "GRAY4") {
+    } else if (drawMode === "HORIZONTAL_GRAY4") {
       const bytes = packGray4(data, w, h);
       const byteStr = bytes.map((b) => "0x" + b.toString(16).toUpperCase().padStart(2, "0")).join(", ");
       return `// Generated by Pixel2CPP (4-bit Grayscale for E-ink/EPD)
@@ -846,9 +896,15 @@ const GFXfont ${safeName} PROGMEM = {
   };
 
   const handleGenerateCode = async () => {
-    setIsGenerating(true);
-    setShowCodeModal(true);
-    setIsGenerating(false);
+    try {
+      setIsGenerating(true);
+      console.log('Generating code for:', { drawMode, outputFormat, w, h, dataLength: data.length });
+      setShowCodeModal(true);
+    } catch (error) {
+      console.error('Error generating code:', error);
+    } finally {
+      setIsGenerating(false);
+    }
   };
 
   const handleCopyCode = async () => {
@@ -1267,6 +1323,8 @@ const GFXfont ${safeName} PROGMEM = {
                         <option value="HORIZONTAL_ALPHA">Alpha Map</option>
                         <option value="HORIZONTAL_RGB888_24">RGB24 (24-bit)</option>
                         <option value="HORIZONTAL_RGB888_32">RGBA32 (32-bit)</option>
+                        <option value="HORIZONTAL_RGB332">RGB332 (8-bit)</option>
+                        <option value="HORIZONTAL_GRAY4">GRAY4 (4-bit)</option>
                       </select>
                     </label>
 
@@ -1346,26 +1404,32 @@ const GFXfont ${safeName} PROGMEM = {
                     </div>
                   </div>
 
-                  {/* Background */}
-                  <div className="space-y-3">
-                    <h3 className="font-medium text-sm text-neutral-300">Background</h3>
-                    <div className="grid grid-cols-2 gap-2">
-                      {["black", "white", "transparent"].map((bg) => (
-                        <label key={bg} className="flex items-center gap-2 cursor-pointer">
-                          <input 
-                            type="radio" 
-                            name="backgroundColor" 
-                            value={bg} 
-                            checked={backgroundColor === bg} 
-                            onChange={(e) => setBackgroundColor(e.target.value)} 
-                            className="w-3 h-3 text-blue-500 bg-neutral-800 border-neutral-700 focus:ring-blue-500"
-                            aria-label={`${bg} background`}
-                          />
-                          <span className="text-xs capitalize">{bg}</span>
-                        </label>
-                      ))}
-                    </div>
-                  </div>
+                                     {/* Background */}
+                   <div className="space-y-3">
+                     <h3 className="font-medium text-sm text-neutral-300">Background</h3>
+                     <div className="grid grid-cols-2 gap-2">
+                       {["black", "white", "transparent"].map((bg) => (
+                         <label key={bg} className="flex items-center gap-2 cursor-pointer">
+                           <input 
+                             type="radio" 
+                             name="backgroundColor" 
+                             value={bg} 
+                             checked={backgroundColor === bg} 
+                             onChange={(e) => setBackgroundColor(e.target.value)} 
+                             className="w-3 h-3 text-blue-500 bg-neutral-800 border-neutral-700 focus:ring-blue-500"
+                             aria-label={`${bg} background`}
+                           />
+                           <span className="text-xs capitalize">{bg}</span>
+                         </label>
+                       ))}
+                     </div>
+                     <div className="text-xs text-neutral-400 bg-neutral-800/50 p-2 rounded">
+                       <div className="font-medium mb-1">Background affects display only:</div>
+                       <div>• Black: White pixels = "on" (1)</div>
+                       <div>• White: Black pixels = "on" (1)</div>
+                       <div>• Transparent: Alpha &gt; 0 = "on" (1)</div>
+                     </div>
+                   </div>
                 </>
               )}
 
@@ -1753,7 +1817,16 @@ void loop(){}`}</pre>
               </div>
               <div className="flex-1 overflow-auto">
                 <pre className="bg-neutral-950 rounded-xl p-6 overflow-auto text-sm whitespace-pre-wrap border border-neutral-700 shadow-inner">
-                  {generateCppCode()}
+                  {(() => {
+                    try {
+                      const code = generateCppCode();
+                      console.log('Generated code length:', code.length);
+                      return code || '// No code generated - please check console for errors';
+                    } catch (error) {
+                      console.error('Error generating code:', error);
+                      return `// Error generating code: ${error.message}\n// Please check console for details`;
+                    }
+                  })()}
                 </pre>
               </div>
               <div className="mt-4 text-xs text-neutral-500 text-center">

src/components/PixelCanvas.jsx

@@ -76,10 +76,22 @@ export default function PixelCanvas({
         const p = pixels[offset + x];
         if (!p) continue; // Skip if pixel is undefined
         const i = (y * width + x) * 4;
-        buf[i] = p.a === 0 ? 0 : p.r;
-        buf[i + 1] = p.a === 0 ? 0 : p.g;
-        buf[i + 2] = p.a === 0 ? 0 : p.b;
-        buf[i + 3] = p.a;
+        // For transparent pixels, use the background color instead of black
+        if (p.a === 0) {
+          if (backgroundColor === "white") {
+            buf[i] = 255; buf[i + 1] = 255; buf[i + 2] = 255; buf[i + 3] = 255;
+          } else if (backgroundColor === "black") {
+            buf[i] = 0; buf[i + 1] = 0; buf[i + 2] = 0; buf[i + 3] = 255;
+          } else {
+            // For transparent background, keep transparent
+            buf[i] = 0; buf[i + 1] = 0; buf[i + 2] = 0; buf[i + 3] = 0;
+          }
+        } else {
+          buf[i] = p.r;
+          buf[i + 1] = p.g;
+          buf[i + 2] = p.b;
+          buf[i + 3] = p.a;
+        }
       }
     }
     ctx.putImageData(imageData, 0, 0);

src/lib/packers.js

@@ -31,7 +31,7 @@ export function pack1bit(pixels, width, height, orientation = 'horizontal') {
       let cur = 0;
       for (let x = 0; x < width; x++) {
         const p = pixels[I(x, y)];
-        const on = p.a > 0 && (p.r + p.g + p.b) < (255 * 3) / 2; // darker pixel → 1
+        const on = p.a > 0 && (p.r + p.g + p.b) > (255 * 3) / 2; // lighter pixel → 1 (white = on)
         if (on) cur |= 1 << bit;
         bit--;
         if (bit < 0) {
@@ -51,7 +51,7 @@ export function pack1bit(pixels, width, height, orientation = 'horizontal') {
           const y = yPage * 8 + (7 - bit);
           if (y < height) {
             const p = pixels[I(x, y)];
-            const on = p.a > 0 && (p.r + p.g + p.b) < (255 * 3) / 2;
+            const on = p.a > 0 && (p.r + p.g + p.b) > (255 * 3) / 2; // lighter pixel → 1 (white = on)
             if (on) cur |= 1 << bit;
           }
         }
@@ -72,7 +72,7 @@ export function pack1bitAlpha(pixels, width, height, orientation = 'horizontal')
       let cur = 0;
       for (let x = 0; x < width; x++) {
         const p = pixels[I(x, y)];
-        const hasAlpha = p.a > 127; // alpha threshold
+        const hasAlpha = p.a > 127; // alpha threshold (opaque = on)
         if (hasAlpha) cur |= 1 << bit;
         bit--;
         if (bit < 0) {