Refactor Pixel2CPP and packers.js to improve background color handling and packing logic. Updated background color state management to fill transparent areas correctly. Simplified packing functions by removing unnecessary alpha checks for pixel values, ensuring accurate color representation across different formats.

CodeRandomMC · CodeRandomMC · commit e0ac528579b2 · 2025-08-17T23:09:21.000+01:00
diff --git a/src/Pixel2CPP.jsx b/src/Pixel2CPP.jsx
@@ -47,8 +47,7 @@ export default function Pixel2CPP() {
   const [primary, setPrimary] = useState(black());
   const [secondary, setSecondary] = useState(white());
   const [name, setName] = useState("sprite");
-  const [backgroundColor, setBackgroundColor] = useState("black"); // black, white, transparent, custom
-  const [customBackgroundColor, setCustomBackgroundColor] = useState("#000000");
+  const [backgroundColor, setBackgroundColor] = useState("black"); // black, white, transparent
 
   // UI state
   const [showCodeModal, setShowCodeModal] = useState(false);
@@ -91,6 +90,26 @@ export default function Pixel2CPP() {
     setRedo([]);
   }, [w, h]);
 
+  // Update background color when it changes
+  useEffect(() => {
+    setData((prev) => {
+      const newData = [...prev];
+      for (let i = 0; i < newData.length; i++) {
+        if (newData[i].a === 0) { // Transparent pixels
+          if (backgroundColor === "white") {
+            newData[i] = white();
+          } else if (backgroundColor === "black") {
+            newData[i] = black();
+          } else {
+            // transparent - keep as transparent
+            newData[i] = transparent();
+          }
+        }
+      }
+      return newData;
+    });
+  }, [backgroundColor]);
+
   const idx = (x, y) => y * w + x;
 
   // Drawing helpers
@@ -342,9 +361,9 @@ void setup(){
 }
 
 void loop(){}`;
-    } else if (drawMode === "HORIZONTAL_RGB565") {
-      const words = packRGB565(data, w, h);
-      const wordStr = words.map(hex565).join(", ");
+         } 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)
 #include <Adafruit_GFX.h>
 #include <Adafruit_ST7735.h>  // Use ST7789, ILI9341, etc. for your display
@@ -401,9 +420,9 @@ void drawImagePixelByPixel(int16_t x0, int16_t y0) {
   }
 }
 */`;
-    } 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(", ");
+         } 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)
 #include <Adafruit_GFX.h>
 #include <Adafruit_ILI9341.h>  // Use appropriate display library
@@ -452,9 +471,9 @@ void drawImage(int16_t x0, int16_t y0) {
     }
   }
 }`;
-    } 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(", ");
+         } 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)
 #include <Adafruit_GFX.h>
 #include <Adafruit_SSD1331.h>  // Or other 8-bit color displays
@@ -502,9 +521,9 @@ void drawImage(int16_t x0, int16_t y0) {
    - Green: 3 bits (0-7)
    - Blue: 2 bits (0-3)
 */`;
-    } 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(", ");
+         } 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)
 #include <Adafruit_GFX.h>
 #include <Adafruit_EPD.h>  // Use appropriate e-ink library
@@ -1423,12 +1442,12 @@ const GFXfont ${safeName} PROGMEM = {
                          </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 className="text-xs text-neutral-400 bg-neutral-800/50 p-2 rounded">
+                        <div className="font-medium mb-1">Background color fills transparent areas:</div>
+                        <div>• Black: Transparent areas become black pixels</div>
+                        <div>• White: Transparent areas become white pixels</div>
+                        <div>• Transparent: Keeps transparent areas (alpha = 0)</div>
+                      </div>
                    </div>
                 </>
               )}
@@ -1502,18 +1521,17 @@ const GFXfont ${safeName} PROGMEM = {
                 <div className="space-y-4">
                   {/* Canvas Container */}
                   <div className="bg-neutral-900 rounded-2xl p-4 overflow-auto inline-block shadow-xl border border-neutral-700">
-                    <PixelCanvas
-                      width={w}
-                      height={h}
-                      zoom={zoom}
-                      pixels={data}
-                      backgroundColor={backgroundColor}
-                      customBackgroundColor={customBackgroundColor}
-                      cursor={tool === "eyedropper" ? "crosshair" : "pointer"}
-                      onPointerDown={handleMouseDown}
-                      onPointerMove={handleMouseMove}
-                      onPointerUp={handleMouseUp}
-                    />
+                                         <PixelCanvas
+                       width={w}
+                       height={h}
+                       zoom={zoom}
+                       pixels={data}
+                       backgroundColor={backgroundColor}
+                       cursor={tool === "eyedropper" ? "crosshair" : "pointer"}
+                       onPointerDown={handleMouseDown}
+                       onPointerMove={handleMouseMove}
+                       onPointerUp={handleMouseUp}
+                     />
                   </div>
                   
                   {/* Canvas Info */}
diff --git a/src/lib/packers.js b/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; // lighter pixel → 1 (white = on)
+        const on = (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; // lighter pixel → 1 (white = on)
+            const on = (p.r + p.g + p.b) > (255 * 3) / 2; // lighter pixel → 1 (white = on)
             if (on) cur |= 1 << bit;
           }
         }
@@ -91,7 +91,7 @@ export function pack1bitAlpha(pixels, width, height, orientation = 'horizontal')
           const y = yPage * 8 + bit;
           if (y < height) {
             const p = pixels[I(x, y)];
-            const hasAlpha = p.a > 127;
+            const hasAlpha = p.a > 127; // alpha threshold (opaque = on)
             if (hasAlpha) cur |= 1 << bit;
           }
         }
@@ -108,7 +108,7 @@ export function packRGB565(pixels, width, height) {
   for (let y = 0; y < height; y++) {
     for (let x = 0; x < width; x++) {
       const p = pixels[I(x, y)];
-      out.push(p.a < 10 ? 0 : rgbTo565(p.r, p.g, p.b));
+      out.push(rgbTo565(p.r, p.g, p.b));
     }
   }
   return out;
@@ -120,11 +120,7 @@ export function packRGB24(pixels, width, height) {
   for (let y = 0; y < height; y++) {
     for (let x = 0; x < width; x++) {
       const p = pixels[I(x, y)];
-      if (p.a < 10) {
-        out.push(0, 0, 0);
-      } else {
-        out.push(p.r, p.g, p.b);
-      }
+      out.push(p.r, p.g, p.b);
     }
   }
   return out;
@@ -143,7 +139,7 @@ export function packRGB332(pixels, width, height) {
   for (let y = 0; y < height; y++) {
     for (let x = 0; x < width; x++) {
       const p = pixels[I(x, y)];
-      out.push(p.a < 10 ? 0 : rgbTo332(p.r, p.g, p.b));
+      out.push(rgbTo332(p.r, p.g, p.b));
     }
   }
   return out;
@@ -157,7 +153,7 @@ export function packGray4(pixels, width, height) {
     let cur = 0;
     for (let x = 0; x < width; x++) {
       const p = pixels[I(x, y)];
-      const luma = p.a < 10 ? 0 : Math.floor((0.2126 * p.r + 0.7152 * p.g + 0.0722 * p.b) / 16);
+      const luma = Math.floor((0.2126 * p.r + 0.7152 * p.g + 0.0722 * p.b) / 16);
       const gray4 = Math.min(15, Math.max(0, luma)); // 0-15 range
       
       if (nibble === 1) {
