TouchGFX는 STMicroelectronics에서 제공하는 그래픽 사용자 인터페이스(GUI) 개발 프레임워크로, STM32 마이크로컨트롤러(MCU) 칩을 대상으로 하는 임베디드 시스템 개발을 위해 설계되었습니다. 이를 통해 객체 컨텍스트 디스플레이를 설계할 수 있어 STM MCU 사용자가 부드럽고 아름다우며 다양한 UI 페이지를 구축하는 데 도움을 줍니다.

다음 예시는 TouchGFX 버전 4.23.2를 참고로 사용합니다:

그림 1: TouchGFX 시작 화면, Example, Demo, Create Board chip 등 옵션 표시

TouchGFX 구조 개요

TouchGFX 프로그램 아키텍처는 그림 2와 같이 모델-뷰-프레젠터(Model-View-Presenter, MVP) 패턴을 채택하며, 다음과 같은 장점이 있습니다:

책임 분리 (Separation of Concerns): 각 단계별로 코드 유지보수가 달라져 사용자가 인터페이스를 작성하고 하위 계층과 통신할 수 있어 구조가 명확하고 이해하기 쉬우며 재사용성이 높아집니다.

단위 테스트 (Unit Testing): 상위 계층의 뷰는 GFX가 생성한 코드와 직접 상호작용할 수 있어 결과를 독립적으로 검증하기 용이합니다.

그림 2: TouchGFX 구성 요소 간 관계도 (MVP)

View(뷰): GFX가 생성한 주 디스플레이 페이지로, 인터페이스 표현용입니다. 일반적으로 MVP 상위 계층의 수동적 끝점으로 작용하며 UI 인터페이스의 모든 디자인 정보를 처리하고, 사용된 객체 속성에 따라 해당 화면을 표시합니다.

Model(모델): 데이터 처리 및 전송의 핵심 위치입니다. 일부 통신 패킷을 판단하거나 처리한 후 Presenter를 통해 View로 보내 현재 표시되는 내용과 객체 상태를 변경합니다.

Presenter(프레젠터): View와 Model 간의 통신 채널 역할을 하며, Model에서 데이터 요청을 받아 기능을 재사용할 수 있게 합니다.

FW(펌웨어) 설계 철학상 Model을 명령 처리 허브로 강조하기 때문에 다음과 같은 다이어그램으로 표현할 수 있습니다(그림 3).

CAN 버스, RS485, UART, Bluetooth, Wi-Fi 등 다양한 인터페이스의 하위 처리 과정을 거쳐 데이터가 Model로 전달되고, Presenter를 통해 View로 중계되어 객체 상태 전환이 이루어집니다.

그림 3: 여러 인터페이스와 MVP 아키텍처 간 통신

두 가지 예를 들어 데이터 교환 방식을 설명할 수 있습니다:

예제 1: 호스트가 Device에 CANopen 명령을 전송한다고 가정합니다(그림 4).

CANopen은 IF 포트를 통해 패킷을 수신하고, CAN 태스크를 통해 패킷 데이터를 복호화할 수 있으며, 그 내용을 Model로 전달합니다. Model은 데이터베이스를 업데이트하고 해당 명령을 실행한 후 결과를 Presenter를 통해 View에 보내 페이지를 갱신합니다.

그림 4: 호스트가 명령을 전송하는 예

예제 2: 사용자가 장치에서 UI 객체를 터치하면 터치 이벤트 패킷이 다시 호스트로 보고됩니다(그림 5).

사용자가 인터랙티브 객체를 클릭하면 View가 클릭 이벤트를 생성하고, 이 이벤트는 Presenter를 통해 User Event로 Model에 전달됩니다. Model은 현재 사용 중인 인터페이스에 따라 응답하여 코드를 CAN 태스크로 다시 보내고, 최종적으로 TX 패킷을 전송하여 호스트에 알립니다.

그림 5: 사용자 터치 이벤트가 호스트로 전송됨

View 페이지 지식 개요

TouchGFX 소프트웨어 인터페이스에서는 N개의 페이지를 디자인하면 N개의 해당 View와 Presenter 세트가 생성되지만, 모든 뷰 페이지를 제어하는 Model은 단 하나입니다.

사용자가 그래픽, 외관, 좌표, 텍스트 표시 등 UI 시나리오를 디자인하고 "코드 생성"을 누르면 해당 이름의 뷰 페이지에 코드가 생성됩니다.

생성된 폴더는 ..\generated\ 와 ..\gui\로 구분되며, ..\generated\ 폴더에는 디자인된 페이지 표시를 위한 기본 코드가 들어있고, ..\gui\에는 객체 상호작용을 위한 로직이 포함되어 있습니다.

이를 통해 객체를 각 페이지에 배치하고 사용할 수 있는 코드를 참조할 수 있습니다.

위 설명을 간단한 단계별로 설명하면 다음과 같습니다:

예를 들어:

1. 빈 프로젝트를 열고 "새로 만들기"를 눌러 프로젝트를 생성합니다(그림 6).

그림 6: TouchGFX 프로젝트 시작 화면

2. TouchGFX에서 기본으로 Screen1이 제공됩니다. 여기에 새 버튼 객체를 추가하고 원하는 이미지를 선택한 후 "코드 생성"을 실행합니다(그림 7).

그림 7: 버튼 생성 시연

3. 다음으로 프로젝트 경로를 확인하면 gui와 generated 두 개의 새 폴더가 생성된 것을 볼 수 있습니다(그림 8):

그림 8: 프로젝트 폴더 내용

generated 폴더에는 Screen1 구성 요소와 관련된 기본 코드가 들어있으며, TouchGFX가 자동 생성하므로 직접 수정할 수 없습니다. 페이지의 객체 상태가 변경되고 코드가 다시 빌드되면 generated 폴더 내 코드가 업데이트됩니다.

마찬가지로 "코드 생성"을 실행하면 ..\generated\gui_generated\src\screen1_screen 경로에 Screen1ViewBase.cpp가 생성됩니다(그림 9).

그림 9: Screen1ViewBase.cpp 위치

Notepad++로 Screen1ViewBase.cpp를 열어보면(그림 10) Screen1 페이지 및 버튼 데이터 관련 속성과 내용을 확인할 수 있습니다:

- 버튼 좌표 설정:
button1.setXY(63, 109);

- 버튼 이미지 ID 설정:
button1.setBitmaps(TouchGfx::Bitmap(BITMAP_BUTTON_00_00_ID), TouchGfx::Bitmap(BITMAP_BUTTON_00_00_ID));

- 버튼 객체를 페이지에 추가:
Add(button1);

그림 10: Screen1ViewBase.cpp 내용

XXXBase.cpp 이름이 붙은 코드는 "코드 생성" 시 재생성되며, 속성 데이터 변경 사항이 반영됩니다. 따라서 버튼 위치나 이미지 등을 조정하면 함수도 변경될 수 있습니다.

gui 폴더는 TouchGFX가 사용자가 프로그램 로직을 작성할 수 있도록 하는 공간입니다(그림 8). 따라서 MVP 아키텍처도 이곳에 구성되어 있으며(그림 11, 12), UI 디자인 방향을 구현하기 위해 자체 MVP 코드 통신 방식을 계획할 수 있습니다.

그림 11: Model 경로

그림 12: Presenter와 View 경로

4. GUI/Generated 디자인 설명을 위한 간단한 시나리오 설계

- 버튼과 텍스트 간 상호작용을 위한 논리 제어 작성
- 버튼 클릭 시 텍스트 값이 증가하도록 구현

다음과 같이 기능을 구현할 수 있습니다:

Step 1:

버튼(button1)과 텍스트 영역(textArea1) 두 개의 객체를 끌어다 놓습니다(그림 13).

그림 13: 버튼 컨트롤을 포함한 UI 디자인 프로젝트

Step 2:

우측 상호작용 액션에서 Button 클릭 이벤트를 추가하고, 이 액션이 실행될 때 add_number 함수를 호출하도록 설정합니다(그림 14).

그림 14: Interaction1 이벤트 추가

Step 3:

Screen1ViewBase.cpp에서(그림 15) button1과 textArea1 생성에 관련된 코드 속성을 확인합니다.

새로 추가된 상호작용으로 인해 buttonCallbackHandler가 생성되어 button1 터치 이벤트를 처리합니다. 클릭 시 콜백 함수에서 add_number 함수를 호출합니다.

그림 15: Screen1ViewBase.cpp

Screen1ViewBase.hpp 내용(그림 16).

그림 16: Screen1ViewBase.hpp 내용

Step 4:

gui 영역에 Screen1View.cpp와 Screen1View.hpp를 추가합니다.
add_number 프로그램을 추가하여 count 파라미터를 누적에 활용합니다(그림 17, 18).

Unicode 형식으로 snprintf(textArea1Buffer, TEXTAREA1_SIZE, "%02d", count)를 사용해 업데이트된 count 값을 textArea1에 갱신하고,
textArea1.invalidate()로 데이터를 새로고침합니다.

그림 17: Screen1View.cpp 내용

그림 18: Screen1View.hpp 내용

시뮬레이터를 실행하면 button1을 터치할 때마다 textArea1(count 값)이 0부터 증가하는 것을 확인할 수 있습니다(그림 19).

그림 19: 시뮬레이터 결과 표시

이는 객체 속성 정의는 주로 generated 경로에 생성되며, 사용자는 gui 섹션에서 로직 실행 코드를 작성한다는 것을 의미합니다.

TouchGFX 및 Builder 객체 속성 예제

WINSTAR가 제공하는 Smart Display GUI Builder는 UI/UX를 위한 드래그 앤 드롭 인터페이스 디자인 도구로, ST MCU 기반 제품의 신속한 개발과 설계를 위한 무코드 개발 서비스를 고객에게 제공합니다. TouchGFX 프레임워크의 확장으로 구축된 GUI Builder는 TouchGFX의 원래 위젯 기능을 통합하고 있으며, 주요 차이점은 여러 시스템 인터페이스와 통신 프로토콜을 지원한다는 점입니다. 이를 통해 사용자는 명령이 위젯 제어 및 변경에 어떻게 영향을 미치는지 직접 관찰할 수 있습니다.

여기 Builder 소개 링크입니다：
https://www.winstar.com.tw/it/video/play/142.html

Smartdisplay의 설계 철학은 TouchGFX 설정 기능과 관련이 있으며, STM32 MCU를 사용하여 작성된 펌웨어가 MVP의 기초가 됩니다. 내부 객체는 기존 항목과 로직을 결합하여 설계되었습니다.

따라서 GUI Builder에서 열린 객체 중 일부는 기존 TouchGFX UI 구성 요소를 사용하여 해당 표시 결과를 구현할 수 있습니다.

*보충 설명 구간

Builder 슬라이더를 사용한 간단한 예는 다음과 같습니다(그림 20):

그림 20: Builder 슬라이더 속성 페이지

Builder 슬라이더의 속성은 다음과 같습니다:

Size:
- Width: 618
- Height: 20

Positions:
- Background Position (X): 0
- Background Position (Y): 4

Indicator Position:
- Min: 0
- Max: 580
- Pos: 0

 

이 매개변수들은 TouchGFX 슬라이더 구성 설정과 일치합니다(그림 21).

그림 21: TouchGFX 슬라이더 속성

TouchGFX 슬라이더의 속성은 다음과 같습니다:

Location:
- Width: 618
- Height: 20

Positions:
- Background Position (X): 0
- Background Position (Y): 4

Indicator Position:
- Min: 0
- Max: 580
- Y: 0

사용자는 GFX에서 시작 값을 조정해 Builder 내 결과를 시뮬레이션할 수 있습니다(그림 22).
값을 100으로 설정하면 Builder에서 동일한 결과를 시뮬레이션할 수 있습니다(그림 23).

그림 22: TouchGFX에서 Start 값을 100으로 조정

그림 23: Builder에서 테스트 값 100 조정

GFX가 생성한 Screen1ViewBase.cpp를 보면(그림 24):

그림 24: Screen1ViewBase.cpp의 함수

위에서 언급한 매개변수가 코드 내에서 어떻게 사용되고 수정될 수 있는지 이해할 수 있습니다. 이러한 숫자들은 GFX 프로젝트 설계와 직접 관련이 있으며, Builder가 프로젝트를 업로드하고 Device Slider의 초기 매개변수를 재설정할 때 사용됩니다.

Host가 Slider 값 변경 명령을 보내면, view 내에서 slider1.setValue()를 실행하여 객체 변경을 완료합니다(그림 25).

그림 25: Host가 슬라이더 명령 전송

이것이 Builder와 TouchGFX 객체 간 관계에 대한 간단한 설명입니다.

Builder 객체의 미래 확장 및 개발 평가

최근 TouchGFX 버전 4.24.0 업데이트로 새로운 객체 및 기능이 추가되었습니다. Builder 통합 가능성을 평가할 때, 우선 GFX의 기본 예제들을 데모 및 연구용으로 사용해 볼 수 있습니다(그림 26):

그림 26: 다양한 예제 프로젝트

 

버전 4.24.0부터 QR 코드 같은 신규 객체 지원이 가능하므로, Builder 통합 시 활용할 수 있는 매개변수와 기능을 평가할 수 있습니다.

QR 코드 사용 예:

1. BlankUI 선택
2. QR 코드 컨테이너 드래그
3. 설정 가능한 속성 확인(그림 27):
Location: (X, Y)
Configuration:
- QRVersion
- Scale
- Text
- Error Correction Code…

그림 27: QR 코드 속성 화면

이 QR 코드 관련 매개변수는 공식 웹사이트에서 참고할 수 있습니다(그림 28).

그림 28: 공식 웹사이트 설명

Screen1ViewBase.cpp 생성 함수에서 사용 가능한 매개변수 및 설정을 확인합니다(그림 29):

1. 좌표 설정: qrCode1.setXY(208, 224);
2. QR 코드 버전 설정: qrCode1.setQRCodeVersion(3);
3. QR 스케일 설정: qrCode1.setScale(5);
4. QR 코드 생성을 위한 텍스트 입력:
qrCode1.convertStringToQRCode("https://www.winstar.com.tw/zh-tw/");

그림 29: Screen1ViewBase.cpp에 생성된 코드

앞으로 QR 코드 기능이 Builder에 통합된다면, 사용자가 이러한 조정 가능한 매개변수를 설정할 수 있게 될 것입니다.

참고자료:

https://support.touchgfx.com/docs/category/introduction
https://www.eettaiwan.com/20200203np21/
https://en.wikipedia.org/wiki/STMicroelectronics
https://www.winstar.com.tw/kr/video/smartdisplay.html