|
1 | | -# GSoC'22 Project - [WIP]VueJS Simulator |
2 | | - |
3 | | -## New Frontend Framework for Simulator UI. |
4 | | -- [Phase-1 Report](https://blog.circuitverse.org/posts/devjitchoudhury_gsoc22_phase1_report/) |
5 | | -- [Phase-2 Report](https://blog.circuitverse.org/posts/devjitchoudhury_gsoc22_phase2_report/) |
6 | | - |
7 | | -### Project Goals - |
8 | | -1. Replacing JqueryUI with a modern frontend framework. |
9 | | -2. Decoupling the Simulator from backend |
10 | | -3. Dividing into Components |
11 | | -4. State Management |
12 | | -5. Refactoring CSS |
13 | | -6. Internationalization using Vue-i18n |
14 | | - |
15 | | - |
16 | | -### To Dos - |
17 | | -1. **Vue Project Integration** into the Main Repository or finding a way for the simulators in two different repositories to work in sync. |
18 | | -2. **API Integration and Testing** |
19 | | -3. **Embed Feature** - Discuss and implement the embeding of circuits feature. |
20 | | -4. **Internationalization of Simulator** - Internationalization is already set up using Vue-i18n but progressive work needs to be done on it. |
21 | | -5. **Refactoring of Styles** - Refactor the global stylesheet to local stylesheets for individual components. There is also a scope of removing SASS using modern CSS features. |
22 | | -6. Few components - Verilog Module, Quick-Button, Testbench, and Timing-Diagram are yet to be converted to Vue. |
23 | | -7. With the removal of jQuery-UI, there is also a scope of removing the use of jQuery from the project. |
| 1 | +<div align="center"> |
| 2 | + <img src="https://github.com/CircuitVerse/CircuitVerse/raw/master/app/assets/images/cvlogo.svg" alt="The CircuitVerse logo" width="400"/> |
| 3 | +</div> |
| 4 | + |
| 5 | +# CircuitVerse Frontend Vue |
| 6 | +[CircuitVerse Frontend Vue](https://circuitverse.netlify.app/simulatorvue) is dedicated to enhancing the CircuitVerse platform in several key ways. Our primary focus is on decoupling the [CircuitVerse Simulator](https://circuitverse.org/simulator) from the backend, allowing it to function independently and with greater flexibility. Additionally, we're working to remove the reliance on jQueryUI, opting for cleaner and more contemporary code practices. To improve performance and code readability, we're transitioning from traditional DOM mutations to string-based manipulation. Furthermore, we're actively integrating internationalization features to ensure the platform is accessible to users worldwide. In summary, our repository aims to elevate the capabilities and user experience of CircuitVerse through targeted improvements and optimizations. |
| 7 | + |
| 8 | +## Community |
| 9 | +We would love to hear from you! We communicate on Slack: |
| 10 | + |
| 11 | +[](https://join.slack.com/t/circuitverse-team/shared_invite/zt-p6bgler9-~8vWvsKmL9lZeYg4pP9hwQ) |
| 12 | + |
| 13 | +## Installation |
| 14 | +To set up the project on your local machine, follow these steps: |
| 15 | + |
| 16 | + 1. Clone the repository to your local machine using the following command: |
| 17 | + ``` |
| 18 | + git clone https://github.com/CircuitVerse/cv-frontend-vue.git |
| 19 | + ``` |
| 20 | + 2. Navigate to the project directory: |
| 21 | + ``` |
| 22 | + cd cv-frontend-vue |
| 23 | + ``` |
| 24 | + 3. Install the project dependencies: |
| 25 | + ``` |
| 26 | + npm install |
| 27 | + ``` |
| 28 | + 4. Start the development server: |
| 29 | + ``` |
| 30 | + npm run dev |
| 31 | + ``` |
| 32 | + |
| 33 | +## Setting up on cloud with Stackblitz |
| 34 | +[StackBlitz](https://developer.stackblitz.com/guides/user-guide/what-is-stackblitz) is an instant fullstack web IDE for the JavaScript ecosystem. |
| 35 | + |
| 36 | + 1. Initiate the setup process by clicking on the following button: |
| 37 | + |
| 38 | + [](https://stackblitz.com/~/github.com/CircuitVerse/cv-frontend-vue) |
| 39 | + |
| 40 | + 2. Once the setup is complete, a Preview URL will be displayed in the browser window. Append `/simulatorvue/` to your URL to access the simulator. |
| 41 | + ``` |
| 42 | + https://<preview_url>/simulatorvue/ |
| 43 | + ``` |
| 44 | + |
| 45 | +## How to Use Vue Simulator with CircuitVerse Main Repo |
| 46 | +To access the Vue Simulator from the [CircuitVerse main repo](https://github.com/CircuitVerse/CircuitVerse) dev server, you can follow one of the following methods: |
| 47 | + |
| 48 | +### Accessing Vue Simulator |
| 49 | + 1. Start the CircuitVerse Main Repo dev server. |
| 50 | + 2. go to the `/vuesimulator` path in the dev server. |
| 51 | + 3. You would be accessing the Vue Simulator. |
| 52 | + |
| 53 | +### Setting Vue Simulator as Default |
| 54 | + 1. Log in to the CircuitVerse dev server using the admin account: |
| 55 | + |
| 56 | + - **Password:** `password` |
| 57 | + 2. Once logged in, go to `/flipper` path and turn on vuesim feature flag site wide or for your user. |
| 58 | + 3. After activation, you will be able to access the Vue Simulator site-wide in your dev server, also in `/simulator` path the Vue Simulator will be opening instead of the old simulator. |
| 59 | + |
| 60 | +## Code of Conduct |
| 61 | +We follow the [Code of Conduct](https://github.com/CircuitVerse/CircuitVerse/blob/master/code-of-conduct.md) of the [CircuitVerse](https://circuitverse.org) Community. |
| 62 | + |
| 63 | +## Contributing |
| 64 | +See [`CONTRIBUTING.md`](https://github.com/CircuitVerse/CircuitVerse/blob/master/CONTRIBUTING.md) for more information on contributing to CircuitVerse. |
| 65 | + |
| 66 | +## License |
| 67 | +This project is licensed under the [MIT License](LICENSE). |
| 68 | + |
| 69 | +## To Dos - |
| 70 | +1. **Creating the mobile version of the vue simulator** |
| 71 | +2. **Testing and bug fixing** |
| 72 | +3. **Typescript integration & style Refactoring** |
| 73 | +4. **Creating the desktop application** |
| 74 | +5. **Removing JQuery** |
0 commit comments