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, 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.

import { useRoute } from 'vue-router'

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.

<div v-if="hasZoomInOut.value" id="zoom-in-out-embed" class="zoom- wrapper">

You can checkout the Pull Request here — https://github.com/CircuitVerse/cv-frontend-vue/pull/312

Fix for Timing Diagram increase decrease buttons

Previously, the increase and decrease buttons of the timing diagram were not working.

Using Vue's reactives fixed the problem, link to the PR - https://github.com/CircuitVerse/cv-frontend-vue/pull/313

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 - https://github.com/CircuitVerse/cv-frontend-vue/pull/314

Conclusion

I have learned a lot more about the codebase and good practices. It was a good start, and I am now more excited to move on to the next tasks. Thanks to all my mentors who helped me plan the timeline for tasks; it helped me get a good start.