virtual-labs-archive · agauravdev · May 11, 2019 · May 27, 2019 · May 29, 2019 · May 29, 2019
diff --git a/SRIP/Codes/README.md b/SRIP/Codes/README.md
@@ -0,0 +1,48 @@
+# Multiplexer
+
+This lab allows you to design and simulate any digital combinational or sequential circuit. Following instruction help you build the multiplexer circuit. A Javascript-based basic tool and simulation enigne is at the hear of this laboratory. You can create many circuits and test them with fixed or time-varying input signals. You can also see the outputs as values or time-varying waveforms.
+
+2x1 MUX
+![Image](https://github.com/gauravggg21/digital-logic-design-iiith/blob/master/SRIP/Codes/images/mux2.png?raw=true)
+
+4x1 MUX
+![Image](https://github.com/gauravggg21/digital-logic-design-iiith/blob/master/SRIP/Codes/images/mux4.png?raw=true)
+
+The tool consist of mainly two pannels: Left Pannel, Right Pannel.
+
+* Left Pannel:You can change the settings from the left pane.
+
+	1. Modules:The checkboxes are to show you the expected output of your circuit. An abstracted version of the circuit will appear in the simulation. Please try to replicate the output.
+
+	2. Save Settings:Click on the button to save your settings. You need to do it, in order for the settings to apply.
+
+	3. Clear Settings:Click on the button to discard all your settings.
+
+	* WARNING: When you click on save settings or clear settings, your circuit gets cleared automatically, so please choose your settings before hand.
+	4. If you get stuck, and are not able to make the circuit, the load buttons will help you out.
+
+	5. Click the "Clear Workspace" button to clear the simulation.
+
+* Right Pannel: The right pane contains the workspace where you will simulate your experiment.
+
+	1. The toolbox on the left contains the pre-made logic circuits you will require to build a counter.
+
+	2. Drag them on the right, to place them on your breadboard.
+
+	3. The left part of the abstracted circuit contains the inputs, and the right side the outputs.
+
+	4. Click on the circle of the input or output to another input/output to make a connection.
+
+	* You can connect only one line to an input, but an output can have multiple lines.
+
+	5. The "DC" icon outputs digital 1 at all times, connnect it to:
+
+	* -push on: to simulate the 1 only when you're pressing on the button
+
+	* -push off: to simulate 0 when you're pushing the button
+
+	* -toggle: to toggle the output between 1 and 0.
+
+	6. The joint icon is just a connection, to make your connections look neater, as the lines from an output to an input are straight.
+
+## [Project Documentation](https://gist.github.com/gauravggg21/5a2b0c0fd7e35f624b74854cb1a92cec)
diff --git a/SRIP/Codes/images/mux2.png b/SRIP/Codes/images/mux2.png
diff --git a/SRIP/Codes/images/mux4.png b/SRIP/Codes/images/mux4.png
diff --git a/SRIP/Codes/index.html b/SRIP/Codes/index.html
@@ -0,0 +1,161 @@
+<!doctype html>
+<html>
+<head>
+	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
+	<link rel="stylesheet" type="text/css" href="../libraries/simcir/simcir.css" />
+	<link rel="stylesheet" type="text/css" href="../libraries/simcir/simcir-basicset.css" />
+
+	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+	<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
+	<link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css">
+	<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js"></script>
+	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
+	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
+	<style type="text/css">
+		#content{
+			text-align: center;
+		}
+		.container{
+			max-width: 90%;
+		}
+		.unclickable{
+			pointer-events: none;
+		}
+	</style>
+	<title>DLD Multiplexer</title>
+</head>
+<body class="bg-light">
+	<div class="modal fade bd-example-modal-lg" id="instructions" tabindex="-1" role="dialog" aria-labelledby="instructionsTitle" aria-hidden="true">
+		<div class="modal-dialog modal-lg" role="document">
+			<div class="modal-content">
+				<div class="modal-header">
+					<h5 class="modal-title" id="instructionsTitle">INSTRUCTIONS</h5>
+					<button type="button" class="close" data-dismiss="modal" aria-label="Close">
+						<span aria-hidden="true">&times;</span>
+					</button>
+				</div>
+				<div class="modal-body">
+					<p class="lead">This lab allows you to design and simulate any digital combinational or sequential circuit. Following instruction help you build the Multiplexer circuit. A Javascript-based basic tool and simulation enigne is at the hear of this laboratory. You can create many circuits and test them with fixed or time-varying input signals. You can also see the outputs as values or time-varying waveforms. </p>
+					<h6>2-1 MUX</h6>
+					<img src="images/mux2.png" class="img-fluid"><br><br>
+					<h6>4-1 MUX</h6>
+					<img src="images/mux4.png" class="img-fluid">
+					<hr>
+					<p>The tool consist of mainly two pannels: Left Pannel, Right Pannel.</p>
+					<ul>
+						<li>
+							<p><strong>Left Pannel:</strong>You can change the settings from the left pane.</p>
+							<ol>
+								<li>
+									<p><strong>Modules:</strong>The checkboxes are to show you the expected output of your circuit. An abstracted version of the circuit will appear in the simulation. Please try to replicate the output.</p>
+								</li>
+								<li>
+									<p><strong>Save Settings:</strong>Click on the button to save your settings. You need to do it, in order for the settings to apply.</p>
+								</li>
+								<li>
+									<p><strong>Clear Settings:</strong>Click on the button to discard all your settings.</p>
+									<div class="alert alert-danger" role="alert">
+										<strong>WARNING</strong>: When you click on save settings or clear settings, your circuit gets cleared automatically, so please choose your settings before hand.	
+									</div>
+								</li>
+
+								<li>
+									<p>If you get stuck, and are not able to make the Multiplexer, the load buttons will help you out.</p>
+								</li>
+								<li>
+									<p>Click the "Clear Workspace" button to clear the simulation.</p>
+								</li>
+							</ol>
+						</li>
+						<li>
+							<p><strong>Right Pannel:</strong> The right pane contains the workspace where you will simulate your experiment.</p>
+							<ol>
+								<li>
+									<p>The toolbox on the left contains the pre-made logic circuits you will require to build a Multiplxer.</p>
+								</li>
+								<li>
+									<p>Drag them on the right, to place them on your breadboard.</p>
+								</li>
+								<li>
+									<p>The left part of the abstracted circuit contains the inputs, and the right side the outputs.</p>
+								</li>
+								<li>
+									<p>Click on the circle of the input or output to another input/output to make a connection.</p>
+									<div class="alert alert-info" role="alert">
+										You can connect only one line to an input, but an output can have multiple lines.
+									</div>
+								</li>
+								<li>
+									<p>The "DC" icon outputs digital 1 at all times, connnect it to:</p>
+									<ul>
+										<li>
+											<p>-push on: to simulate the 1 only when you're pressing on the button</p>
+										</li>
+										<li>
+											<p>-push off: to simulate 0 when you're pushing the button</p>
+										</li>
+										<li>
+											<p>-toggle: to toggle the output between 1 and 0.</p>
+										</li>
+									</ul>
+								</li>
+								<li>
+									<p>The joint icon is just a connection, to make your connections look neater, as the lines from an output to an input are straight.</p>
+								</li>
+							</ol>
+						</li>
+					</ul>
+				</div>
+				<div class="modal-footer">
+					<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div id="content" class="container ">
+		<h1>Multiplexer</h1>
+		<h3>Simulate a 2-1 Multiplexer, and then a 4-1 Multiplexer using the 2 bit multiplexer.(<a href="help.html" data-toggle="modal" data-target="#instructions">Click Here to see the instructions</a>)</h3>
+		<hr>
+		<div class="row">
+			<div class="col-lg-3 border border-secondary" style="height: 800px">
+				<div class="mx-auto">
+					<br>
+					<h2>Settings</h2>
+					<form>
+						<h6>Avaliable Modules for this experiment</h6>
+						<div class="custom-control custom-switch">
+							<input type="checkbox" class="custom-control-input" id="mux2">
+							<label class="custom-control-label" for="mux2">2-1 MUX</label>
+						</div>
+						<div class="custom-control custom-switch">
+							<input type="checkbox" class="custom-control-input" id="mux4">
+							<label class="custom-control-label" for="mux4">4-1 MUX</label>
+						</div><br>
+						<button type="submit" class="btn  btn-outline-success">Save Settings</button><br><br>
+						<button type="submit" class="btn  btn-outline-danger" id="clear_settings">Clear Settings</button>
+					</form>
+					<hr>
+					<div class="mx-auto">
+						<button type="submit" class="btn  btn-outline-info" id="load_mux2">Load 2-1 MUX</button><br><br>
+						<button type="submit" class="btn  btn-outline-info" id="load_mux4">Load 4-1 MUX</button><br><br>
+						<button type="submit" class="btn  btn-outline-info" id="clear_workspace">Clear Workspace</button>
+					</div>
+				</div>
+			</div>
+			<div class="col-lg-9 simcir_outer_div">
+				<div class="simcir">
+				</div>
+			</div>
+		</div>
+
+
+		<script type="text/javascript" src="js/main.js">s</script>
+		<script type="text/javascript" src="../libraries/simcir/simcir.js"></script>
+		<script type="text/javascript" src="../libraries/simcir/simcir-basicset.js"></script>
+		<script type="text/javascript" src="../libraries/simcir/simcir-library.js"></script>
+		<script type="text/javascript" src="../libraries/simcir/simcir-dso.js"></script>
+		<script type="text/javascript" src="js/end.js"></script>
+	</div>
+</body>
+</html>
diff --git a/SRIP/Codes/js/end.js b/SRIP/Codes/js/end.js
@@ -0,0 +1,69 @@
+// this file is to be executed in the end, because the functions and variables used are declared in the library simcir files
+simcir.registerDevice('4bitMUX',
+{
+  "width":520,
+  "height":500,
+  "devices":[
+    {"type":"2bitMultiplexer","id":"dev0","x":96,"y":56,"label":"2bitMultiplexer"},
+    {"type":"2bitMultiplexer","id":"dev1","x":96,"y":168,"label":"2bitMultiplexer"},
+    {"type":"2bitMultiplexer","id":"dev2","x":184,"y":104,"label":"2bitMultiplexer"},
+    {"type":"In","id":"dev3","x":16,"y":8,"label":"I0"},
+    {"type":"In","id":"dev4","x":16,"y":64,"label":"I1"},
+    {"type":"In","id":"dev5","x":16,"y":128,"label":"I2"},
+    {"type":"In","id":"dev6","x":16,"y":184,"label":"I3"},
+    {"type":"Out","id":"dev7","x":280,"y":120,"label":"Q"},
+    {"type":"In","id":"dev8","x":56,"y":240,"label":"S0"},
+    {"type":"In","id":"dev9","x":80,"y":288,"label":"S1"}
+  ],
+  "connectors":[
+    {"from":"dev0.in0","to":"dev3.out0"},
+    {"from":"dev0.in1","to":"dev4.out0"},
+    {"from":"dev0.in2","to":"dev9.out0"},
+    {"from":"dev1.in0","to":"dev5.out0"},
+    {"from":"dev1.in1","to":"dev6.out0"},
+    {"from":"dev1.in2","to":"dev9.out0"},
+    {"from":"dev2.in0","to":"dev0.out0"},
+    {"from":"dev2.in1","to":"dev1.out0"},
+    {"from":"dev2.in2","to":"dev8.out0"},
+    {"from":"dev7.in0","to":"dev2.out0"}
+  ]
+}
+);
+      simcir.registerDevice("2bitMUX",
+{
+  "width":520,
+  "height":500,
+  "devices":[
+    {"type":"DC","id":"dev0","x":56,"y":176,"label":"DC"},
+    {"type":"DC","id":"dev1","x":56,"y":232,"label":"DC"},
+    {"type":"DC","id":"dev2","x":56,"y":288,"label":"DC"},
+    {"type":"Toggle","id":"dev3","x":120,"y":176,"label":"Toggle","state":{"on":false}},
+    {"type":"Toggle","id":"dev4","x":120,"y":232,"label":"Toggle","state":{"on":false}},
+    {"type":"Toggle","id":"dev5","x":120,"y":288,"label":"Toggle","state":{"on":false}},
+    {"type":"AND","id":"dev6","x":312,"y":176,"label":"AND"},
+    {"type":"AND","id":"dev7","x":312,"y":224,"label":"AND"},
+    {"type":"OR","id":"dev8","x":368,"y":200,"label":"OR"},
+    {"type":"NOT","id":"dev9","x":248,"y":288,"label":"NOT"},
+    {"type":"In","id":"dev10","x":192,"y":176,"label":"I0"},
+    {"type":"In","id":"dev11","x":192,"y":232,"label":"I1"},
+    {"type":"In","id":"dev12","x":192,"y":288,"label":"S0"},
+    {"type":"Out","id":"dev13","x":424,"y":200,"label":"Q"}
+  ],
+  "connectors":[
+    {"from":"dev3.in0","to":"dev0.out0"},
+    {"from":"dev4.in0","to":"dev1.out0"},
+    {"from":"dev5.in0","to":"dev2.out0"},
+    {"from":"dev6.in0","to":"dev10.out0"},
+    {"from":"dev6.in1","to":"dev9.out0"},
+    {"from":"dev7.in0","to":"dev11.out0"},
+    {"from":"dev7.in1","to":"dev12.out0"},
+    {"from":"dev8.in0","to":"dev6.out0"},
+    {"from":"dev8.in1","to":"dev7.out0"},
+    {"from":"dev9.in0","to":"dev12.out0"},
+    {"from":"dev10.in0","to":"dev3.out0"},
+    {"from":"dev11.in0","to":"dev4.out0"},
+    {"from":"dev12.in0","to":"dev5.out0"},
+    {"from":"dev13.in0","to":"dev8.out0"}
+  ]
+}
+);