fixed grammar mistakes
This commit is contained in:
Matei Adriel
parent
13521ba3ee
commit
2e1a45fe19
|
|
@ -1,6 +1,6 @@
|
|||
# Simulator de porti logice
|
||||
|
||||
Programul este un simulator de porti logice care permite experimentarea, testarea si cunoasterea ansamblelor de porti logice. Simulatorul suporta circuite integrate, mai multi biti pe acelasi pin, salvarea simulatiilor si suport pentru mai multe limbii.
|
||||
Programul este un simulator de porti logice care permite experimentarea, testarea si cunoasterea ansamblelor de porti logice. Simulatorul suporta circuite integrate, mai multi biti pe acelasi pin, salvarea simulatiilor si mai multe limbii.
|
||||
|
||||
## Arhitectura:
|
||||
|
||||
|
|
@ -17,10 +17,10 @@ In folderul [src](../src) se afla urmatoarele fisiere si foldere:
|
|||
- [index.html](../src/index.html) - fisierul de intrare al intregii aplicatii
|
||||
- [index.ts](../src/index.ts) - fisierul care initializeaza animatia de incarcare
|
||||
- [main.tsx](../src/main.tsx) - fisierul care se ocupa de pornirea aplicatiei. Acest fisier va fi descris mai amanuntit in sectiune `Performanta`
|
||||
- [server.ts](../src/server.ts) - fisierul care servest asseturile static in productie
|
||||
- [modules](../src/modules) & [common](../src/common) - Aceste foldere contin aplicatia propriuzisa
|
||||
- [server.ts](../src/server.ts) - fisierul care serveste resursele statice
|
||||
- [modules](../src/modules) & [common](../src/common) - Aceste foldere contin aplicatia propriu-zisa
|
||||
|
||||
### Folderele modules si common
|
||||
### Folderele 'modules' si 'common'
|
||||
|
||||
Am ales sa folosesc structura folosita de [wavedistrict](https://gitlab.com/wavedistrict/web-client/tree/master/src). Aceasta consta in 2 foldere: `common` si `modules`. Acestea contin subfoldere numite dupa functionalitatea pe care o implementeaza. La randul lor, acestea, contin foldere care sunt numite dupa tipul de fisiere continute.
|
||||
|
||||
|
|
@ -48,18 +48,18 @@ Proiectul este impartit in 18 module distincte:
|
|||
|
||||
1. `Activation`: se ocupa cu transformarea functiilor de `activare` in cod javascript
|
||||
2. `Colors`: se ocupa de manipularea culorilor
|
||||
3. `Core`: contine componentele vizuale de baza ale apl`icatiei`
|
||||
4. `Create`-simulation: implementeaza procesul de cre`ere` a unei simulatii
|
||||
5. `Erros`: se ocupa de prinsul si afisatul erorilor
|
||||
3. `Core`: contine componentele vizuale de baza ale aplicatiei
|
||||
4. `Create-simulation`: implementeaza procesul de creere a unei simulatii
|
||||
5. `Errors`: se ocupa de prinsul si afisatul erorilor
|
||||
6. `Input`: se ocupa de utilizarea textului ca input
|
||||
7. `Integrated`-circuits: se ocupa de compilarea cir`cuitelor` integrate
|
||||
8. `Internalisation`: se ocupa de afisarea textului in dif`erite` limbii
|
||||
7. `Integrated-circuits`: se ocupa de compilarea circuitelor integrate
|
||||
8. `Internalisation`: se ocupa de afisarea textului in diferite limbi
|
||||
9. `Keybindings`: se ocupa de utilizarea tastaturii ca input
|
||||
10. `Logic`-gate-info: implementeaza pagina cu informatii despre porti logice
|
||||
11. `Logic`-gates: implementeaza pagina de unde se pot adauga porti logice
|
||||
10. `Logic-gates-info`: implementeaza pagina cu informatii despre portile logice
|
||||
11. `Logic-gates`: implementeaza pagina de unde se pot adauga porti logice
|
||||
12. `Modals`: implementeaza caracteristicile generale folosite de toate dialogurile
|
||||
13. `Saving`: se ocupa de salvarea simulatiilor
|
||||
14. `Screen`: se oucpua de adaptarea aplicatiei la orice rezolutie
|
||||
14. `Screen`: se ocupua de adaptarea aplicatiei la orice rezolutie
|
||||
15. `Simulation`: se ocupa de simularea circuitelor
|
||||
16. `Storage`: se ocupa de salvarea datelor in `localStorage`
|
||||
17. `Toasts`: se ocupa de stilizarea notificarilor oferite de `react-toastify`.
|
||||
|
|
@ -67,11 +67,11 @@ Proiectul este impartit in 18 module distincte:
|
|||
|
||||
### Performanta
|
||||
|
||||
- Programarea reactiva este bine cunoscuta pentru ca poate creia memory leaks foarte usor. Pentru a ma asigura ca asa ceva nu se poate intampla, am folosit urmatoarele 2 tehnici:
|
||||
- Programarea reactiva este bine cunoscuta pentru ca poate crea memory leaks foarte usor. Pentru a ma asigura ca asa ceva nu se poate intampla, am folosit urmatoarele 2 tehnici:
|
||||
1. Folosirea operatorului `take()` pentru a astepta doar un anumit numar de valori
|
||||
2. Fiecare clasa care foloseste streamuri are o metoda numita `.dispose()` care curata toate subscriptile streamurilor folosite de instanta respectiva si cheama metoda cu acelasi nume pe toate proprietatile care la randul lor folosesc streamuri.
|
||||
2. Fiecare clasa care foloseste streamuri are o metoda numita `.dispose()` care curata toate subscriptiile streamurilor folosite de instanta respectiva si cheama metoda cu acelasi nume pe toate proprietatile care la randul lor folosesc streamuri.
|
||||
- Pentru ca userul sa nu vada un ecran gol nici macar o secunda, am urmat urmatorii pasi:
|
||||
1. Userului ii este trimis fisierul `index.html` ,`index.js` si `splash.css` cu o marime totala de doar 18kb. Aceste fisiere au doar rolul de a afisa o animatie de loading pe ecran.
|
||||
1. Userului ii este trimis fisierul `index.html` ,`index.js` si `splash.css` cu o marime totala de doar 18kb. Aceste fisiere au doar rolul de a afisa o animatie de incarcare pe ecran.
|
||||
2. Dupa ce animatia porneste, restul fisierelor sunt cerute de la server.
|
||||
3. Cand fisierul `main.js` este primit, acesta este rulat. El este responsabil pentru:
|
||||
- rendarea aplicatiei
|
||||
|
|
@ -79,26 +79,26 @@ Proiectul este impartit in 18 module distincte:
|
|||
- prinderea erorilor si aratarea acestora intr-un format usor de inteles
|
||||
- creerea `subiectelor` (streamuri care au o metoda numita `next`) necesare intregii aplicatii
|
||||
- actualizarea portilor logice salvate in eventualitatea unor noi aparitii
|
||||
4. Fisierul `main.js` expune o functie asincron numita `main` care este responsabila pentru functionalitatile enumerate mai sus. Aceasta functie este finalizata doar atunci cand toate aceste actiuni au fost realizate.
|
||||
5. Cand functia `main` din fisierul `main.js` este terminata, fisierul `index.js` isi termina munca prin scaderea opacitatii animatiei de incarcare si in final scoaterea acesteia din `DOM`.
|
||||
4. Fisierul `main.js` expune o functie asincron numita `main` care este responsabila pentru functionalitatii enumerate mai sus. Aceasta functie este finalizata doar atunci cand toate aceste actiuni au fost realizate.
|
||||
5. Cand functia `main` din fisierul `main.js` este terminata, fisierul `index.js` isi termina activitatea prin scaderea opacitatii animatiei de incarcare si in final scoaterea acesteia din `DOM`.
|
||||
|
||||
### Librarii, limbaje si unelte folosite:
|
||||
|
||||
Mentionez ca o mare parte din elementele acestei liste sunt libarii folosite in timpul developmentului, doar o mica parte ajungand in buildul final.
|
||||
Mentionez ca o mare parte din elementele acestei liste sunt libarii si unelte folosite in timpul developmentului, doar o mica parte ajungand in buildul final.
|
||||
|
||||
- [Sass](https://sass-lang.com/) pentru styling. Am ales sa foloses sass in special pentru ca ofera variabile si mixinuri care sunt rezolvate la compilare, acestea ajutand la refolosirea stiurilor. De exemplu, nu toate modalele au titluri, si la unele layoutul este putin diferit, asa ca am hotarat sa scriu 2 mixinuri: [@modal-title()](../src/modules/modals/styles/mixins/modal-title.scss) si [@modal-container()](../src/modules/modals/styles/mixins/modal-container.scss), astfel respectand principiul compozitiei. Un alt exemplu sunt mixinurile [@flex()](../src/modules/core/styles/mixins/flex.scss) si [@full-screen()](../src/modules/core/styles/mixins/full-screen.scss) pe care le-am scris deoarece incorporeaza functionalitati pe care urma sa le folosesc in mai multe parti ale aplicatiei.
|
||||
- [Sass](https://sass-lang.com/) pentru styling. Am ales sa foloses sass in special pentru ca ofera variabile si mixinuri care sunt rezolvate la compilare, acestea ajutand la refolosirea stilurilor. De exemplu, nu toate dialogurile au titluri, si la unele dintre ele layoutul este putin diferit, asa ca am hotarat sa scriu 2 mixinuri: [@modal-title()](../src/modules/modals/styles/mixins/modal-title.scss) si [@modal-container()](../src/modules/modals/styles/mixins/modal-container.scss), astfel respectand principiul compozitiei. Un alt exemplu sunt mixinurile [@flex()](../src/modules/core/styles/mixins/flex.scss) si [@full-screen()](../src/modules/core/styles/mixins/full-screen.scss) pe care le-am scris deoarece incorporeaza functionalitati pe care urma sa le folosesc in mai multe parti ale aplicatiei.
|
||||
- [Typescript](https://www.typescriptlang.org/) - De aproximativ un an am facut trecerea de la javascript la typescript, si avantajele sunt enorme. Pot spune ca in acest proiect typescript m-a salvat de multe buguri deoarece ma anunta de existenta lor la compile-time.
|
||||
- [Webpack](https://webpack.js.org/) & plugins & loaders pentru bundlingul asseturilor + code splitting.
|
||||
- [Babel](https://babeljs.io/) pentru a compila jsx, typescript si pentru compatibilitatea cu browsere mai vechi.
|
||||
- [React](https://reactjs.org/) & [React-dom](https://reactjs.org/docs/react-dom.html) & [React-router-dom](https://www.npmjs.com/package/react-router-dom) & [React-helmet](https://github.com/nfl/react-helmet) & [Material-ui](https://material-ui.com/) & [react-toastify](https://github.com/fkhadra/react-toastify) pentru ui. Aceste tehnologii au fost folosite pentru a creia bara laterala de pe partea dreapta, pagina /gates si pagina /info/:name. Mentionez ca rendarea, interactiunile (drag & drop, hotkeys, selection etc) intregii si simulatii sunt facute de la 0 fara a folosii nici una din aceste libarii.
|
||||
- [Github](https://github.com/) & [Git](https://git-scm.com/) - Git si github sunt niste unelte indispensabile pentru orice programator, si pot spune ca acest proiect a beneficiat mult deoarece am folosit aceste tehnologii. In primul rand, cu putin setup pot upolada pe heroku automat mereu cand rulez comanda `push` pe ramura `master`. In al doilea rand, la un moment dat laptopul meu a ramas fara baterie si inchizanduse cateva fisiere au fost corupte. Daca nu as fi folosit git acel incident mi-ar fi distru cateva ore de munca
|
||||
- [React](https://reactjs.org/) & [React-dom](https://reactjs.org/docs/react-dom.html) & [React-router-dom](https://www.npmjs.com/package/react-router-dom) & [React-helmet](https://github.com/nfl/react-helmet) & [Material-ui](https://material-ui.com/) & [react-toastify](https://github.com/fkhadra/react-toastify) pentru ui. Aceste tehnologii au fost folosite pentru a crea bara laterala de pe partea dreapta, pagina /gates si pagina /info/:name. Mentionez ca rendarea, interactiunile (drag & drop, hotkeys, selection etc) intregii simulatii sunt facute de la 0 fara a folosi nici una din aceste libarii.
|
||||
- [Github](https://github.com/) & [Git](https://git-scm.com/) - Git si github sunt niste unelte indispensabile pentru orice programator, si pot spune ca acest proiect a beneficiat mult deoarece am folosit aceste tehnologii. In primul rand, cu putin setup pot lansa pe heroku automat mereu cand rulez comanda `push` pe ramura `master`. In al doilea rand, la un moment dat laptopul meu a ramas fara baterie si inchizanduse cateva fisiere au fost corupte. Daca nu as fi folosit git acel incident mi-ar fi distru cateva ore de munca
|
||||
- [Visual studio code](https://code.visualstudio.com/) Am ales acest editor deoarece are cel mai bun suport pentru typescript existent la momentul actual.
|
||||
- [Eix-js](https://eix-js.github.io/core/) este un mic game engine pe care l-am scris impreuna cu un baiat de 13 ani din Rusia in timpul ludum-dare 44. In acest proiect am folosit modulul [utils](https://github.com/eix-js/utils) care ofera diferiti decoratori utili cum ar fi: [@Singleton](https://github.com/eix-js/utils/blob/master/src/modules/decorators/Singleton.ts) care imi permite sa modific automat constructorul unei clase in asa fel incat sa returneze mereu aceiasi instanta si [@CacheInstanceByKey](https://github.com/eix-js/utils/blob/master/src/modules/decorators/CacheInstancesByKey.ts) care imi permite sa ma asigur ca pentru fiecare cheie exista o singura instants existenta. Am extins si o implementare a unui [nod dintr-un cache LRU](https://github.com/eix-js/utils/blob/master/src/modules/classes/LruCache.ts) care mi-a permis sa ma asigur ca atunci cand mouseul este apasat interactiunea se va produce asupra componentului care este cel mai `aproape de utilizator` (sau care are pozitia pe axa Z cea mai mare).
|
||||
- [Rxjs](https://rxjs-dev.firebaseapp.com/) - Am folosit rxjs deoarece proiectul este construit folosind `programarea reactiva` (sau bazata pe streamuri). Programarea reactiva este bine cunoscuta deoarece face creerea de `memory leaks` foarte usoara, asa ca proiectul este scris cu mare grija pentru a prevenii orice posibil incident de acest tip.
|
||||
- [Eix-js](https://eix-js.github.io/core/) este un mic game engine pe care l-am scris impreuna cu un baiat de 13 ani din Rusia in timpul ludum-dare 44. In acest proiect am folosit modulul [utils](https://github.com/eix-js/utils) care ofera diferiti decoratori utili cum ar fi: [@Singleton](https://github.com/eix-js/utils/blob/master/src/modules/decorators/Singleton.ts) care imi permite sa modific automat constructorul unei clase in asa fel incat sa returneze mereu aceiasi instanta si [@CacheInstanceByKey](https://github.com/eix-js/utils/blob/master/src/modules/decorators/CacheInstancesByKey.ts) care imi permite sa ma asigur ca pentru fiecare cheie exista o singura instants existenta. Am extins si o implementare a unui [nod dintr-un cache LRU](https://github.com/eix-js/utils/blob/master/src/modules/classes/LruCache.ts) care mi-a permis sa ma asigur ca atunci cand mouseul este apasat, interactiunea se va produce asupra componentului care este cel mai `aproape de utilizator` (sau care are pozitia pe axa Z cea mai mare).
|
||||
- [Rxjs](https://rxjs-dev.firebaseapp.com/) - Am folosit rxjs deoarece proiectul este construit folosind `programarea reactiva` (sau bazata pe streamuri asincron). Programarea reactiva este bine cunoscuta deoarece face creerea de `memory leaks` foarte usoara, asa ca proiectul este scris cu mare grija pentru a preveni orice posibil incident de acest tip.
|
||||
- [Rxjs-hooks](https://github.com/LeetCode-OpenSource/rxjs-hooks) imi permite sa folosesc functia `useObservable()` cu ajutorul careia pot renda valorile streamurilor direct cu ajutorul React.
|
||||
- [express](https://expressjs.com/) pentru servirea asseturilor statice
|
||||
- [express](https://expressjs.com/) pentru servirea resurselor statice
|
||||
- [keycode](https://www.npmjs.com/package/keycode) pentru a transforma numele unei taste in codul potrivit (utilizat in rendarea combinatilor de taste sub butoane)
|
||||
- [mainloop.js](https://github.com/IceCreamYou/MainLoop.js?utm_source=recordnotfound.com) pentru a a rula cod de 60 ori pe secunda intr-o maniera eficienta. Mentionez ca singurul lucru care este rulat in acest mod este cel responsabil pentru rendarea simulatiei. Simularea portilor logice este facuta doar atunci cand ceva se schima si doar acolo unde ceva s-a schimbat folosing `programarea reactiva`.
|
||||
- [mainloop.js](https://github.com/IceCreamYou/MainLoop.js?utm_source=recordnotfound.com) pentru a rula cod de 60 ori pe secunda intr-o maniera eficienta. Mentionez ca singurul lucru care este rulat in acest mod este codul responsabil pentru rendarea simulatiei. Simularea portilor logice este facuta doar atunci cand ceva se schima si doar acolo unde ceva s-a schimbat.
|
||||
|
||||
## Testare
|
||||
|
||||
|
|
|
|||
|
|
@ -1,52 +1,48 @@
|
|||
# Running the simulator
|
||||
# Rularea simulatorului:
|
||||
|
||||
There are 3 ways to get the simulator up and running:
|
||||
Exista 3 metode de a rula simulatorul:
|
||||
|
||||
1. Using [the version hosted on heroku](https://logic-gate-simulator.herokuapp.com/):
|
||||
1. Folosind [versiunea hostata pe 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/)
|
||||
Aceasta este cea mai usoara solutie - tot ce trebuie sa faceti este sa deschideti
|
||||
[acest url](https://logic-gate-simulator.herokuapp.com/)
|
||||
|
||||
2. Using a development server:
|
||||
2. Folosind un server de dezvoltare:
|
||||
|
||||
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.
|
||||
Pentru inceput trebuie sa aveti [node.js & npm](https://nodejs.org/en/download/) si [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) instalate pe dizpozitiv.
|
||||
|
||||
Open a terminal in the desired folder and run:
|
||||
Deschideti un terminal, si introduceti urmatoarele comenzi:
|
||||
|
||||
```sh
|
||||
# Clone repo
|
||||
# Cloeaza repoul
|
||||
git clone https://github.com/Mateiadrielrafael/logicGateSimulator
|
||||
|
||||
# Cd into the folder
|
||||
# Cd in folder
|
||||
cd logicGateSimulator
|
||||
|
||||
# install dependencies
|
||||
# instaleaza librariile necesare
|
||||
npm install
|
||||
|
||||
# run development server
|
||||
# ruleaza serverul de dezvoltare
|
||||
npm run dev
|
||||
```
|
||||
|
||||
3. Building the simulation yourself
|
||||
Browserul va fi deschis automat la adresa serverului.
|
||||
|
||||
First, clone the repo and install the dependencies as explained in option 2.
|
||||
3. Prin compilarea locala a simulatorului
|
||||
|
||||
To build the source run:
|
||||
Pentru inceput, clonati repoul si instalati librariile dupa cum este explicat in optiunea 2.
|
||||
|
||||
Pentru a compila codul sursa, introduceti urmatoarea comanda:
|
||||
|
||||
```sh
|
||||
# build program
|
||||
npm run build
|
||||
```
|
||||
|
||||
To then run the simulation, use the start command:
|
||||
Pentru a rula simulatorul, rulati comanda:
|
||||
|
||||
```sh
|
||||
# instal nano-server globally
|
||||
npm start
|
||||
|
||||
# linux
|
||||
open http://localhost:5000
|
||||
|
||||
# Windows
|
||||
start http://localhost:5000
|
||||
```
|
||||
|
||||
Proiectul este acum accesibil sub portul `8080`
|
||||
|
|
|
|||
|
|
@ -1,24 +1,25 @@
|
|||
# Ghid de utilizare a aplicatiei
|
||||
|
||||
Pentru a explica utilizarea functilor de baza ale aplicatiei urmatoarea secventa va parcurge procesul de creeere a unui latch SR:
|
||||
Pentru a explica utilizarea functiilor de baza ale aplicatiei, urmatoarea secventa va parcurge procesul de creeere a unui latch SR:
|
||||
|
||||
1. Creeerea unei noi simulatii:
|
||||
|
||||
- se apasa butonul „Create new simulation” de pe bara din dreapta, se da click pe "project" si se tasteaza numele dorit.
|
||||
- se apasa butonul „Create simulation” de pe bara din dreapta, se da click pe "project" si se tasteaza numele dorit.
|
||||
|
||||
2. Adaugarea componentelor neccesare:
|
||||
|
||||
- se utilizeaza butonul „logic gate” bara de pe partea dreapta, si se adauga urmatoarele componente: 2 x „button” 2 x „light bulb” 2 x „nor gate”.
|
||||
- se utilizeaza butonul „logic gate” de pe bara din partea dreapta, si se adauga urmatoarele componente: 2 x „button” 2 x „light bulb” 2 x „nor gate”.
|
||||
|
||||
3. Conectarea componentelor:
|
||||
|
||||
- pentru a crea un cablue se apasa pe 2 pini (unul de input si unul de output)
|
||||
- pentru a crea un cablu se apasa pe 2 pini (unul de input si unul de output)
|
||||
- pentru a sterge un cablu se apasa pe pinul de output al cablului
|
||||
- pentru a misca un component se utilizeaza butonul din stanga al mouseului
|
||||
- se conecteaza componentele in cunoscuta configuratie a latchului SR:
|
||||
|
||||
|
||||
|
||||
- prin apasarea butoanelor se poate testa latchul, care ar trebui sa respecte cunosctul tablel:
|
||||
- prin apasarea butoanelor se poate testa latchul, care ar trebui sa respecte cunosctul tablel de adevar:
|
||||
|
||||
| S | R | Q | not Q |
|
||||
| :-: | :-: | :---: | ----- |
|
||||
|
|
|
|||
Loading…
Reference in a new issue