feat: add mirror back layer option

.vscode/settings.json

@@ -0,0 +1,13 @@
+{
+  "editor.defaultFormatter": "biomejs.biome",
+  "editor.formatOnSave": true,
+  "[javascript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[react]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  }
+}

biome.json

@@ -0,0 +1,34 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "vcs": {
+    "enabled": false,
+    "clientKind": "git",
+    "useIgnoreFile": false
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "ignore": [
+      "web/scripts/alpine-3.10.4.js"
+    ]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "lineWidth": 120,
+    "indentWidth": 4
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "complexity": {
+        "useLiteralKeys": "info"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double"
+    }
+  }
+}

native/.gitignore

@@ -1,4 +1,5 @@
 zig-cache/
+.zig-cache/
 zig-out/
 *.o
 *.a

native/build.zig

@@ -14,12 +14,12 @@ pub fn build(b: *std.Build) void {
     });
     const libpotrace_flags = .{ "-std=gnu17", "-DHAVE_CONFIG_H" };
     libpotrace.linkLibC();
-    libpotrace.addIncludePath(.{ .path = "lib/potrace-1.16/src" });
-    libpotrace.addIncludePath(.{ .path = "lib/potrace-config" });
-    libpotrace.addCSourceFile(.{ .file = .{ .path = "lib/potrace-1.16/src/curve.c" }, .flags = &libpotrace_flags });
-    libpotrace.addCSourceFile(.{ .file = .{ .path = "lib/potrace-1.16/src/trace.c" }, .flags = &libpotrace_flags });
-    libpotrace.addCSourceFile(.{ .file = .{ .path = "lib/potrace-1.16/src/decompose.c" }, .flags = &libpotrace_flags });
-    libpotrace.addCSourceFile(.{ .file = .{ .path = "lib/potrace-1.16/src/potracelib.c" }, .flags = &libpotrace_flags });
+    libpotrace.addIncludePath(b.path("lib/potrace-1.16/src"));
+    libpotrace.addIncludePath(b.path("lib/potrace-config"));
+    libpotrace.addCSourceFile(.{ .file = b.path("lib/potrace-1.16/src/curve.c"), .flags = &libpotrace_flags });
+    libpotrace.addCSourceFile(.{ .file = b.path("lib/potrace-1.16/src/trace.c"), .flags = &libpotrace_flags });
+    libpotrace.addCSourceFile(.{ .file = b.path("lib/potrace-1.16/src/decompose.c"), .flags = &libpotrace_flags });
+    libpotrace.addCSourceFile(.{ .file = b.path("lib/potrace-1.16/src/potracelib.c"), .flags = &libpotrace_flags });
 
     const libclipper2 = b.addStaticLibrary(.{
         .name = "clipper2",
@@ -30,54 +30,47 @@ pub fn build(b: *std.Build) void {
     const libclipper2_flags = .{ "-std=gnu++17", "-fno-exceptions", "-Dthrow=abort" };
     libclipper2.linkLibC();
     libclipper2.linkSystemLibrary("c++");
-    libclipper2.addIncludePath(.{ .path = "lib/clipper2/CPP/Clipper2Lib" });
-    libclipper2.addIncludePath(.{ .path = "src" });
+    libclipper2.addIncludePath(b.path("lib/clipper2/CPP/Clipper2Lib"));
+    libclipper2.addIncludePath(b.path("src"));
     libclipper2.addCSourceFile(.{
-        .file = .{ .path = "lib/clipper2/CPP/Clipper2Lib/clipper.engine.cpp" },
+        .file = b.path("lib/clipper2/CPP/Clipper2Lib/clipper.engine.cpp"),
         .flags = &libclipper2_flags,
     });
     libclipper2.addCSourceFile(.{
-        .file = .{ .path = "lib/clipper2/CPP/Clipper2Lib/clipper.offset.cpp" },
+        .file = b.path("lib/clipper2/CPP/Clipper2Lib/clipper.offset.cpp"),
         .flags = &libclipper2_flags,
     });
     libclipper2.addCSourceFile(.{
-        .file = .{ .path = "src/clipperwrapper.cpp" },
+        .file = b.path("src/clipperwrapper.cpp"),
         .flags = &libclipper2_flags,
     });
 
-    const libgingerbread = b.addExecutable(.{
-        .name = "gingerbread",
-        .root_source_file = .{ .path = "src/gingerbread.zig" },
-        .version = .{ .major = 1, .minor = 0, .patch = 0 },
-        .target = target,
-        .optimize = optimize,
-        .strip = true
-    });
+    const libgingerbread = b.addExecutable(.{ .name = "gingerbread", .root_source_file = b.path("src/gingerbread.zig"), .version = .{ .major = 1, .minor = 0, .patch = 0 }, .target = target, .optimize = optimize, .strip = true });
     libgingerbread.entry = .disabled;
     libgingerbread.rdynamic = true;
     libgingerbread.wasi_exec_model = std.builtin.WasiExecModel.reactor;
     libgingerbread.linkLibC();
     libgingerbread.linkLibrary(libpotrace);
     libgingerbread.linkLibrary(libclipper2);
-    libgingerbread.addIncludePath(.{ .path = "src" });
-    libgingerbread.addIncludePath(.{ .path = "lib/potrace-1.16/src" });
+    libgingerbread.addIncludePath(b.path("src"));
+    libgingerbread.addIncludePath(b.path("lib/potrace-1.16/src"));
 
     b.installArtifact(libgingerbread);
 
     // const main = b.addTest(.{
     //     .name = "main",
-    //     .root_source_file = .{ .path = "src/tests.zig" },
+    //     .root_source_file = b.path("src/tests.zig"),
     //     .target = target,
     //     .optimize = optimize,
     //     .link_libc = true,
     // });
     // main.linkLibrary(libpotrace);
     // main.linkLibrary(libclipper2);
-    // main.addIncludePath(.{ .path = "src/" });
-    // main.addIncludePath(.{ .path = "lib/potrace-1.16/src" });
-    // main.addIncludePath(.{ .path = "lib/potrace-config" });
-    // main.addIncludePath(.{ .path = "lib/stb" });
-    // main.addCSourceFile(.{ .file = .{ .path = "src/load_image.c" }, .flags = &.{
+    // main.addIncludePath(b.path("src/"));
+    // main.addIncludePath(b.path("lib/potrace-1.16/src"));
+    // main.addIncludePath(b.path("lib/potrace-config"));
+    // main.addIncludePath(b.path("lib/stb"));
+    // main.addCSourceFile(.{ .file = b.path("src/load_image.c"), .flags = &.{
     //     "-std=gnu17",
     // } });
 

native/src/gingerbread.zig

@@ -11,7 +11,7 @@ const wasm = @import("wasm.zig");
 
 const a = wasm.allocator;
 
-fn trace(allocator: std.mem.Allocator, layer_name: []const u8, scale_factor: f64, image_pixels: [*]u8, image_width: usize, image_height: usize, writer: anytype) !void {
+fn trace(allocator: std.mem.Allocator, layer_name: []const u8, scale_factor: f64, image_pixels: [*]u8, image_width: usize, image_height: usize, writer: anytype, width_mm: f64) !void {
     var bitmap = try potrace.Bitmap.from_image(allocator, .{
         .pixels = image_pixels,
         .w = image_width,
@@ -39,7 +39,7 @@ fn trace(allocator: std.mem.Allocator, layer_name: []const u8, scale_factor: f64
 
     print("Polylist fractured\n", .{});
 
-    try pcb.polylist_to_footprint(polylist, layer_name, scale_factor, writer);
+    try pcb.polylist_to_footprint(polylist, layer_name, scale_factor, writer, width_mm);
 }
 
 test "trace" {
@@ -70,7 +70,7 @@ export fn conversion_start() void {
     pcb.start_pcb(conversion_buffer.?.writer()) catch @panic("memory");
 }
 
-export fn conversion_add_raster_layer(layer: u32, scale_factor: f64, image_pixels: [*]u8, image_width: u32, image_height: u32) void {
+export fn conversion_add_raster_layer(layer: u32, scale_factor: f64, image_pixels: [*]u8, image_width: u32, image_height: u32, width_mm: f64) void {
     const layer_name = switch (layer) {
         1 => "F.Cu",
         2 => "B.Cu",
@@ -81,7 +81,7 @@ export fn conversion_add_raster_layer(layer: u32, scale_factor: f64, image_pixel
         else => "Unknown",
     };
 
-    trace(a, layer_name, scale_factor, image_pixels, image_width, image_height, conversion_buffer.?.writer()) catch @panic("memory");
+    trace(a, layer_name, scale_factor, image_pixels, image_width, image_height, conversion_buffer.?.writer(), width_mm) catch @panic("memory");
 }
 
 export fn conversion_start_poly() void {
@@ -91,9 +91,21 @@ export fn conversion_start_poly() void {
 export fn conversion_add_poly_point(
     x: f64,
     y: f64,
+    layer_number: u32,
     scale_factor: f64,
+    width_mm: f64,
 ) void {
-    pcb.add_xx_poly_point(.{ .x = x, .y = y }, scale_factor, conversion_buffer.?.writer()) catch @panic("memory");
+    const layer_name = switch (layer_number) {
+        1 => "F.Cu",
+        2 => "B.Cu",
+        3 => "F.SilkS",
+        4 => "B.SilkS",
+        5 => "F.Mask",
+        6 => "B.Mask",
+        else => "Unknown",
+    };
+
+    pcb.add_xx_poly_point(.{ .x = x, .y = y }, layer_name, scale_factor, conversion_buffer.?.writer(), width_mm) catch @panic("memory");
 }
 
 export fn conversion_end_poly(layer: u32, width: f32, fill: bool) void {
@@ -115,3 +127,7 @@ export fn conversion_finish() wasm.StringResult {
     pcb.end_pcb(&conversion_buffer.?.writer()) catch @panic("memory");
     return wasm.return_string(conversion_buffer.?.toOwnedSlice() catch @panic("memory"));
 }
+
+export fn set_mirror_back_layers(val: bool) void {
+    pcb.mirror_back_layers = val;
+}

native/src/pcb.zig

@@ -6,6 +6,10 @@ const Poly = geometry.Poly;
 const PolyList = geometry.PolyList;
 const FauxUUID = @import("fauxuuid.zig").FauxUUID;
 
+fn is_back_layer(layer: []const u8) bool {
+    return std.ascii.startsWithIgnoreCase(layer, "B.");
+}
+
 pub fn start_pcb(writer: anytype) !void {
     try writer.writeAll("(kicad_pcb (version 20211014) (generator pcbnew)\n");
     try writer.writeAll("(layers\n");
@@ -29,31 +33,41 @@ pub fn start_xx_poly(kind: []const u8, writer: anytype) !void {
     try writer.print("  ({s}_poly\n", .{kind});
     try writer.writeAll("    (pts\n");
 }
+pub var mirror_back_layers: bool = true;
+
+pub fn add_xx_poly_point(pt: geometry.Point, layer_name: []const u8, scale_factor: f64, writer: anytype, width_mm: f64) !void {
+    const scaled_x = pt.x * scale_factor;
+    const scaled_y = pt.y * scale_factor;
+
+    // For back layers, mirror around y=0 then translate back
+    const final_x = if (is_back_layer(layer_name) and mirror_back_layers)
+        -scaled_x + width_mm
+    else
+        scaled_x;
 
-pub fn add_xx_poly_point(pt: geometry.Point, scale_factor: f64, writer: anytype) !void {
-    try writer.print("      (xy {d:.3} {d:.3})\n", .{ pt.x * scale_factor, pt.y * scale_factor });
+    try writer.print("      (xy {d:.3} {d:.3})\n", .{ final_x, scaled_y });
 }
 
-pub fn end_xx_poly(layer: []const u8, width: f64, fill: bool, writer: anytype) !void {
+pub fn end_xx_poly(layer_name: []const u8, line_width: f64, fill: bool, writer: anytype) !void {
     try writer.writeAll("    )\n");
-    try writer.print("    (layer \"{s}\")\n", .{layer});
-    try writer.print("    (width {d:.3})\n", .{width});
+    try writer.print("    (layer \"{s}\")\n", .{layer_name});
+    try writer.print("    (width {d:.3})\n", .{line_width});
     try writer.print("    (fill {s})\n", .{if (fill) "solid" else "none"});
     try writer.print("    (tstamp \"{s}\")\n", .{FauxUUID.init()});
     try writer.writeAll("  )\n");
 }
 
-pub fn points_to_xx_poly(kind: []const u8, pts: []geometry.Point, scale_factor: f64, layer: []const u8, width: f64, fill: bool, writer: anytype) !void {
+pub fn points_to_xx_poly(kind: []const u8, pts: []geometry.Point, scale_factor: f64, layer_name: []const u8, line_width: f64, fill: bool, writer: anytype, width_mm: f64) !void {
     try start_xx_poly(kind, writer);
 
     for (pts) |pt| {
-        try add_xx_poly_point(pt, scale_factor, writer);
+        try add_xx_poly_point(pt, layer_name, scale_factor, writer, width_mm);
     }
 
-    try end_xx_poly(layer, width, fill, writer);
+    try end_xx_poly(layer_name, line_width, fill, writer);
 }
 
-pub fn polylist_to_footprint(polylist: PolyList, layer: []const u8, scale_factor: f64, writer: anytype) !void {
+pub fn polylist_to_footprint(polylist: PolyList, layer: []const u8, scale_factor: f64, writer: anytype, width_mm: f64) !void {
     try writer.writeAll("(footprint \"Graphics\"\n");
     try writer.print("  (layer \"{s}\")\n", .{layer});
     try writer.writeAll("  (at 0 0)\n");
@@ -62,7 +76,7 @@ pub fn polylist_to_footprint(polylist: PolyList, layer: []const u8, scale_factor
     try writer.print("  (tedit \"{s}\")\n", .{FauxUUID.init()});
 
     for (polylist.items) |poly| {
-        try points_to_xx_poly("fp", poly.outline, scale_factor, layer, 0, true, writer);
+        try points_to_xx_poly("fp", poly.outline, scale_factor, layer, 0, true, writer, width_mm);
     }
 
     try writer.writeAll(")\n");

web/help.html

@@ -17,51 +17,69 @@ <h1>About Gingerbread</h1>
         acknowledgements are <a href="#copyright">at the bottom of this page</a>.</p>
 
       <h1>Using Gingerbread</h1>
-      <p>At the moment, Gingerbread is intended to work with SVGs created in Affinity Designer. You'll need to make sure your design matches what Gingerbread expects.</p>
+      <p>At the moment, Gingerbread is intended to work with SVGs created in Affinity Designer or Inkscape. You'll need to make sure your design matches what Gingerbread expects.
+      If using Inkscape, saving your file as an <strong>Inkscape SVG</strong> is necessary to preserve the layer names.</p>
 
       <h2>Page settings</h2>
       <p>First, it's <strong>highly recommended</strong> to change your page settings to use millimeters and <code>2540</code> DPI, as shown here:</p>
       <img src="./images/affinity-page-settings.png">
       <p>You might be wondering why that specific DPI? Well, <code>2540</code> DPI happens to be <code>1000</code> dots per mm, which helpfully avoids rounding issues when
-        exporting the design from Affinity and when converting the outline and drills. You can use other DPIs by changing the DPI setting in Gingerbread once your design is loaded.
+        exporting the design from your vector editor and when converting the outline and drills. You can use other DPIs by changing the DPI setting in Gingerbread once your design is loaded.
       </p>
       <p>On very slim designs, you might be experiencing issues where the drill holes on either the <code>Drills</code> or <code>Edge.Cuts</code> layers become off-centered from their
         intended placement. In that case it'll help to extend the canvas size inside Affinity to be square. Make sure to select "Anchor on page" to preserve your designs aspect ratio.
       </p>
 
       <h2>Creating an outline</h2>
-      <p>The outline should be drawn on a layer named <code>Edge.Cuts</code> in Affinity. Gingerbread handles this layer in a specific way to make sure that there is a 1-to-1 match
-        between the size and units in Affinity and KiCAD. This approach can't handle as many complex edge cases as the rasterization approach used by the graphic layers, but as
+      <p>The outline should be drawn on a layer named <code>Edge.Cuts</code> in your vector editor. Gingerbread handles this layer in a specific way to make sure that there is a 1-to-1 match
+        between the size and units in the SVG and KiCAD. This approach can't handle as many complex edge cases as the rasterization approach used by the graphic layers, but as
         long as your paths have been converted to curves it should handle them well. The outline layer can contain multiple curves, with inside curves getting converted to
         "cut-outs".</p>
 
       <h2>Graphics layers</h2>
-      <p>Non-transparent areas on layers named <code>F.SilkS</code>, <code>B.SilkS</code>, <code>F.Cu</code>, and <code>B.Cu</code> in Affinity are converted to their respective
+      <p>Non-transparent areas on layers named <code>F.SilkS</code>, <code>B.SilkS</code>, <code>F.Cu</code>, and <code>B.Cu</code> in the SVG are converted to their respective
         layers in KiCAD. Note that <code>F.Mask</code> and <code>B.Mask</code> are "inverted" like they are in KiCAD, meaning that non-transparent areas indicate where to
-        <strong>remove<strong> the soldermask- the preview in Gingerbread will shows the mask layers as they would appear on the printed board.
+        <strong>remove</strong> the soldermask- the preview in Gingerbread will shows the mask layers as they would appear on the printed board.
       </p>
       <p>Gingerbread converts these layers by rasterizing all the items on each layer to black and white, re-tracing the raster image to polygons, and placing the resulting
         polygons into KiCAD. While this might seem odd, it works extremely well for a variety of SVGs.</p>
 
       <h2>Drills</h2>
-      <p>Items on the layer named <code>Drills</code> in Affinity are also handled in a specific way. Gingerbread walks through all of the shapes in that layer and converts
+      <p>Items on the layer named <code>Drills</code> in the SVG are also handled in a specific way. Gingerbread walks through all of the shapes in that layer and converts
         <strong>only circles</strong> into corresponding non-plated through hole drills in KiCAD. Just as with the board outline, this is done to preserve position and size between
-        Affinity and KiCAD.
+        the SVG and KiCAD.
       </p>
 
+      <h2>Mirror back layers</h2>
+      <p>Gingerbread allows you to mirror the <code>B.SilkS</code>, <code>B.Mask</code>, and <code>B.Cu</code> layers so that the it is correctly mirrored in the output. This can be switched
+        on if you want this behavior.</p>
+
+
       <h2>Exporting your design</h2>
+      <h3>Affinity Designer</h3>
       <p>When exporting you design to an SVG for Gingerbread, click the <strong>More</strong> button and setup the export parameters as shown below so that "Rasterize" is set to
         "Nothing", "Export text as curves" is checked, and "Flatten transforms" is checked.</p>
       <img src="./images/affinity-export-settings.png">
       <p>You can save this as a preset to avoid having to change these every time you export.</p>
+      <h3>Inkscape</h3>
+      <p><em>Note: Inkscape support is new and relatively untested. Please do try it out, and if you run into problems,
+        <a href="https://github.com/wntrblm/Gingerbread/issues">open an issue on Github</a> with info on what went wrong!</em></p>
+      <p>Select <strong>File-&gt;Save As</strong> (or <strong>Save a Copy</strong>) and select <strong>Inkscape SVG (*.svg)</strong>
+      from the filetype dropdown in the lower right. To ensure fonts and text are preserved as-is, we recommend converting text to paths before saving:
+      <ol>
+        <li>Select a single text item (doesn't matter which, as long as it's text)</li>
+        <li>Click <strong>Edit-&gt;Select Same-&gt;Object Type</strong> or press <strong>Shift+Alt+A</strong> to select all text objects</li>
+        <li>Convert them all to paths by clicking <strong>Path-&gt;Object to Path</strong> or pressing <strong>Shift+Ctrl+C</strong>.</li>
+      </ol>
+      </p>
 
       <h2>Converting your design</h2>
       <p>Once the SVG is exported, drag and drop it onto the Gingerbread web page. Once loaded, you should see a preview of your design. Use the options in the right pane to
         configure the KiCAD output and validate the preview. Once you're ready, click the "Convert" button and your design will be copied to your clipboard, ready to paste directly
         into KiCAD's PCBNew.</p>
 
       <h2>Copyright and acknowledgements</h2>
-      <p>Gingerbread is (c) 2022 by Winterbloom LLC & Alethea Katherine Flowers</p>
+      <p>Gingerbread is (c) 2022 by Winterbloom LLC &amp; Alethea Katherine Flowers</p>
 
       <p>Gingerbread is available under the MIT License:</p>
 

web/index.html

@@ -126,6 +126,13 @@
           </div>
 
           <label class="label">Layers</label>
+          <div class="field">
+            <label class="checkbox">
+              <input type="checkbox" x-model="design.mirror_back_layers">
+              Mirror back layers
+            </label>
+          </div>
+
           <ul class="layer-list">
             <template x-for="layer in layers">
               <li>

web/scripts/bulma.js

@@ -0,0 +1,22 @@
+// From https://bulma.io/documentation/components/navbar/#navbarJsExample
+document.addEventListener('DOMContentLoaded', () => {
+
+  // Get all "navbar-burger" elements
+  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+  // Add a click event on each of them
+  $navbarBurgers.forEach( el => {
+    el.addEventListener('click', () => {
+
+      // Get the target from the "data-target" attribute
+      const target = el.dataset.target;
+      const $target = document.getElementById(target);
+
+      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+      el.classList.toggle('is-active');
+      $target.classList.toggle('is-active');
+
+    });
+  });
+
+});