SimcirJS
SimcirJS(a.k.a. Simcir) is a circuit simulator in HTML5 and JavaScript.
Usage
Choose a device from the toolbox and move to right side.
Connect them by drag operation.
Click an input node to disconnect.
Move a device back to the toolbox if you don't use.
Ctrl+Click(Mac:command+Click) to toggle view (Live circuit or JSON data).
Double-Click a label to edit device name.
Double-Click a library to open the circuit inside.
{
"width":800,
"height":400
}
Embed your circuit
Ctrl+Click(Mac:command+Click) on your circuit and copy a circuit data.
<!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' :)
{
"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.
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