대표 이미지콘테스트 참가 = 프로젝트 생성
이 콘테스트에 참가신청을 하시면 하나의 프로젝트가 생성됩니다. 콘테스트 프로젝트 완성단계 [3개의 Quest]를 완료하면서 점진적으로 프로젝트를 완성해 나갑니다. 완성된 프로젝트는 e4ds make platform 에서 여러분의 포트폴리오로 활용할 수 있습니다.
참가 신청
참가 신청을 하시고, 회원님의 콘테스트 프로젝트를 생성하세요.
단계별 완성
Quest를 순차적으로 완료하며 프로젝트를 완성시켜 나갑니다.
커리어 아카이빙
자신의 기술 자산 포트폴리오로 활용하세요.
STM32 퀘스트 챌린지 : TouchGFX
퀘스트 챌린지 소개
본 챌린지에서는 STM32 TouchGFX와 관련된 6개의 퀘스트가 주어집니다.
챌린저는 통과 조건에 맞게 주어진 퀘스트를 수행해야 하며, 직전의 퀘스트를 통과한 챌린저만이 다음 퀘스트에 도전할 수 있습니다.
퀘스트는 1주 간격으로 진행되며, 파이널 퀘스트(Quest 6)는 2주 동안 진행됩니다.
이렇게 파이널 퀘스트까지 수행하신 챌린저 분들의 결과물에 대한 수행 점수 및 가산점 등을 합산하여 우승자를 선정할 예정입니다.
파이널 퀘스트까지 챌린저 분들의 건투를 빕니다.
퀘스트 수행 방법
컨테스트 홈
퀘스트 클릭
‘도전하기’ 버튼 클릭
결과물 작성 및 저장
※ 퀘스트 수행 기간내에는 작성하신 게시물 페이지내 '수정' 버튼을 통하여 결과물 수정이 가능합니다.
※ 퀘스트 수행 기간은 매주 월요일 오후 12시(정오)~일요일 오전12시(자정)입니다. 그 다음주 월요일 오전에 통과/탈락 결과 발표가 진행되며, 오후 12시(정오)에 그 다음 퀘스트가 진행됩니다.
가산점 받는 방법
- 1. 게시판 활동 점수
- : 챌린저 자유게시판, 무엇이든 물어보세요 게시판 활동에 따라 가산점 부여
(게시글 수, 댓글 활동 수, 게시글 내용, 게시글 추천 받은 수 등) - 2. 보너스 퀘스트 점수
- : 보너스 퀘스트 수행 여부에 따라 가산점 부여
(보너스 퀘스트는 챌린지 기간내에 완료해야 함 : ~2021/12/26(일)까지)
플랫폼 보드 지급 안내
Quest 3을 통과한 35명의 챌린저에게는 STM32H7B3I-DK가 지급됩니다.
만일 Quest 3을 통과한 챌린저가 35명 이상일 경우, 제출한 결과물의 내용(퀘스트 통과 조건 달성 여부, 정성스러운 설명)과 제출 순서 등에 따라
선정하여 지급되는 점 참고 부탁드립니다.
Quest 5에서는 해당 보드를 이용한 퀘스트가 주어질 예정입니다. 이때 Quest 3을 통과했지만, 보드를 받지 못하신 분들도 해당 보드만 있다면
계속 도전을 이어나가실 수 있습니다.
※ 위의 경우와 같이 보드를 직접 준비하여 도전하게 된 챌린저 분은 반드시 '챌린저 자유게시판'에 인증글을 남겨주시기 바랍니다. 감사한 마음을 담아 작게나마 선물을 드릴 예정입니다.
우승자 혜택

※경품 수령 시, 제세공과금(경품 가격의 22%)이 청구됩니다.
진행 일정
참가 접수
프로젝트 생성
Quest 1 제출
TouchGFX Designer 설치 및 시뮬레이터 활용 (+설문 조사)
Quest 2 제출
TouchGFX Designer에서 Tutorial 2 & 3 완성하기
Quest 3 제출
Part 1. TouchGFX Designer에서 Tutorial 4 & 5 완성하기<br> Part 2. Swipe Container를 포함하여 UI 구성하기
Quest 4 제출
Gauge 위젯을 사용한 시뮬레이터 활용
Quest 5 제출
PC 터미널로 원격 제어하기
Quest 6 제출
[자율 과제] TouchGFX로 본인만의 멋진 GUI를 만들어 보세요
결과 발표
Quest는 프로젝트를 완성하는 단계별 여정입니다
각 Quest는 독립된 제출물이 아닌, 하나의 프로젝트를 발전시키는 과정입니다. Quest 1에서 시작한 프로젝트가 Quest 2, 3를 거치며 점점 완성되어 갑니다. 모든 Quest를 완료하면 플랫폼에 등록된 완성된 프로젝트 하나가 탄생합니다.
Quest 1 · TouchGFX Designer 설치 및 시뮬레이터 활용 (+설문 조사)
TouchGFX Designer에서 태극기 이미지와 “닉네임”을 텍스트로 추가하여 시뮬레이션 기능을 통해 PC에서 해당 화면을 디스플레이하세요.
- UI 가 완성 되면TouchGFX Designer 화면과 시뮬레이터 화면(닉네임 텍스트가 왼쪽 위)을 캡쳐하여 제출
- 1. st.com 홈페이지에서 TouchGFXDesigner를 다운로드 및 설치하세요
- 2. 이 링크를 클릭해서 TouchGFX 설치 단계를 따르세요
- 3. TouchGFX Designer 실행하세요
- 4. STM32H7B3 DK Board Setup를 고르세요
- 5. Canvas에 태극기 이미지를 놓고 닉네임을 왼쪽 위에 놓으시면 됩니다.(Paint.net같은 소프트웨어 써서 화면 해상도에 맞게 이미지를 조정)
- 6. TouchGFX Designer 화면을 캡쳐하세요
- 7. Run simulator
- 8. 시뮬레이터 화면을 캡쳐하세요
- 9. 설문 조사를 완료하세요 (위 ‘설문 조사’ 버튼 클릭)
- 10. 캡처 된 이미지들을 제출하세요

Quest 2 · TouchGFX Designer에서 Tutorial 2 & 3 완성하기
TouchGFX Designer에서 Tutorial 2 하고 Tutorial 3를 완성하기.
※ 영문 문서 이해가 힘든 경우 자동 번역 기능(크롬 브라우저 – 구글 자동 번역 기능)을 사용하여 페이지를 보시는 것을 제안합니다
※ 본인 확인을 위해 디스플레이 윈도우 제목 또는 화면에 자신의 닉네임을 포함하여 녹화해 주세요.
- 시뮬레이터 화면에서의 Tutorial2 와 3의 동작을 각각 녹화한 동영상 제출
- 1. TouchGFXDesigner 를 실행하세요
- 2. STM32H7B3 DK Board Setup를 고르세요
- 3. Tutorial 2를 완성하세요 (영어판)
- 4. 시뮬레이터 화면을 녹화하세요
- 5. Tutorial 3를 완성하세요 (영어판)
- 6. 시뮬레이터 화면을 녹화하세요
- 7. 동영상들을 제출하세요



Quest 3 · Part 1. TouchGFX Designer에서 Tutorial 4 & 5 완성하기<br> Part 2. Swipe Container를 포함하여 UI 구성하기
퀘스트 3은 Part 1과 Part 2 로 진행되며, 두 가지를 모두 수행하시어 제출해 주시면 됩니다.
퀘스트 3을 통과하신 분들 중 35분께는 플랫폼 보드가 지급됩니다. 이 35분은 모든 분들이 퀘스트를 적절히 수행하셨다는 전제 하에 선착순으로 선정됩니다.
선착순의 기준은 최초 제출 일자가 아닌 최종 수정 일자이니, 반드시 참고 부탁드리겠습니다.
(최종 수정 일자는 게시물 수정 시 마다 업데이트 됩니다.)
TouchGFX Designer에서 Tutorial 4 와 Tutorial 5 완성하기.
※ 영문 문서 이해가 힘든 경우 자동 번역 기능(크롬 브라우저 – 구글 자동 번역 기능)을 사용하여 페이지를 보시는 것을 제안합니다
- 시뮬레이터 화면에서의 Tutorial 4 와 Tutorial 5의 동작을 각각 녹화하여 동영상 제출
- 1. TouchGFXDesigner 실행
- 2. STM32H7B3 DK Board Setup 선택
- 3. Tutorial 4를 완성 (영어판)
- 4. 시뮬레이터 화면 녹화
- 5. Tutorial 5를 완성 (영어판)
- 6. 시뮬레이터 화면 녹화
- 7. 동영상들 제출


3개 페이지가 있는 SwipeContainer를 생성합니다.
Page 1 은 8개의 구성 요소(width:200px, height:80px)로 이루어진 수직의 ScrollList(width:200px, height: 240px) 를 포함합니다.
구성 요소 1을 클릭했을 때 Screen2로 전환합니다.
구성 요소 2를 클릭했을 때 Screen3 로 전환합니다.
구성 요소3을 클릭했을 때 Screen4로 전환합니다.
ScrollList 영역에서 수직으로 슬라이드 하는 경우 ScrollList 가 스크롤 되며 수평으로 슬라이드 하는 경우 SwipeContainer 가 page를 변경합니다.
Screen 2, 3, 4에는 main screen으로 돌아가는 버튼을 생성합니다.
- 시뮬레이터 화면을 녹화하여 동영상 제출
- 1. TouchGFXDesigner 실행
- 2. STM32H7B3 DK Board Setup 선택
- 3. UI를 완성
- 4. 시뮬레이터 화면 녹화
- 5. 동영상 제출
- TouchGFXDesigner에서 Swipe Container 예제 및Scroll Wheel and List 예제를 참고하면 도움이 될 수 있습니다.
- View 에서 수직 드래그와 수평 드래그를 구별하여 구현하는 것이 필요합니다. 그런 다음 방향에 따라 ScrollList 또는 SwipeContainer 를 만듭니다. handleClickEvent, handleGestureEvent 그리고 handleTickEvent 또한 구현해야 합니다.
- 드래그로 ScrollList 움직임을 만드는 경우 myScrollList.handleDragEvent(evt); 를 호출합니다.
- 드래그로 SwipeContainer 움직임을 만드는 경우 MyScreenViewBase:: handleDragEvent(evt); 을 호출합니다.
- UI를 디버깅하기 위해 <touchgfx/Utils.hpp> 를 포함하고 touchgfx_printf() 함수를 사용하여 디버깅 메시지를 생성합니다.



Quest 4 · Gauge 위젯을 사용한 시뮬레이터 활용
Gauge 위젯을 사용하여 눌렀을 때 가속을 시뮬레이션 하고, 놓았을 때 감속을 시뮬레이션 하는 버튼을 생성하세요.
버튼을 누름 : 파란색 바늘이 최대값이 될 때까지 오른쪽으로 회전합니다.
버튼을 놓음 : 파란색 바늘이 최소값이 될 때까지 왼쪽으로 회전합니다.
※ 본인 확인을 위해 디스플레이 윈도우 제목 또는 화면에 자신의 닉네임을 포함하여 녹화해 주세요.
- 시뮬레이터 상에서 퀘스트 4 의 UI 동작을 녹화하여 동영상 제출
- 1. TouchGFXDesigner 실행하세요
- 2. STM32H7B3 DK Board Setup 를 고르세요
- 3. UI를 완성하세요
- 4. 시뮬레이터 화면을 녹화하세요
- 5. 동영상들을 제출하세요
- TouchGFXDesigner에서 Gauge 예제를 참고하면 도움이 될 수 있습니다.
- Button class가 어떻게 구성되어 있는지에 대한 연구가 필요합니다.
- 새로운 class를 생성하고 이 class가 Button class를 상속하도록 만들어야 합니다.
- 그런 다음 handleClickEvent 를 구현하고 button 을 누르고 놓을 때 View 에 callback을 트리거 하도록 변경합니다.
- 이 class에서 View에 새로운 object를 생성하여 UI에 통합합니다.

Quest 5 · PC 터미널로 원격 제어하기
PC 터미널에 “MAKE 닉네임(=예제 이미지 상의 ‘myID’)”을 전송하는 버튼을 생성합니다.
PC 터미널에 0에서 9 사이의 숫자를 입력했을 때 보드 디스플레이의 TextArea에 입력된 숫자를 표시합니다.
- UI동작을 녹화한 동영상을 제출해 주세요
- 1. TouchGFXDesigner 실행하세요.
- 2. STM32H7B3 DK Board Setup 를 고르세요.
- 3. UI를 완성하세요.
- 4. 완성된 동작을 보여주는 보드와 PC 화면을 동영상으로 촬영해주세요.
- 5. 동영상들을 제출하세요.
- TeraTerm을 PC에 설치합니다.
- 첨부된 문서를 참고하세요.
- 보드에 내장되어 있는 ST Link의 커넥터에 연결된 UART를 사용하기 위해 UART1 RX(PA10), TX(PA9)를 선택하세요.
- 프로젝트를 디버깅하기 위해 STM32CubeIDE의 디버깅 모드를 사용하세요
- UI를 디버깅하기 위해 <touchgfx/Utils.hpp> 를 포함하고 touchgfx_printf() 함수를 사용하여 디버깅 메시지를 생성합니다.


Quest 6 · [자율 과제] TouchGFX로 본인만의 멋진 GUI를 만들어 보세요
TouchGFX로 본인만의 멋진 GUI 만들어 보세요.
전체적인 UI를 설계 및 구현하는 자율 과제입니다. 예를 들면, 방온도조절기, 공기청정기 등등의 Target application을 선정하고, 그에 맞는 UI를 개발하시면 됩니다. Target application에 대한 범위는 제약이 없습니다.
1. 아래의 자료를 함께 제출해 주시기 바랍니다.
(첨부 파일들은 압축하여 1개의 파일로 첨부)
- ① STM32H7B3-DK보드에서의 동작을 녹화한 동영상
- ② 소스 코드, 보드에서 동작을 바로 확인할 수 있는 하나의 Hex파일
- ③ 데모에 대한 소개 및 설명을 포함하는 PDF 문서
2. 아래 설문 조사를 완료해 주시기 바랍니다.
(설문 첫 문항의 ‘이메일 주소’는 MAKE정보와 동일해야 합니다.)
최종 우승자와 4명의 준우승자는 ST Korea 가 선정하며, 다음의 기준으로 우승자가 선정됩니다: 결과물의 완성도, 구성, 창의력, 디자인 (최대 100점)
“챌린저 자유게시판, 무엇이든 물어보세요”를 통해 다른 사람을 돕고 지식을 공유한다면 보너스 점수를 얻을 수 있습니다: 퀘스트 관련 질문 글에
답변을 해서 실질적인 도움을 준 분은 가산점. (최대 +20점)
귀하의 게시물이 다른 사람들에게 유용한지 도움이 되는 댓글을 많이 작성하였는지 퀘스트와 직접적인 관련이 없더라도 간접적으로 도움이 되는 글도 심사에 포함합니다

