

A circuit and PCB editor in the browser - skbohra123
http://www.circuits.io

======
RobotCaleb
I am not a hardware guy. Other than playing with n-in-one electronics kits as
a kid I haven't ever touched it much. I recently needed to build a "sensor
pod" (my name) for my ongoing 6-camera high altitude balloon project. I got
everything working on a breadboard and needed to move it to a more permanent
PCB. Enter Fritzing[0].

I fell in love with Fritzing pretty quickly. It has 3 mode. Breadboard,
schematic, PCB. I was able to copy my physical breadboard layout over to the
virtual one. From that, it basically gave me a schematic (what I wanted) and a
PCB layout (not entirely useful for me). I had to touch up the routing and fix
some lines that wanted to connect VCC straight to GND. I was able to figure it
out pretty readily and fix it all and now have a working PCB[1].

All this is to say, if you're a noob, Fritzing is great. This (circuits.io) is
probably geared at non-noobs, and I'm sure it's fine for them. I am not quite
able to jump right into drawing a schematic, though. As such, I can't provide
much of an opinion on it. :)

[0] <http://fritzing.org/>

[1] <http://goo.gl/iWuZF>

------
helper
I would love to ditch Eagle PCB for a tool like this. Eagle is awesome, but as
a hobbyist I don't use 70% of its features. From a quick look at circuits.io
here's what I would want in order to make the switch:

1) Let me import my Eagle components 2) Give me more control over grid sizing
3) Autorouter!

I'm also interested in seeing the fabrication prices. Right now I use
batchpcb.com (a Sparkfun service). There really aren't any other good options
for printing a single PCB.

~~~
kbruneel
We are currently working hard at integrating with the octopart api. We aim at
building a huge crowd sourced component lib, so you will never have to enter
components again.

Grid and measurements are definitely on top of the list.

Autorouter is a bit lower, but want that. We will probably first do some form
of assisted routing.

At this point you can download your gerber files and send them to a
manufacturer of your choice, but we are working on integrating with services
like BatchPCB.

~~~
zaius
Assisted routing would be way more useful (and probably easier to implement)
than autorouting. Also, it would be great to have a versioning system that
could pull together the good bits from different attempts at routing.

------
throwaway1979
Looks awesome!

I have a quick question about PCB layout. In the video, when you switch from
the schematic to the PCB layout view, there are thin lines which are clicked
to become red. There is a final line that is clicked to become blue. Can you
explain what is going on there?

FYI: I'm a CS person who is learning about electronics and circuits. I started
building radio and op-amp circuits, and have read that prototyping on
breadboard doesn't work well. I tried going from schematic to directly
soldering on a perf board and it ended in disaster. This tool seems exactly
what I need ... though I could use it to figure out my perf board layout.

~~~
mustate
It looks like these are two layer boards, meaning you can route traces either
on the top (red line) or the bottom (blue line) of the board.

 _have read that prototyping on breadboard doesn't work well._

That's definitely not my experience. Using a solderless breadboard may add
more noise, but it's much easier to assemble and correct mistakes.

~~~
mbell
> Using a solderless breadboard may add more noise, but it's much easier to
> assemble and correct mistakes.

Noise isn't usually the major problem with breadboards, though it is an issue.
The much more troubling issue and what makes breadboards useless for a large
number of circuits are the parasitics from the connections. The stray
capacitance and inductance can cause large problems and even outright
oscillation of even relatively low frequency circuits.

~~~
mustate
Good point, thanks for the correction. I recalled assembling RF and other
analog circuits using breadboards in labs, but those were likely too low
frequency to run into those problems.

~~~
throwaway1979
This is the circuit I was trying to build ([http://www.lucidscience.com/pro-
basic%20spy%20transmitter-5....](http://www.lucidscience.com/pro-
basic%20spy%20transmitter-5.aspx)). I've always managed to breadboard circuits
of this size without an issue so I just jumped into soldering components onto
the PCB. It was a total disaster and took my confidence down a few notches :(

I must say, going from a novice who can make LEDs blink or hook together a few
ICs to op-amps and RF circuits is turning out to be a big jump! If anyone has
tips, those would be much appreciated.

~~~
jacquesm
My tip to you would be to start fixing broken electronics, preferably stuff
from the 80's (people will throw those away so you can get them pretty much
for free). The parts are cheap and the circuits are usually fairly easy to
follow because most or all of it will be discrete components.

You will learn a ton from this and you'll gain good insight into how other
circuits work. This is the hardware guy equivalent of reading other peoples
code.

------
julien_c
What's the difference/how is it positioned compared to Upverter
(<http://upverter.com>)?

~~~
benschrauwen
We have PCB layout (with Gerber export, which actually passes all BatchPCB or
Eurocircuit DRC checks) and allow other circuits to be included as modules. I
think this is a major difference as you can actually design something and have
it fabricated. And the modular design flow allows you to "stand on the
shoulders of giants". With the right modules, you don't need to be an expert
anymore to design electronics.

------
rabidsnail
Neat! Do you guys plan on adding a plugin api so people can write simulators
and auto-routers and such?

~~~
kbruneel
Cool idea! Thats something we will look at in the future.

~~~
rabidsnail
Imagine what kinds of tools you could write if you had a giant corpus of
schematics and edit histories. "Find a path through the graph of existing
parts to wire these parts together" would be one example.

------
tomkinstinch
I like the ambition of this, and it has the potential to grow into something
both useful and cash flow positive. Having a community of open schematics and
layouts will be wonderful.

Does the layout editor support design rule settings/verification--things like
clearance around traces and vias, via diameter, etc.?

An awesome feature would be a way to pull up a datasheet for a part by
clicking on it in either the schematic or layout views. When I work on a
project, I usually keep a paper binder of datasheets for quick reference.
Having everything one or two clicks away would be great.

Using the Octopart API to build a BOM broken down by best vendor, per-part,
would be cool too.

It wasn't clear when I tried using the site: Will it give me gerber files I
can send to a fab? What about a completed board rendering a la OSH Park[1]?

Any plans to support components/footprints/libraries/whatever you want to call
them from KiCAD or Eagle? Orcad? Altium?

Any plans to hook up with a fab, and panelize orders to optimize for low cost
boards?

1\. <http://oshpark.com/>

~~~
kbruneel
Can you read our minds? :)

I'm now working hard at integrating with octopart and pulling up the datasheet
for a part is already in there, but there is a lot more ...

Next thing on the list is DRC. We already have the algorithms in place, so its
basically down to doing the visualization. You can expect that soon!

You can easily download your gerber files. Just click "make" and then
"download".

We have plans to build the largest shared component library in the world.
Soon!

We are also currently working on hooking up to a fab and panelizing is
certainly part of that. We want you to order a board with one click and
receive it in the mail just a few days later. And all that at a good price!

Thanks!

~~~
nuriaion
Hi

I really like the idea of circuits.io. Here some things i noticed during a
short test. (Probably you already know all these things)

Some kind of an "Push Obstacle" Layout mode would be nice. (Move the obstacles
when you try to lay down an wire) Or at least a "Walk around Obstacle".

Have an adjustable keymapping. (i prefere to have zoom on "A" + "D", pan on
"W", start routing on "S" etc. )

I wasn't able to change the layer (| is Alt+7 for me which your app doesn't
seem to recognize)

Add more layer and Polygons/Planes. (Our standart pcb has 4 Layers. GND, VCC,
2 times routing)

The device search is just lame.

It would be nice to be able to edit a project as a team. (Have a history of
changes and who made this changes, add a possible to review the changes, etc.)

~~~
kbruneel
Hey

That sounds like the assisted routing we are working on. Now we are focusing
on getting the parts search a lot better. It will be amazing and should be
online in a few days.

To change the layer you have to push 'l'((l)ayer) not '|'. Sorry about that it
must be the font we use. Thats a good idea to have a custom keymapping! We
will look in to that.

We are also working hard at version control, visualization between commits and
more social features,...

Thanks for the feedback!

------
srlake
This looks like a great start! I do a lot of electronics design. I've used
ORCad, PADS, Altium, EAGLE, DIPtrace, and so on and have never really found a
package I really love. I currently use EAGLE for capture and PCB design, and
do simulations in a PSPICE package outside of Eagle. This is a crappy
solution, but it's the best cost/performance/simplicity tradeoff I've been
able to come up with.

What type of Library features are you expecting? That's a major pain point
with Eagle (Libraries are crap). If you're able to nail-down the
collaboration, libraries, and version control features I'd certainly be up for
switching our team over.

Would love to provide further input if you guys are interested. Shoot me an
email if so: stephen _at_ stephenlake.ca

------
sauce71
Tried it for a few minutes. What is missing and should only take a few minutes
to add are generic dips, more generic headers and generic soics. Without I'm
stranded before I even get to start as the component library are limited and
there is no way to add on your own.

~~~
benschrauwen
You can add you own components at the bottom of your dashboard. The process is
currently still a bit tedious, but we will have a massively easier flow
earlier next week. For this we will integrate with Octopart and have a large
number of standard footprints.

~~~
sauce71
Sounds great. I will try it a bit more. Subscribed to the mailing list. Hope
this will be a sucssess for you. Btw. I think the number of parts you see when
searching could be increased.

------
stephengillie
Not to trample on copyright or patent, but it's "visio-style" in-browser
circuit drawing. And it's fast. This might not be good for designing your next
motherboard, but it's _great_ for hobbyists! I'm excited to try modeling an
MCH430 on here.

------
andredieb
Congrats on the project! It's really interesting to see electrical engineering
tools using web and modern concepts instead of the usual the nasty-windows-
only-IDE packaging.

~~~
kbruneel
Word up! ;)

------
theatrus2
As far as I can tell, this doesn't yet support floods/pours. I know the target
market wouldn't use them at the get go, and they are somewhat tricky to
implement, but an essential feature IMO.

However, I love the module concept! Perfect way to combine open source
hardware designs together!

~~~
kbruneel
I totally agree! Floods are certainly on top of the list. You can expect them
one of these days!

~~~
fnordfnordfnord
Floods would be great because it saves chemicals and time when doing single
and double sided boards at home. (Don't have to etch away so much copper.)

------
stevewilhelm
If you are a student, you can get academic access to state of the art circuit
design tools from Cadence Design
<http://www.cadence.com/support/university/pages/default.aspx>

~~~
benschrauwen
Can you still open your own designs when you stop being a student?

------
caster_cp
Absolutely fantastic! I'm having problems trying to fork a circuit, though
(rails' something went wrong message of doom). But this is definetly something
I would love to use and see working. Kudos!

~~~
kbruneel
Sorry that was a bug. It's fixed now.

------
sauce71
I have just picked up electronics again after a hiatus, need to create some
simple boards. Will try this. If it works and gets momentum,it will really be
great!

------
fnordfnordfnord
E-gads that thing is as frustrating as any other PCB layout software. More-so
than many. It's a shame because Good PCB layout software is so badly needed.

~~~
fnordfnordfnord
1\. Ctrl-R, a common shortcut to rotate a component, it's like second nature.
Unfortunately, it means something different in a browser. Argh.

2\. Don't click "save" unless you mean it. Oops. You just lost your work.

Those were minor complaints, these are not.

3\. Searching through the components. You must let us see what we're browsing
through. You must also let us filter.

4\. PCB - How do I scatter components? Or must I pluck them out one at a time?

5\. No Test Point footprint! Why does nobody use test points?

6\. I know someone already said grid, but, grid.

I know you like your nice clean simple no-clutter UI, but put the help text on
the screen, in the margins or something. You can make it optional.

------
srlake
PS - what is "circuithub.com" building? Is it a competitor to what you guys
are working on? Excited that we're seeing some development in this area.

------
octernion
I love this. Sadly, forking (without logging in) seems to throw up a rails
error screen instead of prompting me to log in. Great work, though.

~~~
kbruneel
Thats fixed now. Thanks for the notice!

------
austinlyons
any plans to get this in use by any high school or college courses? Could you
create a Udacity/Coursera "EE 101" course that uses circuit.io?

~~~
kbruneel
Not at this point, but the app is free to use for everybody. :) We plan to
create some interactive and "game like" tutorials in the future, which should
make it fun and easy to learn to design PCBs.

------
iwwr
Still primitive compared to this <http://www.falstad.com/circuit/>

~~~
fnordfnordfnord
Falstad is for simple simulation. Not PCB layout.

------
notimpotent
Kind of simplistic. I much prefer <http://www.dz863.com/index.php>

~~~
benschrauwen
This is really the first version of the editor and we are working on several
more features. But a big design goal for us is actually to make it as simple
as possible to design electronics. We believe that a lot more people could be
designing electronics if the tools were simpler and if you could easily build
on existing electronics modules, just like what happens when building
software. This is at the heart of circuits.io

~~~
notimpotent
I gotcha. It's a good start then. I'll definitely keep an eye on it. A couple
suggestions: have an option to turn on a grid in the background. Also would be
nice to be able to rotate components.

~~~
kruffin
From the help button in the top right, it looks like you can rotate and flip
the components. (To GP)It definitely wasn't the easiest to find, maybe have a
tutorial video showing how you are doing some of the things like rotating and
moving traces to the bottom layer in the main video? Looks pretty good so far
though; I might give it a try later with a board I've made before.

[Edit] A grid would be killer too; great suggestion.

[Final Edit] Tooltips on the components/actions would help your goal of making
electronic design simpler/easier to do.

    
    
      Selecting: Hold down shift and left click elements.
      Box select: Hold down shift and drag a box around the elements to be selected.
      Deselect All: Left click on the canvas.
      Move Element: Just drag it.
      Connect Terminals: Drag from schematic terminal to other  schematic terminal.
      Disconnect Terminal: Left click terminal. Click 'X' .
      Rotate Element: Select element and push 'r'.
      Remove Element: Select element and push 'del'.
      Flip Element Horizontally: Select element and push 'h'
      Flip Element Vertically: Select element and push 'v'

~~~
kbruneel
Thanks for the help!:) I totally agree that we need tutorials and videos.
Sorry about that!

Definitely contact us if you have any trouble.

------
zxcvvcxz
Great project, runs very smoothly in the browser. What graphics library/API
(javascript/html5) did you use to build it?

~~~
kbruneel
We use jQuery SVG for building the SVG and the lots of javascript to
manipulate it.

------
Adirael
I like to build guitar effects and this is awesome.

~~~
kbruneel
Thanx!

------
lallouz
Awesome job, way to go Karel and co.

~~~
kbruneel
Thanx!

------
zobzu
yay another "chrome only" site.

~~~
threedaymonk
Whilst I sympathise, "Chrome only" is already more widely available than a
Windows or OS X or Linux program would be. The world of electronics is full of
software that only runs on Windows. Having to install a free cross-platform
browser is already an improvement.

~~~
zobzu
Yeah but that doesn't mean it'll stay that way forever. I'm personally for
actual standards, so all browsers play by the same rule.

Not _you_ _must_ use company X's product, no matter how good it is. Because
once they'll get 99% of the market, they'll trash it in the name of profit.
It's inevitable.

That's why i don't like "chrome only".

