diff --git a/docs/assets/4-bit-adder.png b/docs/assets/4-bit-adder.png new file mode 100644 index 0000000..1e3fdc4 Binary files /dev/null and b/docs/assets/4-bit-adder.png differ diff --git a/docs/assets/files.png b/docs/assets/files.png deleted file mode 100644 index 85b582a..0000000 Binary files a/docs/assets/files.png and /dev/null differ diff --git a/docs/assets/full-adder.png b/docs/assets/full-adder.png new file mode 100644 index 0000000..6e61ff9 Binary files /dev/null and b/docs/assets/full-adder.png differ diff --git a/docs/assets/gist.png b/docs/assets/gist.png deleted file mode 100644 index 2a8c226..0000000 Binary files a/docs/assets/gist.png and /dev/null differ diff --git a/docs/assets/gist_url.png b/docs/assets/gist_url.png deleted file mode 100644 index f067e15..0000000 Binary files a/docs/assets/gist_url.png and /dev/null differ diff --git a/docs/assets/half-adder.png b/docs/assets/half-adder.png new file mode 100644 index 0000000..db7fb7f Binary files /dev/null and b/docs/assets/half-adder.png differ diff --git a/docs/main.md b/docs/main.md index 5114d0b..a17d4da 100644 --- a/docs/main.md +++ b/docs/main.md @@ -1,12 +1,9 @@ <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> +ess of creating a full adder. -# Introduction +## Running the simulator -These docs will walk you trough the process of creating a full adder. - -## Opening the simulator - -There are 3 ways to open the simulator: +There are 3 ways to get the simulator up and running: 1. Using the version hosted on github-pages: @@ -63,24 +60,66 @@ open http://localhost:5000 start http://localhost:5000 ``` +## Building a 4 - bit adder: + +1. Create a new ic called `half-adder` (`Create simulation` > `Integrated circuit` > `Half adder`) + +2. Add the following logic gates (`Logic gates` > the name of the gate): + - 2 buttons + - 2 light bulbs + - a XOR gate + - an AND gate + +> You can get more info about these gates by clicking `Logic gates` > the <i class='material-icons'>info</i> icon at the rght of the gate. + +3. To move a gate, drag & drop it with the right mouse button. To connect 2 pins, click once on each. Build the following configuration: + + + +3. Create a new ic called `full-adder` (See step 1) +4. Add the following gates (See step 2): + - 3 buttons + - 2 light bulbs + - 2 half adders + - an OR gate + +5) Build the following configuration (See step 3): +  + +6) Create a new project called `4-bit-adder` (`Create simulation` > `Project` > `4-bit-adder`) + +7) Add the following components (See step 2): + + - 8 button + - 5 light bulbs + - 3 full adders + - 1 half adder + +8) Build the following configuration (See step 3): +  + +9) Enjoy! + Congratiulations! You've made your first circuit! With this simulator at your dispossal, the possibilities are endless! Here are a few things you can try and create yourself: - A 4-bit substractor - A counter - Different latches - If you are confident in you skills, you can even make a full 4-bit processor! + ## The controls -| Action | Keybinding | Gui | -| :---------------------------------: | :-------------: | :--------------------------------------------------------------------------: | -| Save | `ctrl + s` | `Simulation` > `Save` | -| Add a gate | - | click `logic-gates` > the gate you want to add | -| Move a gate | - | drag & drop the gate using the `right mouse button` | -| Pan | - | click & move & release the background useing the `right mouse button` | -| Select multiple gates | - | click & move & release using the `left mouse button` | -| Add to selection | `shift` | select while holding `shift` | -| Select all gates | `ctrl + a` | `Simulation` > `Select all` | -| Delete selection | `delete` | `Simulation` > `Delete selection` | -| Undo _(to last save)_ | `ctrl + z` | `Simulation` > `Undo` | -| Refresh (reload) simulation | `ctrl + r` | `Simulation` > `Refresh` | -| Clean (delete unconnected gates) | `ctrl + delete` | `Simulation` > `Clean` | -| Open simulation | - | `Open simulation` > the simulation you want to open | -| Create simulation | - | `Create simulation` > `Project` | `Integrated circuit` > type the name of the simulation | -| Create project | - | `Create simulation` > `Project` > type the name of the simulation | -| Create integrated circuit | - | `Create simulation` > `Integrated circuit` > type the name of the simulation | -| Change language | - | Click on the `Language: \<language\>` button (bottom of the sidebar) | -| Get more info about a built in gate | - | `Logic gates` > <i class="material-icons">info</i> | +| Action | Keybinding | Gui | +| :---------------------------------: | :---------------------: | :--------------------------------------------------------------------------: | +| Save | `ctrl + s` | `Simulation` > `Save` | +| Add a gate | - | click `logic-gates` > the gate you want to add | +| Move a gate | - | drag & drop the gate using the `right mouse button` | +| Pan | - | click & move & release the background useing the `right mouse button` | +| Select multiple gates | - | click & move & release using the `left mouse button` | +| Add to selection | `shift` | select while holding `shift` | +| Select all gates | `ctrl + a` | `Simulation` > `Select all` | +| Delete selection | `delete` | `Simulation` > `Delete selection` | +| Undo _(to last save)_ | `ctrl + z` | `Simulation` > `Undo` | +| Refresh (reload) simulation | `ctrl + r` | `Simulation` > `Refresh` | +| Clean (delete unconnected gates) | `ctrl + delete` | `Simulation` > `Clean` | +| Delete simulation | `ctrl + shift + delete` | `Simulation` > `Delete simulation` | +| Open simulation | - | `Open simulation` > the simulation you want to open | +| Create simulation | - | `Create simulation` > `Project` | `Integrated circuit` > type the name of the simulation | +| Create project | - | `Create simulation` > `Project` > type the name of the simulation | +| Create integrated circuit | - | `Create simulation` > `Integrated circuit` > type the name of the simulation | +| Change language | - | Click on the `Language: \<language\>` button (bottom of the sidebar) | +| Get more info about a built in gate | - | `Logic gates` > <i class="material-icons">info</i> |