make grayscale and opacity configurable

Author: splitbrain

README.md

@@ -187,6 +187,16 @@ image:
     bottom: -170
 ```
 
+By default, images are shown at half opacity and grayscale. This is usually a good idea to make the labels and pins more legible when printing. For documentation, you might want to show the image in full color and opacity. You can do this by setting the `opacity` and `grayscale` properties.
+
+```yaml
+image:
+  front:
+    src: "esp32-c3-super-mini.front.png"
+    grayscale: false
+    opacity: 1
+```
+
 ### offsets
 
 By default, the pin rows will sit on the edges of the defined board size. Sometimes you might want to define your board's size larger than the actual pin area. You can use the offsets setting to move a pin row further in.

src/Builder.js

@@ -26,14 +26,18 @@ export class Builder {
                 left: 0,
                 right: 0,
                 bottom: 0,
+                opacity: 0.5,
+                grayscale: true,
             },
             back: {
                 src: '',
                 top: 0,
                 left: 0,
                 right: 0,
                 bottom: 0,
-            }
+                opacity: 0.5,
+                grayscale: true,
+            },
         },
 
         // types
@@ -143,20 +147,27 @@ export class Builder {
         const legendBBox = legend.getBoundingBox();
         const titleBBox = title.getBoundingBox();
 
-        // Position legend to the right/left of the pin layout with padding
+        // Position legend to the bottom aligned to the right/left of the pin layout with padding
+        let rootBBox = root.getBoundingBox();
         if(this.isFlipped) {
             // FIXME
             //   it's hacky:
             //   rect returns the visual bounding box that includes the stroke width
             //   for alignment we need to adjust for the stroke width, thus the +10
             //   see Rect.getBoundingBox()
-            legend.setTranslate(pinLayoutBBox.x - legendBBox.width + 10 - (PADDING * 3), pinLayoutBBox.y);
+            legend.setTranslate(
+                pinLayoutBBox.x - legendBBox.width + 10 - (PADDING * 3),
+                rootBBox.y + rootBBox.height - legendBBox.height
+            );
         } else {
-            legend.setTranslate(pinLayoutBBox.x + pinLayoutBBox.width + (PADDING * 3), pinLayoutBBox.y);
+            legend.setTranslate(
+                pinLayoutBBox.x + pinLayoutBBox.width + (PADDING * 3),
+                rootBBox.y + rootBBox.height - legendBBox.height
+            );
         }
 
-        // Position title above the pin layout, left aligned
-        const rootBBox = root.getBoundingBox();
+        // Position title at the top, left aligned
+        rootBBox = root.getBoundingBox();
         title.setTranslate(rootBBox.x, rootBBox.y - PADDING - titleBBox.height);
 
         // Update SVG bounds to include everything

src/components/Pcb.js

@@ -60,8 +60,8 @@ export class Pcb extends Group {
             left = 0,
             right = 0,
             bottom = 0,
-            opacity = 0.5, // Default opacity if not specified
-            preserveAspectRatio = 'xMidYMid slice' // Default aspect ratio
+            opacity = 0.5,
+            grayscale = true
         } = imageConfig;
 
         // Adjust dimensions based on top, left, right, bottom offsets
@@ -70,11 +70,15 @@ export class Pcb extends Group {
         const imgWidth = basePcbWidth - left - right;
         const imgHeight = basePcbHeight - top - bottom;
 
-        return new Image(imgX, imgY, imgWidth, imgHeight, src, {
+        const options = {
             preserveAspectRatio: 'none',
             'opacity': opacity,
-            filter: 'url(#grayscale)',
-        });
+        }
+        if(grayscale) {
+            options['filter'] = 'url(#grayscale)';
+        }
+
+        return new Image(imgX, imgY, imgWidth, imgHeight, src, options);
     }
 
     /**