and 1-click BOM

Video in TIB AV-Portal: and 1-click BOM

Formal Metadata

Title and 1-click BOM
Making web-enabled EDA tools using Javascript
Title of Series
CC Attribution 2.0 Belgium:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Release Date
Production Year

Content Metadata

Subject Area
1-click BOM is a browser extension that lets you easily buy required partsgiven a bill of materials. This was first presented at FOSDEM in 2015 and inthis talk Kaspar catches us up on the progress since. One of the most exciting bits to come out of this development is the projectsharing site a registry for open source hardware that makescomplete PCB designs easier to replicate. The story of the development of these applications is a tour of the pains andjoys of developing electronic design tools for the web with Javascript.
Web service Electronic design automation Software developer Telecommunication Projective plane Web browser Replication (computing) Extension (kinesiology)
Statistics Context awareness Software engineering Electronic design automation Wage labour Software developer Projective plane Virtual machine Archaeological field survey Physicalism Open set Mereology Subset Number Web service Software Internet forum Repository (publishing) Addressing mode Telecommunication Computer programming Blog Computer hardware Whiteboard
Web 2.0 Different (Kate Ryan album) Projective plane Plastikkarte Website Web browser Mereology Extension (kinesiology) Replication (computing) Chi-squared distribution Software development kit
Decision tree learning Complex (psychology) INTEGRAL Multiplication sign Web browser Mereology Bookmark (World Wide Web) Element (mathematics) Web 2.0 Goodness of fit Operator (mathematics) Website Software testing Extension (kinesiology) Exception handling
Web page Purchasing Open source Computer file Materialization (paranormal) Hidden Markov model Mereology Power (physics) Number Spreadsheet Analogy Extension (kinesiology) Descriptive statistics Software development kit File format Projective plane Maxima and minima Multilateration Flow separation Graphical user interface Repository (publishing) Drill commands Network topology Website Transmissionskoeffizient
Link (knot theory) Information Computer file Demo (music) Decision theory Connectivity (graph theory) Projective plane Line (geometry) Instance (computer science) Web browser Heat transfer Mereology Web service Friction Causality Repository (publishing) Artistic rendering Extension (kinesiology) Descriptive statistics Software development kit Arc (geometry) Exception handling
Computer file Software repository Repository (publishing) Projective plane Source code Website Bit Branch (computer science) Whiteboard Line (geometry)
Computer file Link (knot theory) Projective plane Website Graph coloring
Presentation of a group Right angle
Data management Server (computing) Information Computer file Moment (mathematics) Website Branch (computer science) Continuous integration Software development kit
Point (geometry) Mechanism design Pay television Code Multiplication sign Software developer Website Right angle Whiteboard Software development kit Vector potential
Module (mathematics) Presentation of a group Computer file View (database) Projective plane Bit Offenes Kommunikationssystem Front and back ends Facebook Web service Message passing Uniform resource locator Different (Kate Ryan album) Repository (publishing) String (computer science) Website
Computer file Planning Right angle Bit Web browser Code Library (computing) Front and back ends
Game controller Multiplication Electric generator Computer file File format Connectivity (graph theory) Multiplication sign Materialization (paranormal) Generic programming Planning Bit Complete metric space Mereology Number Spreadsheet Latent heat Exterior algebra Operator (mathematics) Selectivity (electronic) Right angle Extension (kinesiology) Descriptive statistics Window
so if you were here previously you know my name is kasper and I'm an electronic design engineer and software developer this talk is well a web service and browser extension that I worked I've been working on which is to make it easier to replicate electronics projects once their design is finished so I'd
like to give some context for the motivation behind this and I grabbed some statistics from various places about to try and gauge the number of electronic engineers they are in the world and how that compares to software developers so in the you know you can look at these statistics here and kind of guesstimate the amount of people there in the world working on so on electronic engineering versus software and so kind of in summary there's about one Yi to every 3d program is maybe and then I was when you think about it there's maybe you know 1 in 10 software engineers know C and if you but if you compare that kind of forums on electronics versus C programming if you just reduce the subset you you get quite favorable numbers into pitting for electronics really and the question really is where what why where's the Linux of electronics and this is a lot of people think about this is actually logo from the open hardware repository from CERN and I think it captures that idea quite well you know where what why isn't this happening and of course you know it's not software and there's a lot of labor and kind of physical movement and things I have to happen for to make electronics happen but there's a lot of automation as well so this is a pick and place machine which you know it's quite advanced automation and board prices are
going down you can iterate as a design engineer you can iterate quite quickly on a hardware project you it doesn't cost that much to make her get a boat made anymore and it's more accessible for everyone and we do shake projects so I did a survey a while back and there's about 3,000 Cod projects on github about 7,000 ego projects and ash Park which is a PCB batching service they have a kind of little project they're sharing thing where you can download Gerber's for four projects there's about 9,000 projects on there and there's all hackaday and ee-vie blog forums and all these different ways of sharing projects I think and it's an interesting problem to to look at I think and I think part of the problem is maybe we have a heritage of doing very amazing things but not making it so understandable for other people to replicate that this is a picture from oh I didn't run down the reference I think it's at the end is Bob it's Bob peas I can't remember the title of the book but and so my my kind
of approach to this was we want to have all these different way of doing things like the Chi card and all the different ways of sharing things and all the ways of different ways of making PCBs and kind of munch it all up and at the end of it what do you really want you want the PCB and you want the parts to make the PCB so my approach to this is the
kidney kit website which is a project sharing website and the one-click bill of materials browser extension which works in your browser to replicate replicate web requests to try and automate automatically put things into retailer shopping carts so this is the
one trick one browser extension that was first presented at first I'm actually in 2015 and it's still it's still there still works it automates purchasing by replicating the web requests are sent to use retailer sites so it currently works for digi-key Mauser RS New York Farnell element14 and you might ask why why does this need to be a browser extension can't you just make a website that he puts things into carts well not really and there's some exceptions to this but basically the the retailer website would have to allow pretty much you your specific website or you to do this so this is a quote from the same origin Percy is what is implemented in browsers basically to prevent one site from messing with your data on another site and there's a good little comic about that but I'm not sure see me now's a good time favorite reason I'm not sure what I put the hem there but I'm going to skip it so this you can you can look up the slides and look at that coming it's a quite it's cute this is the kind of request you have to send for what is this the Mauser site to add something to your cart and there's quite a lot of stuff in there and maybe you don't strictly need but there the crucial thing actually is this viewstate element which goes on thousands and thousands of bytes for some reason and you need to send that to its to to modify the user's cart so in the in the the way I kind of handle this
this complexity of all these different retailers all the different countries and these kinds of the kind of lengthy requests is I use a lot of testing and make sure that it works across all the different sites and all the different countries but with using this integration testing so this one's a test for funnel and it checks for each country that can add some parts to the car checks the cart and you can empty it and if there's a failure if there's something fails it'll notice and also if but it won't like it often the way the retailer sites work is it if something fails it'll be in your cart for you to see but really it it if you if you want the extension to work that you should be able to clear that out again and try the next operation so this is what the
extension looks like and it's kind of meant to be used in conjunction whether with the spreadsheet on one side and you can copy from the spreadsheet into the extension and and copy out of the extension back into the spreadsheet so they're there five retailers are currently supported and you can add to the cart and empty the cup so this is available for Chrome and Firefox currently it works on tab-separated values which is the clipboard format for spreadsheets you can also load an online bomb so if you share below materialism on github or somewhere in the right format you can just load it directly into the extension it can I've been working on features where it can try and complete like if you if you give it a description for a part it will try and find the right path for you it'll be more on that later it's open source Cpl license ever and it has about 500
users so back to this kind of a weird analogy here we have a way of replicating purchases from one person to the other and you can do that across the globe but it doesn't include the PCBU necessarily and there's no neat way to package everything together so this is kind of what the kit nigut website is for and the way that works is you put everything into a git repository you use the format that the extension understands and the website understands as well which is that one click tab separate values you need a leaf references quantity and a power number two kind of that's like the minimum that you should be able to specify about your project and we use r27 4x Gerber's and excellent drills and so this is kind of the minimum file tree that you would have you have you have the TSV and the Gerber files so we're going to try and do a live preview of the website oh right yeah here we go one second so that's the front page and there's a where's my scrollbar hmm I'm sure that's not the websites fault how do I screw on this have you know one page down will always work great here we go okay so these are some projects that are on there ready we can make me select one so it's a small FM transmitter kind
of demo project so it's got a nice rendering of the Gerber files and it's got a link here to get service there's links here okay short descriptions and a website link for more info and the repository link and here is kind of the magic where you need the browser extension except in some instances I've actually found that digi-key is enabled cause requests to add parts completely a new arc and fernell as well except the extension kind of works better because there's less friction in doing so you won't be prompted for decisions for like for New York you might be prompted to make a decision on whether you want to buy more parts for less money which you don't really want to be prompted for that so that's lit it's even less still less friction with New York if you extol the extension and for we did UK if you install the extension and in new I can find out that the way the extension works it adds all the all the references line notes to your to your shopping cart so that when you get the parts you will normally have in the in the in the you know the printer details there what parts are what already so it's kind of the idea really is to to have a transfer without the creator necessarily having put to put together a kit they can transfer all the information you need to buy your own kit without them having to bag components and things that's really the big idea should we try and buy something mm-hmm
so this won't actually use the extension so this prompts you like I said do you want to buy more parts for less money yes I would like to right there we go and there's all the parts you need and you can go and buy that so what I added a few days ago here we are
I'm a bit confused sorry we're more right so this is what I added a few days
ago is because previously the way we
handed handles submissions was you sent a pull request to the gab repo where the site is in a way all the site source code is and there's a boards a text file where you add your the lines your publicly accessible git repository and then if everything looks ok then I'll add that to the main branch the master branch and the whole site is rebuilt with your project in it so now I added this a few days ago and you can try and instead of you know just blindly going does this work does this work you can now get a kind of a better idea by doing a preview so this is the kind of Arduino
example project and then renders the
thing for you and you can change the color but they still they still know
there's still no accounts on the site or anything so you still have to go by the end of all of this if you've checked everything seems to be in the right place and there's the readme file and the links and things then by the end of
it please send us a pull request so there's still a lot of work to do there no work maybe I've never seen that anywhere so I'm not sure but right I'm
not sure how to get back to my presentation all right I don't think Mike even okay hey right
now this my okay so yeah like I said the
idea is really this virtual kit you don't have to lift a finger you can transfer all the information you need through this through the website the way it works right yeah the way it works we use static site hosting for the moment minute we I used continuous integration to build the site and to kind of preview you've seen me messing about with these preview domains let's actually a branch on there so whenever I make a branch and I push it up to get up it'll build it'll deploy it to my AWS server so I can have a look at the side end and I can show other people what's going on there and like him I already went over this so there's a lot of planned features really it would be nice to add accounts and have a management feature and have file uploads and not necessarily force electronic engineers to use git and really I quite enjoy making tools that help make Bills of materials I'm gonna
skip over this because I'm running out of time this would be a nice feature if you could like to help you build the kit even if you hover over somewhere you can
see we're on the boards with this is kind of a philosophy that I take when when implementing this is and like to build them the the minimum thing that could be useful and then to add on top of that instead of trying to build the whole thing at once yeah that's a good question like I said there's already caused requests there's some pros and cons you can read up on that oh that's supposed to be a nice thing right um I guess the question for me as well is how do I make this development sustainable really there's a lot of so far there's a lot of expenses and there's there's some potential to track referrals in the site and try and try and make money of that and to support the verb development or the potential to you know add paid private accounts and have people pay a subscription to support or maybe some other donation mechanism to support the development write some code I don't think I have a lot of time for the code are there any questions at this point yeah yes it would be possible very much so I'm gonna continue sorry I shouldn't
have it's all JavaScript everything's JavaScript I'm gonna I'm going to come back to questions afterwards initially if you look at the
old presentation it was CoffeeScript and I've stopped using that to get advanced features JavaScript features because CoffeeScript was kind of getting in the way where we still compile JavaScript to JavaScript brilliant so the kidney insight uses react as the front-end it's kind of this this view layer made by Facebook where you define lots of different small modules you pretty much writing HTML you get JavaScript to always generate HTML for you instead of getting JavaScript to manipulate HTML for you so it does one pass and it renders it and that's your static site and then it uses this react front-end to modify that I started building out micro services and making use of micro services so that what you saw there their preview thing I've made a project out of that it's a it's kind of a little service where you can put in a URL for a get repository and it will serve all the files to you so I think I want to continue to split out little projects like this that could be generally useful and open system this is not my own thing I make use of this for geolocation but that's another service that's running for to support kipnuk like I had a lot of things to say about JavaScript which are probably one at a time for but pretty much the gist of it is that it's it's there's a lot of bad things to say about JavaScript but the ecosystem is pretty amazing right now it is the people make little tiny packages for everything so there's even a package to left pata string that's one JavaScript package that you can you can include in your post and there was a bit of controversy around this because the person that was in charge of this remove this from the repositories and it broke a lot of important projects so there's
that you know upsides and downsides this this is an amazing library that we make use of a kitnik it's bit written by Micheal cousins and it renders gabber files using javascript it will work in the browser it will work in on no Jess in the backend and those are kind of the dependencies that it has but Michael cousins written all of this and want one kind of neat thing that we've done well we've collaborated on is what's that go where which kind of takes all these different ways of naming Gerber files and and tries to figure out what the stack up is and make the right we were rendering right more codes I'd
plan to show you where I made use of NPM packages to to make this feature which I will skip ahead to and it's kind of combined with the CPL data from octopod so is it thing it does a quick look up
from your description yeah I shoulda put me so you kind of give it a description paste that in there and press complete and it figures out what parts you wanted just from the description and this is especially good for kind of generic components if oh these are not actual Windows Phone and you can put that back into your spreadsheet or go and buy that with the extension so I'd like to work more on things like that to make making Bills of materials easier right now this is a bit like a self-driving car with just one button you've got no control you can just say complete and then you have to check over all the mess that it could potentially make so on my own time
three minutes ago I should have finished including questions so I'm done right we any questions yes yes there's I mean I mean not like concrete plans but that seems like a great feature to have yeah so the question was why not generate work file sorry yeah yeah yeah because it varies so much across retailers so what we have what I'd like is to have the same way to do it across all the different retailers and always this kind of always the same steps yeah yeah it's the it's it's it's actually the clipboard format and it's just tab-separated values so it'll work with any spreadsheet multiple yeah multiple vendor alternatives are currently not supported in the format the only thing that is support is multiple manufacturer part numbers on the bill materials so you can say the all these parts are possible to be used here and then there you have a selection for specific retailer yeah exactly that so you can have multiple manufacturer part number manufacturer part number in your bill of materials and then you could have us the you could have a selection of one of those for your retailer columns the operation today on not atomic no you pretty much you I've only tested this doing one retail at a time and it won't the website won't currently let you do more try and add more components while the other components already being added but you can have quite large Bills of materials so you can all add at once well it would be quicker if you all did it if you did it as one requests yeah that's the trouble trying to validate and making sure that it's it's correct [Applause]


  360 ms - page object


AV-Portal 3.20.2 (36f6df173ce4850b467c9cb7af359cf1cdaed247)