Interactive Html Bom Plugin for KiCad

Sound similar to what we discovered with eagle import https://github.com/openscopeproject/InteractiveHtmlBom/issues/99

@qu1ck
would it possible to add a checkbox to enable/disable Courtyard layer?

@Rene_Poschl, yes that bug is most shares the underlying cause. To get a bit technical, the issue is that when moving a polygon on the board KiCad API reflects the movement both in offset (start) position and in vertex coordinates themselves so the delta is doubled. When you reload pcbnew the offset is 0 again so API returns correct values.

@maui yes it’s possible, I can file a bug for it. Can you share a use case? When is having courtyard in bom more beneficial than fab layer?

1 Like

Courtyard layer is useful to check if your footprints may interfere each other… I know I can do it in kicad, but I found that your tool is very clear in displaying the board with components.
This would add an option for a quick check and a fast overview to rearrange models too near each others, even if not in direct violation.

KiCad’s check is much more precise than any visual check you can do by just glancing at the board, after all it actually checks for geometry intersections which my plugin can’t do.
I’m not sure using ibom for this is right. For visual check you can get the same clear overview in pcbnew by turning off all irrelevant layers.

1 Like

As I said, your plugin offers a very clear overview of the top and bottom layout without the need to turning off all the irrelevant layers in kicad.
Moreover this wouldn’t be to check interference, already available in kicad, but just to rearrange models too near each others, even if not in direct violation.

Allowing to display the courtyard layer in iBOM would be a plus IMO.
Thank anyway for this nice tool.

@qu1ck Any chance that the “Extra Fields” tab can become “Fields” so that the (now) fixed fields “Reference, Value, Footprint, Quality” may be set to hidden as well? Ideally, I would love to be able to configure the visibility and position (left to right) of any column/field.

When placing components, I have the iBOM.html file on my iPad mini and like to use as much real estate for columns I need at that time which (for me) is just reference and my house part number.

As others have said, thanks for such a wonderful tool and your dedication to continue to support it!

For configuring order of columns there is a feature request https://github.com/openscopeproject/InteractiveHtmlBom/issues/123

In terms of hiding fixed columns isn’t it better to do it at “runtime” i.e. in html instead of at generation time? This way you will not have to regenerate bom every time you want to show/hide a column.

Doing at runtime is better indeed, i was just thinking to piggy back on a facility you already have. Doing it runtime; you can then virtually elliminate the “extra fields” i.e., these would be hidden at runtime also.

Runtime that one can save/retrieve the combination of hidden and displayed columns.

1 Like

You can now customize all the things!

Change the colors, styling, add company logo, even custom functionality if you are handy with javascript.

Of course you could do all of that before by editing existing ibom code but your changes would likely break with each plugin update. Now you have more or less stable “interface”.

6 Likes

@qu1ck give me some excellent tips to personalize the header here.

Hello, don’t know if this might be any use to anyone but I have patched the plugin to add a new event that fires whenever the BOM body is (re-)written.

add-bom-body-populated-event.patch (786 Bytes)

I have done this as it allows me to watch from that event in my user.js, in my case so that I can linkify datasheet URLs.

And in case anyone is interested, here is the user.js that I used this with:

 
// Linkify URLs

function linkify () {
  const urlrx = /^\s*((https?:\/\/|mailto:|tel:|xmpp:|geo:)[^\s]+)/i;
  
  for (const row of document.getElementsByTagName("tr")) {
    if (!/^bomrow/.test(row.id)) {
      continue;
    }
    
    for (const col of row.getElementsByTagName("td")) {
      col.childNodes.forEach(node => {
        if (node.nodeType == 3/*text node*/) {
          const rxMatch = node.nodeValue.match(urlrx);
          if (rxMatch) {
            const url = rxMatch[1];
            const href = document.createElement("a");
            href.href = url;
//             href.target="_blank"; // If wanting to open links in a new tab by default
            href.appendChild(node);
            col.appendChild(href);
          }
        }
      });
    }
  }
};

EventHandler.registerCallback(IBOM_EVENT_TYPES.BOM_BODY_POPULATED_EVENT, linkify);

The URL matching regex is a bit crap but does the job for me.

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.

1 Like

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. :+1:

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

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

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

Starts at 6:27:

3 Likes

“Hats off to ‘whoever’ wrote it.” :smiley:

1 Like

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