대표 이미지콘테스트 참가 = 프로젝트 생성
이 콘테스트에 참가신청을 하시면 하나의 프로젝트가 생성됩니다. 콘테스트 프로젝트 완성단계 [3개의 Quest]를 완료하면서 점진적으로 프로젝트를 완성해 나갑니다. 완성된 프로젝트는 e4ds make platform 에서 여러분의 포트폴리오로 활용할 수 있습니다.
참가 신청
참가 신청을 하시고, 회원님의 콘테스트 프로젝트를 생성하세요.
단계별 완성
Quest를 순차적으로 완료하며 프로젝트를 완성시켜 나갑니다.
커리어 아카이빙
자신의 기술 자산 포트폴리오로 활용하세요.
STM32 퀘스트: GFX 챌린지
-
콘테스트 요약
- 콘테스트 형식 : 퀘스트 형
- 콘테스트 명 : STM32 퀘스트: GFX 챌린지
- 참가자 모집 기간 : 2023년 6월 12일 (월) ~ 7월 2일 (일)
- 콘테스트 진행 기간 : 2023년 7월 3일 (월) ~ 9월 3일 (일)
※ Quest 1 기간에도 참가 신청이 가능합니다.
-
콘테스트 소개
STM32 TouchGFX와 관련된 3개의 퀘스트가 주어집니다. 참가자는 통과 조건에 맞게 퀘스트를 수행해야 하며, 직전의 퀘스트를 통과한 참가자만이 다음 퀘스트에 도전할 수 있습니다.퀘스트는 TouchGFX와 함께 특정 플랫폼 보드를 활용하여 진행할 수 있으며, 플랫폼 보드는 일부 참가자에게 무상으로 지급됩니다. (아래 '플랫폼 보드 안내' 참고)
파이널 퀘스트(Quest 3)까지 수행하신 참가자 분들의 결과물은 ST 담당자의 심사 기준에 따라 채점하여, 최종 수상자를 선정합니다.
마지막까지 참가자 분들의 건투를 빕니다.
-
심사 기준
복잡도/완성도 (30%) UI의 종합적인 복잡도와 완성도를 평가합니다. 디자인 (20%) UI 디자인의 화려함, 편리함과 효율성을 고려하여 평가합니다. 주변 장치 상호작용 (20%) 보드의 주변 장치를 효과적으로 사용했는지를 고려하여 평가합니다. 주변 장치 없이 GUI를 만들면, 이 항목에서 낮은 평가를 받게 됩니다. 참여도 (20%) 제출된 문서의 수준과 타인의 개입 여부를 고려하여 평가합니다. 또한, 최종 설문을 성의 있게 작성하는 것도 중요합니다. 부정적인 피드백도 수용하며, 건설적인 피드백 부탁드립니다. 애플리케이션 (10%) 적용한 애플리케이션의 연관도를 평가합니다.
다음의 애플리케이션(웨어러블, 가정용, 산업용, 의학용) 유형들과 일치해야 합니다.
-
퀘스트 수행 방법
① 콘테스트 홈 → ② 퀘스트 확인 → ③ 퀘스트 수행하기 → ④ 작성 후 제출하기
-
플랫폼 보드 안내
Quest 3 에서 플랫폼 보드(STM32H750-DK)를 활용하는 퀘스트가 주어질 예정입니다.
해당 보드는 Quest 1을 통과한 20명의 참가자에게 무상 지급되며,
이때 통과한 참가자가 20명 이상일 경우, 제출하신 내용 및 순서에 따라 선정하여 지급될 예정입니다.
만일 통과하였으나 보드를 받지 못하신 분들도 해당 보드를 가지고 있다면 계속 도전을 이어나가실 수 있습니다.
※ 보드는 Quest 2 기간에 발송될 예정입니다.
-
우승자 혜택
진행 일정
참가 접수
프로젝트 생성
Quest 1 제출
TouchGFX Designer 환경 활용하기
Quest 2 제출
STM32H750-DK로 UI 개발하기
결과 발표
Quest는 프로젝트를 완성하는 단계별 여정입니다
각 Quest는 독립된 제출물이 아닌, 하나의 프로젝트를 발전시키는 과정입니다. Quest 1에서 시작한 프로젝트가 Quest 2, 3를 거치며 점점 완성되어 갑니다. 모든 Quest를 완료하면 플랫폼에 등록된 완성된 프로젝트 하나가 탄생합니다.
Quest 1 · TouchGFX Designer 환경 활용하기
-
퀘스트
첫 번째 퀘스트의 목표는 TouchGFX Designer 사용 방법에 친숙해지는 것입니다.
STM32CubeMX의 최신 버전을 설치하고 X-Cube-TouchGFX의 최신 버전을 설치합니다. 설치 과정이 끝난 후에
TouchGFX Stock을 기반으로 UI를 만듭니다. 그리고 이 퀘스트를 완성하기 위해 설문을 작성해야 합니다.
<참고 사항>
Quest 1 단계에서 제출해주신 답변을 리뷰하여, 총 20명 대상으로 STM32H750-DK 보드와 함께 Quest 2가 진행됩니다.
-
필수 통과 조건
1.UI가 완성된 후에 build/bin 폴더를 zip파일로 압축하여 제출합니다.2.설문 작성하기: 링크
-
수행 방법
2.X-CUBE-TOUCHGFX를 다운로드 받습니다.
https://www.st.com/en/embedded-software/x-cube-touchgfx.html3.STM32CubeMX에서 X-CUBE-TouchGFX software pack을 설치하기 위한 방법이 두 가지 있습니다.
첫 번째는 직접 package를 선택하고 Install 버튼을 누름
두 번째 방법은 From Local버튼을 누른 다음 다운로드 받은 X-CUBE-TouchGFX software pack를 선택하고 설치합니다.
4.X-CUBE-TouchGFX폴더에 있는 TouchGFX Designer를 설치합니다.
5.TouchGFX Designer를 열고 Simulator 프로젝트 만듭니다.
Color depth: 16-bit, Resolution : 480x272
6.아래 첨부된 simulator EXE 파일을 참조하여 TouchGFX Stock을 기반으로 같은 UI를 만듭니다.
몇 가지 이미지를 제공하고 있으니 참고해 주시기 바랍니다.
simulator EXE 파일 (다운로드)
힌트:
• 언어 스위치 기능을 만들기 위해, 하기 페이지들을 참조하실 수 있습니다.
∘ https://support.touchgfx.com/docs/tutorials/tutorial-06/tutorial-06-part-1
∘ https://support.touchgfx.com/ko/docs/development/ui-development/designer-user-guide/texts-view
∘ https://support.touchgfx.com/ko/docs/development/ui-development/touchgfx-engine-features/texts-and-fonts
∘ https://support.touchgfx.com/ko/docs/development/ui-development/touchgfx-engine-features/languages-and-characters
• Interaction을 만들기 위해 하기 페이지를 참조하실 수 있습니다.
∘ https://support.touchgfx.com/ko/docs/tutorials/tutorial-02
• 다양한 설정 값들을 저장하기 위해 하기 페이지들을 참조하실 수 있습니다.
∘ https://support.touchgfx.com/ko/docs/tutorials/tutorial-03
∘ https://support.touchgfx.com/ko/docs/development/ui-development/software-architecture/model-view-presenter-design-pattern
필요한 정보:
• 최신 버전 TouchGFX 4.22를 사용하는 것을 추천합니다.
• 폰트: 영어의 경우 Verdana, 한국어의 경우 Malgun Gothic bold
• 폰트 사이즈: 작은 14px, 중간 17px, 큰 20px, 백분율 값 40px7.UI 작업이 끝난 후에 하나의 Text Area로 사용자명을 UI에서 추가하여 Run Simulator 합니다. 그리고 마지막으로 Build/bin 폴더를 zip파일로 압축하여 제출합니다.
-
참조 사이트와 자료
🔗 TouchGFX Designer 데모들🔗 TouchGFX 기술 지원 사이트: TouchGFX documentation🔗 UI 영감을 받을 수 있는 사이트: Dribble🔗 ST 제품들에 대해 알아보고 싶을 때: st.com🔗 무료로 이미지를 만들거나 수정하기 위한 그래픽 툴: Paint.NET
Quest 2 · STM32H750-DK로 UI 개발하기
-
퀘스트
두 번째 퀘스트의 목표는 하드웨어와 상호 작용하는 방법을 배우는 것입니다.
-
필수 통과 조건
1.하드웨어에서 실행된 UI을 비디오를 촬영해 제출합니다.
-
수행 방법
1.TouchGFX Designer를 열고 H750-DK TBS을 선택하고 프로젝트를 생성합니다.
2.이 튜토리얼 비디오를 따라, 하드웨어와 상호 작용을 만듭니다. 예: UART, ADC, SPI, I2C, Ethernet, USB, 하드웨어 버튼, etc.3.보드를 받을 때 미리 개발된 프로젝트를 보드에 올려 문제가 없으면 보드에서 실행하는 HMI의 비디오를 촬영해 제출합니다.하드웨어 상호 작용의 예:
• 전위차계를 사용하여 게이지 위젯 값을 변경함
• UART을 통해 UI에서 PC에 문자/문자열을 출력함
• USB function(class)을 통해 터치 스크린을 마우스 패드로 사용하여 PC 마우스 포인터를 옮김
• 기타
-
참조 사이트와 자료
🔗 TouchGFX Designer 데모들🔗 TouchGFX 기술 지원 사이트: TouchGFX documentation🔗 UI 영감을 받을 수 있는 사이트: Dribble🔗 ST 제품들에 대해 알아보고 싶을 때: st.com🔗 무료로 이미지를 만들거나 수정하기 위한 그래픽 툴: Paint.NET
![[Quest1] 작성 결과물 제출](https://cdn.e4ds.com/make/images/ro4mgvy52sa58pcpihp2.png)
![[Quest 1] TouchGFX Desiner 환경 활용하기](https://cdn.e4ds.com/make/images/f12uilbnr1ikq2s0tujm.png)
![[Quest1 결과 제출]](https://cdn.e4ds.com/make/images/5s2zkte0p4kl8zrqnajr.png)
![[Quest 1] TouchGFX Designer 환경 활용하기 결과물 제출](https://cdn.e4ds.com/make/images/st57nii43wfdj0ws8g6c.jpg)
![[퀘스트1] Touchgfx Designer 환경 활용하기](https://cdn.e4ds.com/make/images/ak7anrz0miuepst9276k.png)
![[Quest 1] TouchGFX Designer 환경 활용하기](https://cdn.e4ds.com/make/images/aq5zvzjlz40x0a0g3c9v.png)
![[Quest 1] TouchGFX Designer 환경 활용하기](https://cdn.e4ds.com/make/images/x36l2hys5gkfyyf65f5w.png)
