YT트렌드차트 활용하기 (+ Script를 활용한 가져오기/내보내기 버튼 만들기)

Designer

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) 등을 활용해 화면을 구성한다.

97ce4f37e08d371b009fafbd3d635842_1713507258_163.png
 


2) 왼쪽 태그 탐색기(Tag Explorer)에 태그를 추가한다.

· 4개의 아날로그 태그는 YT트렌드차트에 활용한다.

· XML_Path 라는 문자열 태그는 YT트렌드차트 설정 파일의 경로를 저장할 태그이다.

97ce4f37e08d371b009fafbd3d635842_1713507265_8229.png
 


3) YT트렌드차트 속성(Properties) > 파일 버퍼(File Buffer) 창에서 파일 버퍼를 1개 추가한 뒤, Tag 항목에 들어간다.

97ce4f37e08d371b009fafbd3d635842_1713507313_0802.png
 


4) 태그 선택 창에서 미리 추가한 아날로그 태그 4개를 추가(Add)한다.

97ce4f37e08d371b009fafbd3d635842_1713507324_1917.png
 


5) 파일 버퍼 설정이 끝나 후, 속성에서 시리즈(Series)를 설정한다.

97ce4f37e08d371b009fafbd3d635842_1713507330_4933.png
 


6) 텍스트(Text), 레이블(Label), 삼각형(Triangle) 등에 바인딩 태그(Binding Tag) 및 동작(Actions) 등을 설정한다.

· 값을 받아올 수 있는 장치 연결 과정이 없기에 임의의 값을 써주기 위해 오른쪽에 삼각형(Triangle) 객체에 수평 슬라이드 (Horizontal Slide)를 설정한다.

97ce4f37e08d371b009fafbd3d635842_1713507337_132.png
 


7) 태그 설정을 내보내기(Export), 가져오기(Import) 할 수 있도록 스크립트 편집창에서 스크립트를 작성한다.

· $XV("yttrendchart_1") : yttrendchart_1 이라는 이름을 가진 객체에 접근한다.

· $XT("XML_Path") : XML_Path 라는 이름을 가진 태그에 접근한다.

· console.log("message") : 해당 과정이 잘 실행되었는지 확인하기 위해 로그를 남긴다.

97ce4f37e08d371b009fafbd3d635842_1713507351_4119.png
 


8) 디자인 화면으로 돌아온 뒤, Import 버튼과 Export 버튼에 스크립트 이벤트(Script Event)를 설정한다.

· 버튼 선택 > 속성(Properties) > 상단 스크립트(Script) 아이콘 클릭 > OnClick 항목의 오른쪽 점 3개[…] 클릭 > 이벤트 선택

97ce4f37e08d371b009fafbd3d635842_1713507357_5716.png
 


9) 프로젝트를 저장한다.




2. X-SCADA AI Viewer에서 YT트렌드차트 조작하기

1) X-SCADA AI Viewer로 프로젝트를 실행한 뒤 YT트렌드차트를 마우스 오른쪽 클릭한 뒤 시리즈와 속성들을 수정해본다.

97ce4f37e08d371b009fafbd3d635842_1713507384_601.png 



2) 아래 Import, Export 버튼을 눌러 설정들을 쉽게 내보내기/가져오기 하는 것을 확인한다.

· 아래 경로에 xml 파일로 저장되는 것을 확인할 수 있다.

· 경로 설정 시, \ 가 2번씩 들어가야 한다는 것에 주의하며 경로를 설정한다.

97ce4f37e08d371b009fafbd3d635842_1713507394_1111.png
 


3) 자세한 설정 확인 및 운영은 첨부한 샘플(.xix)을 다운로드 받아 실행해본다.




0 Reply Comment
Title