prescientmoon/erratic-gate
prescientmoon/erratic-gate
1
Fork 0
Code Issues 2 Pull requests Activity

updated docs

Browse source
This commit is contained in:
Matei Adriel 2019-07-26 14:16:08 +03:00
parent a5cb7abc6b
commit fee10a906b
5 changed files with 144 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

127
docs/main.md
View file

@ -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:
![Half adder](./assets/half-adder.png)
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):
![Full adder](./assets/full-adder.png)
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):
![4-bit-adder](./assets/4-bit-adder.png)
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)

44
docs/tutorials/4-bit-adder.md Normal file
View file

@ -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:
![Half adder](../assets/half-adder.png)
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):
![Full adder](../assets/full-adder.png)
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):
![4-bit-adder](../assets/4-bit-adder.png)
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!

24
docs/tutorials/controls.md Normal file
View file

@ -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> |

58
docs/tutorials/running.md Normal file
View file

@ -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
```

16
src/assets/not.svg
View file

@ -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>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 154 B

After

Width:  |  Height:  |  Size: 761 B