diff --git a/docs/main.md b/docs/main.md index 83b52ce..56c62bc 100644 --- a/docs/main.md +++ b/docs/main.md @@ -1,124 +1,5 @@ -<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> +# Table of content: -## Running the simulator - -There are 3 ways to get the simulator up and running: - -1. Using [the version hosted on heroku](https://logic-gate-simulator.herokuapp.com/): - -This is by far the fastest solution - everything you need to do is open -[the github-pages url](https://logic-gate-simulator.herokuapp.com/) - -2. Using a development server: - -First you need to have [node.js & npm](https://nodejs.org/en/download/) and [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) installed on your machine. - -Open a terminal in the desired folder and run: - -```sh -# Clone repo -git clone https://github.com/Mateiadrielrafael/logicGateSimulator - -# Cd into the folder -cd logicGateSimulator - -# install dependencies -npm install - -# run development server -npm run dev -``` - -3. Building the simulation yourself - -First, clone the repo and install the dependencies as explained in option 2. - -To build the source run: - -```sh -# build program -npm run build -``` - -To then run the simulation, open a server in the dist directory. A simple solution using npm: - -```sh -# instal nano-server globally -npm i nano-server -g - -# change directory -cd dist - -# run server -nano-server - -# linux -open http://localhost:5000 - -# Windows -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` | -| 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> | +- [Running the simulator](./tutorials/running.md) +- [Controls](./tutorials/controls.md) +- [Building a 4-bit adder](./tutorials/4-bit-adder.md) diff --git a/docs/tutorials/4-bit-adder.md b/docs/tutorials/4-bit-adder.md new file mode 100644 index 0000000..f12240a --- /dev/null +++ b/docs/tutorials/4-bit-adder.md @@ -0,0 +1,44 @@ +<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> + +# Building a 4 - bit adder: + +0. To save the simulation press `ctrl + s` or click `Simulation` > `Save`. Save your progress after each step. + +1. Create a new ic called `half-adder` (`Create simulation` > `Integrated circuit` > `Half adder`) + +1. 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! diff --git a/docs/tutorials/controls.md b/docs/tutorials/controls.md new file mode 100644 index 0000000..c8881ba --- /dev/null +++ b/docs/tutorials/controls.md @@ -0,0 +1,24 @@ +<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> + +# 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` | +| 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> | diff --git a/docs/tutorials/running.md b/docs/tutorials/running.md new file mode 100644 index 0000000..1c41379 --- /dev/null +++ b/docs/tutorials/running.md @@ -0,0 +1,58 @@ +# Running the simulator + +There are 3 ways to get the simulator up and running: + +1. Using [the version hosted on heroku](https://logic-gate-simulator.herokuapp.com/): + +This is by far the fastest solution - everything you need to do is open +[the github-pages url](https://logic-gate-simulator.herokuapp.com/) + +2. Using a development server: + +First you need to have [node.js & npm](https://nodejs.org/en/download/) and [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) installed on your machine. + +Open a terminal in the desired folder and run: + +```sh +# Clone repo +git clone https://github.com/Mateiadrielrafael/logicGateSimulator + +# Cd into the folder +cd logicGateSimulator + +# install dependencies +npm install + +# run development server +npm run dev +``` + +3. Building the simulation yourself + +First, clone the repo and install the dependencies as explained in option 2. + +To build the source run: + +```sh +# build program +npm run build +``` + +To then run the simulation, open a server in the dist directory. A simple solution using npm: + +```sh +# instal nano-server globally +npm i nano-server -g + +# change directory +cd dist + +# run server +nano-server + +# linux +open http://localhost:5000 + +# Windows +start http://localhost:5000 +``` diff --git a/src/assets/not.svg b/src/assets/not.svg index bf3fd26..b9c57e5 100644 --- a/src/assets/not.svg +++ b/src/assets/not.svg @@ -1,3 +1,15 @@ -<svg width="800" height="799" viewBox="0 0 800 799" fill="none" xmlns="http://www.w3.org/2000/svg"> -<path d="M800 0H0V800H800V0Z" fill="#0277BD"/> +<svg width="800" height="800" viewBox="0 0 800 800" fill="none" xmlns="http://www.w3.org/2000/svg"> +<g clip-path="url(#clip0)"> +<path d="M800 1H0V801H800V1Z" fill="#0277BD"/> +<path d="M495 401L576 400" stroke="#EEEEEE" stroke-width="10"/> +<path d="M266 471H320" stroke="#EEEEEE" stroke-width="10"/> +<path d="M266 324L327 323" stroke="#EEEEEE" stroke-width="10"/> +<path d="M529 400.5C529 406.908 523.031 413 514.5 413C505.969 413 500 406.908 500 400.5C500 394.092 505.969 388 514.5 388C523.031 388 529 394.092 529 400.5Z" fill="#0277BD" stroke="white" stroke-width="10"/> +<path d="M324.5 514.5V282L498 402L324.5 514.5Z" stroke="white" stroke-width="10"/> +</g> +<defs> +<clipPath id="clip0"> +<rect width="800" height="800" fill="white"/> +</clipPath> +</defs> </svg>