From 1148b33d58d116c3a97d3fd3b4f3d3e72d25a377 Mon Sep 17 00:00:00 2001 From: Niladri Adhikary <91966855+niladrix719@users.noreply.github.com> Date: Sun, 1 Sep 2024 22:40:45 +0530 Subject: [PATCH] Added blog phase 1 + Final Report Niladri Adhikary - Vue Simulator (#222) * Added blog phase 1 report Niladri Adhikary - Vue Simulator * updated blog * Niladri Adhikary GSoC Final Report --- content/author/niladri-adhikary.md | 11 + .../posts/Niladri_Adhikary_Final_Report.md | 206 +++++++++++++++++ content/posts/Niladri_Phase_1_Report.md | 211 ++++++++++++++++++ static/images/authors/niladri.jpg | Bin 0 -> 211783 bytes static/images/niladri-cover.png | Bin 0 -> 122204 bytes static/images/niladri_GSoC24/embed1.avif | Bin 0 -> 12563 bytes static/images/niladri_GSoC24/embed2.avif | Bin 0 -> 22954 bytes static/images/niladri_GSoC24/layout1.avif | Bin 0 -> 9322 bytes static/images/niladri_GSoC24/mini1.avif | Bin 0 -> 2480 bytes static/images/niladri_GSoC24/mobile-view1.png | Bin 0 -> 70862 bytes static/images/niladri_GSoC24/mobile-view2.png | Bin 0 -> 85685 bytes static/images/niladri_GSoC24/mobile-view3.png | Bin 0 -> 70766 bytes static/images/niladri_GSoC24/testbench1.avif | Bin 0 -> 20029 bytes static/images/niladri_GSoC24/testbench2.avif | Bin 0 -> 13129 bytes static/images/niladri_GSoC24/testing1.avif | Bin 0 -> 6690 bytes static/images/niladri_GSoC24/testing2.png | Bin 0 -> 15196 bytes static/images/niladri_GSoC24/testing3.avif | Bin 0 -> 20265 bytes static/images/niladri_GSoC24/testing4.avif | Bin 0 -> 33795 bytes static/images/niladri_GSoC24/timing1.avif | Bin 0 -> 5648 bytes static/images/niladri_GSoC24/timing2.avif | Bin 0 -> 23678 bytes 20 files changed, 428 insertions(+) create mode 100644 content/author/niladri-adhikary.md create mode 100644 content/posts/Niladri_Adhikary_Final_Report.md create mode 100644 content/posts/Niladri_Phase_1_Report.md create mode 100644 static/images/authors/niladri.jpg create mode 100644 static/images/niladri-cover.png create mode 100644 static/images/niladri_GSoC24/embed1.avif create mode 100644 static/images/niladri_GSoC24/embed2.avif create mode 100644 static/images/niladri_GSoC24/layout1.avif create mode 100644 static/images/niladri_GSoC24/mini1.avif create mode 100644 static/images/niladri_GSoC24/mobile-view1.png create mode 100644 static/images/niladri_GSoC24/mobile-view2.png create mode 100644 static/images/niladri_GSoC24/mobile-view3.png create mode 100644 static/images/niladri_GSoC24/testbench1.avif create mode 100644 static/images/niladri_GSoC24/testbench2.avif create mode 100644 static/images/niladri_GSoC24/testing1.avif create mode 100644 static/images/niladri_GSoC24/testing2.png create mode 100644 static/images/niladri_GSoC24/testing3.avif create mode 100644 static/images/niladri_GSoC24/testing4.avif create mode 100644 static/images/niladri_GSoC24/timing1.avif create mode 100644 static/images/niladri_GSoC24/timing2.avif diff --git a/content/author/niladri-adhikary.md b/content/author/niladri-adhikary.md new file mode 100644 index 0000000..8630639 --- /dev/null +++ b/content/author/niladri-adhikary.md @@ -0,0 +1,11 @@ ++++ +title = "Niladri Adhikary" +image = "/images/authors/niladri.jpg" +description = "Curious traveler in the vast universe of programming" ++++ + +### Hi, I'm Niladri Adhikary - [niladrix719](https://gitHub.com/niladrix719) ๐Ÿ‘‹ + +Google Summer of Code 2024 @ CircuitVerse || CSE 25' UEMK + +[![GitHub](https://img.shields.io/badge/github-%23121011.svg?style=for-the-badge&logo=github&logoColor=white)](https://github.com/niladrix719) \ No newline at end of file diff --git a/content/posts/Niladri_Adhikary_Final_Report.md b/content/posts/Niladri_Adhikary_Final_Report.md new file mode 100644 index 0000000..564ac81 --- /dev/null +++ b/content/posts/Niladri_Adhikary_Final_Report.md @@ -0,0 +1,206 @@ +--- +title: "CircuitVerse Vue Simulator: Final Report (GSoC 2024)" +date: 2024-08-26T02:00:00+05:30 +author: Niladri Adhikary +type: post +--- + +![gsoc-cover](/images/niladri-cover.png) + +This blog post is the final report for the **CircuitVerse Vue Simulator** project, which was part of **Google Summer of Code 2024**. The project aimed to complete the new Vue-based simulator for CircuitVerse, a digital logic simulator. + +## Table of Contents + +{{< toc >}} + +### Project Goals - + +--- + +1. Fixing existing bugs and Completing the implementation of simulator components +2. Designing and implementing a better UI/UX for the mobile version +3. TypeScript Transition, jQuery Elimination, Transferring all DOM manipulations +4. Developing a comprehensive test suite for the Vue simulator +5. Moving the CSS styles and Finishing refactoring the codebase +6. Integrating stability improvements and addressing any performance issues +7. Merging updates and bug fixes from the main CircuitVerse repository + +--- + +### ๐Ÿ”น Fixing existing bugs and Completing the implementation of simulator components ๐Ÿ”€ + +Fixing existing bugs and completing the implementation of remaining simulator components was the primary goal of the Task. + +This included conversion of the following components: + +1. `Layout Elements Panel` +3. `TestBench Panel` +4. `TestBench Creator` +5. `TestBench Validator` +6. `Alert Message Box` + +![image](/images/niladri_GSoC24/testbench2.avif) + +Some Bug fixes that were done: + +1. Fixed mini map rendering issue +2. Fixed Timming Diagram Buttons not working + +### ๐Ÿ”น Designing and implementing a better UI/UX for the mobile version ๐Ÿ“ฑ + +The mobile version of the vue simulator was not implemented. The goal was to make the simulator responsive and mobile-friendly. + +Mobile components that were implemented: + +1. `Circuit Elements Mobile Panel` +2. `Properties Mobile Panel` +3. `Timing Diagram Mobile Panel` +4. `Quick Buttons Mobile Panel` +5. `Verilog Editor Mobile Panel` +6. `Mobile Sidebar` and `User Menu` + +![image](/images/niladri_GSoC24/mobile-view1.png) + +![image](/images/niladri_GSoC24/mobile-view2.png) + +![image](/images/niladri_GSoC24/mobile-view3.png) + +Some features that were implemented: + +1. Touch support for mobile +2. Pinch to zoom +3. Multiple Selection Button +4. Copy & Paste Button + +### ๐Ÿ”น TypeScript Transition, jQuery Elimination, Transferring all DOM manipulations ๐Ÿ›  + +The goal was to convert the existing codebase to TypeScript and eliminate jQuery from the codebase. Also, all DOM manipulations were to be transferred to Vue. + +The following components were converted to TypeScript: + +1. `Project.ts` +2. `Utils.ts` +3. `Testbench.ts` +4. `OpenOffline.vue` +5. `plotArea.ts` +6. `TimingDiagramPanel.vue` +7. `app.ts` +8. `arrayHelper.ts` +9. `backgroundArea.ts` +10. `data.ts` +11. `moduleSetup.ts` +12. `sequential.ts` +13. `verilogHelpers.ts` +14. `Circuit.ts` +15. `eventQueue.ts` +16. `quinMcCluskey.ts` +17. `customThemeAbstraction.ts` +18. `applyTheme.vue` +19. `layoutMode.ts` +20. `layoutNode.ts` +21. `layoutBuffer.ts` + +Also all the DOM manipulations were transferred to respective Vue components eliminating jQuery. + +### ๐Ÿ”น Developing a comprehensive test suite for the Vue simulator ๐Ÿงช + +The goal was to develop a comprehensive test suite for the Vue simulator. + +Implemented Test cases for the Vue simulator using + +- `Vitest` +- `JsDOM` +- `@vue/test-utils` + +Implementation of test cases: + +Created a testing environment using Vitest and JsDOM, configured in the **vite.config.ts** file. + +![image](/images/niladri_GSoC24/testing1.avif) + +Wrote all the test cases under the **/spec** folder using Vitest and mounted the components them using **@vue/test-utils**. + +![image](/images/niladri_GSoC24/testing2.png) + +![image](/images/niladri_GSoC24/testing3.avif) + +Created a **/testdata** folder under the spec folder for storing the testing data + +Created a **/circuits** folder to keep all the circuits elements data + +After implementing all this we can finally run our test cases using **npm run test** cmd + +![image](/images/niladri_GSoC24/testing4.avif) + +### ๐Ÿ”น Moving the CSS styles and Finishing refactoring the codebase ๐ŸŽจ + +The goal was to move the Global CSS styles to the Vue components Scoped CSS and finish refactoring the codebase. + +The following Global CSS styles were moved to the Vue components: + +- `UX.css` +- `main.stylesheet.css` + +### ๐Ÿ”น Integrating stability improvements and addressing any performance issues ๐Ÿš€ + +The goal was to integrate stability improvements and address any performance issues. + +Some of the stability improvements that were done: + +1. Added helpful functions for debugging of circuit +2. Moving a component mess up the connected wires +3. Implemented state machine for simulator +4. Change the implementation of the priority queue to use a heap data structure + +### ๐Ÿ”น Merging updates and bug fixes from the main CircuitVerse repository ๐Ÿ”„ + +The goal was to merge updates and bug fixes from the main CircuitVerse repository. + +- Advance Options for embed view implemented + +The embedded view of CircuitVerse circuits can be used to display circuits in an iframe on other websites. + +![image](/images/niladri_GSoC24/embed1.avif) + +By clicking the Embed button on the bottom right, a dialog box can be opened, allowing the user to create a customised embed view for the circuit. + +- Since decoupling of the new vue simulator some updates and bug fixes were made in the main simulator that were merged to the new Vue simulator. + +### ๐Ÿ”น Future Work ๐Ÿ“… + +- Finishing up the typescript integration. +- Creating the desktop application. + +### ๐Ÿ”น Pull Requests ๐Ÿ“ฅ + +**Some of the major PRs that were created during the project period:** + +- [Advance options for embed view](https://github.com/CircuitVerse/cv-frontend-vue/pull/312) +- [Timing Diagram increase decrease buttons](https://github.com/CircuitVerse/cv-frontend-vue/pull/313) +- [Implemented LayoutElements Panel vue component](https://github.com/CircuitVerse/cv-frontend-vue/pull/317) +- [TestBench (Creator, Panel, Validator, DialogBox) Vue Component Implemented](https://github.com/CircuitVerse/cv-frontend-vue/pull/323) +- [Mobile view Implementation for vue simulator](https://github.com/CircuitVerse/cv-frontend-vue/pull/361) +- [Global styles moved to component scoped styles](https://github.com/CircuitVerse/cv-frontend-vue/pull/365) +- [Testcases for vue simulator [Vitest]](https://github.com/CircuitVerse/cv-frontend-vue/pull/364) +- [ts + vue integration and jquery removal in layout files](https://github.com/CircuitVerse/cv-frontend-vue/pull/341) +- [ts integration, jquery migration to vue's reactives for plotArea and Timing Diagram panel](https://github.com/CircuitVerse/cv-frontend-vue/pull/329) +- [Added helpful functions for debugging of circuit](https://github.com/CircuitVerse/cv-frontend-vue/pull/366) +- [Moving a component mess up the connected wires](https://github.com/CircuitVerse/cv-frontend-vue/pull/367) +- [Implemented state machine for simulator](https://github.com/CircuitVerse/cv-frontend-vue/pull/368) +- [Change the implementation of the priority queue to use a heap data structure](https://github.com/CircuitVerse/cv-frontend-vue/pull/369) + +### ๐Ÿ”น blogs ๐Ÿ“ + +[**Phase 1 blog GSoC@24 Niladri Adhikary**](https://blog.circuitverse.org/posts/niladri_phase_1_report/) + +- `week 0` - [GSoC@24 - Community Bonding](https://dev.to/niladri_adhikary_f11402dc/gsoc24circuitverse-week-0-community-bonding-1pni) +- `week 1 & 2` - [GSoC@24 - week 1&2 blog](https://dev.to/niladri_adhikary_f11402dc/gsoc24circuitverse-week-1-2-37gj) +- `week 3 & 4` - [GSoC@24 - week 3&4 blog](https://dev.to/niladri_adhikary_f11402dc/gsoc24circuitverse-week-3-4-21fg) +- `week 5 & 6` - [GSoC@24 - week 5&6 blog](https://dev.to/niladri_adhikary_f11402dc/gsoc24circuitverse-week-5-6-44hd) +- `week 7 & 8` - [GSoC@24 - week 7&8 blog](https://dev.to/niladri_adhikary_f11402dc/gsoc24circuitverse-week-7-8-33ig) +- `week 9 & 10` - [GSoC@24 - week 9&10 blog](https://dev.to/niladri_adhikary_f11402dc/gsoc24circuitverse-week-9-10-45me) +- `week 11 & 12` - [GSoC@24 - week 11&12 blog](https://dev.to/niladri_adhikary_f11402dc/gsoc24circuitverse-week-11-12-2p4h) + +### ๐Ÿ”น Conclusion โœ… + +The project was successfully completed and all the goals were achieved. The new Vue simulator is now ready to be integrated into the main CircuitVerse repository. The project was a great learning experience and I would like to thank my mentors for their guidance and support throughout the project. I would also like to thank Google for giving me this opportunity to work on such an amazing project. diff --git a/content/posts/Niladri_Phase_1_Report.md b/content/posts/Niladri_Phase_1_Report.md new file mode 100644 index 0000000..d02a4e6 --- /dev/null +++ b/content/posts/Niladri_Phase_1_Report.md @@ -0,0 +1,211 @@ +--- +title: "CircuitVerse Vue Simulator: Phase 1 Report (GSoC 2024)" +date: 2024-07-25T18:06:50+05:30 +author: Niladri Adhikary +type: post +--- + +![gsoc-cover](/images/niladri-cover.png) + +It's been 8 weeks, and We have completed our first phase of GSoC. Throughout this phase, We have been working on the Vue Simulator for CircuitVerse. I learned a lot about Vue.js and TypeScript, and We have made significant progress in the project. We had to extend my phase 1 to 8 weeks due to exams, which gave me the time to complete this phase. During this time I really enjoyed working on the project and learned a lot of new things. I am looking forward to the next phase of the project. + +## Project Overview ๐Ÿ“‹ + +The main goal of this project is to create a new simulator for CircuitVerse using Vue.js, which will be more interactive and user-friendly. The new simulator will be more efficient and will provide a better user experience. We have been working on this project for the past 8 weeks and We have made significant progress. We have completed the first phase of the project and We am happy with the progress We have made so far. + +[GSoC-Project](https://summerofcode.withgoogle.com/programs/2024/projects/ZzPe11H4) + +During the past 8 weeks, My primary focus was to convert all the remaining components to vue components, and move all updates and bug fixes from main repository, during the last few weeks We focused on converting all jquery DOM manipulations to vue'reactives and typescipe integration. + +## Community Bonding Period ๐Ÿ™ ~ (May 1 - May 26) + +At first, We had a meeting with my project mentors to plan the timeline and discuss some decisions required based on my GSoC proposal. We decided to finish up some small bug fixes and minor updates during the community bonding period itself, some of them are :- + +- Advance Options for embed view implemented. +- Fix for Timing Diagram increase decrease buttons. +- A PR for all bug fixes and updates from the main repo. It is a single PR for all the updates that can be directly applied to the Vue simulator without any changes, with different commit for each issue. + +#### Advance Options for embed view implemented + +The embedded view of CircuitVerse circuits can be used to display circuits in an iframe on other websites. + +![image](/images/niladri_GSoC24/embed1.avif) + +By clicking the Embed button on the bottom right, a dialog box can be opened, allowing the user to create a customised embed view for the circuit. + +![image](/images/niladri_GSoC24/embed2.avif) + +As you can see in the Advance option section user gets to decide which properties should be there in the embed view. + +The Embed view Advance option was already implemented in the previous year GSoC i.e in GSoCโ€™22 by this PR โ€” Link, now was the time to implement the same in the Vue Simulator. The implementation was a bit different, as we could now use Vueโ€™s reactive nature to make the task easier. + +In the embed Component we will get the preference data from the params using the `useRoute` method. + +#### Fix for Timing Diagram increase decrease buttons +Previously, the increase and decrease buttons of the timing diagram were not working. + +![image](/images/niladri_GSoC24/timing1.avif) + +#### A PR for all bug fixes and updates from the main repo +Since decoupling of the new vue simulator some updates and bug fixes were made in the main simulator which needs to be updated in the vue simulator. + +It is a single PR for all the updates that can be directly applied to the Vue simulator without any changes, with different commit for each issue. + +**References** +- [feat(gsoc'24): Advance options for embed view](https://github.com/CircuitVerse/cv-frontend-vue/pull/312) +- [fix(gsoc'24): Timing Diagram increase decrease buttons](https://github.com/CircuitVerse/cv-frontend-vue/pull/313) +- [fix(gsoc'24): updates and bug fixes from the main simulator](https://github.com/CircuitVerse/cv-frontend-vue/pull/314) + +## Coding Period ~ Phase 1 ๐Ÿ’ป + +After susscessfully completing the community bonding period, which was quite productive, We started with the coding period, where We did tasks weekly for 8 weeks. + +We had lots of meetings and discussions with my mentors, which helped me a lot in understanding the codebase and the project requirements. + +#### Week 1 & 2 (May 27 - June 9) + +A lot of work has been done on understanding the codebase, creating new Vue components, and eliminating bugs. + +The main goal of this task was to achieve: +- Implementation of LayoutElements Panel Vue Component +- Fixed Mini Map not rendering Issue + +#### Implementation of LayoutElements Panel Vue Component +Previously, the LayoutElements Panel was in the extra.vue file. + +First, We created a new Vue file for the LayoutElements Panel and moved the HTML part inside the `