[FMX] 다양한 옵션의 커스텀 UI 도구 제작 3 - PieGauge

[c2design]

FireMonkey의 여러가지 편리한 기능들을 이용한 PieGauge 커스텀 UI 제작 방법을 소개 합니다.

이전 글에서도 설명하였듯이 커스텀 UI를 만들어서 사용하게 되면 컬러와 크기 및 형태에 대한 제한이 없이 프로젝트를 구성 할 수 있는 장점이 있습니다.

1. TPie 특징 이해

PieGauge 는 TPie 객체를 사용하며 제작 하는데 TPie 는 StartAngle 과 EndAngle 속성을 이용하여 크기를 지정 합니다.

이때 StartAngle 이 0도 일 때의 시작 점을 보면  좌표계 기준으로 X 축에서 시계 방향으로 각도가 점차 넓어 지는 특징을 가지고 있습니다.

위의 캡쳐 화면을 보면 회색의 3개 TPie는 EndAngle 값이 각각 30도 90도 120도의 값으로 점차 넓어지는 형태 입니다.

그러므로 보통의 게이지 형태로 사용하기 위해서는 회색 파이의 형태 보다는 아래의 하늘색 파이와 같이 왼쪽( -X축기준) 에서 오른쪽으로 넓어지는 모습이 적당 합니다. 그러므로 StartAngle=0 기준으로 파이를 넓히기 위해서는 회색 파이를 180도 회전 시키면 됩니다

FireMonkey 의 Visible 한 모든 객체들은 Roatation  속성을 가지고 있어서 원하는 각도로 회전 시킬 수 있다는 것은 아주 강력한 기능 입니다.

이 Roatation 속성에 180도로 지정하게 되면 파이를 화면의 하늘색 TPie 형태로 쉽게 만들 수 있습니다.

 

2. 객체 조합하여 게이지 형태 구성

FireMonkey 객체의 트리 구조 형태로 배치 가능한 특성을 이용하여 TRectagle 과 TPie 2개 및 TCircle 을 아래 화면과 같이 쌓게 되면 게이지 형태를 만들 수 있습니다. 이해를 돕기 위해 TRectagle 과 TCircle을 색상으로 구분 하였으므로 프로젝트 시작 시에 Form 바탕색과 같은 색상으로  지정 하면 됩니다.

이때 TRectagle 포함 모든 객체들은 Witdh 와 Height를 같은 값으로 지정해서 정사각형으로 설정해야 모양이 찌그러지지 않습니다.

TRectagle 위에 TPie 는 Align을 Client 로 지정하고 TCircle 은 Center 로 지정하면 배치를 좀 더 쉽게 할 수 있습니다.

TCircle 의 크기에 따라 게이지의 두께를 조절할 수 있고, 

게이지 데이터 값은 맨위에 놓여진 Pie 의 EndAngle 값으로 설정하면 됩니다.

첫번째 녹색 게이지는 EndAngle 값의 범위가 0도 ~ 180 도 입니다.

두번째 보라색 게이지는 EndAngle 값의 범위가 20도 ~ 160도 이므로 TPie 의 StartAngle을 20도 놓고 EndAngle 을 160 도 까지 변화 시키면 됩니다.  

이렇게 TCircle 의 크기와 TPie 의 Angle 값을 이용하여 게이지 두께와 범위를 자유롭게 설정 할 수 있습니다.

예제에는 나와 있지 않지만 TPie Angle 범위를 360도를 지정하면 원형 형태의 게이지도 만들 수 있으니 시도해 보시면 좋을 것 같습니다.

procedure TMForm.FormCreate(Sender: TObject);
begin
  Rect_Base.Fill.Color    := self.Fill.Color;  // 배경색 맞춤
  Circle_Cover.Fill.Color := self.Fill.Color;

  Rect_Base2.Fill.Color    := self.Fill.Color;  // 배경색 맞춤
  Circle_Cover2.Fill.Color := self.Fill.Color;
end;

 

 3. 데이터에 따른 게이지 Value 값 설정

데이터 값을 게이지 Value에 적용 하는 방법은 간단한 비례식을 사용 하면 됩니다.

100% 를 기준으로 하였을때 TPie EndAngle 값이 180도 이므로 Trackbar를 사용하여 데이터를 변화 시켜보면

[ EndAngle :180 = Trackbar 상태값(Value) :100 ]  가 되는데 알고 싶은 값은 EndAngle 이므로

EndAngle = Trackbar 상태값 * 180  / 100 으로 된 수식을 사용 하면 됩니다.

두번째 보라색 게이지 같은 경우는 StartAngle 이 20도 이고 EndAngle 이 160도 이므로 180도 기준으로 양 끝에서 각각 20도씩 각이 줄어 든 형태 입니다. 그러므로 180도 기준이 아닌 180 - 20*2 값인 140 도를 기준으로 잡고 시작 각도인 StartAngle에 20도를 더해 주면 되는데 이 각도를 변수로 설정하여 일반화 시켜서 소스에 적용 하였습니다.

그러므로 게이지 범위 각도를 변화 시키고 싶으면 원하는 각도 만큼 StartAngle 값과 EndAngle 값을 지정 하면 됩니다.

procedure TMForm.TrackBar1Change(Sender: TObject);
begin
  Pie_Value.EndAngle := TrackBar1.Value * 180 / 100;
  Text1.Text :=  Round( TrackBar1.Value ).ToString;

  Pie_Value2.EndAngle := TrackBar1.Value * ( 180 - Pie_Base2.StartAngle * 2 ) / 100 + Pie_Base2.StartAngle;
  Text2.Text :=  Round( TrackBar1.Value ).ToString;
end;

 

 

샘플프로젝트 소스

FMXPieGauge.zip

 

이와 같은 원리를 이용하여 다양한 FMX UI 요소를 컴포넌트로 만들어서 배포 중에 있으니 참고 하시기 바랍니다.