주요 내용으로 건너뛰기

Circle Progress

Circle Progress는 배경 Image 상단에 Circle을 진행률 표시기로 사용하여 현재 진행률을 표시합니다. 여기서 Color와 Alpha, Circle에 대한 전반적인 매개변수를 모두 구성할 수 있습니다. 또한 커스텀 배경 이미지를 생성한 후 위치, 크기 등 진행률 표시기의 각 매개변수를 커스텀 배경 이미지에 맞게 변경할 수도 있습니다.

시뮬레이터에서 실행 중인 Circle Progress

위젯 그룹​

Circle Progress는 TouchGFX Designer의 Progress Indicators 위젯 그룹에 있습니다.

TouchGFX Designer의 Circle Progress

속성​

TouchGFX Designer에서 Circle Progress의 속성은 다음과 같습니다.

속성 그룹속성 설명
Name위젯 이름입니다. 이는 TouchGFX Designer와 코드에서 사용되는 고유 식별자입니다.
LocationX 와 Y는 상위 노드를 기준으로 위젯의 왼쪽 상단 모퉁이를 지정합니다.

W 와 H는 위젯의 가로 및 세로 길이를 지정합니다.
버튼의 크기는 선택한 이미지의 크기에 따라 결정됩니다.

Lock은 현재의 X, Y, W, H 위치에서 위젯의 고정 여부를 지정합니다.
위젯을 현재 위치에 고정시키면 스크린을 통한 위젯 인터랙션도 비활성화됩니다.

Visible은 위젯의 표시 여부를 지정합니다. 위젯을 보이지 않게 하면 스크린을 통한 위젯 인터랙션도 비활성화됩니다.
StyleStyle은 위젯의 사전 설정을 지정합니다. 여기에서 선택하는 속성은 사전 설정 값으로 지정됩니다.
이 스타일에는 자유롭게 사용할 수 있는 이미지가 포함되어 있습니다.
Image & ColorBackground는 배경 이미지를 지정합니다.

Progress는 원을 채울 때 사용할 색상이나 이미지를 지정합니다.
ValuesRange Min 과 Range Max는 표시기의 최소/최대 정수 값을 지정합니다.

Initial은 진행률 표시기의 초기 값을 지정합니다. Steps Total은 진행률 표시기가 새로운 값을 보고하는 크기의 단위를 지정합니다. 예를 들어 진행률을 0%, 10%, 20%, ..., 100%로 보고한다면 총 값은 10으로 설정되어야 합니다.

Steps Min은 진행률 표시기가 표시하는 최소 스텝을 지정합니다.
AppearanceCenter Position X 와 Center Position Y는 Circle Progress 상위 노드를 기준으로 진행 원의 중심 위치를 지정합니다.

Start & End Angle은 그려야할 원의 시작 각도와 종료 각도를 지정합니다.

Radius는 진행 원의 크기를 지정합니다.

Line Width는 진행 원의 너비를 지정합니다. 값이 0이면 진행 원의 너비는 반경과 일치합니다. 그렇지 않으면 지정된 너비에 따라 바깥에서 시작해서 안으로 이동하는 진행 원의 너비가 구성됩니다.

Cap Style은 선 끝의 스타일을 지정합니다.

Alpha는 위젯의 투명도를 지정합니다. 위젯의 알파 값 범위는 0부터 255까지입니다. 0은 완전 투명을, 255는 불투명을 의미합니다.
MixinsDraggable은 런타임 시 위젯의 드래그 가능 여부를 지정합니다.

ClickListener는 클릭했을 때 위젯의 콜백 실행 여부를 지정합니다.

FadeAnimator는 위젯의 알파 값 변경에 대한 애니메이션 처리 여부를 지정합니다.

MoveAnimator는 값 변경에 대한 애니메이션 처리 여부를 지정합니다. X 및 Y 값 변경에 대한 애니메이션 처리 여부를 지정합니다.

상호작용​

Circle Progress에서 지원되는 액션과 트리거는 다음 섹션에서 설명합니다.

액션​

위젯별 액션설명
Set value진행률 표시기의 값을 설정합니다.
표준 위젯 액션설명
Move widget시간이 지나면서 위젯을 새로운 위치로 이동시킵니다.
Fade widget시간이 지나면서 위젯의 알파 값을 변경합니다.
Hide widget위젯을 숨깁니다(visibility를 false로 설정).
Show widget숨긴 위젯이 보이도록 만듭니다(visibility를 true로 설정).

트리거​

트리거설명
Value update complete업데이트 애니메이션이 완료되면 트리거됩니다. 업데이트 지속 시간이 0이면 업데이트가 즉시 일어나지만 이 이벤트는 계속 트리거됩니다.
Value updated업데이트 애니메이션 과정에서 즉각적인 업데이트와 중간 단계에 대해 트리거됩니다. 새로운 값이 현재 값과 다를 때만 트리거됩니다.

성능​

Circle Progress는 Circle과 배경 Image로 구성됩니다. Circle은 CanvasWidget을 기반으로 하며, 렌더링 시 MCU의 영향을 많이 받습니다. 따라서 Circle Progress는 대부분의 플랫폼에서 까다로운 위젯으로 알려져 있습니다.

CanvasWidget 그리기 성능에 대한 자세한 내용은 일반 UI 구성요소 성능 섹션을 참조하십시오.

예제​

생성 코드​

View 기본 클래스의 생성 코드를 보면 TouchGFX Designer에서 Circle Progress가 어떻게 설정되는지 알 수 있습니다.

Screen1ViewBase.cpp
circleProgress.setXY(188, 84);
circleProgress.setProgressIndicatorPosition(0, 0, 104, 104);
circleProgress.setRange(0, 100);
circleProgress.setCenter(52, 52);
circleProgress.setRadius(50);
circleProgress.setLineWidth(0);
circleProgress.setStartEndAngle(0, 360);
circleProgress.setBackground(touchgfx::Bitmap(BITMAP_BLUE_PROGRESSINDICATORS_BG_MEDIUM_CIRCLE_INDICATOR_BG_FULL_ID));
circleProgressPainter.setBitmap(touchgfx::Bitmap(BITMAP_BLUE_PROGRESSINDICATORS_FILL_MEDIUM_CIRCLE_INDICATOR_FILL_FULL_ID));
circleProgress.setPainter(circleProgress1Painter);
circleProgress.setValue(0);

사용자 코드​

다음 예제는 handleTickEvent() 함수를 구현하여 진행을 시뮬레이션하는 방법을 나타낸 것입니다. 이 코드를 실행하면 이 섹션의 초반에 제시된 애플리케이션이 생성됩니다.

Screen1View.hpp
class Screen1View : public Screen1ViewBase
{
public:
    Screen1View();
    virtual ~Screen1View() {}
    virtual void setupScreen();
    virtual void tearDownScreen();
    virtual void handleTickEvent();
protected:
    bool increase = true;
};
Screen1View.cpp
void Screen1View::handleTickEvent()
{
    int currentValue = circleProgress.getValue();
    int16_t max;
    int16_t min;
    circleProgress.getRange(min, max);

    if (currentValue == min)
    {
        increase = true;
    }
    else if (currentValue == max)
    {
        increase = false;
    }

    int nextValue = increase == true ? currentValue+1 : currentValue-1;

    circleProgress.setValue(nextValue);
}
Tip
사용자 코드의 CircleProgress 클래스에서 위의 함수와 나머지 함수들을 사용할 수 있습니다. 예를 들어 위젯의 모양을 바꾸고 싶다면 circleProgress1.invalidate() 함수를 호출하여 강제로 다시 그리기를 해야 합니다.

TouchGFX Designer Example​

Circle Progress에 대해 자세히 알아보려면 TouchGFX Designer에서 다음 UI 템플릿을 사용해 새로운 애플리케이션을 생성하십시오.

TouchGFX Designer의 Progress Indicator Example UI 템플릿

API 참조​

Further reading
  • CircleProgress 클래스에 대한 API 참조