Logicly - the digital logic simulator | Hacker News Reader

Logicly - the digital logic simulator

logic.ly

98 pointsshawndumas45 comments

This. Is. Awesome.

I was a CS student, but we had to take some intro Computer Engineering/circuit logic theory classes. I loved it, but we only did things on paper (and I didn't want to buy a whole breadboard kit just to play with simple logic circuits, etc...). I wish this was around when I was learning because I really wanted to play with making more complicated setups than we did in class.

This is like the Balsamiq of Circuits with the added bonus of running the stuff. Yes, being able to snap wires to a grid would be nice, but I'm having a blast with this right now.

Thanks! I was actually inspired to do this while studying CS at university. My professor used a simple Java applet to demonstrate logic gates, and I quickly saw that it could be improved quite a bit. A few years later, I finally decided to play around with the idea as a weekend project, and it's been progressing from there.

We had some software at UT for EE 316, it was made back in the 90's though. It basically showed 1/0 states, let you probe areas in the logic, and had some ways to represent the logic as equations.

Does LogicAid ring a bell? I dreaded that class, but it really showed you how to pace yourself. This is a great modernization!

I believe GNU Electric does what you mention. http://www.gnu.org/software/electric/

This looks like a neat piece of software to put on the web. It is, however, lacking usability. As a student learning digital design, you want circuit diagrams to be clear and results to be easily and quickly visible.

Wires between nodes are laid out automatically and can not be routed on a grid. In a big design (not that this is meant for that) things will get messy quickly.

You have to click simulate to see the results of your circuit. This is annoying. These circuits are simple and the output can easily be detected whenever a change is made.

Another useful feature is the have keys (0-9) mapped to switches. Testing, for instance, a four bit multiplier would be much easier if you don't have to operate the mouse so much.

I hate to recommend another piece of software, but I think the authors can learn a lot from it's features. Atanua (http://sol.gfxile.net/atanua/) is a cross-platform logic simulator that has all of the above features. It was a great tool when I needed to quickly prototype something for a class, and I still recommend it to students in a class I TA. It hasn't been updated in a while, the OSX version has to be run through Rosetta, but I can't see any glaring omissions the author made that would make it unusable.

Finally, it's 2010, this would make an awesome HTML5 app instead of being written in Flash.

Can someone explain why Flash 10.1 is required to display ones and zeroes?

I'm done installing any future versions of Flash, especially with all the crap they've started bundling it. I fully expect that Flash 10.2 will include anti-virus software, toolbars, and something that periodically reminds you that you're ugly.

Are you also done installing any future OS's or Browsers?

I mean it's up to you what you want to do, but why do you need to throw in strawmen?

I'm simultaneously testing a beta version of the Flex framework that will require Flash Player 10.1. I would recommend upgrading regardless. 10.1 has some excellent performance improvements thanks to Adobe's recent efforts getting it running on mobile.

Older versions let you simulate the circuit in real time without going to a separate view. It wasn't that the performance was a problem or anything. In fact, I had to write extra code to create the separation. Rather, I found that the actions of pausing, resetting, and stepping through the simulation didn't feel quite as clean when you could modify the circuit at the same time. I might bring back real-time simulation if I can find a way to do it that feels more natural.

What I did was just have separate run, step, and reset buttons next to the design canvas. Is that what you did before? What made it feel unnatural or unclean?

Yes, the simulation controls were part of a toolbar near the design canvas. I had some trouble coming up with a combination of good answers to these questions:

1. How do you set an initial state when controls are also interactive? This is probably easier to do now that I have a floating property editor window. At the time, all interactions with components were direct.

2. If something is interactive, like a switch, what's the best way to handle dragging it with the mouse? Previously, the "wall plate" of the switch was the only draggable part, but it didn't seem like the best choice for usability. Also, it limits the visual design because draggable areas must be large enough to be discovered. I've considered having an extra draggable handle appear when a component is selected, but I'm not sure if that's ideal.

Forcing a separation between a design perspective and the simulation made the answers obvious. However, now that you've made me explain my reasons, I can see that it might be possible to go back to the old way without sacrificing too much.

It asked me to update flash, and restart my browser. After that, I just get a grey screen. Edit: Safari 5.0.2, Snow Leopard, Click-to-flash installed, but with logic.ly whitelisted.

Same problem here.

Reminds me of a slightly less-functional version of this (source available): http://www.falstad.com/circuit/

One of my favorite simulator websites! The electronic circuits alone: http://www.falstad.com/circuit/e-index.html

Awesome!

First impression from a few minutes messing around: this is really beautifully made.

One suggestion: I have no idea who/what this is for. The front page certainly tells me what this is, but I don't have any use case. There's a big difference if this is just for fun, or if this is a serious tool for actually designing things, and you'd better let people know asap which this is.

Really impressive! I might advise it to instructors at our dept; so knowing who/what this is for would be good for me too.

The main audience I'm going for, at least for now, is education. I had an earlier demo on my blog for a couple years, and instructors and students frequently emailed me to say thanks, and ask for more features. It's been well-received for classroom demos and stuff like that.

Excellent - it seems very well suited for that. I'd have been happy to have this when I was teaching this kind of theory to young programmers.

Like I said, I would make this very obvious on the front page. Maybe even have some ideas on how to teach using this tool (classroom material, etc.)

Thanks for the suggestions. I'm definitely planning to improve the front page over time.

Very impressive as a demo, but it needs more before it can be really used. It's a bit slow, there are nowhere near enough units, and I see no way to save / load sub-circuits. And try the counter: there's an interesting one-digit-ahead flicker prior to some numbers (haven't looked closely at why) that probably shouldn't be there.

edit: one more thing occurred to me: while stepping through the animation, indicators as to what wires are currently being checked would be helpful. Otherwise you just see blue-blue-nothing.....-blue-blue-light.

Yes, it is a demo. Save/load will be available when it is released as a desktop app. As for the counter, it's working properly. Ripple counters simply aren't stable during transitions, but they make a good sample because they're simpler than other types of counters.

In that case, it's kind of cool that this preserves that behavior.

Suggestion for optimizing, especially for larger multi-part circuits: allow a sub-circuit to be expanded / collapsed. When expanded, show the full animation & whatnot. When collapsed, run an optimized chunk of code which has the same behavior, and just output the results at the proper times. When it's collapsed it's a "black box" anyway, might as well take advantage of that.

This way, if someone builds some massively complicated integrated circuit, you can run it as fast as possible when it's not being animated.

The flip-flops are implemented like that. They're mostly a bunch of NAND gates behind the scenes. In the future, I plan to let anyone create a sub-circuit, but that has some challenges that I think I'd rather face after I make the first desktop release.

The biggest slow-down is intentional, though. Since the wires are colored, propagation is currently limited to the frame rate so that all changes can be seen. Some circuits, like the oscillator sample, look pretty strange when propagation isn't tied to the frame rate. I plan to add a setting to turn off wire colors, and then I'll probably make the propagation adjustable too.

I forgot to ask you something in my previous reply. You say that there are nowhere near enough units. Which ones are missing that you think are most important?

If this looks familiar to you, it was previously at http://joshblog.net/projects/logic-gate-simulator/, announced on http://joshblog.net/2008/11/03/logicly-a-logic-gate-simulato..., as a demo for a user interface library called flexwires.

Yep. After receiving email after email for a couple of years, from folks who enjoyed the app and wanted to see more, I decided to try to take it to the next level.

Before clicking the link I thought "Meh, another lame .ly startup" ...

But, that's seriously cool. It reminds me of Rocky's Boots for the Apple ][

I stayed home from school to Rocky's Boots.

writing a Rocky's Boots clone has been on my TODO list for like 10 years, among other things. note to anybody else thinking of making it: I'd buy a copy!

It might be educationally useful to be able to show propagation delay for the gates graphically -- actually show the signal "flowing" through the circuit. It would make it easy to demonstrate where glitches in a clocked circuit come from, which is hard to internalize by just staring at a diagram.

Ah yes, I remember Logic.ly :) It was the inspiration for my object oriented design class project. I had to implement a logic gate simulator in .NET last semester and I stumbled upon it while doing research on the Internet. Very well made, kudos to whoever made it!

Interestingly enough, I was thinking about this very domain name for a very similar application. I've written a logic simulator (of sorts) in C with a Qt frontend that supports multiple data types on wires, designed for home automation.

Very nicely done! I think the separation of simulation is makes it more sensible.

We did something similar in the earlier days of Creately, but ended up focusing on more diagramming and less simulation as time went by.

I think use cases like this belong purpose built apps like Logic.ly - a lot more UX optimization can be done.

You can play with an example of a Multiplexor with simulation if you are interested - https://creately.com/creately-start?tempid=fvtdhokh2

Nothing fancy really. Use the "Properties" panel to change signals of inputs. The UX can be better - bringing me to the point of purpose built apps. :)

If you like this, you might like http://quickfuseapps.com , which is basically logic circuits for voice apps. Demo calls are free.

Also, QuickFuse doesn't use Flash, it's pure JavaScript and canvas, so in my experience it's a bit more performant. (Full disclosure: I wrote code for QuickFuse.)

Incidentally, is it just me or are circuit-based apps becoming more popular? It seems like it is becoming a more accessible paradigm to more people, and the web (well, ignoring Flash) is now able to robustly provide such UI's.

While JavaScript is now a bit faster than ActionScript in some browsers, I think most benchmarks are still showing that Flash Player renders graphics faster than Canvas.

Is there any part of Logicly in particular that felt slow to you? Please note that signal propagation does intentionally limit the speed of the simulation at the moment. However, dragging objects around on the design canvas felt exactly the same to me when I tried it in both Logicly and QuickFuse in Flash Player 10.1 and Chrome 6 respectively.

Not related to post, but that is a really beautiful web application.

Is there a tutorial, for those not so familiar with electrical engineering? Also I would like to know how exactly DRAM or SRAM works, is it possible to illustrate using this simulator?

It took me far longer than it should have to get started. After clicking on the oscillator circuit I kept trying to flip the switch like your instructions say but what I didn't realise was that I had to be in simulate mode to do this. The button that makes this obvious is tucked away in the bottom left had corner - the last place I ended up looking.

Once I figured that out though I enjoyed using it.

Thanks for the feedback. I'm probably going to play around a bit more with the UX for the simulation, and this info helps.

If I were using this in a computer architecture class I would probably want to have subdesigns and a great deal more components. The things you can do with this are sort of limited without these features. Also, I would need to have waveforms. It looks pretty good though.

there needs to be a time-series view.

it would be great if you could let users select these symbols: http://de.wikipedia.org/wiki/Logikgatter#Typen_von_Logikgatt...

I've had a couple requests for alternate symbols. I'll certainly keep it in mind.

Reply on news.ycombinator.com