Monday, August 18, 2008

Digital Logic Simulator in Silverlight

  • Press "F" for full screen mode
  • Click and drag digital logic devices onto the graph paper
  • Connect devices by clicking and dragging from the output of one device to the input(s) of other devices.
  • Double-click a device to select it for deletion
  • Clicking "Delete" will delete any and all selected devices.


The reasons behind creating this application are basically:
  1. This seemed like it would be a fun project to get started with learning about Silverlight.
  2. There are not any good digital logic simulators on the web, or at least I couldn't find anything that I thought was decent.
Feel free to comment. Enjoy!

Update - 9/16/2008: I've posted the source code at CodePlex.


西恩石立 said...

Hi Ken
I am the newer of silverlight and I am so interested by this project that you created. Is that OK that you can post this project`s source code to blog. If not, can you send me the source code via the e-mail.
My my mail address :
Thanks a lot
Sean Shih

Ken said...

Thanks for your interest! I'm actually planning on putting together a short series of articles that document the design and implementation of this. It will be available soon, so stay tuned!

Anonymous said...

I recently started creating a node graph which has the same principality as your simulator and having lots of trouble connecting nodes.
I was just wanted to know how soon would u be able to publish writing your article as i badly need to know how the simularor works at code level as i am in deep water without a clue.
Is it possible to send the source code or any explanation/tutorial how to achieve this?


Ken said...

I'll be posting something soon. In the meantime, if you have a specific question that you think I can help you with, feel free to e-mail me and I'll see what I can do!

Vincent said...

do u mind to send me this sample code ?
I am looking for such solution for long time.


Ken said...

Hi all,
I've added the source code for this project to CodePlex.

西恩石立 said...

Hi Ken

Great job. Thanks for your sharing. I have been waiting for this for a month.

Sean Shih

Vincent said...

Thanks Ken!!!
I'll look into it.

Ken said...

Sorry that it took so long! I had some cleaning up to do and I only get a chance to program in my spare time, which is sparse these days. I hope that you find it useful!

Michael Washington said...

Really appreciate you sharing this source code. I plan to make a Open Source Form creator module for and this will make a great starting point.

西恩石立 said...

Hi Ken
Need your help again. In your code, all of the objects(include Base class and others)are classes. Is that possiable that change these from classes to UserControls??!! cuz I need to use Image Icon to replace PathGeometry part..
Thanks again
Sean Shih

Ken said...

The logic devices are derived from a Device class which is derived from the Canvas class. So you could create your own class that derives from the Image class or you could derive from the Canvas class and create and instance of the Image class within your new class. Feel free to e-mail me directly if you want to get into the details of this.

Grewal said...

Excellent application. Thanks a lot for sharing with the community.

A little issue however, I downloaded the version 1008 from codeplex and compiling gives an error for an undefined function
'HitTest' in Device.cs class.

public bool Contains(Point p)
// Determine if the given point is within the shape
List[UIElement] hits = (List[UIElement])HitTest(p);
return hits.Contains(path);

HitTest is not implemented in the class. Any idea, what I might be missing here?

I am using vs2008, with silverlight 2.0

Grewal said...

Oops, should have googled before asking you. There was an easy fix. I am waiting for your articals. This is a cool application.

For other readers, I fixed that error by simply using the updated method of collision

i.e use

List[UIElement] hits = VisualTreeHelper.FindElementsInHostCoordinates(p, this) as List[UIElement];

Class Device.cs
Function Contains(Point P)

Vincent said...

anyone know how to change those node to an image?
from the code they are draw from runtime. can I use image?

janie said...

Ken Watts:

okay so i placed my circuit on the canvas.. so how do i simulate?

for given these series of input this is my output over time?

what would be cool is if you combined: which provides a boolean equation parser to create your composite you need.

Leblanc Meneses

leblancmeneses said...

ah never mind.. The led is currently the only way we can detect what the logic does.

can't wait till it becomes the next quartus plus equivalent.

Ken said...

Thanks for the recent comments, and my apologies for the delayed response!

Grewal - You found the one breaking change from 2B2 to RTW. I did have this fix in place, but I neglected to update the source code. I will do that shortly, sorry for the inconvenience! But it does look like you found the correct solution.

Vincent - Using an image in place of a shape should be a straightforward modification. Unfortunately, I don't have the time right now to demonstrate this.

janie - As leblancmeneses pointed out (are you the same person?), the LEDs are the only way to view output. I may expand on this if it gains popularity. I also agree that combining the boolean equation parser would be cool, so this is something for me to look into.

leblancmeneses - Thanks for the comment. I'm not familiar with quartus plus, but it sounds like something that I should look into.

Thanks again for the feedback!

leblancmeneses said...


yeah janie and I are 1. : ] sorry for the confusion.

Just committed the most recent version of npeg.

gives an example of how to create custom astnodes and how you can interpret the tree using a visitor.

I interpret a string representation of peg grammar and create the npeg composite.

Can you create a simple description that describes the overall design on codeplex. I am trying to implement something similar.

by the way what references did you use during the design stage?

leblancmeneses said...

by the way quartus was originally called max plus (version i used).

its designed to work with fpga's.
You can place digital logic on a canvas as you do here and simulate it over time with given input.

you could then compile it and run on an fpga of their supported hardware. (if placing digital logic gates on a canvas was to slow you could also write in verilog or vhdl which would compile unto an fpga.)

Anonymous said...


Thank you for this app!

Can you please advice how to resolve the missing HitTest issue?

Error 1 The name 'HitTest' does not exist in the current context
D:\Samples\DigitalLogicSimulator\DigitalLogicSimulator\Device.cs 134 53 DigitalLogicSimulator


Ken said...

leblancmeneses - I downloaded the latest version of NPEG. I'll check it out and I'll probably have some questions for you soon. Also, thanks for the link to quartis, I'll be sure to check that out too. As for references that I used while designing this, I mostly used the website, which I found to be a valuable resource. I am planning on writing a tutorial on the design and implementation of this simulator and when I do, I'll link to it from this page in my blog.

Vaclav - I just updated the source code so it should now compile and run without any errors in Silverlight 2 RTW. You can download the latest source code here.

Thanks to everyone for your support!


Marthinus said...

HI there - this is going to help me a lot with my job. I need to build a workflow silverlight app to show how silverlight can enhance user experience. Thanks for this. Please let me know when you get to publish your documentation on design and implementation (the one you mentioned). Thanks. Marthinus.

leblancmeneses said...


check out

it provides a boolean algebra solver.
using npeg and silverlight.

navaneethan said...

Hi ken,
i saw this is very useful for can you sent me the source code via the e-mail.



Jelle said...

A couple of days ago I submitted an error report on your Codeplex project page: Do you think you'll have time to fix that error? Thanks in advance.

Ken said...

Thanks for pointing out the error! I have not checked my codeplex site recently, so I was not aware of the bug. I probably won't have a chance to fix this until next month, but I'll be sure to let you know when it's fixed. Thanks again!

Jelle said...

Quick response! I once thought about how to make an application like this, but I didn't have a clue as how to handle a situation in which you've got an endless loop. Detecting it and stopping the simulation might be a good solution, but that would make the simulation sort of incomplete.
Anyway, thanks for sharing this all with us, I'm looking forward to the other parts of your tutorial!

Ken said...

No problem! I just verified the bug and this is certainly something that needs to be addressed. I never considered cases like this in the design process, so it didn't occur to me to test such cases. Clearly, this needs to be addressed. The fact that it shuts down the whole browser is a real problem! Thanks again for your feedback, and I'll let you know when I come up with a solution. As I mentioned before, I'm somewhat backed-up at the moment so I may not have a chance to do anything about this until next month. But I'll be thinking about this problem and ways to address it in the meantime. Until then, feel free to offer any other suggestions about how you may tackle this problem. Thanks again!

Murugan said...


I seen digital_logic_simulator
it is amazing, appricate your stuff , downloaded the code for studying i want to know
instead of creating Nodes
i have one image, isit possible convert the image into node

after that need to draw line from this image to any node .

is it possible in your application


Ken said...

It is possible. See the comment above from Sean Shih. He was working on something similar and I think that he was successful at doing this, you may want to contact him to see how he did it. I hope that this helps!

Andy said...

Hi, a bit late for commenting but I am looking for a "connector control" that allows any two content controls on a page to be connected. The use case is i have a telerik listview item and i want to connect it to a whole series of related controls (such as an Organizational Goal stored as telerike treeview item on same page). Anybody seen anything like this?

Anil Momin said...

Awesome example !! I liked it and was very helpful

SRINATH said...

Great application Ken..Was just thinking as a logical extension to your app how we could save a created diagram so that it can be reloaded again for viewing...


Ken said...

I agree. I'd like to implement a "Save" functionality for this, perhaps even a way to "componentize" logic circuits. If I re-visit this application, I'll probably explore these issues more deeply. Thanks for the comment!

Josh, Annie, and Isaiah said...

I've embedded this usercontrol into a navigation page and I cannot get the items to connect - they draw, the connector can be pulled out but the items do not connect. Any thoughts?

Pushkar said...

Hi Ken...
Its really great job.
Actually I am working on same functionality but little different.I stuck in few things.How to rotate,re-size the dragged image and how to save whole diagram as Single image.

Hey Ken can you please help me out to solve the problems ?


Ken said...

Josh, Annie, and Isaiah, and Pushkar:
Sorry for the delay, I didn't realize that I had comments awaiting modertaion! In any case, if you could please e-mail me directly with specific details about your issues, I'd be glad to help you out.