{ "width":1000, "height":500, "toolbox":[ {"type":"NumSrc"}, {"type":"NumDsp"}, {"type":"AND"}, {"type":"OR"}, {"type":"NOT"}, {"type":"BUF"}, {"type":"XOR"}, {"type":"4bit7seg"}, {"type":"HalfAdder"}, {"type":"FullAdder"}, {"type":"AltFullAdder"}, {"type":"4bitAdder"}, {"type":"In"}, {"type":"Out"}, {"type":"Joint"}, {"type":"DC"}, {"type":"LED"}, {"type":"PushOff"}, {"type":"PushOn"}, {"type":"Toggle"}, {"type":"NAND"}, {"type":"NOR"}, {"type":"XNOR"}, {"type":"OSC","freq":1}, {"type":"7seg"}, {"type":"16seg"}, {"type":"RotaryEncoder"}, {"type":"BusIn"}, {"type":"BusOut"}, {"type":"RS-FF"}, {"type":"JK-FF"}, {"type":"T-FF"}, {"type":"D-FF"}, {"type":"8bitCounter"}, {"type":"2to4BinaryDecoder"}, {"type":"3to8BinaryDecoder"}, {"type":"4to16BinaryDecoder"}, {"type":"Transmitter"}, {"type":"Delay"}, {"type":"DSO"} ] }

SimcirJS

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

Usage

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"} ] }

To customize the layout of library, add the "layout" property to your device with a text editor.
"rows" and "cols" define the size. nodes property contains 'label - position' pairs of nodes.

simcir.registerDevice('AltFullAdder', { ⋮ "layout":{"rows":8,"cols":8,"hideLabelOnWorkspace":true, "nodes":{"A":"T2","B":"T6","S":"B4","Cin":"R4","Cout":"L4"}}, "devices":[ ⋮
L1 L0 L2 L3 L4 T0 T1 T2 T3 T4 R0 R1 R2 R3 R4 B0 B1 B2 B3 B4 Left Right Bottom Top rows cols

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