CircuitLab Conquering Classrooms

Oct 29 2012, 5:00 PM PDT · 2 comments »

After launching earlier this year, we're very happy to watch as CircuitLab finds its way into academic engineering and science programs around the world, both in electrical engineering undergraduate and graduate programs as well as a variety of other engineering and science disciplines where electronics plays a role. Students and faculty are telling us that CircuitLab replaces their desktop tools like PSpice, Multisim, and LTspice, and provides a low-friction, cross-platform environment for schematic capture and circuit simulation.

Here's a student using CircuitLab in an electronics lab at the University of Pennsylvania (looks like a discrete op-amp design!):

CircuitLab circuit simulator at Penn

We'd like to share some of the feedback we've been getting from students and faculty:

"What an amazing tool you've created! ... Two days ago, before we had found the time to install LTspice on all of our classroom computers, I stumbled upon CircuitLab. I showed it to the students today in my Laboratory Electronics course, and a few of them are already using it to finish up this week's lab at home. Next week they will have to use CircuitLab to do one part of the assignment. CircuitLab makes it feasible for me to ask students to study simulated circuits at home, without the big hassle of software installation, OS-dependent instructions, etc."
- Dr. Bill Ashmanskas, University of Pennsylvania

"I actually learned about CircuitLab from one of my circuits professors. We have used tons of CAD software like NI Multisim, PSpice, and the list goes on. But he recommended CircuitLab because of the super friendly and easy human interface that it provides. And you still get a lot of good simulation features that other software also provides, but with much less of a headache. Plus you do not have to download X amount of gigs on your PC to run the programs! Thanks for the great tool!"
- Marques K., University of Nebraska-Lincoln

"I just want to say thanks to you guys for this tool, I've been using it for a long time now and it has been reliable, powerful and bug free. Keep up the good work! And of course I let everyone know about CircuitLab, I think it's great to have it all online even though I'm actually only supposed to be using LTSpice for university work."
- Mitchell G., University of Queensland, Australia

All in all, CircuitLab is now in use at over 500 colleges and universities around the world! We can't list them all, but we'd like to say a big "thanks" to the students and faculty at some of the schools that are some of our earliest adopters, joining us to pilot the cutting edge of browser-based engineering software this semester, including:

Is your school missing from this list? Tell your colleagues (students and faculty) about CircuitLab, or feel free to send us photos & feedback about using CircuitLab in your classroom.


~80% Simulation Speedup & CircuitLab Browser Shootout

Aug 02 2012, 4:00 PM PDT · 8 comments »

Today we've deployed a new version of our core matrix routines which solve the hundreds to thousands of simultaneous differential equations generated from a single schematic. These updates include both algorithmic and implementation changes in the equation optimizer and sparse matrix LU factorization that power CircuitLab's analog simulations. Across our internal simulation testbench, we've measured performance gains of 30% to >100% on individual circuits. While the degree of speedup will vary greatly from case to case, we've clocked our total internal benchmark to be approximately ~80% faster. Faster simulations allow our academic, hobbyist, and professional users to iterate faster, and this performance boost makes CircuitLab a useful tool for a wider range of design and analysis problems. As usual, CircuitLab users can immediately take advantage of these improvements by launching a new editor session, with no software installation necessary.

As CircuitLab's analog and digital circuit simulations run entirely client-side in the user's web browser, we are reliant on the rapidly-improving performance of browser JavaScript engines to deliver the calculations our simulations require. While other websites track or measure general cross-browser JS performance, we made our own measurements specific to circuit simulation. We ran our testbench of simulations (including a variety of DC, time-domain, and frequency-domain simulations) against our old and new matrix library under four browsers*, and here's what we measured:

javascript matrix library CircuitLab

Lower runtimes are better, indicating that the tests finished faster. We've normalized all benchmark run times against the current winner, Google Chrome, with Mozilla Firefox close behind. As the benchmark data makes clear, we significantly improved performance across all browsers. Coupled with last month's simulator feature improvements, these performance enhancements continue to improve the capabilities of the CircuitLab toolset from all angles.

Let's take a look at the analysis of a relatively simple switching power supply circuit:

This is a buck converter, which allows a high voltage / low current power source to efficiently drive a lower voltage / higher current load. It does this by storing and discharging energy in an inductor in a controlled fashion. This type of switching power supply is found in many places in our everyday lives, delivering clean low-voltage power to a laptop's CPU, or in the LED-based solid state lighting solutions that are now making their way into homes and businesses. In CircuitLab, we can model a buck converter quickly, and then easily test different components or values or configurations. With our old matrix library, this circuit took about 26.7 seconds to simulate, but with our new update, it simulates in just 12.4 seconds -- that's a 115% speedup!

At steady state, this buck converter delivers about 16 watts into a 2 ohm load at ~90% efficiency:

Faster simulation time means we can generate results and try another idea more rapidly: Smaller inductor? Synchronous rectification? Faster switching frequency? Effect of inductor ESR? Closed loop feedback control? These are the questions that power electronics designers explore as they strive to make their designs better in every dimension: more efficient, less electrical noise, smaller, more robust to input and output conditions, more robust to component variations, cheaper... By coupling an easy-to-use interface with a faster simulation engine, designers can formulate and test hypotheses, make improvements, and ship better designs faster.

* Browser versions used in this test include: Google Chrome 20.0.1132.57, Mozilla Firefox 14.0.1, Apple Safari 5.1.7, and Opera 12.0.


Tuning RaphaelJS for High Performance SVG Interfaces

Jul 25 2012, 12:30 PM PDT · 2 comments »

Last week, we released a few improvements to our front-end that significantly improved the performance of working with larger schematics in CircuitLab. In this blog post, we detail one of the key components to this improvement. Since it makes modifications to RaphaelJS, a very handy vector graphics library, we thought releasing the details might be helpful to other developers of high-performance browser-based applications.

One of the key interactions we wanted to improve was the performance of zooming and panning around large circuits. The CircuitLab front-end makes use of the Raphael library to draw and manipulate SVGs. In our earlier implementation of zooming, we were using the scale() method on a Raphael Set object that contained all the elements in the circuit. It turns out that the complexity of doing any operation on a Raphael Set is linear with the number of elements in the set. To convince yourself of this, you can read through the Raphael Set source code, or you can see our first experiment below. For each of these tests, I placed N current sources into the circuit, and then recorded how long it took to zoom the schematic from 100% to 200% and back to 100% ten times.

Old Implementation

While the roughly ~0.3 seconds needed to zoom a small number of elments was acceptable, as soon as circuits grew to 20 or 30 elements, zooming became quite slow. This meant that our front-end wasn't great for the layout and sharing of complex schematics.

The issue here is that a Raphael Set is essentially implemented as an array that applies any operations on it to each of its items. It's a nice little way of grouping elements together, but unfortunately there is a performance penalty that in this case can be avoided. Luckily, the SVG specification gives us a way to solve this problem in a rather elegant way. SVG provides a group element <g>, inside which you can nest other SVG elements. You can then apply transformations to the group element, and the browser then takes care of propagating the transformation down to the group's inner elements -- even using the graphics card if your system supports it.

To take advantage of this, all we needed to do was find a way to wrap all the SVG elements that Raphael creates into one single big group. This lets us apply SVG transformations (which represent zoom and pan operations) to the group, instead of applying them to a Raphael Set. Implementing this turned out to be a fairly simple modification of the Raphael source code.

Basically, we intercepted the root SVG element as it's being created and assigned as the canvas (the parent of all other elements) within Raphael's internals. Instead, we created an SVG root element <svg> with a group element <g> inside it, and keep a reference to the group. This group element now becomes the canvas for all other Raphael operations. Once we do this, all the SVG elements that Raphael creates will be children of this <g> element.

4747    //these are custom additons from circuitlab to make a single
4748    //group around all the elements
4749    var g = $("g")
4750    cnvs.appendChild(g)
4751    cnvs = g
4752    g.style && (g.style.webkitTapHighlightColor = "rgba(0,0,0,0)");
4753    //end group modifications

We also added a function called setTransform to the Raphael paper prototype:

//special functions added for circuitlab, assumes canvas is actually
//a group, not the svg element
R.prototype.setTransform = function (trans) {
    $(this.canvas,{transform:trans});
}

This allows us to set the transform string of the <g> element directly on the paper element. For example:

var paper = Raphael(10, 50, 320, 200);
paper.setTransform('translate(10,10)');

We did have to make the following change in the viewPort method so Raphael could correctly resolve the <svg> element now that we changed what cnvs points to. This change was done on line 4420 of the original Raphael code:

pos = cnvs.getScreenCTM() || cnvs.parentNode.createSVGMatrix(),

Using this method to zoom and pan around our circuits (unsurprisingly) gives us a very significant speedup over utilizing Raphael Sets. Below are the results of the same experiment we ran before:

New Implementation

Note the y-axis values! Here are the results for both old and new experiments with a logarithmic axis for comparison:

Both Implementations

These simple changes to the Raphael library allowed us to see massive improvements across our benchmark, with a >100X performance gain at the higher end, and better asymptotic performance which makes larger circuits workable. Give our browser-based schematic capture and circuit simulation tool a spin with one of our example circuits!

One caveat here is that the changes we applied only operate within the SVG module of Raphael. Since CircuitLab doesn't currently support Internet Explorer, this isn't a concern for us, however if you rely on Raphael for IE support you will also have to implement the setTransform() method appropriately in the VML module. Here is a link to the change set that shows the changes discussed in this post.