Proof of concept web based SVG design viewer

Software
1

Today I’ve thrown together a small proof of concept web utility to view KiCad exported SVG designs. This reads the separate layer files (for now some I manually uploaded to my server) and attempts to present them in a fairly practical way:

https://prjct.net/kicad_viewer/

1193×577 396 KB

The idea is to be able to use this for discussing a design as well as a quick reference for assembly of a board (viewable on any phone or tablet as well).

I’d love to hear what the initial impressions are.

2

It looks fairly good. I just tested it on my computer with firefox, but I my mind the scrolling to zoom is opposite.

It seems very slow to actually do the zoom.

I can’t pan, but I guess that is just not implemented.

Also, what is your design goal or intention with this? Will it be FOSS?

3

Hi Nickoe,

Thanks for having a look. The whole idea just came from the thought ‘Hey, could I view these SVGs in a nice way?’. It runs on unaltered SVG files and completely client side, no server side code needed. You can look at the code right now.

On licensing: I’d be open to put it on GitHub, maybe under a license like the CC BY-(NC?)-SA 4.0.

The scrolling can be inverted in the code, not a big deal to change. I only now noticed it’s inverted with respect to KiCad.
Removing the opacities would hugely speed up the scrolling operations, panning isn’t implemented yet, true.

4

Hi Stefan,

i like your idea!
for the licence - i would like if you allow for comercial use - i think a big part of the KiCad community would be commercial users…
and if you keep in mind to design the tool so that it could also be embedded in other webpages and for this also can use sources from the server you would be making something that eventually board-houses could adapt to use for there preview of uploaded files… :wink:
(they ‘just’ would have to covert there uploaded data to a layered svg…)

other idea is to keep the tool so that you can embed it in an svg bord file -
so kicad could have a ‘interactive-svg-export’ option…
that would be cool - and i think its possible to do all the view handling in svg… (just embed your js in the svg…)
this options from one code base would be a dream :wink:

sunny greetings
stefan

5

Thanks for the nice words! Would this work for you?

I opted for CC BY-SA 4.0, this will allow commercial usage.

6

Hi Stefan,
sorry i have some other things going on at the moment (to much things to little time… :wink: )
i had a short look at your github repositiory & the demo.
for the demo - i think its possible to directly use [github as hoster (github-pages)][1] and just make a index.html with an one-line info thats 'work-in-progress- and a inline frame that loads the files from master - so the demo would show the current development state…

i think for performance reasons it would make sense to load all svg-file-content into one svg-element in different groups (every layer is one group)
and optional tag the groups with the inkscape layer mode - so if you resave the generated file you can use it in inkscape for documentation or things like this…

<g
    inkscape:groupmode="layer"
    id="layer4"
    inkscape:label="Layer Name"
    style="display:none">
    ....
</g>

for saving text as file i had searched and copied together this snippet some time ago:

function saveAsFile(link, content, filename) { 
    // based on http://stackoverflow.com/a/16330385/574981 
    var blob = new Blob([content], {type: "text/text"}); 
    var url  = URL.createObjectURL(blob); 
    var a = link; 
    a.download    = filename + ".txt"; 
    a.href        = url; 
}

[also as jsfiddle][2]
eventually that can help as stating point… (tested only in firefox37+)

so that are just some ideas - i will follow this - but have currently no time to do some development myself…

sunny greetings
stefan
[1]: https://help.github.com/articles/what-are-github-pages/
[2]: http://jsfiddle.net/s_light/5psuqfma/