YT트렌드차트 활용하기 (+ Script를 활용한 가져오기/내보내기 버튼 만들기)
YT트렌드차트(YTTrendChart)는 기존 트렌드차트(TrendChart)처럼 태그 값을 그래프로 표현하는 것은 동일하지만 아래와 같이 약간의 차이가 있습니다.
- 파일 버퍼(File Buffer)를 통한 태그 데이터 관리
- 다양한 Y축 활용 가능 (Y1축, Y2축, Y3축, Y4축)
- 프로젝트 실행 중(X-SCADA AI Viewer)에도 차트의 속성 및 시리즈 설정 가능
- 설정 내보내기/가져오기 기능을 통한 쉬운 설정 변경 가능
위 기능들처럼 YT트렌드차트 만의 차별화된 점을 활용해보고, 스크립트(Script)를 활용해 차트 설정 내보내기/가져오기 버튼을 만들어 보겠습니다.
1. X-SCADA AI Designer에서 YT트렌드차트 생성 및 설정하기
1) 아래와 같이 YT트렌드차트(YTTrendChart), 텍스트(Text), 레이블(Label) 등을 활용해 화면을 구성한다.
2) 왼쪽 태그 탐색기(Tag Explorer)에 태그를 추가한다.
· 4개의 아날로그 태그는 YT트렌드차트에 활용한다.
· XML_Path 라는 문자열 태그는 YT트렌드차트 설정 파일의 경로를 저장할 태그이다.
3) YT트렌드차트 속성(Properties) > 파일 버퍼(File Buffer) 창에서 파일 버퍼를 1개 추가한 뒤, Tag 항목에 들어간다.
4) 태그 선택 창에서 미리 추가한 아날로그 태그 4개를 추가(Add)한다.
5) 파일 버퍼 설정이 끝나 후, 속성에서 시리즈(Series)를 설정한다.
6) 텍스트(Text), 레이블(Label), 삼각형(Triangle) 등에 바인딩 태그(Binding Tag) 및 동작(Actions) 등을 설정한다.
· 값을 받아올 수 있는 장치 연결 과정이 없기에 임의의 값을 써주기 위해 오른쪽에 삼각형(Triangle) 객체에 수평 슬라이드 (Horizontal Slide)를 설정한다.
7) 태그 설정을 내보내기(Export), 가져오기(Import) 할 수 있도록 스크립트 편집창에서 스크립트를 작성한다.
· $XV("yttrendchart_1") : yttrendchart_1 이라는 이름을 가진 객체에 접근한다.
· $XT("XML_Path") : XML_Path 라는 이름을 가진 태그에 접근한다.
· console.log("message") : 해당 과정이 잘 실행되었는지 확인하기 위해 로그를 남긴다.
8) 디자인 화면으로 돌아온 뒤, Import 버튼과 Export 버튼에 스크립트 이벤트(Script Event)를 설정한다.
· 버튼 선택 > 속성(Properties) > 상단 스크립트(Script) 아이콘 클릭 > OnClick 항목의 오른쪽 점 3개[…] 클릭 > 이벤트 선택
9) 프로젝트를 저장한다.
2. X-SCADA AI Viewer에서 YT트렌드차트 조작하기
1) X-SCADA AI Viewer로 프로젝트를 실행한 뒤 YT트렌드차트를 마우스 오른쪽 클릭한 뒤 시리즈와 속성들을 수정해본다.
2) 아래 Import, Export 버튼을 눌러 설정들을 쉽게 내보내기/가져오기 하는 것을 확인한다.
· 아래 경로에 xml 파일로 저장되는 것을 확인할 수 있다.
· 경로 설정 시, \ 가 2번씩 들어가야 한다는 것에 주의하며 경로를 설정한다.
3) 자세한 설정 확인 및 운영은 첨부한 샘플(.xix)을 다운로드 받아 실행해본다.