Add fabrication layer support

Issue #76

Author: qu1ck

InteractiveHtmlBom/core/config.py

@@ -5,6 +5,8 @@
 
 from wx import FileConfig
 
+from .. import dialog
+
 
 class Config:
     # Helper constants
@@ -18,14 +20,16 @@ class Config:
     ]
     default_checkboxes = ['Sourced', 'Placed']
     html_config_fields = [
-        'dark_mode', 'show_silkscreen', 'highlight_pin1', 'redraw_on_drag',
-        'board_rotation', 'checkboxes', 'bom_view', 'layer_view', 'extra_fields'
+        'dark_mode', 'show_fabrication', 'show_silkscreen', 'highlight_pin1',
+        'redraw_on_drag', 'board_rotation', 'checkboxes', 'bom_view',
+        'layer_view', 'extra_fields'
     ]
 
     # Defaults
 
     # HTML section
     dark_mode = False
+    show_fabrication = False
     show_silkscreen = True
     highlight_pin1 = False
     redraw_on_drag = True
@@ -65,6 +69,8 @@ def __init__(self):
 
         f.SetPath('/html_defaults')
         self.dark_mode = f.ReadBool('dark_mode', self.dark_mode)
+        self.show_fabrication = f.ReadBool(
+                'show_fabrication', self.show_fabrication)
         self.show_silkscreen = f.ReadBool(
                 'show_silkscreen', self.show_silkscreen)
         self.highlight_pin1 = f.ReadBool('highlight_pin1', self.highlight_pin1)
@@ -108,6 +114,7 @@ def save(self):
 
         f.SetPath('/html_defaults')
         f.WriteBool('dark_mode', self.dark_mode)
+        f.WriteBool('show_fabrication', self.show_fabrication)
         f.WriteBool('show_silkscreen', self.show_silkscreen)
         f.WriteBool('highlight_pin1', self.highlight_pin1)
         f.WriteBool('redraw_on_drag', self.redraw_on_drag)
@@ -145,6 +152,7 @@ def set_from_dialog(self, dlg):
         # type: (dialog.settings_dialog.SettingsDialogPanel) -> None
         # Html
         self.dark_mode = dlg.html.darkModeCheckbox.IsChecked()
+        self.show_fabrication = dlg.html.showFabricationCheckbox.IsChecked()
         self.show_silkscreen = dlg.html.showSilkscreenCheckbox.IsChecked()
         self.highlight_pin1 = dlg.html.highlightPin1Checkbox.IsChecked()
         self.redraw_on_drag = dlg.html.continuousRedrawCheckbox.IsChecked()
@@ -183,6 +191,7 @@ def transfer_to_dialog(self, dlg):
         # type: (dialog.settings_dialog.SettingsDialogPanel) -> None
         # Html
         dlg.html.darkModeCheckbox.Value = self.dark_mode
+        dlg.html.showFabricationCheckbox.Value = self.show_fabrication
         dlg.html.showSilkscreenCheckbox.Value = self.show_silkscreen
         dlg.html.highlightPin1Checkbox.Value = self.highlight_pin1
         dlg.html.continuousRedrawCheckbox.value = self.redraw_on_drag
@@ -235,6 +244,9 @@ def add_options(self, parser, file_name_format_hint):
         # Html
         parser.add_argument('--dark-mode', help='Default to dark mode.',
                             action='store_true')
+        parser.add_argument('--show-fabrication',
+                            help='Show fabrication layer by default.',
+                            action='store_true')
         parser.add_argument('--hide-silkscreen',
                             help='Hide silkscreen by default.',
                             action='store_true')
@@ -306,6 +318,7 @@ def set_from_args(self, args):
 
         # Html
         self.dark_mode = args.dark_mode
+        self.show_fabrication = args.show_fabrication
         self.show_silkscreen = not args.hide_silkscreen
         self.highlight_pin1 = args.highlight_pin1
         self.redraw_on_drag = not args.no_redraw_on_drag

InteractiveHtmlBom/core/ibom.py

@@ -342,23 +342,17 @@ def parse_edges(pcb):
     return edges, bbox
 
 
-def parse_silkscreen(pcb):
+def parse_drawings_on_layers(drawings, f_layer, b_layer):
     front = []
     back = []
-    drawings = list(pcb.GetDrawings())
-    for m in pcb.GetModules():
-        drawings.append(m.Reference())
-        drawings.append(m.Value())
-        for d in m.GraphicalItems():
-            drawings.append(d)
 
     for d in drawings:
-        if d.GetLayer() not in [pcbnew.F_SilkS, pcbnew.B_SilkS]:
+        if d.GetLayer() not in [f_layer, b_layer]:
             continue
         drawing = parse_drawing(d)
         if not drawing:
             continue
-        if d.GetLayer() == pcbnew.F_SilkS:
+        if d.GetLayer() == f_layer:
             front.append(drawing)
         else:
             back.append(drawing)
@@ -369,6 +363,16 @@ def parse_silkscreen(pcb):
     }
 
 
+def get_all_drawings(pcb):
+    drawings = list(pcb.GetDrawings())
+    for m in pcb.GetModules():
+        drawings.append(m.Reference())
+        drawings.append(m.Value())
+        for d in m.GraphicalItems():
+            drawings.append(d)
+    return drawings
+
+
 def parse_pad(pad):
     layers_set = list(pad.GetLayerSet().Seq())
     layers = []
@@ -609,11 +613,15 @@ def main(pcb, config, parse_schematic_data, cli=False):
     }
 
     pcb_modules = list(pcb.GetModules())
+    drawings = get_all_drawings(pcb)
 
     pcbdata = {
         "edges_bbox": bbox,
         "edges": edges,
-        "silkscreen": parse_silkscreen(pcb),
+        "silkscreen": parse_drawings_on_layers(
+                drawings, pcbnew.F_SilkS, pcbnew.B_SilkS),
+        "fabrication": parse_drawings_on_layers(
+                drawings, pcbnew.F_Fab, pcbnew.B_Fab),
         "modules": parse_modules(pcb_modules),
         "metadata": {
             "title": title,

InteractiveHtmlBom/dialog/dialog_base.py

@@ -100,6 +100,9 @@ def __init__( self, parent, id = wx.ID_ANY, pos = wx.DefaultPosition, size = wx.
         self.darkModeCheckbox = wx.CheckBox( self, wx.ID_ANY, u"Dark mode", wx.DefaultPosition, wx.DefaultSize, 0 )
         b_sizer.Add( self.darkModeCheckbox, 0, wx.ALL, 5 )
 
+        self.showFabricationCheckbox = wx.CheckBox( self, wx.ID_ANY, u"Show fabrication layer", wx.DefaultPosition, wx.DefaultSize, 0 )
+        b_sizer.Add( self.showFabricationCheckbox, 0, wx.ALL, 5 )
+        
         self.showSilkscreenCheckbox = wx.CheckBox( self, wx.ID_ANY, u"Show silkscreen", wx.DefaultPosition, wx.DefaultSize, 0 )
         self.showSilkscreenCheckbox.SetValue(True) 
         b_sizer.Add( self.showSilkscreenCheckbox, 0, wx.ALL, 5 )

InteractiveHtmlBom/web/ibom.css

@@ -4,6 +4,12 @@
   --pad-color-highlight: #D04040;
   --pin1-outline-color: #ffb629;
   --pin1-outline-color-highlight: #b4ff03;
+  --silkscreen-edge-color: #aa4;
+  --silkscreen-polygon-color: #4aa;
+  --silkscreen-text-color: #4aa;
+  --fabrication-edge-color: #907651;
+  --fabrication-polygon-color: #907651;
+  --fabrication-text-color: #a27c24;
 }
 
 html, body {

InteractiveHtmlBom/web/ibom.html

@@ -47,6 +47,10 @@
             <input id="darkmodeCheckbox" type="checkbox" onchange="setDarkMode(this.checked)">
             Dark mode
           </label>
+          <label class="menu-label">
+            <input id="fabricationCheckbox" type="checkbox" checked onchange="fabricationVisible(this.checked)">
+            Show fabrication layer
+          </label>
           <label class="menu-label">
             <input id="silkscreenCheckbox" type="checkbox" checked onchange="silkscreenVisible(this.checked)">
             Show silkscreen
@@ -146,15 +150,17 @@
       <div id="frontcanvas" class="split" style="overflow: hidden">
         <div style="position: relative; width: 100%; height: 100%;">
           <canvas id="F_bg" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
-          <canvas id="F_slk" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
-          <canvas id="F_hl" style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
+          <canvas id="F_fab" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
+          <canvas id="F_slk" style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
+          <canvas id="F_hl" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas>
         </div>
       </div>
       <div id="backcanvas" class="split" style="overflow: hidden">
         <div style="position: relative; width: 100%; height: 100%;">
           <canvas id="B_bg" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
-          <canvas id="B_slk" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
-          <canvas id="B_hl" style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
+          <canvas id="B_fab" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>
+          <canvas id="B_slk" style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas>
+          <canvas id="B_hl" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas>
         </div>
       </div>
     </div>

InteractiveHtmlBom/web/ibom.js

@@ -34,6 +34,26 @@ function setDarkMode(value) {
   }
 }
 
+function layerVisible(visible, frontCavnas, backCanvas, storageString) {
+  if (visible) {
+    frontCavnas.style.display = "";
+    backCanvas.style.display = "";
+    writeStorage(storageString, true);
+  } else {
+    frontCavnas.style.display = "none";
+    backCanvas.style.display = "none";
+    writeStorage(storageString, false);
+  }
+}
+
+function fabricationVisible(visible) {
+  layerVisible(visible, allcanvas.front.fab, allcanvas.back.fab, "fabricationVisible");
+}
+
+function silkscreenVisible(visible) {
+  layerVisible(visible, allcanvas.front.silk, allcanvas.back.silk, "silkscreenVisible");
+}
+
 function setHighlightPin1(value) {
   writeStorage("highlightpin1", value);
   highlightpin1 = value;
@@ -471,18 +491,6 @@ function updateRefLookup(input) {
   populateBomTable();
 }
 
-function silkscreenVisible(visible) {
-  if (visible) {
-    allcanvas.front.silk.style.display = "";
-    allcanvas.back.silk.style.display = "";
-    writeStorage("silkscreenVisible", true);
-  } else {
-    allcanvas.front.silk.style.display = "none";
-    allcanvas.back.silk.style.display = "none";
-    writeStorage("silkscreenVisible", false);
-  }
-}
-
 function changeCanvasLayout(layout) {
   document.getElementById("fl-btn").classList.remove("depressed");
   document.getElementById("fb-btn").classList.remove("depressed");
@@ -723,7 +731,16 @@ function initDefaults() {
   }
   document.getElementById("bomCheckboxes").value = bomCheckboxes;
 
-  var b = readStorage("silkscreenVisible");
+  var b = readStorage("fabricationVisible");
+  if (b === null) {
+    b = config.show_fabrication;
+  } else {
+    b = (b == "true");
+  }
+  document.getElementById("fabricationCheckbox").checked = b;
+  fabricationVisible(b);
+
+  b = readStorage("silkscreenVisible");
   if (b === null) {
     b = config.show_silkscreen;
   } else {

InteractiveHtmlBom/web/render.js

@@ -33,7 +33,7 @@ function drawtext(ctx, text, color, flip) {
   var interline = (text.height * 1.5 + text.thickness) / 2;
   var txt = text.text.split("\n");
   // KiCad ignores last empty line.
-  if (txt[txt.length-1] == '') txt.pop();
+  if (txt[txt.length - 1] == '') txt.pop();
   ctx.rotate(deg2rad(angle));
   ctx.fillStyle = color;
   ctx.strokeStyle = color;
@@ -262,15 +262,15 @@ function drawModules(canvas, layer, scalefactor, highlight) {
   }
 }
 
-function drawSilkscreen(canvas, layer, scalefactor) {
+function drawBgLayer(layername, canvas, layer, scalefactor, edgeColor, polygonColor, textColor) {
   var ctx = canvas.getContext("2d");
-  for (var d of pcbdata.silkscreen[layer]) {
+  for (var d of pcbdata[layername][layer]) {
     if (["segment", "arc", "circle"].includes(d.type)) {
-      drawedge(ctx, scalefactor, d, "#aa4");
+      drawedge(ctx, scalefactor, d, edgeColor);
     } else if (d.type == "polygon") {
-      drawPolygonShape(ctx, d, "#4aa");
+      drawPolygonShape(ctx, d, polygonColor);
     } else {
-      drawtext(ctx, d, "#4aa", layer == "B");
+      drawtext(ctx, d, textColor, layer == "B");
     }
   }
 }
@@ -296,11 +296,26 @@ function drawHighlights() {
 
 function drawBackground(canvasdict) {
   clearCanvas(canvasdict.bg);
+  clearCanvas(canvasdict.fab);
   clearCanvas(canvasdict.silk);
   drawEdges(canvasdict.bg, canvasdict.transform.s);
   drawModules(canvasdict.bg, canvasdict.layer,
     canvasdict.transform.s * canvasdict.transform.zoom, false);
-  drawSilkscreen(canvasdict.silk, canvasdict.layer, canvasdict.transform.s);
+
+  var style = getComputedStyle(topmostdiv);
+  var edgeColor = style.getPropertyValue('--silkscreen-edge-color');
+  var polygonColor = style.getPropertyValue('--silkscreen-polygon-color');
+  var textColor = style.getPropertyValue('--silkscreen-text-color');
+  drawBgLayer(
+    "silkscreen", canvasdict.silk, canvasdict.layer, canvasdict.transform.s,
+    edgeColor, polygonColor, textColor);
+
+  edgeColor = style.getPropertyValue('--fabrication-edge-color');
+  polygonColor = style.getPropertyValue('--fabrication-polygon-color');
+  textColor = style.getPropertyValue('--fabrication-text-color');
+  drawBgLayer(
+    "fabrication", canvasdict.fab, canvasdict.layer, canvasdict.transform.s,
+    edgeColor, polygonColor, textColor);
 }
 
 function prepareCanvas(canvas, flip, transform) {
@@ -319,7 +334,7 @@ function prepareCanvas(canvas, flip, transform) {
 
 function prepareLayer(canvasdict) {
   var flip = (canvasdict.layer == "B");
-  for (var c of ["bg", "silk", "highlight"]) {
+  for (var c of ["bg", "fab", "silk", "highlight"]) {
     prepareCanvas(canvasdict[c], flip, canvasdict.transform);
   }
 }
@@ -371,7 +386,7 @@ function recalcLayerScale(canvasdict) {
     canvasdict.transform.x = -((bbox.maxx + bbox.minx) * scalefactor - width) * 0.5;
   }
   canvasdict.transform.y = -((bbox.maxy + bbox.miny) * scalefactor - height) * 0.5;
-  for (var c of ["bg", "silk", "highlight"]) {
+  for (var c of ["bg", "fab", "silk", "highlight"]) {
     canvas = canvasdict[c];
     canvas.width = width;
     canvas.height = height;
@@ -523,7 +538,7 @@ function addMouseHandlers(div, layerdict) {
   div.onwheel = function(e) {
     handleMouseWheel(e, layerdict);
   }
-  for (var element of [div, layerdict.bg, layerdict.silk, layerdict.highlight]) {
+  for (var element of [div, layerdict.bg, layerdict.fab, layerdict.silk, layerdict.highlight]) {
     element.addEventListener("contextmenu", function(e) {
       e.preventDefault();
     }, false);
@@ -557,6 +572,7 @@ function initRender() {
         mousedown: false,
       },
       bg: document.getElementById("F_bg"),
+      fab: document.getElementById("F_fab"),
       silk: document.getElementById("F_slk"),
       highlight: document.getElementById("F_hl"),
       layer: "F",
@@ -574,6 +590,7 @@ function initRender() {
         mousedown: false,
       },
       bg: document.getElementById("B_bg"),
+      fab: document.getElementById("B_fab"),
       silk: document.getElementById("B_slk"),
       highlight: document.getElementById("B_hl"),
       layer: "B",