home Fork me on GitHub

SimcirJS

Download


Tweet
SimcirJS(a.k.a. Simcir) is a circuit simulator in HTML5 and JavaScript.
Let's try your circuit!

Usage

Save

Embed your circuit

Ctrl+Click(Mac:command+Click) on your circuit and copy a circuit data.
Then paste it into template below.

<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script type="text/javascript" src="simcir.js"></script> <link rel="stylesheet" type="text/css" href="simcir.css" /> <script type="text/javascript" src="simcir-basicset.js"></script> <link rel="stylesheet" type="text/css" href="simcir-basicset.css" /> <script type="text/javascript" src="simcir-library.js"></script> <title></title> </head> <body> <div class="simcir"> <!-- paste here your circuit data --> </div> </body> </html>

Reuse your circuit

To reuse your circuit as library, use device 'In' and 'Out'.

{ "width":500, "height":200, "showToolbox":true, "toolbox":[ {"type":"In"}, {"type":"Out"}, {"type":"DC"}, {"type":"PushOff"}, {"type":"PushOn"}, {"type":"Toggle"}, {"type":"NAND"} ], "devices":[ {"type":"DC","id":"dev0","x":64,"y":80,"label":"DC"}, {"type":"PushOff","id":"dev1","x":120,"y":48,"label":"PushOff"}, {"type":"PushOff","id":"dev2","x":120,"y":112,"label":"PushOff"}, {"type":"In","id":"dev3","x":176,"y":48,"label":"~S"}, {"type":"In","id":"dev4","x":176,"y":112,"label":"~R"}, {"type":"NAND","id":"dev5","x":232,"y":56,"label":"NAND"}, {"type":"NAND","id":"dev6","x":232,"y":104,"label":"NAND"}, {"type":"Out","id":"dev7","x":288,"y":56,"label":"Q"}, {"type":"Out","id":"dev8","x":288,"y":104,"label":"~Q"} ], "connectors":[ {"from":"dev1.in0","to":"dev0.out0"}, {"from":"dev2.in0","to":"dev0.out0"}, {"from":"dev3.in0","to":"dev1.out0"}, {"from":"dev4.in0","to":"dev2.out0"}, {"from":"dev5.in0","to":"dev3.out0"}, {"from":"dev5.in1","to":"dev6.out0"}, {"from":"dev6.in0","to":"dev5.out0"}, {"from":"dev6.in1","to":"dev4.out0"}, {"from":"dev7.in0","to":"dev5.out0"}, {"from":"dev8.in0","to":"dev6.out0"} ] }

Then register it in JavaScript and add to the toolbox in HTML.

simcir.registerDevice('MyDevice', // paste here your circuit data );
<div class="simcir"> ⋮ "toolbox":[ {"type":"DC"}, {"type":"PushOff"}, ⋮ {"type":"MyDevice"} ], ⋮ </div>

In this case, a new device 'RS-FF' is added. Try to Double-Click the 'RS-FF' :)
Remember that all the connectors on an input of 'In' and an output of 'Out' are disconnected internally when the device is reused.

{ "width":500, "height":200, "showToolbox":true, "toolbox":[ {"type":"DC"}, {"type":"PushOff"}, {"type":"RS-FF"} ], "devices":[ {"type":"DC","id":"dev0","x":104,"y":80,"label":"DC"}, {"type":"PushOff","id":"dev1","x":160,"y":48,"label":"PushOff"}, {"type":"PushOff","id":"dev2","x":160,"y":112,"label":"PushOff"}, {"type":"RS-FF","id":"dev3","x":216,"y":80,"label":"RS-FF"} ], "connectors":[ {"from":"dev1.in0","to":"dev0.out0"}, {"from":"dev2.in0","to":"dev0.out0"}, {"from":"dev3.in0","to":"dev1.out0"}, {"from":"dev3.in1","to":"dev2.out0"} ] }

Customize a device

label, color, number of inputs, freq ...

{ "width":500, "height":400, "showToolbox":true, "toolbox":[ {"type":"DC"}, {"type":"Toggle"}, {"type":"LED","color":"#00ff00","label":"LED(G)"}, {"type":"NAND","numInputs":"3","label":"NAND(3in)"}, {"type":"OSC","freq":1,"label":"OSC(1Hz)"}, {"type":"7seg","color":"#000000","bgColor":"#889988"} ], "devices":[ {"type":"NAND","numInputs":"3","label":"NAND(3in)","id":"dev0","x":208,"y":128}, {"type":"Toggle","id":"dev1","x":152,"y":80,"label":"Toggle"}, {"type":"Toggle","id":"dev2","x":152,"y":128,"label":"Toggle"}, {"type":"Toggle","id":"dev3","x":152,"y":176,"label":"Toggle"}, {"type":"DC","id":"dev4","x":96,"y":128,"label":"DC"}, {"type":"LED","color":"#00ff00","label":"LED(G)","id":"dev5","x":264,"y":128}, {"type":"OSC","freq":1,"label":"OSC(1Hz)","id":"dev6","x":96,"y":232}, {"type":"NAND","numInputs":"3","label":"NAND(3in)","id":"dev7","x":152,"y":272}, {"type":"7seg","color":"#000000","bgColor":"#889988","id":"dev8","x":208,"y":232,"label":"7seg"} ], "connectors":[ {"from":"dev0.in0","to":"dev1.out0"}, {"from":"dev0.in1","to":"dev2.out0"}, {"from":"dev0.in2","to":"dev3.out0"}, {"from":"dev1.in0","to":"dev4.out0"}, {"from":"dev2.in0","to":"dev4.out0"}, {"from":"dev3.in0","to":"dev4.out0"}, {"from":"dev5.in0","to":"dev0.out0"}, {"from":"dev7.in0","to":"dev6.out0"}, {"from":"dev7.in1","to":"dev6.out0"}, {"from":"dev7.in2","to":"dev6.out0"}, {"from":"dev8.in0","to":"dev6.out0"}, {"from":"dev8.in1","to":"dev7.out0"}, {"from":"dev8.in2","to":"dev7.out0"}, {"from":"dev8.in3","to":"dev6.out0"}, {"from":"dev8.in4","to":"dev7.out0"}, {"from":"dev8.in5","to":"dev7.out0"}, {"from":"dev8.in6","to":"dev6.out0"} ] }

Contents Copyright © Kazuhiko Arase