Trend Chart&View 사용하기!
Trend Chart&View 사용하기
수평/수직 슬라이드를 이용해 데이터 값을 변경시키고, 실시간 차트와 표로 데이터를 표현한다.
1. 배경 설정
1) Designer 상단 도구모음에서 이미지(Image) 클릭 후 작화 화면 전체를 드래그하고 배경화면 이미지를 선택한다.
2) 작업 중 배경이 움직이지 않도록 객체 탐색기(Object Explorer)에서 배경화면을 객체 잠금한다.
2. 태그 생성하기
1) 태그 탐색기(Tag Explorer)에서 마우스 우측 클릭 후 그룹 태그 추가(New Group)한 뒤 키보드의 F2를 눌러 이름을 “Trend”로 설정한다.
2) 생성한 “Trend” 그룹 안에 2개의 Analog Tag를 추가한 뒤 아래와 같이 이름을 변경한다.
3. 화면 구성하기
1) 디자인 화면 우측 상단에 사각형(Rectangle), 타원(Ellipse), 텍스트(Text) 객체를 활용하여 Control Box를 생성한다.
(1) 도구모음에서 2개의 사각형(Rectangle)을 생성한 뒤 구분을 위해 속성(Properties)에서 면 색상 변경(FillColor)을 한다.
(2) 아래의 검정색 사각형(Rectangle) 좌측 상단에 수평/수직 슬라이드를 적용할 타원(Ellipse)을 생성한 뒤 배경과 대비가 잘 되도록 속성(Properties)에서 면 색상 변경(FillColor)을 한다.
(3) 회색 사각형(Rectangle) 안에 텍스트(Text)를 추가한 뒤 속성(Properties)에서 텍스트(Text)를 “Data Control”로 변경한다.
2) Data Control Box의 타원 객체를 더블클릭 후 수평 슬라이드(Horizontal Slide)와 수직 슬라이드(Vertical Slide) 체크 선택 후 아래와 같이 설정한다.
· 슬라이드(Slide)의 길이(Length)는 작화한 객체에 따라 다를 수 있다.
3) Data Control Box 아래에 텍스트(Text)와 레이블(Label), 삼각형(Triangle), 직선(Line)을 이용하여 개별 제어 컨트롤러를 만든다.
(1) 도구모음에서 2개의 텍스트(Text)를 생성한 뒤 속성(Properties)에서 텍스트(Text)를 아래와 같이 변경한다.
(2) 도구모음에서 2개의 레이블(Label) 생성 후 속성(Properties)에서 바인딩 태그(Binding Tag)를 한다.
· Data A Label의 Binding Tag : Trend.Data_A
· Data B Label의 Binding Tag : Trend.Data_B
(3) 삼각형(Triangle)과 직선(Line)을 생성한 뒤 2개의 삼각형(Triangle) 모두 속성(Properties)에서 각도(Angle)를 90으로 설정한다.
3) 태그 개별 제어를 위해 삼각형(Triangle)에 수평 슬라이드(Horizontal Slide)를 설정한다.
(1) Data A의 삼각형(Triangle)을 더블클릭 한 뒤 수평 슬라이드(Horizontal Slide)를 체크 선택하고 아래와 같이 설정한다.
(2) Data B의 삼각형(Triangle)을 더블클릭 한 뒤 수평 슬라이드(Horizontal Slide)를 체크 선택하고 아래와 같이 설정한다.
4) 도구모음 우측 하단에 있는 트렌드 차트(TrendChart)와 트렌드 뷰(TrendView) 클릭 후 드래그로 크기를 지정하여 생성한다.
5) 트렌드 차트(TrendChart)의 시리즈(Series)를 설정한다.
(1) 트렌드 차트(TrendChart) 선택 후 속성(Properties)에서 시리즈(Series) 설정창에 진입한다.
(2) 좌측 상단의 + (Add) 버튼 클릭 후 2개의 시리즈(Series)를 추가한 뒤 바인딩 태그(Binding Tag)와 이름(Name)을 설정한다.
· series1: Binding Tag = Trend.Data_A , Name = Data_A
· series2: Binding Tag = Trend.Data_B , Name = Data_B
6) 트렌드 뷰(TrendView)의 열 설정(Columns)을 한다.
(1) 트렌드 뷰(TrendView) 선택 후 속성(Properties)에서 열 설정(Columns) 창에 진입한다.
(2) 좌측 상단의 + (Add) 버튼 클릭 후 4개의 열(Column)을 추가한 뒤 바인딩 태그(Binding Tag)와 이름(Name) 등을 설정한다.
· column1: BindingType = SerialNo , Name = No
· column2: BindingType = Tag, Tag = Trend.Data_A , Name = Data_A
· column3: BindingType = Tag, Tag = Trend.Data_B , Name = Data_B
· column4: BindingType = DateTime , Name = DateTime
4. 실행하기
1) 저장 후 시작 버튼 또는 F5를 눌러 뷰어를 실행한다.
· 수평/수직 슬라이드(Horizontal/Vertical Slide)를 이용해 태그의 값이 정상적으로 변하는지 확인한다.
· 레이블(Label), 트렌드 차트(TrendChart), 트렌드 뷰(TrendView) 등의 객체가 태그 값을 정상적으로 표현하는지 확인한다.