GSoC 2022 CircuitVerse | 3주 차 보고서

CircuitVerse를 사용하여 GSoC 환경에서 한 달이 지났으며 지금까지는 훌륭합니다.
이번 주에 저는 다음을 수행했습니다.
  • Support Multiple Mentors PR의 충돌을 수정합니다.
  • 작업 Improve Embed Feature PR .
  • 모든 기능의 UI를 검토하고 논의했습니다.

    지난 주에 PRSupport Multiple Mentors의 요청된 기능을 완료했지만 하나의 커밋이 마스터로 병합된 후 이 PR의 파일과 많은 충돌RoboCup이 있었습니다. 따라서 나는 그것들을 해결했고 충돌하는 모든 파일을 고칠 수 있었습니다. PR이 거의 준비되었으며 이제 CircuitVerse Mobile-App으로 실행 가능성을 확인하고 있습니다.
    이번 주에는 Improve Embed Feature 에 대한 Kartikay(기여자)의 PR 작업을 했습니다. 기능에 대한 설명을 확인하십시오here . 작업한 항목:
  • 기존 UI 개선.
  • 일부 오타가 있습니다.
  • 팝업을 레일Component 보기 형식으로 구현합니다.
  • 번역이 추가되었습니다.
  • 코드를 추가하고 project_controller(stimulus)로 전송합니다.
  • 다음을 활성화/비활성화하는 고급 기능이 추가되었습니다.
    - 줌인아웃 기능
    - 전체 화면 버튼
    - 시계/시간 버튼
    - 표시 제목
  • 임베드 회로에 대해 다른 내장 테마를 선택하는 기능이 추가되었습니다.
    다음과 같습니다.

    > 고급 옵션

    어떻게 작동합니까?
    CircuitVerse의 훌륭한 기여자들은 embed.js 기능으로 태클하기 위한 embedListener.jsembed 파일을 만들었습니다. 그래서 나는 data-controller=projects에 연결된 구성 요소 보기에서 기본값으로 일부 입력 필드를 만들었고 projects_controller 해당 입력 필드에서 값을 가져오고 사용자가 해당 Publish 버튼을 누른 후 코드를 작성해야 합니다. 컨트롤러의 함수는 각 입력에서 값을 가져와 변수에 저장하고 마지막으로 URL의 값을 가져오기 위해 전달된 query parameters와 함께 embed.js 변수를 만들었습니다. URL은 다음과 같습니다.

  • const url = `${document.querySelector('#url').value}?theme=${theme}&display_title=${displayTitle}&clock_time=${clockTimeEnable}&fullscreen=${fullscreen}&zoom_in_out=${zoomInOut}`;
    
    embed.js에서 다음을 사용하여 해당 매개변수에 액세스했습니다.

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


    특정 값을 검색하려면 다음과 같이 사용합니다.const fullscreen = params.get('fullscreen');이것이 이번 주 작업의 전부였습니다. 나는 많은 것을 배웠고 결론을 내렸다 anything can done be using javascript. Javascript OP!!!

    다음 주 계획


  • 포함 PR 개선을 완료합니다.
  • Weekly Contest 작업을 시작하십시오.
  • 좋은 웹페이지 즐겨찾기