KiCad Viewer for project documentation

sheffield_nikki · May 29, 2021, 5:18pm

Hi, just joined the forum, but I’ve followed the Contextual Electronics tutorials on YouTube for ages. In fact that is what originally got me using KiCad and designing my own simple PCBs

I’ve just written this lightweight Javascript library for embedding KiCad schematics & PCBs into web documentation, primarily for my own projects, but I hope other people might find it useful too:
https://climbers.net/sbc/kicad-web-viewer/

Some of the features:

Display a KiCad PCB with layer on/off controls, zoom/pan
Display a KiCad schematic with zoom/pan
Search for component reference/value with Ctrl + F
Pure Javascript library with no dependencies, 17Kb minimised, 6Kb gzipped
Works on any browser that supports SVG (IE9 and later)
Zoom with mouse wheel, double click, touch pinch, or keyboard shortcuts
Pan with mouse drag, touch drag, or keyboard shortcuts
Mobile-compatible, tested with Android and iOS
Optional list of custom PCB layer names

ClubmanPlus850 · May 29, 2021, 6:07pm

Nicely done! I’m working on documentation as we speak so this is perfect timing!

Looking forward to trying it out

sheffield_nikki · May 30, 2021, 9:24am

Great, thanks. I’m eager to hear any feedback/suggestions. Hopefully it is easy to use? It would be embarrassing if a project aimed at improving documentation was itself poorly documented

ClubmanPlus850 · May 30, 2021, 12:44pm

I always love finding people who value documentation - it can be so easily overlooked. I’d like to post this to my LinkedIn if that’s ok?

sheffield_nikki · May 30, 2021, 1:34pm

Please do share it.

I agree that documentation is often underappreciated by developers. There are so many fantastic & clever open source/hardware projects out there without even the bare minimum of a couple of paragraphs describing what the project is for and how to learn more about using it Even quite popular projects with multiple active developers often have absolutely no documentation, or it is multiple releases out of date.

ClubmanPlus850 · May 30, 2021, 2:03pm

rclott · May 30, 2021, 7:35pm

I wonder if this concept could be applied to git repositories. Even though I am in the camp of making good documentation, I myself sometimes update a KiCad project repo and forget to print a new PDF of the schematic and/or board. If I could just put some magic incantation in the readme.md file, that would certainly be helpful

sheffield_nikki · May 30, 2021, 8:00pm

That sounds like a great idea @rclott I don’t think you can include Javascript in a github README? but you could link a static thumbnail of the schematic/PCB to a full version hosted on a github.io page, with my library providing zoom, pan, search, etc.

And it looks like you can script an SVG export from KiCad, so you could have the export trigger each time you update the repo? If someone wants to contribute that, I’d love to add it to my library documentation.

alexw · June 1, 2021, 6:28pm

So cool! I don’t need it right now, but I can’t wait until I do

I can imagine one cool improvement would be to auto-generate the requisite files, hands-off, from kicad source files. Anyone know if you can script kicad in headless mode?

kaspar · June 1, 2021, 8:27pm

Wow! Very cool, works really smoothly in the demo.

Would love to include this for KiCad projects on kitspace.org. We integrated Interactive HTML BOM not too long ago and could give this a similar treatment. Would you be ok with that @sheffield_nikki? Have you thought about what license you want to put on your code?

sheffield_nikki · June 1, 2021, 9:07pm

Thanks @kaspar, I’d be honoured if you integrated my web viewer into kitspace

I hadn’t thought about licences, but I’ve now added the MIT licence to the zip archive.

kaspar · June 2, 2021, 12:02pm

Nice one @sheffield_nikki. For SVG plotting I recommend trying to adapt one of @gregdavill’s scripts. Looks like this one could be extended to use PLOT_FORMAT_SVG instead of PLOT_FORMAT_GERBER.

github.com

gregdavill/kicadScripts/blob/master/plot_gerbers.py

'''
    A python script example to create various plot files from a board:
    Fab files
    Doc files
    Gerber files

    Important note:
        this python script does not plot frame references.
        the reason is it is not yet possible from a python script because plotting
        plot frame references needs loading the corresponding page layout file
        (.wks file) or the default template.

        This info (the page layout template) is not stored in the board, and therefore
        not available.

        Do not try to change SetPlotFrameRef(False) to SetPlotFrameRef(true)
        the result is the pcbnew lib will crash if you try to plot
        the unknown frame references template.
'''

This file has been truncated. show original

sheffield_nikki · June 4, 2021, 2:08pm

I’ve now got a working python script for automating PCB export, with standard layers and colours. It’s in the project zip archive if anyone would like to test it?

kaspar · June 4, 2021, 4:26pm

Schematic Python API and file format is going to be much improved fo v6 I believe, so might be worth just holding out for that. Some people seem to have some success with using xdotool with these scripts on Linux:

sheffield_nikki · June 5, 2021, 1:36pm

The project zip archive now includes a working python script for automating schematic exports BUT it is a horrible hack and I don’t know if it can be made to work on all OS/desktops. Basically it loads Eeschema, fires off a series of keyboard shortcuts and then quits the app I’ve only tested it on Windows.

Hopefully KiCad v6 when it arrives will have an API for this sort of thing, and I can replace the current hack.