자습서 4: 커스텀 동작이 있는 Scroll Wheel 생성하기

이 자습서에서는 Custom Container와 Scroll Wheel이라는 두 가지 위젯을 생성하고 구성하는 방법에 대해 알아보겠습니다. Custom Container는 여러 가지 다른 위젯을 결합하여 새로운 위젯을 생성하고 Custom Container에 있는 위젯에 특정 동작을 추가할 수 있도록 해주는 위젯입니다. Scroll Wheel은 다수의 선택 가능한 항목으로 구성된 스크롤 가능한 메뉴를 만드는 데 사용되는 위젯입니다. 이 자습서에서는 사용자 코드를 생성하여 위젯의 동작을 변경하는 방법도 설명합니다.

이번에는 더 큰 화면을 사용할 것이므로 해상도가 800x480 픽셀인 보드(예: STM32F469 Discovery)에 맞춰 새 프로젝트를 시작하거나 시뮬레이터를 사용하겠습니다.

Custom Container 및 Scroll Wheel에 대한 자세한 내용은 Custom Containers 페이지와 Scroll Wheel 페이지를 참조하십시오.

자습서에 사용되는 그래픽은 이 링크에서 다운로드할 수 있습니다. 애셋 아래의 이미지 폴더에 다운로드한 파일의 압축을 해제합니다. 이 자습서에 사용된 프로젝트의 경우 이미지 폴더는 MyApplication2\assets\images입니다.

1단계: Custom Container 생성하기

자습서 2의 1단계와 마찬가지로, 먼저 TouchGFX Designer를 사용하여 새 프로젝트를 생성합니다. 새 프로젝트가 준비되면 TouchGFX Designer의 Screens 탭에서 Container 탭(1)으로 이동합니다.

Custom Container 메뉴 선택하기

Custom Container를 생성하는 탭은 Screens 탭과 유사하며 새로운 Custom Cointainer를 생성하는 방법은 새 화면을 생성하는 방법과 동일합니다. Custom Container를 생성한 후에는 위젯을 추가하거나 Custom Container의 크기와 이름을 변경할 수 있습니다.

Custom Container 탭에서 "+" 버튼(1)을 사용하여 새 Custom Container를 생성하고 이름을 "MenuElement"(2)로 변경한 다음 너비와 높이(3)를 각각 390과 70으로 변경합니다.

Custom Container 생성 및 속성 설정하기

Custom Container에 위젯 추가하기

Custom Container를 생성하고 속성을 설정했다면, 이제 위젯을 Custom Container에 추가할 수 있습니다. 이 자습서의 Custom Container는 다음과 같이 이미지와 와일드카드가 있는 텍스트 영역으로 구성됩니다.

Further reading

텍스트를 와일드카드와 함께 사용하는 방법에 대한 자세한 내용은 텍스트 및 글꼴 페이지에서 와일드카드 섹션을 참조하십시오.

두 위젯은 다음과 같은 방식으로 삽입됩니다.

위젯	속성
Image	이름: icon 이미지: icon00.png 위치: X: 34 Y: 17
TextArea	이름: text 위치: X: 93, Y: 23 텍스트: Text: Menu Element <value> Wildcard 1: Initial Value: 00 Buffer size: 3 Use wildcard buffer: Yes Typography: 20px Alignment: Left 모양: Color: #FFFFFFFF

Custom Container에 내용 추가하기(TextArea가 선택되어 있음)

화면에 Custom Container 추가하기

이제, Screens 탭으로 돌아가서 Custom Container(1) 아래의 위젯 메뉴에서 "MenuElement"를 선택할 수 있습니다. 검은색 상자를 배경으로 배치하고 생성한 Custom Container 몇 개를 캔버스에 추가합니다. 삽입된 컨테이너는 화면에서 자유롭게 이동할 수 있습니다. Custom Container는 왼쪽의 위젯 목록(2)에 하나의 요소로 나타납니다.

Custom Container를 위젯으로 화면에 삽입하기

2단계: Scroll Wheel 생성하기

자습서 4의 이 단계에서는 1단계에서 생성한 Custom Container인 "MenuElement"를 사용하여 Scroll Wheel을 생성하겠습니다. 1단계에서 설명했듯이 Scroll Wheel은 다수의 선택 가능한 항목으로 구성된 스크롤 가능한 메뉴를 생성하는 데 사용됩니다. 이러한 항목은 스크롤할 때 동적으로 업데이트되며 항목을 선택하면 초점이 이동됩니다.

Scroll Wheel에 항목을 추가하려면 "Item Template"으로 사용할 Custom Container를 선택하면 됩니다. "Item Template"은 Custom Container의 위젯을 Scroll Wheel의 항목에 대한 기초로 사용하고 런타임 시 사용자 코드를 사용하여 항목의 위젯을 업데이트하는 방식으로 작동합니다.

Scroll Wheel 생성하기

Scroll Wheel을 생성하려면 먼저 화면에 이미 삽입된 Custom Containers를 제거하고 배경에 검은색 상자만 남겨둡니다. Containers 섹션 아래의 위젯 메뉴에 있는 Scroll Wheel(1)을 선택합니다. Scroll Wheel을 생성하고 위치 속성에서 X를 208, Y를 45, H를 390으로 설정한 다음 이름을 "scrollWheel"로 변경합니다.

Scroll Wheel을 삽입하고 이름 및 위치 속성 설정하기

Scroll Wheel에 항목 추가하기

Scroll Wheel 속성 "Item Template"(1) 아래의 드롭다운 목록을 사용하여 1단계에서 생성한 "MenuElement"를 "Item Template"으로 선택합니다. Scroll Wheel의 항목 수는 "Item Template" 아래에서도 설정할 수 있습니다. 항목 수를 20으로 설정합니다. Scroll Wheel은 선택한 항목에 초점을 맞추는 방식으로 작동하므로 선택한 항목이 UI에서 위치할 곳을 설정하려면 "List Apperance"(2) 속성 아래에 있는 "Selected Item Offset"을 설정하면 됩니다. 선택한 항목이 Scroll Wheel의 가운데에 위치하도록 하려고 하므로 "Selected Item Offset"을 (390-70)/2 = 160으로 설정합니다.

Custom Container를 Scroll Wheel에 추가한 후 속성 조정하기

"scrollWheel"의 영역을 강조 표시하기 위해, 1단계에서 다운로드한 .zip 파일에 들어 있는 두 개의 그림인 background.png와 overlay.png가 사용되며 애플리케이션에 Image 위젯으로 추가됩니다. 두 이미지 중 하나는 "scrollWheel" 영역을 강조하여 표시하는 배경이고 나머지 하나는 "scrollWheel"의 가장자리로 이동할 때 "scrollWhee"l의 항목을 숨기는 오버레이입니다.

background.png 이미지는 X = 205 및 Y = 45에 배치되고 "scrollWheel" 뒤에 있기 때문에 "scrollWheel"의 항목이 배경 위에 그려집니다. overlay.png 이미지는 "scrollWheel" 위에 배치되고 위치는 X = 0 및 Y = 0입니다. 즉, 항목이 overlay.png 아래에 그려지므로 overlay.png가 투명하지 않은 경우에는 항목이 보이지 않습니다.

CTRL-B와 CTRL-F 키를 눌러 위젯을 위젯 목록에서 앞뒤로 이동할 수 있습니다.

Scroll Wheel로 화면에 추가된 그래픽

"scrollWheel"에 대한 정적 속성만 조정했기 때문에 로직은 추가되지 않았습니다. 따라서 애플리케이션을 실행해도 20개의 항목으로 구성된 스크롤 가능한 메뉴가 모두 동일하게 표시됩니다. 다음 단계에서는 런타임 시 휠의 항목을 업데이트하는 사용자 코드를 사용하여 "scrollWheel"에 로직을 추가하겠습니다.

3단계: Scroll Wheel에 사용자 코드 추가하기

Scroll Wheel인 "scrollWheel"을 TouchGFX Designer에서 생성하고 구성했다면, 이 단계에서는 사용자 코드를 통해 "scrollWheel"의 항목을 업데이트하는 로직을 생성하겠습니다. 그러면 휠 내 항목의 위치에 따라 다른 그래픽이 표시됩니다. 따라서 이 단계에서는 TouchGFX Designer에서 생성한 코드와 사용자 코드를 통합해야 합니다. TouchGFX Designer 코드와 사용자 코드를 통합하는 방법에 대한 자세한 내용은 코드 구조 페이지에서 확인할 수 있습니다.

MenuElement의 이미지 및 텍스트 변경하기

Scroll Wheel의 항목은 1단계에서 생성한 Custom Container "MenuElement"를 기반으로 하므로 아이콘을 변경하고 와일드카드를 업데이트하는 사용자 코드를 "MenuElement"에 추가해야 합니다. TouchGFX Designer에서 Custom Container가 생성되면 Custom Container와 동일한 이름을 가진 .hpp 및 .cpp 파일이 생성됩니다. 사용자 코드는 이러한 파일에 통합되어야 합니다. 이 예제 애플리케이션에서 "MenuElement"에 대해 생성된 파일의 위치는 다음과 같습니다.

MyApplication2\gui\include\gui\containers\MenuElement.hpp

MyApplication2\gui\src\containers\MenuElement.cpp

“scrollWheel”의 항목이 텍스트와 아이콘을 변경할 수 있게 하려면 setNumber(int no) 함수를 "MenuElement"에 추가하면 됩니다. 이 함수는 no 변수를 사용하여 Image 위젯에 표시할 아이콘을 결정하고 TextArea 위젯의 Wildcard를 no 값으로 변경합니다.

TextArea에서 숫자 0~9를 사용하므로 Default 타이포그래피에서도 "Wildcard Ranges"에 "0~9"의 범위를 추가해야 합니다.

F4 키를 눌러 TouchGFX Designer에서 파일을 생성합니다.

setNumber(int no)의 선언과 구현은 아래와 같이 MenuElement.hpp에서 이루어집니다.

TouchGFX/gui/include/gui/containers/MenuElement.hpp

#ifndef MENUELEMENT_HPP
#define MENUELEMENT_HPP

#include <gui_generated/containers/MenuElementBase.hpp>
#include <images/BitmapDatabase.hpp>

class MenuElement : public MenuElementBase
{
public:
    MenuElement();
    virtual ~MenuElement() {}

    virtual void initialize();

    void setNumber(int no)
    {
        Unicode::itoa(no, textBuffer, TEXT_SIZE, 10);
        switch (no % 7)
        {
        case 0:
        icon.setBitmap(Bitmap(BITMAP_ICON00_ID));
            break;
        case 1:
        icon.setBitmap(Bitmap(BITMAP_ICON01_ID));
            break;
        case 2:
        icon.setBitmap(Bitmap(BITMAP_ICON02_ID));
            break;
        case 3:
        icon.setBitmap(Bitmap(BITMAP_ICON03_ID));
            break;
        case 4:
        icon.setBitmap(Bitmap(BITMAP_ICON04_ID));
            break;
        case 5:
        icon.setBitmap(Bitmap(BITMAP_ICON05_ID));
            break;
        case 6:
        icon.setBitmap(Bitmap(BITMAP_ICON06_ID));
            break;
        }
    }
protected:
};

#endif // MENUELEMENT_HPP

이 코드는 프로젝트 이미지를 참조하기 위해 비트맵 정의를 사용하고 있습니다. 비트맵 정의를 사용하려면 위에서 한 것처럼 "images/BitmapDatabase.hpp" 파일을 포함해야 합니다.

MenuElement의 내용을 업데이트하는 코드를 추가했으면 이제 Scroll Wheel의 항목을 업데이트하는 코드를 추가해야 합니다.

Scroll Wheel의 항목 업데이트하기

Scroll Wheel을 생성할 때 TouchGFX Designer는 Scroll Wheel의 새로운 항목이 표시될 때마다 호출되는 가상 함수를 Screen 기본 클래스에 생성합니다. 사용자 코드에서 이 함수를 재정의하면 코드가 Scroll Wheel의 항목과 인터랙션할 수 있습니다.

함수의 이름은 Scroll Wheel의 이름에 UpdatedItem이 추가된 이름입니다. 이 자습서에서는 이 함수를 scrollWheelUpdateItem(MenuElement& item, int16_t itemIndex)이라고 부릅니다.

매개변수 itemIndex는 현재 업데이트 중인 항목을 알려주는 인덱스 값이고, item은 현재 Scroll Wheel에 표시되는 MenuElement의 인스턴스에 대한 참조입니다. itemIndex가 업데이트 중인 항목을 알려주면 setNumber()가 호출되어 itemIndex 값에 따라 업데이트 중인 항목의 내용이 변경됩니다. Scroll Wheel 항목을 업데이트하는 데 사용되는 코드는 아래와 같습니다.

Screen1View.hpp

#ifndef SCREEN1VIEW_HPP
#define SCREEN1VIEW_HPP

#include <gui_generated/screen1_screen/Screen1ViewBase.hpp>
#include <gui/screen1_screen/Screen1Presenter.hpp>

class Screen1View : public Screen1ViewBase
{
public:
    Screen1View();
    virtual ~Screen1View() {}
    virtual void setupScreen();
    virtual void tearDownScreen();
    virtual void scrollWheelUpdateItem(MenuElement& item, int16_t itemIndex)
    {
        item.setNumber(itemIndex);
    }
protected:
};

#endif // SCREEN1VIEW_HPP

이제 애플리케이션의 시뮬레이터를 실행하면 항목의 텍스트에 해당 인덱스 값이 포함되고 표시되는 항목에 따라 아이콘이 변경되는 것을 볼 수 있습니다. 아래 이미지는 코드를 구현한 상태에서 실행되는 시뮬레이터의 예제를 보여줍니다.

시뮬레이터 실행하기

4단계: Scroll Wheel에 커스텀 동작 추가하기

자습서 4의 마지막 단계에서는 Scroll Wheel에 커스텀 동작을 추가하여 항목을 스크롤할 때 원형 패턴으로 움직이도록 하여 다이얼과 유사한 패턴으로 움직이도록 만들어 보겠습니다.

MenuElement에 커스텀 동작 추가하기

Scroll Wheel이 다이얼 패턴으로 움직이도록 하려면 Scroll Wheel에 표시되는 각각의 항목에 대해 Image 및 Text 위젯의 가로 위치를 바꿔주면 됩니다. 이를 위해 "MenuElement"의 setY() 함수를 MenuElement.hpp에서 재정의합니다. setY() 함수는 Custom Container가 세로 방향으로 움직일 때마다 호출되며 Custom Container를 새 위치에 다시 그리는 데 사용됩니다. 하지만 setY()를 재정의하면 Scroll Wheel을 스크롤할 때마다 Image 및 Text 위젯을 컨테이너 내에서 가로로 이동할 수도 있습니다. 아래 이미지는 MenuElement.hpp에서 새 setY() 함수를 구현하고 두 위젯을 이동하는 방법을 설명한 것입니다. math.h도 포함해야 한다는 점에 유의하십시오.

MenuElement.hpp

#ifndef MENUELEMENT_HPP
#define MENUELEMENT_HPP

#include <gui_generated/containers/MenuElementBase.hpp>
#include <images/BitmapDatabase.hpp>
#include <math.h>

class MenuElement : public MenuElementBase
{
public:
    MenuElement();
    virtual ~MenuElement() {}

    virtual void initialize();

    //Adjusts the position of the text and the icon, based in the calculated offset(x)
    void offset(int16_t x)
    {
        icon.setX(30 + x);
        text.setX(80 + x);
    }

    //The new declaration and implementation of the setY() function
    virtual void setY(int16_t y)
    {
        //set Y as normal
        MenuElementBase::setY(y);

        const int circleRadius = 250;

        //center around middle of background
        y = y + getHeight() / 2 - 390 /2;

        //calculate x
        float x_f = circleRadius - sqrtf((float)((circleRadius * circleRadius) - (y * y)));
        int16_t x = (int16_t)(x_f + 0.5f);

        offset(x);
    }

    ...

새로운 setY() 함수가 구현된 상태에서 시뮬레이터를 실행하면 이제 Scroll Wheel이 오버레이의 곡선을 따라 다이얼 패턴으로 움직이는 것을 볼 수 있습니다.

시뮬레이터 실행하기

이것으로 자습서 4를 마치겠습니다.

Further reading

자습서 전반에서 사용된 개념에 대해 자세히 알아보려면 몇 가지 개념에 대한 설명이 나와 있는 아래 챕터를 참조하십시오.

• Scroll Wheel 페이지에는 TouchGFX Designer에서 Scroll Wheel을 생성하고 구성하는 방법과 사용자 코드에서 로직을 생성하는 방법이 설명되어 있습니다.
• Custom Container 페이지에는 Custom Container의 개념과 사용 방법이 나와 있습니다.