우리는 이미 Swipe 기능에 익숙하다. 요즘의 아이들에게 터치 기능이 없는 LCD을 주면 아마 우선 손으로 Click이나 Swipe 부터 해 볼 것이다. 이제는 Click과 함께 Swipe는 가장 기본적인 터치 스크린의 기능이라고 볼 수 있다.
예전에는 이 Swipe 기능을 구현하기가 어려웠다고 한다. 그러나 TouchGFX를 이용하면 몇 번의 클릭만으로도 동작을 구현할 수 있다.
오늘은 2개의 이미지를 선택할 수 있는 Swipe 기능을 구현해본다.
먼저 TouchGFX Designer 를 실행한다. 나는 STM32F429 Discovery 를 사용하였기에 APPLICATION TEMPLATE에서 해당 보드를 선택하였다. 저장 장소는 기본으로 두고 Applicaiton name은 Swipe로 작성한 뒤 하단의 CREATE 버튼 클릭.
아래 화면처럼 작업을 할 수 있는 화면으로 나타난다.
STM32F429 Discovery의 LCD는 240 * 320 사이즈이다. 2개의 이미지는 240 * 320 에 맞춰서 준비했다.
프로그램 상단 Images 에 들어가서 준비한 이미지를 import한다.
다시 Canvas 로 돌아와서 ADD WIDGET에 있는 Swipe Container를 선택한다.
그러면 Screen1에 swipeContainer1 이 생성되고, swipeContainer1 하단에는 ---Page1이 생성된다.
우리는 2개의 이미지를 사용하므로 PAGES에서 page 추가를 한다. 그러면 ---Page2가 추가된다.
이제 준비한 이미지가 화면에 나올 수 있도록 각 Page에 이미지를 삽입한다. 이미지 삽입은 WIDGET에서 선택하면 된다.
각 이미지 이름을 수정한 뒤(BG_W, BG_B로 작성함) 좀 전에 만든 Page1과 2로 옮긴다. 마우스로 드래그 하면 된다.
특별한 옵션을 선택할 것이 없다면,
현재까지 단순히 선택한 것만으로 완성된다.
보드에 동작을 하기 전에 Run Simulator로 원하는 동작을 테스트해볼 수 있다.
동작을 확인 하였으면, Generate Code를 선택하고 TouchGFX 프로그램을 종료한다.
처음에 지정한 파일 경로에 가면, 프로젝트 파일이 있을 것이다. 나는 CubeIDE로 해당 프로젝트 파일을 열고 Compile하였다.
다른 기능에 대한 것을 구현할 생각이 없다면 그대로 컴파일 하면 TouchGFX에서 구현한 기능이 동작된다.
'STM32 > TouchGFX' 카테고리의 다른 글
| TouchGFX 구조 (0) | 2021.01.06 |
|---|