정적 그래프

'@site/components/Figure'에서 Figure 가져오기, '@site/components/FurtherReading'에서 FurtherReading 가져오기, '@site/components/Tip'에서 Tip 가져오기, '@site/components/InlineCode'에서 InlineCode 가져오기, '@docusaurus/Link'에서 Link 가져오기, '@site/components/CodeHeader'에서 CodeHeader 가져오기

TouchGFX에서 정적 그래프(Static Graph)는 애플리케이션이 좌표계에 데이터 포인트를 표시할 수 있게 해주는 위젯입니다.

정적 그래프의 시각적 형태는 그래프 요소, 격자 선, 그리고 라벨을 통해 결정됩니다.

시뮬레이터에서 실행 중인 정적 그래프

생성된 데이터의 시계열을 표시하려는 경우에는 다양한 업데이트 모드를 제공한다는 점에서 동적 그래프가 더 나은 선택입니다.

위젯 그룹

정적 그래프는 TouchGFX Designer의 Miscellaneous 위젯 그룹에 있습니다.

TouchGFX Designer의 정적 그래프

속성

TouchGFX Designer의 정적 그래프는 다음과 같은 속성을 갖습니다.

속성 그룹	속성 설명
Name	위젯 이름입니다. 이름은 TouchGFX Designer 및 코드에서 사용되는 고유한 식별자입니다..
Location	X와 Y는 상위 노드를 기준으로 위젯의 왼쪽 상단 모퉁이를 지정합니다. W and H는 위젯의 가로 및 세로 길이를 지정합니다. Lock은 현재의 X, Y, W, H 위치에서 위젯의 고정 여부를 지정합니다. 위젯을 현재 위치에 고정시키면 스크린을 통한 위젯 상호 작용도 비활성화됩니다. Visible은 위젯의 표시 여부를 지정합니다. 위젯을 보이지 않게 하면 스크린을 통한 위젯 상호 작용도 비활성화됩니다.
Graph Area Margin	Margin은 필요한 그래프 라벨 공간의 크기를 지정합니다. Top은 은 그래프 영역 위의 라벨 공간 크기를 지정합니다. Bottom은 그래프 영역 아래의 라벨 공간 크기를 지정합니다. Left는 그래프 영역 왼쪽의 라벨 공간 크기를 지정합니다. Right는 그래프 영역 오른쪽의 라벨 공간 크기를 지정합니다.
Graph Area Padding	Padding은 그래프 영역 내에서 그래프 요소 주위에 필요한 여백의 크기를 지정합니다. Top은 그래프 영역 상단의 여백 크기를 지정합니다. Bottom은 그래프 영역 하단의 여백 크기를 지정합니다. Left는 그래프 영역 왼쪽의 여백 크기를 지정합니다. Right는 그래프 영역 오른쪽의 여백 크기를 지정합니다.
Data Points	Number of Data Points는 그래프에서 표시할 수 있는 값의 수를 지정합니다. X-axis range는 x축에 표시할 값의 범위를 지정합니다. X-axis Precision은 그래프가 X축에 표시할 수 있는 소수점 자리 수를 지정합니다. Y-axis range는 y축에 표시할 값의 범위를 지정합니다. Y-axis Precision은 그래프가 Y축에 표시할 수 있는 소수점 자리 수를 지정합니다. Generate Random Values는 코드 생성 시 난수 값의 초기화 여부를 지정합니다. (난수 값은 TouchGFX Designer의 캔버스에 항상 표시됩니다.)
Elements	Area, Boxes, Diamonds, Dots, Histogram과 Line은 위젯의 시각적 형태를 구성하는 요소를 지정합니다. 각 요소마다 1개 이상씩 추가할 수 있습니다..
Vertical Grid Lines	Major Division은 세로 방향 대분할 격자 선의 활성화 여부를 지정합니다. Minor Division은 세로 방향 소분할 격자 선의 활성화 여부를 지정합니다. 이 속성은 Major Division을 활성화한 경우에만 활성화할 수 있습니다.
Horizontal Grid Lines	Major Division은 가로 방향 대분할 격자 선의 활성화 여부를 지정합니다. Minor Division은 가로 방향 소분할 격자 선의 활성화 여부를 지정합니다. 이 속성은 Major Division을 활성화한 경우에만 활성화할 수 있습니다.
X-Axis Labels	Major Division은 x축에서 대분할 라벨의 활성화 여부를 지정합니다. Minor Division은 x축에서 소분할 라벨의 활성화 여부를 지정합니다. 이 속성은 Major Division을 활성화한 경우에만 활성화할 수 있습니다.
Y-Axis Labels	Major Division은 y축에서 대분할 라벨의 활성화 여부를 지정합니다. Minor Division은 y축에서 소분할 라벨의 활성화 여부를 지정합니다. 이 속성은 Major Division을 활성화한 경우에만 활성화할 수 있습니다.
Appearance	Alpha는 위젯의 투명도를 지정합니다. 위젯의 알파 값 범위는 0부터 255까지입니다. 0은 완전 투명을, 255는 불투명을 의미합니다.
Mixins	Draggable은 런타임에서 위젯의 드래그 가능 여부를 지정합니다. ClickListener는 클릭했을 때 위젯의 콜백 실행 여부를 지정합니다. FadeAnimator는 위젯의 알파 값 변경에 대한 애니메이션 처리 여부를 지정합니다. MoveAnimator는 위젯의 X 및 Y 값 변경에 대한 애니메이션 처리 여부를 지정합니다

Precision

정적 그래프는 모든 데이터 포인트를 32비트 정수로 내부에 저장하므로, 데이터 포인트를 추가하여 정확도를 나타내는 일정 자리 수로 표시하려면 정밀도를 정의하면 됩니다.

예를 들어 정밀도가 0.1로 설정되면 정적 그래프에 추가되는 각 데이터 포인트는 내부에서 10과 곱셈하여 한 자리 수의 정밀도를 시뮬레이션합니다. 단, 정밀도가 높아지면 상한값과 하한값이 지정한 정밀도의 인수만큼 각각 낮아지고 높아집니다. 정밀도는 X축과 Y축에 대해 개별적으로 선택할 수 있습니다.

정밀도	하한값	상한값
1	-1,000,000,000	1,000,000,000
0.1	-100,000,000	100,000,000
0.01	-10,000,000	10,000,000
0.001	-1,000,000	1,000,000
0.0001	-100,000	100,000

위의 표에 있는 상한값과 하한값은 대략적인 추산 값입니다.

정적 그래프에 데이터 추가하기

코드에서 addDataPoint 메서드를 사용해 데이터 포인트를 그래프에 손쉽게 추가할 수 있습니다. 데이터 포인트가 그래프에 추가되면 축에 설정된 정밀도에 따라 내부적으로 크기가 조정됩니다. 예를 들어 X축과 Y축 모두에서 정밀도 "0.1"을 선택하고 데이터 포인트(10, 20)를 추가한다고 가정해봅시다. 그런 다음, x=10.0 및 y=20.0을 나타내기 위해 그래프에서 내부적으로 값이 x=100 및 y=200으로 변환됩니다.

부동 소수점 값을 추가할 수도 있습니다. 그런 다음, 정밀도와 일치하도록 값이 조정되고 반올림됩니다. 예를 들면 x=10.12f 및 y=10.18f 값은 내부적으로 x=101, y=102로 표시됩니다.

세 번째로 가능한 것은 이미 조정된 값을 추가하는 것입니다. 이 경우, 값은 변환되지 않습니다. x=10.1 및 y=20.2를 나타내기 위해 x=101 및 y=202 값이 변환 없이 내부에 저장됩니다.

메서드	설명
int16_t addDataPoint(int x, int y)	그래프에 데이터 포인트(x,y)를 추가합니다. 값은 그래프에 설정된 정밀도에 따라 조정됩니다.
int16_t addDataPoint(float x, float y)	그래프에 데이터 포인트(x,y)를 추가합니다. 값은 그래프에 설정된 정밀도에 따라 조정됩니다.
int16_t addDataPointScaled(int x, int y)	그래프에 데이터 포인트(x,y)를 추가합니다. 값은 조정되지 않습니다.

다음 코드는 그래프에 4개의 포인트를 추가합니다(0에서 100까지의 축, 정밀도 0.1).

    graph1.addDataPointScaled(100, 300); // x=10.0, y=30.0
    graph1.addDataPoint(40,40);          // x=40.0, y=40.0
    graph1.addDataPointScaled(720,802);  // x=72.0, y=80.2
    graph1.addDataPoint(90.0f,30.0f);    // x=90.0, y=30.0

데이터 추가 이후의 정적 그래프

addDataPoint 메서드를 사용해 데이터를 추가할 때 정적 그래프는 그래프의 해당 부분을 자동으로 다시 드로잉합니다.

그래프 영역, 외부 여백 및 내부 여백

동적 그래프는 모든 그래프 요소와 격자 선을 그래프 영역에 렌더링하고 내부 여백(padding)과 외부 여백(margin)으로 둘러쌉니다. 내부 여백과 외부 여백이 모두 0으로 정의되면 그래프 영역은 정적 그래프에 지정된 크기를 따르게 됩니다.

x축과 y축을 따라 라벨 공간을 만들고 싶다면 여백을 정의하면 됩니다. 외부 여백 설정은 위젯 내부의 그래프 요소 (영역, 상자, 다이아몬드 등)가 포함된 그래프 영역을 이동시켜서 x축과 y축을 따라 라벨을 위한 공간을 확보합니다.

아래 그림에서 빨간색 영역이 오른쪽, 상단, 왼쪽, 하단으로 20 px씩 추가된 외부 여백을 나타냅니다.

여백의 크기에 따라 일부 요소가 그래프 영역의 가장자리 가까이에 근접할 경우 부분적으로 보이지 않게 됩니다. 이러한 경우에는 내부 여백을 정의하면 됩니다. 내부 여백 설정은 그래프 요소 (영역, 상자, 다이아몬드 등)를 포함하는 그래프 영역 내부에 약간의 내부 여백을 추가합니다. 이렇게 하면 완전히 그려진 그래프 영역 가장자리에서 격자 선, 상자, 점, 다이아몬드, 히스토그램 및 선 요소를 그릴 수 있습니다.

그 밖에 각 축을 따라 표시되는 라벨과 그래프 영역 사이에 추가 공간을 만드는 데도 내부 여백 설정이 사용됩니다.

아래 그림에서 주황색 영역이 오른쪽, 상단, 왼쪽, 하단으로 20 px씩 추가된 내부 여백을 나타냅니다. 또한 내부 여백에서 박스 요소가 어떻게 그려지게 되는지 보여주고 있습니다.

정적 그래프의 외부 여백과 내부 여백 예시

Elements

정적 그래프에는 데이터를 표시할 수 있는 6가지 요소가 있는데, 바로 영역, 박스, 다이아몬드, 점, 히스토그램, 그리고 선입니다.

영역

영역(Area) 요소는 그래프에서 데이터 포인트를 연결하는 선 아래 영역을 채웁니다.

정적 그래프의 영역 요소 예시

속성	속성 설명
이미지	영역을 채울 때 사용할 이미지를 지정합니다.
색상	영역을 채울 때 사용할 색상을 지정합니다.
Baseline	영역을 그리는 기준선을 지정합니다. 일반적으로 기준선이 0이면 양의 y 값 아래로, 그리고 음의 y 값 위로 영역이 그려지게 됩니다.
알파	영역의 투명도를 지정합니다. 위젯의 알파 값 범위는 0부터 255까지입니다. 0은 완전 투명을, 255는 불투명을 의미합니다.

API 참조

GraphElementArea 클래스에 대한 API 참조

박스

박스(Boxes) 요소는 그래프의 데이터 포인트마다 정사각형 박스를 드로잉합니다.

정적 그래프 박스 요소 예시

속성	속성 설명
색상	박스를 채울 때 사용할 색상을 지정합니다.
Box Size	박스의 크기를 지정합니다.
알파	박스의 투명도를 지정합니다. 위젯의 알파 값 범위는 0부터 255까지입니다. 0은 완전 투명을, 255는 불투명을 의미합니다.

API 참조

GraphElementBoxes 클래스에 대한 API 참조

다이아몬드

다이아몬드(Diamonds) 요소는 그래프의 데이터 포인트마다 다이아몬드(모퉁이가 상하좌우에 있는 사각형)를 그립니다.

정적 그래프의 다이아몬드 요소 예시

속성	속성 설명
이미지	다이아몬드를 채울 때 사용할 이미지를 지정합니다.
색상	다이아몬드를 채울 때 사용할 색상을 지정합니다.
Diamond Size	다이아몬드의 크기를 지정합니다.
알파	다이아몬드의 투명도를 지정합니다. 위젯의 알파 값 범위는 0부터 255까지입니다. 0은 완전 투명을, 255는 불투명을 의미합니다.

API 참조

GraphElementDiamonds 클래스에 대한 API 참조

점

점(Dots) 요소는 그래프의 데이터 포인트마다 원형 점을 그립니다.

정적 그래프 점 요소 예시

속성	속성 설명
이미지	점을 채울 때 사용할 이미지를 지정합니다.
색상	점을 채울 때 사용할 색상을 지정합니다.
Dot Size	점의 크기를 지정합니다.
알파	점의 투명도를 지정합니다. 위젯의 알파 값 범위는 0부터 255까지입니다. 0은 완전 투명을, 255는 불투명을 의미합니다.

API 참조

GraphElementDots 클래스에 대한 API 참조

히스토그램

히스토그램(Histogram) 요소는 그래프의 데이터 포인트마다 x축에서 막대를 그리는 데 사용됩니다. 각 막대마다 상단에 그래프가 추가로 배치된 경우에는 히스토그램을 왼쪽이나 오른쪽으로 살짝씩 옮길 수 있습니다.

정적 그래프 히스토그램 요소 예

속성	속성 설명
이미지	히스토그램을 채울 때 사용할 이미지를 지정합니다.
색상	히스토그램을 채울 때 사용할 색상을 지정합니다.
Bar Width	히스토그램 막대의 너비를 지정합니다.
Bar Offset	가로 방향 축을 따라 막대 오프셋을 지정합니다.
Baseline	히스토그램을 드로잉하는 기준선을 지정합니다. 일반적으로 기준선이 0이면 양의 y 값 아래로, 그리고 음의 y 값 위로 히스토그램이 그려지게 됩니다.
알파	히스토그램의 투명도를 지정합니다. 위젯의 알파 값 범위는 0부터 255까지입니다. 0은 완전 투명을, 255는 불투명을 의미합니다.

API 참조

GraphElementHistogram 클래스에 대한 API 참조

선

선(Line) 요소는 그래프의 데이터 포인트를 지나는 선을 일정한 너비로 그립니다.

정적 그래프의 선 요소 예시

속성	속성 설명
이미지	선을 채울 때 사용할 이미지를 지정합니다.
색상	선을 채울 때 사용할 색상을 지정합니다.
Line Width	선 너비를 지정합니다.
알파	선의 투명도를 지정합니다. 위젯의 알파 값 범위는 0부터 255까지입니다. 0은 완전 투명을, 255는 불투명을 의미합니다.

API 참조

GraphElementLine 클래스에 대한 API 참조

격자 선

정적 그래프는 대분할과 소분할 모두에서 가로 및 세로 방향으로 격자 선을 가질 수 있습니다.

소분할보다는 대분할이 우선하기 때문에 대분할이 있는 위치에서는 소분할이 그려지지 않습니다.

정적 그래프의 격자 선 요소 예시

속성	속성 설명
색상	격자 선을 채울 때 사용할 색상을 지정합니다.
Interval	격자 선을 그릴 간격을 지정합니다.
Line Width	격자 선 너비를 지정합니다.
알파	선의 투명도를 지정합니다. 위젯의 알파 값 범위는 0부터 255까지입니다. 0은 완전 투명을, 255는 불투명을 의미합니다.

API 참조

GraphElementGridBase 클래스에 대한 API 참조

GraphElementGridX 클래스에 대한 API 참조

GraphElementGridY 클래스에 대한 API 참조

라벨

. 정적 그래프는 대분할과 소분할 모두에서 x축 및 y축 라벨에 값을 표시할 수 있습니다.

소분할보다는 대분할이 우선하기 때문에 대분할이 있는 위치에서는 소분할이 그려지지 않습니다.

정적 그래프의 라벨 요소 예시

속성	속성 설명
위치	라벨의 위치를 지정합니다. x축에 가능한 위치는 "Top"과 "Bottom"입니다. y축에 가능한 위치는 "Left"와 "Right"입니다.
Text	ID는 사용되는 텍스트를 지정합니다. 위젯에서 자동 생성된 텍스트를 사용하는 경우에는 ID에 'Auto-generated'라고 표시가 될 것입니다. Translation은 표시할 텍스트의 내용을 지정합니다. Typography는 텍스트의 형식을 지정합니다. Alignment는 텍스트의 가로 맞춤을 지정합니다. 텍스트 구성에 관한 자세한 내용은 텍스트 및 글꼴 사용 섹션을 참조하십시오.
Text Rotation은	라벨의 회전 각도를 지정하며, 가능한 값은 "0", "90", "180", "270"입니다.
Text Color	라벨을 채울 때 사용할 색상을 지정합니다.
Interval	라벨을 그릴 간격을 지정합니다.
Number of Decimals	축을 따라 라벨에 표시할 소수점 자리 수를 지정합니다.
Decimal Separator	소수점 구분 문자로 ',' 또는 '.' 중에서 지정합니다.
알파	선의 투명도를 지정합니다. 위젯의 알파 값 범위는 0부터 255까지입니다. 0은 완전 투명을, 255는 불투명을 의미합니다.

API 참조

GraphLabelsBase 클래스에 대한 API 참조

GraphLabelX 클래스에 대한 API 참조

GraphLabelsY 클래스에 대한 API 참조

상호작용

TouchGFX Designer의 정적 그래프에서 지원되는 액션과 트리거는 다음과 같습니다.

액션

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

트리거

상호작용을	설명
Graph Clicked	정적 그래프가 클릭되었습니다.
Graph Dragged	정적 그래프가 드래그되었습니다.

성능

정적 그래프 성능은 위젯의 설정에 따라 다릅니다. 일부 그래프 요소는 다른 요소보다 그리는 속도가 더 빠릅니다.

박스와 히스토그램은 픽셀 데이터를 읽거나 복잡한 계산이 필요하지 않기 때문에 그리는 속도가 가장 빠른 그래프 요소입니다.

영역, 다이아몬드, 점 및 선은 캔버스 위젯으로, 렌더링 시 MCU의 영향을 많이 받습니다.

드로잉 성능에 대한 자세한 내용은 일반 UI 구성요소 성능 섹션을 참조하십시오.

Examples

생성 코드

In the generated code for the View base class we can see how the Designer sets up a Static Graph.

Screen1ViewBase.cpp

graph1.setScaleX(10);
graph1.setScaleY(10);
graph1.setPosition(80, 16, 320, 240);
graph1.setGraphAreaMargin(0, 20, 0, 22);
graph1.setGraphAreaPadding(15, 0, 20, 0);
graph1.setGraphRangeX(0, 100);
graph1.setGraphRangeY(0, 100);

graph1Line1Painter.setColor(touchgfx::Color::getColorFromRGB(20, 151, 197));
graph1Line1.setPainter(graph1Line1Painter);
graph1Line1.setLineWidth(2);
graph1.addGraphElement(graph1Line1);

사용자 코드의 DynamicGraph 클래스에서 위의 함수와 나머지 함수들을 사용할 수 있습니다. 예를 들어 위젯의 모양을 바꾸고 싶다면

dynamicGraph.invalidate()

함수를 호출하여 강제로 다시 그리기를 해야 합니다.

TouchGFX Designer 예

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

TouchGFX Designer의 정적 그래프 예제 UI 템플릿

API 참조

Graph 클래스에 대한 API 참조

GraphData 클래스에 대한 API 참조

StaticDataGraph 클래스에 대한 API 참조

AbstractDataGraph 클래스에 대한 API 참조