Interactive Html Bom Plugin for KiCad

qu1ck · May 18, 2020, 8:50pm

That’s a great use of customization functionality. Feel free to submit your patch on github, I’ll merge it. Just change event name to BOM_BODY_CHANGE_EVENT to be consistent with other events.
If you don’t want to bother with PR I’ll push it but I’d rather keep commit author information.

Wolfgang · May 18, 2020, 9:06pm

Hi @qu1ck, thank you for this plugin. It’s really handy!

We’ll be using this for the guy who will be finishing the boards by hand. As we do not put designators on the silkscreen the easiest way for him to keep track of things is by opening the HTML. It truly makes life much easier than mucking about with PDFs.

Feel free to submit your patch on github

I don’t have a Microsoft account but it’d be handy if you could patch it in yourself.

SembazuruCDE · May 18, 2020, 9:50pm

FYI, github isn’t Microsoft. But I suppose if you didn’t know that you also don’t have a GitHub account either.

ferdymercury · May 18, 2020, 11:06pm

(Note: Microsoft acquired Github two years ago though accounts are not the same)

romain · May 21, 2020, 4:29pm

Congratz @qu1ck !!
iBOM featured on the EEVBlog and Dave loves it !

Starts at 6:27:

hermit · May 21, 2020, 7:15pm

“Hats off to ‘whoever’ wrote it.”

qu1ck · May 21, 2020, 8:59pm

I’m half surprised that he didn’t declare Bob to be indeed my uncle.
Nice.

evalon · May 24, 2020, 3:49pm

Hi qu1ck & others,

I have taken a look at the demo and it looks really useful and well designed. However, not - at all - being a programmer I admittedly can’t find installation instructions, what to download from github etc. Anyone can help by linking me e.g. to the installation & download instructions?

Help would be appreciated,

Cheers,

Jesper

P.S.: I am using Win7 if that matters …

fred4u · May 24, 2020, 4:02pm

You can find installation instructions here:

There’s no automated installer, so you have to manually copy files but that’s all.

evalon · May 24, 2020, 4:07pm

Thanks fred4u for your prompt and helpful reply … I will check it out …

Cheers,

Jesper

evalon · May 24, 2020, 4:27pm

Hi again,

I have copied the interactivehtmlbom folder to the placement that is suggested in the installation instructions:

C:\Users[USERNAME]\AppData\Roaming\kicad\scripting\plugins

and have set this path:

C:\Users\Jesper M\AppData\Roaming\kicad\scripting\plugins\InteractiveHtmlBom\Run.bat

to be the one the BOM functionality in KiCAD “sees”. However, when I ask Kicad to generate a BOM from “interactivehtmlbom…” in the BOM dialog box I get an error as shown in the attached screen dump. Should I set another file to be the “run” file?

Cheers,

Jesper

Rene_Poschl · May 24, 2020, 6:46pm

The interactive BOM plugin is not an eescheam extension. It is a plugin of pcbnew.

qu1ck · May 24, 2020, 11:28pm

@Evalon You might want to read Usage page on the wiki linked above.

evalon · May 25, 2020, 4:15am

Hi Rene & qu1ck,

Thank you also for your feedbacks - that helped … now it is up and running and I have to say WAUUWW! … great, great help and I am also impressed with the user interface: pleasant, easy to use - intuitive, being able to see what has been placed, and see all the identical value components highlighted, move the board with the left click mouse - great!

There’s probably more to learn as I go along with it but I am duly impressed and would like to say many thanks to qu1ck for making this and also making it available … I foresee it will be a great help

Cheers & best wishes for your day,

Jesper

murphybeck · July 13, 2020, 7:48am

Both range() and xrange() are built-in functions in Python that are used to generate integers or whole numbers in a given range . The range() and xrange() comparison is relevant only if you are using both Python 2.x and Python 3 . It is because the range() function in python 3.x is just a re-implementation of the xrange() of python 2.x. It actually works the same way as the xrange does.

halachal · July 13, 2020, 10:26am

Where were you 17 months ago?

kcd_DDesign · August 14, 2020, 12:46pm

I was recently pointed towards this plugin by some other helpful forum members, and I have to say that I am quite impressed. This is no small project, and it works really well!

That being said, I did notice several quirks/issues (more annoying than actual problems), and I thought I would at least list them here. For the record, here is my KiCad version info:

So what do I notice?

If I generate an iBOM file, and then re-open the Interactive HTML BOM tool again, all the configurations I set are completely lost. (The Save Current Settings button does not work. At least for me.) The only time settings seem to be saved appears to have some weird connection to restarting KiCad/selecting a different project.
This is a bit annoying when I’m making corrections to the parts, and updating the iBOM file as I go…I have to manually re-configure the HTML BOM tool every single time.
Component blacklist. If I manually specify a component ID (i.e. J4, H1, etc.), it works. “Glob” only seems to work on numbers (i.e. H* will block H1,H2,H3, etc.) It does not work on prefixed IDs (i.e. using “Z*” when all parts to be omitted are prefixed with “Z”, i.e. “ZJ4, ZH1, ZLOGO1”, etc.)
“Blacklist components with empty value.” I dunno, maybe it’s just me, but I can’t figure out how to do this. Perhaps it was a KiCad feature pre-5.1.6…but there is no way (that I am aware of) for the Value tag to be empty on a component. If I blank it, KiCad protests, “Value cannot be empty.” And I cannot delete the Value tag, “First four fields are not optional.” Tried just a single space in the Value field (“empty”), but all of said parts appeared in the generated iBOM anyway.
I have to say that this would be a VERY handy feature for things like logos, mounting holes, optional parts, etc. that shouldn’t appear on the BOM.
Umm…with the InteractiveHtmlBom tool open, I can’t “hide it” behind any other window. It’s attached to the Pcbnew window, so it’s impossible to “lose”…but here I’m writing this post, and the InteractiveHtmlBom tool is “always on top” of my screen. Mildly annoying–but really unimportant anyway, as it’s not something you just “have open” all the time anyway.
This probably has a lot to do with the “settings” in the generated HTML file…but if I change the HTML defaults in the InteractiveHtmlBom tool, the “defaults” do not change in the resulting HTML file unless I move the HTML file to a different location on my computer. (Seems perhaps the HTML file settings are referenced via file path??) Not a big issue, just I went in circles for quite awhile trying to get the default view set to “Dark mode”…then finally gave up, moved the file to a different location on my computer, and poof: dark mode.
I promise this is the last one…so far anyway ;-). Is it easy to add an option to remove the Fab layer from the resulting HTML file? Yes, I know there’s an on/off control for the Fab layer…but I’m talking “completely remove Fab from the HTML.” Why? Well, it’s a lot of work to get the Fab layer all cleaned up nice and pretty…especially on high-density designs. And the BOM tool very nicely “replaces” the Fab layer IMO. Just a suggestion; you can ignore this one if you like

Thanks again for a wonderful project. Just amazing.

P.S. Maybe consider a “real color” display mode? Dark green PCB, white silkscreen, green tracks/zones (if included), silver pads…can’t be that hard to do! The Interactive Bom tool would really “pop” then!

qu1ck · August 14, 2020, 5:20pm

Thanks for feedback, I’ll reply to each point corresponding to your list

Where did you install the plugin? To be able to save settings you have to install the plugin in a directory where the user you run kicad under has write access. For this reason there can be issues if you install plugin in a system directory (i.e. under /usr/lib/… or something like that) or if you use flatpack/snap installation of kicad and folder mappings are not set correctly. If you use standard apt install and your plugin is under user directory (i.e. ~/.kicad_plugins or ~/.kicad/scripting/plugins) as the wiki on github suggests you should have no issues. Verify if the settings are changed in config.ini file that gets created in plugin directory when you click save settings.
Glob works as expected, you can have multiple globs.
Set value to ‘~’, it will appear as empty and ibom will ignore it.
Ibom window is a standard dialog window. I don’t do anything specifically to make it appear on top of all other windows, must be a quirk of how dialogs work in gtk or a bug in wxwidgets/wxpython.
Your browser caches html settings of each ibom page it opens. If you change defaults and open it in the same browser it will still use cached settings instead of defaults. That’s why it works on another pc that doens’t have cached settings. You can clear the cache by going to developer tools and removing application data for the site or by clearing all browser data (ctrl-shift-delete on chrome iirc but it will delete cache for all sites).
EDIT: I initially misread your point as having to move the html to another pc instead of another location. Here is explanation for why it works when you change file location. Browser appication data (more specifically ibom uses LocalStorage) is tied to each site. Some browsers consider each file path opened from file:/// url as it’s own site so if you move the html file to another folder the application data doesn’t move with it and you end up with clean slate that uses html defaults. If I’m not mistaken chrome consideres all file:/// urls to be the same site so moving the file doesn’t help, you have to change browsers or pcs. Or open the file in incognito window.
Some people have asked to have courtyard layer instead of fab. So I think better, more generic approach is to just let everyone choose the layers they want. I created an issue on github to track it.

You can play with colors using user.css (see customization). Almost all rendering related colors are specified as custom property on the root node, you can override them.
For example track color:

github.com

openscopeproject/InteractiveHtmlBom/blob/master/InteractiveHtmlBom/web/ibom.css#L13


  --pad-color: #878787;
  --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;
  --track-color: #def5f1;
  --track-color-highlight: #D04040;
  --zone-color: #def5f1;
  --zone-color-highlight: #d0404080;
}

html, body {
  margin: 0px;
  height: 100%;
  font-family: Verdana, sans-serif;
}

You can only change whole rendering window background but not pcb color because pcb outline is not rendered as polygon (that’s related to kicad data model and is not easy to change).

If you get something looking nice don’t forget to share

kcd_DDesign · August 15, 2020, 5:12pm

I did notice these settings in the resulting HTML file…but conspiciously missing was the “PCB color.” Which is what I would start with, but…

On a cursory glance through the generated HTML file, I did notice that the board outline is drawn as lines (more or less, circular/odd shape PCBs are of course possible). Obviously, as you mentioned, to get a PCB background, the board shape has to be drawn as a polygon. For that matter, if the PCB has a non-polygon edge (non-closed/not lined up corner), the 3D viewer throws an error, “Cannot determine the board outline.”
Looking through the actual “kicad_pcb” file, I do see the board outline is not “in polygon sequence”, though it at least appears to be mostly in one place…after the parts are defined/placed, and before the traces/zones are indicated.

(gr_line (start 141 106.5) (end 139 105) (layer Edge.Cuts) (width 0.05) (tstamp 5F02D9AF))
(gr_text @ (at 146.5 104 90) (layer B.SilkS) (tstamp 5F02D9A7)
(effects (font (size 4 4) (thickness 0.5)) (justify mirror))
)
(gr_text @ (at 146.5 104 90) (layer F.SilkS)
(effects (font (size 4 4) (thickness 0.5)))
)
(gr_line (start 153.25 106.5) (end 153.25 79) (layer Edge.Cuts) (width 0.05) (tstamp 5F02D4D1))
(gr_line (start 141 106.5) (end 153.25 106.5) (layer Edge.Cuts) (width 0.05))
(gr_line (start 139 79) (end 139 105) (layer Edge.Cuts) (width 0.05))
(gr_line (start 153.25 79) (end 139 79) (layer Edge.Cuts) (width 0.05))

(segment (start 151.27 88.94) (end 146.06 88.94) (width 0.5) (layer F.Cu) (net 1))
(segment (start 145.5625 89.4375) (end 145.5625 90.1) (width 0.5) (layer F.Cu) (net 1))

In my quick look through the HTML file, it appears that the graphics engine used by iBom has multiple display layers?? If that is the case, then KiCad’s file format poses absolutely no problem, as long as the Z-order of the layers are properly set–the board outline/polygon can be drawn at absolutely any time. Sorting the “lines” into a polygon is not terribly difficult. iBom has to first collect the “lines” into an array, then with the above example, iBom could start with…
line 1: 141 106.5([1]set DEST) -> 139 105[2] … searching …
found 139 105 at line 10(end) -> 139 79[3] … searching …
found 139 79 at line 11(end) -> 153.25 79[4] … searching …
found 153.25 79 at line 8(end) -> 153.25 106.5[5] … searching …
found 153.25 106.5 at line 9(end) -> 141 106.5 = DEST, done. Draw polygon with following coords, fill a dark green:
[1] 141 106.5
[2] 139 105
[3] 153.25 79
[4] 153.25 79
[5] 153.25 106.5
The board outline here is a rectangle with a small 45-degree corner. Sort of like a landscape Windows “file” icon.
(Searching is a very simple “find this text” by searching all lines except the current one for the search term.)

I’m sure I could figure out how do get this working…that is, after several months of perusing documentation to figure out how the drawing engine works–but at least right now thought a suggestion to those who know the code inside-and-out would be a lot more beneficial

As far as the list of items…

Installed under “~/.kicad_plugins”. The Config.ini seems to be written to…at least some of the settings that finally “stuck.” So I tested it, re-entering all of my “blacklist” items, configuration, settings, etc. Clicked the “Save Settings” button, and verified that all of the specified settings appeared in the “config.ini” file. Re-opened the iBom tool…and to my surprise, most of them were remembered (that’s a first!) With the exception of “extra_fields=AliExpress”…said field is NOT checked in iBom tool.
Might need a documentation adjustment on globs that the “*” is ONLY for numbers, not characters.
Please, a documentation update, so it’s easy to identify this, “Empty is defined as a single ‘~’ character.”
OK
I’d suggest tying the cache settings to the generation timestamp of the iBom file. That way, if the browser’s cached setting timestamp doesn’t match the iBom HTML’s generation timestamp, the settings are invalidated and replaced with the defaults in the iBom HTML file. That way, someone tweaking the viewport settings (by re-generating the file, like me!) doesn’t get confused when nothing changes.

qu1ck · August 15, 2020, 7:54pm

Yes, some extra fields related settings are not saved because they depend on netlist/xml being loaded. But I think this can be improved.
Agreed
This is a kicad thing, not ibom thing. But having a note in docs doesnt hurt. One more thing I forgot to mention, since you were talking about mounting holes and logos in this point, they are supposed to be virtual footprints (settable in footprint properties). Ibom has a setting to blacklist virtual footprints, it’s on by default. This might save you some effort in adding globs.
(need to have an item or forum wont number the list correctly)
This is not so cut and dry. What you are suggesting is a bit more convenient for person who generates the bom but a lot less convenient for person who views the bom. You will effectively force a reset of user settings (including checkbox state) every time you regenerate bom page, even if there are no relevant changes. Instead I opted to tie the settings to (pcb title, pcb revision) tuple. That way settings are different for each board (obviously) and each revision of it. If you make a big enough change to need to force a reset of user settings then it probably warrants a revision bump. If you want to test how the page looks for a new viewer, use incognito window. I think this is an easy enough workaround.

Now regarding handling edge cuts as polygon. What you are describing is doable but it’s just a small part of it. The fun part begins when.

You have circles and arcs as part of edge cuts
When you have holes in the edge outline

But if you want to go for it, the things that will help you are

dataformat that describes how graphical items and everything else is stored in ibom internal format (you can ignore kicad file layout),
drawEdgeCuts() function in render.js that does the drawing. As you can see all edge cut segments are already conveniently grouped in pcbdata.edges array.

You can also ignore the multiple layers and order of rendering. Edge cuts are first thing that is drawn on the bottom layer so everything else will be drawn on top and will look fine.

In the end I’m not sure this is worth the effort. The goal of ibom tool is not to provide a realistic looking rendering, just a technical drawing that will make manual assembly easier.