Angulargauge¶
목적¶
계기판(Angular Gauge) 이미지를 활용하여 이벤트를 적용하고 UI를 구성하는 방법을 설명
주요 단계¶
1. Angulargauge UI 생성¶
1.1. 원하는 위치에 Angulargauge UI를 생성하는 방법 설명¶
<사진 1> Angulargauge UI 설정 화면
1.2. Angulargauge UI 속성¶
| Name | Description |
|---|---|
| arrowValue | 계기판 화살표 값 |
| bottomText | 계기판 하단 텍스트 |
| bottomTextBold | 하단 텍스트 굵기 설정 |
| bottomTextColor | 하단 텍스트 색상 설정 |
| bottomTextSize | 하단 텍스트 크기 설정 |
| endValue | 계기판 최대값 |
| fontSize | 계기판 속도 값 크기 설정 |
| headerTitle | 계기판 상단 제목 |
| headerTitleBold | 상단 제목 굵기 설정 |
| headerTitleColor | 상단 제목 색상 설정 |
| headerTitleSize | 상단 제목 크기 설정 |
| height | 계기판 높이 조절 |
| innerTitle | 계기판 내부 제목 |
| innerTitleBold | 내부 제목 굵기 설정 |
| innerTitleColor | 내부 제목 색상 설정 |
| innerTitleSize | 내부 제목 크기 설정 |
| outlineThickness | 계기판 테두리 두께 설정 |
| startValue | 계기판 시작값 |
| tickThickness | 계기판 눈금 굵기 |
| valueInterval | 계기판 값 간격 설정 |
| visible | 계기판 표시 여부 |
| width | 계기판 너비 조절 |
| arrowRadius | 계기판 화살표 길이 |
| centerX | 계기판 가로 위치 (예: 100px, -80px, 80%) |
| centerY | 계기판 세로 위치 (예: 100px, -80px, 80%) |
| endAngle | 계기판 오른쪽 각도 설정 |
| startAngle | 계기판 왼쪽 각도 설정 |
| unit | 계기판 속도 단위 값 설정 |
| styleClass | 계기판에 적용할 CSS |
2. Angulargauge Property 위치¶
2.1. Angulargauge 속성 위치 확인¶
<사진 2> Angulargauge 속성 위치 화면
3. Angulargauge Property - centerY 조절¶
- centerY 값을 조절하면 계기판이 위/아래로 이동
-
- 값 증가 시 UI가 위로 이동
-
- 값 증가 시 UI가 아래로 이동
<사진 3> Angulargauge Property - centerY 변경시 위치 비교 화면(Gauge2 : 0%)
4. Angulargauge Property - centerX 조절¶
- centerX 값을 조절하면 계기판이 좌/우로 이동
-
- 값 증가 시 UI가 왼쪽으로 이동
-
- 값 증가 시 UI가 오른쪽으로 이동
<사진 4> Angulargauge Property - centerX 변경시 위치 비교 화면(Gauge2 : 0%)
5. Angulargauge Events - GaugeClick¶
- 계기판을 클릭했을 때 발생하는 이벤트 설정
<사진 5> GaugeClick Event Method에 입력된 메세지 호출 표시 화면
6. Angulargauge Aggregation - AngulargaugeBand¶
- AngulargaugeBand 설정 방법 설명
<사진 6> AngulargaugeBand 설정시 Angulargauge에 적용된 화면
6.1. AngulargaugeBand 속성¶
| Name | Description |
|---|---|
| bandColor | AngularGaugeBand 색상 설정 |
| endValue | AngularGaugeBand 종료 위치 설정 |
| innerRadius | AngularGaugeBand 표시 영역 반경 설정 (0% ~ 100%) 속성 : radius 와 한쌍으로 영역 설정 |
| startValue | AngularGaugeBand 시작 위치 설정 |
| gradient | AngularGaugeBand 색상 그라데이션 여부 |
| radius | AngularGaugeBand 표시 영역 반경 설정 (0% ~ 100%) 속성 : innerRadius 와 한쌍으로 영역 설정 |
7. AngulargaugeBand Property - Radius, InnerRadius¶
- radius,
innerRadius 속성은 한 쌍으로 설정되어야 함
7.1. innerRadius 값이 작은 경우 내부에서 시작하여 바깥쪽으로 표시¶
<사진 7> Radius: 100% ,InnerRadius : 70% 설정시 적용된 화면
7.2. radius 값이 더 작을 경우 바깥쪽에서 내부로 표시¶
<사진 8> Radius: 70% , InnerRadius
: 100% 설정시 적용된 화면
8. AngulargaugeBand Events - BandClick¶
- AngulargaugeBand 클릭 시 발생하는 이벤트 설정
<사진 9> AngulargaugeBand 영역 클릭시 Event - bandClick 에 등록된 메시지 호출 화면