Hi Everyone, I am Niladri Sekhar Adhikary, a B.Tech Computer Science student from Kolkata. I will be sharing my community bonding period for GSoC this year. To be honest, I was already somewhat familiar with the CircuitVerse community when I first got selected, thanks to my prior contributions which helped me get to know CircuitVerse and its community well. As a result, my community bonding period focused more on planning the timeline and getting ready for coding.
At first, I 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.
Here are some Pull Requests I created during Community Bonding Period:-
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. It is currently in draft state, and I am working on transferring all the updates one by one, with different commit for each issue — Link.
Advance Options for embed view implemented
The embedded view of CircuitVerse circuits can be used to display circuits in an iframe on other websites.
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.
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.
const route = useRoute()
const hasDisplayTitle = ref(route.query.display_title ? route.query.display_title === ‘true‘ : false);
const hasClockTime = ref(route.query.clock_time ? route.query.clock_time === ‘true‘ : true);
const hasFullscreen = ref(route.query.fullscreen ? route.query.fullscreen === ‘true‘ : true);
const hasZoomInOut = ref(route.query.zoom_in_out ? route.query.zoom_in_out === ‘true‘ : true);
Then we can use data to conditionally render components.
You can checkout the Pull Request here — https://github.com/CircuitVerse/cv-frontend-vue/pull/312
