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.
+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 Inkscape SVG is necessary to preserve the layer names.
First, it's highly recommended to change your page settings to use millimeters and 2540 DPI, as shown here:
You might be wondering why that specific DPI? Well, 2540 DPI happens to be 1000 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.
On very slim designs, you might be experiencing issues where the drill holes on either the Drills or Edge.Cuts 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.
The outline should be drawn on a layer named Edge.Cuts 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
+
The outline should be drawn on a layer named Edge.Cuts 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".
Non-transparent areas on layers named F.SilkS, B.SilkS, F.Cu, and B.Cu in Affinity are converted to their respective
+
Non-transparent areas on layers named F.SilkS, B.SilkS, F.Cu, and B.Cu in the SVG are converted to their respective
layers in KiCAD. Note that F.Mask and B.Mask are "inverted" like they are in KiCAD, meaning that non-transparent areas indicate where to
- remove the soldermask- the preview in Gingerbread will shows the mask layers as they would appear on the printed board.
+ remove the soldermask- the preview in Gingerbread will shows the mask layers as they would appear on the printed board.
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.
Items on the layer named Drills in Affinity are also handled in a specific way. Gingerbread walks through all of the shapes in that layer and converts
+
Items on the layer named Drills in the SVG are also handled in a specific way. Gingerbread walks through all of the shapes in that layer and converts
only circles 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.
When exporting you design to an SVG for Gingerbread, click the More 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.
You can save this as a preset to avoid having to change these every time you export.
+Note: Inkscape support is new and relatively untested. Please do try it out, and if you run into problems, + open an issue on Github with info on what went wrong!
+Select File->Save As (or Save a Copy) and select Inkscape SVG (*.svg) + 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: +
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 @@ -61,7 +74,7 @@
Gingerbread is (c) 2022 by Winterbloom LLC & Alethea Katherine Flowers
+Gingerbread is (c) 2022 by Winterbloom LLC & Alethea Katherine Flowers
Gingerbread is available under the MIT License:
diff --git a/web/scripts/main.js b/web/scripts/main.js index 28932dc..df81440 100644 --- a/web/scripts/main.js +++ b/web/scripts/main.js @@ -23,20 +23,20 @@ class Design { { name: "Drill", type: "drill", - selector: "#Drill, #Drills, [*|label=\"Drills\"]", + selector: "#Drill, #Drills, [*|label=\"Drill\"], [*|label=\"Drills\"]", color: "Fuchsia", }, { name: "FSilkS", type: "raster", - selector: "#FSilkS, #F\\.SilkS, [*|label=\"F\\.SilkS\"]", + selector: "#FSilkS, #F\\.SilkS, [*|label=\"FSilkS\"], [*|label=\"F\\.SilkS\"]", color: "white", number: 3, }, { name: "FMask", type: "raster", - selector: "#FMask, #F\\.Mask, [*|label=\"F\\.Mask\"]", + selector: "#FMask, #F\\.Mask, [*|label=\"FMask\"], [*|label=\"F\\.Mask\"]", color: "black", is_mask: true, number: 5, @@ -44,21 +44,21 @@ class Design { { name: "FCu", type: "raster", - selector: "#FCu, #F\\.Cu, [*|label=\"F\\.Cu\"]", + selector: "#FCu, #F\\.Cu, [*|label=\"FCu\"], [*|label=\"F\\.Cu\"]", color: "gold", number: 1, }, { name: "BCu", type: "raster", - selector: "#BCu, #B\\.Cu, [*|label=\"B\\.Cu\"]", + selector: "#BCu, #B\\.Cu, [*|label=\"BCu\"], [*|label=\"B\\.Cu\"]", color: "gold", number: 2, }, { name: "BMask", type: "raster", - selector: "#BMask, #B\\.Mask, [*|label=\"B\\.Mask\"]", + selector: "#BMask, #B\\.Mask, [*|label=\"BMask\"], [*|label=\"B\\.Mask\"]", color: "black", is_mask: true, number: 6, @@ -66,14 +66,14 @@ class Design { { name: "BSilkS", type: "raster", - selector: "#BSilkS, #B\\.SilkS, [*|label=\"B\\.SilkS\"]", + selector: "#BSilkS, #B\\.SilkS, [*|label=\"BSilkS\"], [*|label=\"B\\.SilkS\"]", color: "white", number: 4, }, { name: "EdgeCuts", type: "vector", - selector: "#EdgeCuts, #Edge\\.Cuts, [*|label=\"Edge\\.Cuts\"]", + selector: "#EdgeCuts, #Edge\\.Cuts, [*|label=\"EdgeCuts\"], [*|label=\"Edge\\.Cuts\"]", color: "PeachPuff", force_color: true, number: 7, diff --git a/web/styles/styles.css b/web/styles/styles.css index 997f9f4..2e49c3a 100644 --- a/web/styles/styles.css +++ b/web/styles/styles.css @@ -163,7 +163,7 @@ body { margin: 1rem auto; } -.content h1, .content h2 { +.content h1, .content h2, .content h3 { color: var(--color-Neptune); }