이번 실습에서 만드는 것

배경·태그·텍스트·레이블·심볼 객체를 차례대로 준비한 뒤, 객체를 클릭해 디지털 태그 값을 변경하고 태그 값에 따라 객체가 나타나거나 점멸하도록 설정합니다.

학습 목표

· 배경 Image와 Text, Label 객체를 화면에 추가할 수 있습니다.

· Symbol Library와 svglink.com 연동 이미지를 활용할 수 있습니다.

· 화면 객체와 태그를 바인딩할 수 있습니다.

· 객체에 Click - Tag Value 동작을 추가하여 객체를 제어할 수 있습니다.

· Normal, Toggle, Input, Instant 모드의 차이를 확인할 수 있습니다.

· 태그 값 조건에 따라 Visible과 Blink 효과를 적용할 수 있습니다.

시작 전 확인

X-SCADA AI에서 편집할 프로젝트 화면을 열어 둡니다.

실습에 사용할 배경 이미지 파일을 준비합니다.

온라인 심볼을 사용하려면 인터넷 연결 상태를 확인합니다.

전체 진행 순서

배경 이미지 추가 → 태그 생성 → Text·Label 객체 추가 → 심볼 이미지 추가 → 태그 바인딩 → 클릭 동작 설정 → Visible·Blink 효과 적용 → 저장 및 실행

STEP 1. 배경 이미지 추가 및 잠금

1. 도구모음에서 이미지(Image)를 클릭한다.

2. 화면을 드래그하여 배경으로 사용할 영역의 크기를 지정한 뒤 준비한 배경 이미지 선택 후 열기(Open)를 클릭한다.

3. 객체탐색기(Object Explorer)에서 배경 이미지 객체의 객체 잠금(Lock object)을 설정한다.

STEP 2. 실습용 태그 만들기

1. 태그 탐색기(Tag Explorer)의 태그 목록 영역을 마우스 오른쪽 버튼을 클릭한 뒤 컨텍스트 메뉴에서 그룹 태그 추가(New Group)를 클릭한다.

2. 추가한 그룹 태그를 선택한 뒤 속성(Properties) > 일반(General) > 이름(Name)을 ChangeTagValue로 설정한다.

3. ChangeTagValue 그룹 안에 아날로그 태그(Analog Tag), 디지털 태그(Digital Tag), 문자열 태그(String Tag)를 하나씩 추가한다.

STEP 3. 텍스트와 레이블 객체 추가

1. 도구모음에서 텍스트(Text)를 클릭한다.

2. 화면을 드래그해 객체를 만든 뒤 아래와 같이 태그 이름, 제어 동작 이름, 효과 이름으로 텍스트 내용을 수정한다.

· 텍스트(Text) 선택 후 속성(Properties) > 텍스트(Text) > 텍스트(Text) 항목에서 내용 수정

· 속성(Properties) > 그리기(Drawing) > 면 색상(FillColor) 항목에서 글씨 색상 수정

3. 도구모음에서 레이블(Label)을 클릭한다.

4. 각 태그 값을 표시할 위치에 객체를 추가한다.

STEP 4. Symbol Library에서 이미지 추가

1. 오른쪽 속성 영역에서 심볼 라이브러리(Symbol Library)를 연다.

2. 상단 온라인(Online) 아이콘을 클릭한 뒤 "버튼(Button)", "알람(Alarm)" 키워드를 입력하여 검색한다.

3. 검색된 이미지를 드래그하여 출몰(Visible)과 점멸(Blink) 효과를 적용할 위치에 검색된 심볼을 배치한다.

STEP 5. svglink.com 연동 이미지 활용

· Symbol Library는 svglink.com과 연동하여 온라인 이미지를 검색하고 화면에 추가할 수 있다. 이 기능은 인터넷 연결이 필요하다.

1. Symbol Library의 Online 영역에서 필요한 키워드를 검색한다.

2. 검색 결과에서 사용할 이미지를 선택한다.

3. 선택한 이미지를 작업 화면으로 드래그한 뒤 크기와 위치를 조정한다.

STEP 6. Label과 태그 바인딩

· 바인딩(Binding)은 태그를 특정 객체와 연결하는 기능이다. Label과 연결하면 태그 값이 글자로 표시된다.

1. Digital 영역의 Label 객체를 선택한다.

2. 속성(Properties) > 바인딩(Binding) > 태그(Tag)에서 ChangeTagValue.digital_1을 선택한다.

3. 같은 방법으로 Analog Label에는 analog_1, String Label에는 string_1을 연결한다.

STEP 7. 객체 설정 창 열기

1. 클릭 동작을 적용할 객체를 선택한 뒤 마우스 오른쪽 버튼을 클릭 후 설정(Settings)을 선택한다.

· 객체를 더블클릭해도 같은 설정 창을 열 수 있다.

STEP 8. Normal 동작 설정

· Normal: 객체를 클릭하면 미리 지정한 설정값을 쓴다.

1. 동작(Actions) 목록에서 클릭 – 태그값 설정(Click - Tag Value)을 체크한다.

2. 클릭 – 태그값 설정(Click - Tag Value)에 대한 설정을 아래와 같이 진행한다.

· 모드(Mode): Normal

· 태그(Tag): ChangeTagValue.digital_1

· 설정 값(Setting Value): true

STEP 9. Toggle 동작 설정

· Toggle: 클릭할 때마다 기존 태그값과 설정값을 번갈아 적용한다.

· Digital Tag을 설정할 경우 True/False가 반전되며, 다른 유형의 태그를 설정할 경우 기존 태그값과 설정값을 번갈아가며 적용한다.

1. Toggle을 적용할 객체의 설정 창을 연 뒤 동작(Actions) 목록에서 클릭 – 태그값 설정(Click - Tag Value)을 체크한다.

2. 클릭 – 태그값 설정(Click - Tag Value)에 대한 설정을 아래와 같이 진행한다.

· 모드(Mode): Toggle

· 태그(Tag): ChangeTagValue.digital_1

· 설정 값(Setting Value): Digital Tag는 값이 2개로 정해져있기 때문에 비활성화되어 있으며, 사용자가 별도로 설정할 필요가 없다.

(Analog Tag 혹은 String Tag, Bytes Tag를 설정할 경우 다시 활성화되며, 사용자가 값을 직접 설정한다.)

STEP 10. Input 동작 설정

· Input: 팝업 입력창에서 사용자가 값을 선택하거나 입력한다.

1. Input을 적용할 객체의 설정 창을 연 뒤 동작(Actions) 목록에서 클릭 – 태그값 설정(Click - Tag Value)을 체크한다.

2. 클릭 – 태그값 설정(Click - Tag Value)에 대한 설정을 아래와 같이 진행한다.

· 모드(Mode): Input

· 태그(Tag): ChangeTagValue.digital_1

· 설정 값(Setting Value): 값을 선택하거나 입력할 수 있는 창이 생성되기 때문에 비활성화되어 있으며, 사용자가 별도로 설정할 필요가 없다.

STEP 11. Instant 동작 설정

· Instant: 마우스를 누를 때 설정값을 쓰고, 놓을 때 복귀값을 쓴다.

1. Instant를 적용할 객체의 설정 창을 연 뒤 동작(Actions) 목록에서 클릭 – 태그값 설정(Click - Tag Value)을 체크한다.

2. 클릭 – 태그값 설정(Click - Tag Value)에 대한 설정을 아래와 같이 진행한다.

· 모드(Mode): Instant

· 태그(Tag): ChangeTagValue.digital_1

· 설정 값(Setting Value): true

· 복귀 값(Setting Value): Digital Tag는 값이 2개로 정해져있기 때문에 설정 값에 따라 자동으로 복귀 값이 결정된다.

(Analog Tag 혹은 String Tag, Bytes Tag를 설정할 경우 다시 활성화되며, 사용자가 값을 직접 설정한다.)

· 지연 시간(Instant Delay): 클릭을 끝낸 후 복귀 값을 적용할 때까지의 시간을 설정한다.

STEP 12. 클릭 동작 결과 확인

프로젝트를 실행하고 각 객체를 차례대로 조작합니다. (현 단계는 건너뛰고 효과까지 적용 후 프로젝트를 실행한다.)

Normal: 클릭하면 On으로 변경되는지 확인합니다.

Toggle: 클릭할 때마다 On과 Off가 전환되는지 확인합니다.

Input: 입력창에서 On 또는 Off를 선택할 수 있는지 확인합니다.

Instant: 마우스를 누르고 놓을 때 값이 바뀌는지 확인합니다.

STEP 13. Visible 효과 적용

1. 출몰 효과를 적용할 객체를 더블클릭 한 뒤 효과(Effects)에서 출몰 효과(Visible)를 추가한다.

2. 출몰 효과에 대해 아래와 같이 설정한다.

· 태그(Tag): ChangeTagValue.digital_1

· 조건(Condition): == (태그 값과 설정 값이 일치할 때 효과가 발생하도록 설정)

· 값(Value): true (digital_1 값이 true일 때 표시되도록 설정)

STEP 14. Blink 효과 적용

1. 점멸 효과를 적용할 객체를 더블클릭 한 뒤 효과(Effects)에서 점멸 효과(Blink)를 추가한다.

2. 점멸 효과에 대해 아래와 같이 설정한다.

· 태그(Tag): ChangeTagValue.digital_1

· 조건(Condition): == (태그 값과 설정 값이 일치할 때 효과가 발생하도록 설정)

· 값(Value): true (digital_1 값이 true일 때 표시되도록 설정)

· 실행 속도(Speed): 객체가 점멸(깜박임)하는 시간 간격을 설정한다.

STEP 15. 프로젝트 저장 및 실행

1. 도구모음의 표준 도구(Standard)에서 프로젝트 저장(Save Project)을 클릭한다.

· 저장할 폴더와 프로젝트 이름을 지정한 뒤 저장(Save)을 클릭한다.

2. 도구모음의 표준 도구(Standard)에서 실행(Start)을 클릭하여 X-SCADA AI Viewer로 저장한 프로젝트를 실행한다.

· 저장한 프로젝트 파일(.xix)을 더블클릭하여 직접 실행할 수도 있다.

실습 완료 확인

· Normal, Toggle, Input, Instant 동작이 서로 다르게 실행되는지 확인한다.

· digital_1 값에 따라 출몰 효과(Visible)를 설정한 객체가 나타나거나 사라지는지 확인한다.

· digital_1 값이 true일 때 Blink 객체가 점멸하는지 확인한다.

· Analog와 String 영역도 같은 순서로 설정했을 때 동일하게 동작하는지 확인한다.