GSoC 2022 CircuitVerse | Week 3 Report

It's been a month in the GSoC environment with CircuitVerse and it's great so far. This week I did the following:

• Fixes the conflicts of Support Multiple Mentors PR.
• Worked on Improve Embed Feature PR.
• Reviewed and discussed the UI of all the features.

The previous week, I have done with the requested functionality of the PR Support Multiple Mentors but after one commit merged into master, there was a lot of RoboCup conflicting with the files of this PR. Hence, I solved them and was able to fix all the conflicting files. The PR is almost ready and now we are checking its feasibility with CircuitVerse Mobile-App.

This week, I worked on the PR by Kartikay(contributor) for Improve Embed Feature. Check out the description of the feature here. I have worked on:

• Improving the existing UI.
• Some typos.
• Implement popup in form of Rails Component view.
• Added translation.
• added and transfer the code to project_controller(stimulus).
• Added Advance feature to enable/disable:  - Zoom-in-out feature  - Fullscreen button  - Clock/Time button  - Display Title
• Added feature to choose different built-in themes for embed circuit.

It looks like this:

Advance Option

So, how it is working?

CircuitVerse awesome contributors have made embed.js and embedListener.js files for tackling with the embed feature. So I have made some input fields with default values in component views which are connected to data-controller=projects and in projects_controller I have to write code to get the value from those input fields and after the user hits that Publish button, the function in controller takes the values from each input and save it to the variable and finally made a URL variable along with query parameters passed to fetch the values in embed.js. The URL looks like this:

const url = `${document.querySelector('#url').value}?theme=${theme}&display_title=${displayTitle}&clock_time=${clockTimeEnable}&fullscreen=${fullscreen}&zoom_in_out=${zoomInOut}`;

and in embed.js I accessed those parameters using this:

const params = new URLSearchParams(window.location.search);

and to retrieve certain values I use something like this: const fullscreen = params.get('fullscreen');

So that was all about this week's work. I learned a lot and concluded that

anything can be done using javascript. Javascript OP!!!

Next Week Plan

• Complete Improve embed PR.
• Start working on Weekly Contest.