|
| 1 | +--- |
| 2 | +id: chapter7-buildwithcv |
| 3 | +title: "Buildwithcv" |
| 4 | +description: "Buildwithcv page in Chapter7 of CircuitVerse documentation." |
| 5 | +--- |
| 6 | + |
| 7 | +# Building Circuit Simulations within CircuitVerse |
| 8 | + |
| 9 | +In this section, we will build a circuit of a full adder exploring the different stages of building a live circuit within the CircuitVerse simulator. We will start off by creating a circuit of a half adder and insert it as a subcircuit to create a 4-bit full adder. |
| 10 | + |
| 11 | +- [Building Circuit Simulations within CircuitVerse](#building-circuit-simulations-within-circuitverse) |
| 12 | + - [Create and Save New Project](#create-and-save-new-project) |
| 13 | + - [Create Circuit Using CircuitVerse Simulation](#create-circuit-using-circuitverse-simulation) |
| 14 | + - [Edit Circuit Layout](#edit-circuit-layout) |
| 15 | + - [Insert Subcircuit](#insert-subcircuit) |
| 16 | + - [a. Insert Subcircuit as a CircuitVerse Simulation](#a-insert-subcircuit-as-a-circuitverse-simulation) |
| 17 | + - [b. Insert Circuit Using Verilog Module](#b-insert-circuit-using-verilog-module) |
| 18 | + - [Annotate Circuit](#annotate-circuit) |
| 19 | + |
| 20 | +## Create and Save New Project |
| 21 | + |
| 22 | +Although the CircuitVerse simulator saves the circuit periodically and any unsaved circuits may be recovered from the browsers memory, the user must create an account and save the CircuitVerse project online for future reference. |
| 23 | + |
| 24 | +Follow the below steps to create a new project and save the circuit online: |
| 25 | + |
| 26 | +1. Navigate to [https://circuitverse.org/](https://circuitverse.org/). |
| 27 | + |
| 28 | +2. Click on the **Launch Simulator** button to launch the simulator. Refer Figure 7.1. |
| 29 | + |
| 30 | +  |
| 31 | + |
| 32 | + <div align="center"> |
| 33 | + <em>Figure 7.1</em> |
| 34 | + </div> |
| 35 | + |
| 36 | +3. Navigate to the **Quick Access Panel**. Click on either **Save Online** icon or **Save Offline** icon to receive the** Enter Project Name**: pop-up window for saving the circuit. Refer Figure 7.2. |
| 37 | + |
| 38 | + > NOTE: If a project file is saved online, it is available on the dashboard. Alternatively, any project file that is saved offline, is downloaded to your browser’s local storage. |
| 39 | +
|
| 40 | +  |
| 41 | + |
| 42 | + <div align="center"> |
| 43 | + <em>Figure 7.2</em> |
| 44 | + </div> |
| 45 | + |
| 46 | +4. If the project is saved online, you will be directed to the **Edit Project** details page for sharing more information about the project (refer Figure 7.3). |
| 47 | + |
| 48 | +  |
| 49 | + |
| 50 | + <div align="center"> |
| 51 | + <em>Figure 7.3</em> |
| 52 | + </div> |
| 53 | + |
| 54 | + Watch this video for more information on the different fields that can be used for sharing more information about the project. |
| 55 | + |
| 56 | + <div> |
| 57 | + <iframe>insert saving project video link</iframe> |
| 58 | + </div> |
| 59 | + . |
| 60 | + |
| 61 | +5. Click **Update Project** to save the project details and return back to the CV simulator window. Refer Figure 7.4. |
| 62 | + |
| 63 | +  |
| 64 | + |
| 65 | + <div align="center"> |
| 66 | + <em>Figure 7.4</em> |
| 67 | + </div> |
| 68 | + |
| 69 | +## Create Circuit Using CircuitVerse Simulation |
| 70 | + |
| 71 | +After successfully creating a CircuitVerse user account, follow the below steps for creating a circuit of a half adder within the CircuitVerse simulator: |
| 72 | + |
| 73 | +6. Navigate to the **CIRCUITS ELEMENTS** panel. Identify the relevant circuit elements and drop them on the canvas. If required, you may search for an element in the search bar. Refer Figure 7.5. |
| 74 | + |
| 75 | +  |
| 76 | + |
| 77 | + <div align="center"> |
| 78 | + <em>Figure 7.5</em> |
| 79 | + </div> |
| 80 | + |
| 81 | +7. Connect the circuit elements by clicking on one node and dragging the mouse to the other node. Refer to Figure 7.6 for the final circuit connection. |
| 82 | + |
| 83 | + > TIP: Hold down Ctrl key. Click on a node and simply move the cursor to the final node to which it needs to be attached. Clicking on the wire will insert a node at that position. Upon reaching the final node, leave the Ctrl key and click on the node to end the wire. |
| 84 | +
|
| 85 | +  |
| 86 | + |
| 87 | + <div align="center"> |
| 88 | + <em>Figure 7.6</em> |
| 89 | + </div> |
| 90 | + |
| 91 | +8. Select a circuit element. It will be highlighted in yellow as shown in Figure 7.7. |
| 92 | + |
| 93 | +9. Navigate to the **PROPERTIES** panel. Edit the **Label** parameter to add a label for the selected circuit element. Refer Figure 7.7. |
| 94 | + |
| 95 | +  |
| 96 | + |
| 97 | + <div align="center"> |
| 98 | + <em>Figure 7.7</em> |
| 99 | + </div> |
| 100 | + |
| 101 | +10. Repeat steps 3 and 4 to add labels for the remaining circuit elements as shown in Figure 7.7. |
| 102 | + |
| 103 | +## Edit Circuit Layout |
| 104 | + |
| 105 | +Before inserting a circuit as a subcircuit, the circuit layout must be edited to prevent any loss of wiring connections across different nodes or ports in the integrated circuit schematic may be lost. |
| 106 | + |
| 107 | +Follow the below steps to view and edit the circuit layout of the half-adder circuit: |
| 108 | + |
| 109 | +11. Navigate to the **PROPERTIES** panel. |
| 110 | + |
| 111 | +12. Click on the **Edit Layout** button to display the circuit layout for the built circuit (refer Figure 7.8). |
| 112 | + |
| 113 | +  |
| 114 | + |
| 115 | + <div align="center"> |
| 116 | + <em>Figure 7.8</em> |
| 117 | + </div> |
| 118 | + |
| 119 | +13. The **Edit Layout** screen displays the page as shown in Figure 7.9. The circuit is placed inside a back box. The **LAYOUT** panel displays different options for editing the layout of the circuit. |
| 120 | + |
| 121 | +  |
| 122 | + |
| 123 | + <div align="center"> |
| 124 | + <em>Figure 7.9</em> |
| 125 | + </div> |
| 126 | + |
| 127 | +14. Change the desired settings of the **LAYOUT** panel. |
| 128 | + |
| 129 | +15. Click **Save** to save the layout settings as shown in Figure 7.10. |
| 130 | + |
| 131 | +  |
| 132 | + |
| 133 | + <div align="center"> |
| 134 | + <em>Figure 7.10</em> |
| 135 | + </div> |
| 136 | + |
| 137 | +## Insert Subcircuit |
| 138 | + |
| 139 | +Subcircuits can be nested across other circuit tabs as a CV simulation or as a Verilog module. This section lists the different steps for inserting subcircuits generated as a CV simulation or as a Verilog code. |
| 140 | + |
| 141 | +### a. Insert Subcircuit as a CircuitVerse Simulation |
| 142 | + |
| 143 | +Follow the below steps for building a full adder circuit using two half-adder subcircuits: |
| 144 | + |
| 145 | +16. Click on the add tab icon (refer Figure 7.11) displayed in the circuit tab section. Alternatively, you may also click on **NewCircuit+** selection in the **Circuit** drop-down menu. As shown in Figure 7.11, the **Enter circuit name:** pop up window is displayed. |
| 146 | + |
| 147 | +  |
| 148 | + |
| 149 | + <div align="center"> |
| 150 | + <em>Figure 7.11</em> |
| 151 | + </div> |
| 152 | + |
| 153 | +17. Enter a circuit name in the text field as shown in Figure 7.11. |
| 154 | + |
| 155 | +18. Click **OK** to save the circuit name. Refer Figure 7.12. |
| 156 | + |
| 157 | +  |
| 158 | + |
| 159 | + <div align="center"> |
| 160 | + <em>Figure 7.12</em> |
| 161 | + </div> |
| 162 | + |
| 163 | +19. Navigate to **Circuit** drop-down menu to select **Insert SubCircuit** from the drop down menu. As shown in Figure 7.13, the **Insert SubCircuit** pop up window is displayed. |
| 164 | + |
| 165 | + |
| 166 | + |
| 167 | + |
| 168 | +<div align="center"> |
| 169 | + <em>Figure 7.13</em> |
| 170 | +</div> |
| 171 | + |
| 172 | +20. Select the circuit that you wish to insert. Refer Figure 7.14. |
| 173 | + |
| 174 | + |
| 175 | + |
| 176 | + |
| 177 | +<div align="center"> |
| 178 | + <em>Figure 7.14</em> |
| 179 | +</div> |
| 180 | + |
| 181 | +21. Click the **Insert SubCircuit** button to insert the subcircuit within the **Full Adder** tab (refer Figure 7.14). |
| 182 | + |
| 183 | +22. Repeat the steps from 15 to 20 to add more sub-circuits to your circuit. |
| 184 | + |
| 185 | + > TIP: Duplicate any circuit by selecting the circuit (CTRL + A), copy the circuit (CTRL + C) and paste the circuit (CTRL + V) in the desired tab or another project file. |
| 186 | +
|
| 187 | +23. Refer to Figure 7.15 and complete the wiring connections of the full adder circuit. |
| 188 | + |
| 189 | +  |
| 190 | + |
| 191 | + |
| 192 | + <div align="center"> |
| 193 | + <em>Figure 7.15</em> |
| 194 | + </div> |
| 195 | + |
| 196 | +### b. Insert Circuit Using Verilog Module |
| 197 | + |
| 198 | +If required, a user can also insert a Verilog module as a subcircuit. Follow the below steps to insert a circuit layout constructed using a verilog module: |
| 199 | + |
| 200 | +1. Navigate to **Circuit** drop-down menu to select **New Verilog Module** from the drop down menu. As shown in Figure 7.16, the **Enter circuit name** pop up window is displayed. |
| 201 | + |
| 202 | +  |
| 203 | + |
| 204 | + <div align="center"> |
| 205 | + <em>Figure 7.16</em> |
| 206 | + </div> |
| 207 | + |
| 208 | +2. Enter a circuit tab name in the text field. Refer Figure 7.16. |
| 209 | + |
| 210 | +3. Click **OK **to launch the Verilog code interface window as shown in Figure 7.17. |
| 211 | + |
| 212 | +  |
| 213 | + |
| 214 | + <div align="center"> |
| 215 | + <em>Figure 7.17</em> |
| 216 | + </div> |
| 217 | + |
| 218 | +4. Enter the desired Verilog code in the module interface. Refer Figure 7.18. |
| 219 | + |
| 220 | +  |
| 221 | + |
| 222 | + <div align="center"> |
| 223 | + <em>Figure 7.18</em> |
| 224 | + </div> |
| 225 | + |
| 226 | +5. Click on the **Save Code** button to receive the message that the code has been saved successfully. Refer Figure 7.19. |
| 227 | + |
| 228 | +  |
| 229 | + |
| 230 | + <div align="center"> |
| 231 | + <em>Figure 7.19</em> |
| 232 | + </div> |
| 233 | + |
| 234 | +## Annotate Circuit |
| 235 | + |
| 236 | +Follow the below steps to annotate the final circuit diagram: |
| 237 | + |
| 238 | +24. Navigate to the **Misc** section of the **CIRCUIT ELEMENTS** panel as shown in Figure 7.20. |
| 239 | + |
| 240 | +  |
| 241 | + |
| 242 | + <div align="center"> |
| 243 | + <em>Figure 7.20</em> |
| 244 | + </div> |
| 245 | + |
| 246 | +25. Drag the **Text Tool** element on the canvas as shown in Figure 7.21. |
| 247 | + |
| 248 | +  |
| 249 | + |
| 250 | + <div align="center"> |
| 251 | + <em>Figure 7.21</em> |
| 252 | + </div> |
| 253 | + |
| 254 | +26. Navigate to the **PROPERTIES** panel to edit the **Label:** text field as shown in Figure 7.21. |
| 255 | + |
| 256 | +27. Repeat steps 24 to 26 to add more annotation elements. In Figure 7.22, a **Rectangle Tool** element has been added to highlight the structural relationship across different elements . |
| 257 | + |
| 258 | +  |
| 259 | + |
| 260 | + <div align="center"> |
| 261 | + <em>Figure 7.22</em> |
| 262 | + </div> |
0 commit comments