페이지 제어 적용하기

간단한 설정으로 페이지 이동, 닫기 등 제어 기능을 사용할 수 있다.

1. 배경 설정

1) Designer 상단 도구모음에서 Image 클릭 후 작화 화면 전체를 드래그하고 배경화면 이미지를 선택한다.

2) 작업 중 움직이지 못하도록 Object Explorer에서 배경화면을 객체 잠금한다.

2. 태그 생성하기

1) Tag Explorer에서 “PageControl”이라는 Group Tag를 만들고, Group 안에 Digital Tag를 1개 추가한다.

​

3. 화면 구성하기

1) 도구모음에서 Text 객체 클릭 후 아래와 같이 배치 후 속성에서 이름을 변경한다.

​

2) Symbol Library - (svglink)에서 “pump”와 “fan” 검색 후 객체를 드래그해서 아래와 같이 적용시킨다.

​

3) 왼쪽의 Page Explorer에서 빈 공간에 마우스 오른쪽 클릭 후 New Page를 추가한다.

​

4) New Page 추가 후 오른쪽의 Properties(속성)에서 Page Name(페이지 이름)과 Layout(페이지 크기)를 설정한다.

​

5) 도구모음에서 Label 객체를 생성한 뒤 Properties(속성)에서 Text를 “POPUP”으로 변경한다.

​

6) Symbol Library - (svglink)에서 “pump”와 “fan”, “button” 검색 후 아래와 같이 적용시킨다.

​

4. 제어 및 애니메이션 적용하기

1) 페이지 제어 설정하기

(1) Page_1에서 PUMP 01의 Pump 객체를 더블클릭 한 뒤 Click – Page를 체크선택하고 아래와 같이 설정한다.

· POPUP 페이지를 Open(새 창으로 열기)하겠다는 설정이다.

​

(2) POPUP 페이지에서 Close 이미지 객체 더블클릭 후 Click – Page를 체크선택하고 Page – Mode를 Close로 설정한다.

​

2) POPUP 페이지에서 설비 작동 ON/OFF 설정을 위해 버튼을 설정한다.

(1) ON 버튼을 더블클릭 한 뒤 Click – Tag Value를 체크선택하고 아래와 같이 설정한다.

​

(2) OFF 버튼을 더블클릭 한 뒤 Click – Tag Value를 체크선택하고 아래와 같이 설정한다.

​

3) View – Animation Editor 클릭을 통해 우측의 애니메이션 편집 창을 활성화한다.

​

4) Animation Editor - Conditions에서 [ + ]를 눌러 애니메이션 조건을 아래와 같이 추가한다.

· PageControl.digital_1 태그의 값이 true가 되었을 때 애니메이션 조건이 만족되어 실행한다.

​

5) 애니메이션 효과를 부여할 Fan 객체를 선택한 뒤 Effects에서 Rotation(회전 효과)을 추가한다.

​

6) Rotation 설정 창에서 아래와 같이 설정한다.

· 360° 회전하겠다는 설정이다.

· Timing에서 Repeat를 0으로 설정 시 무한히 회전한다.

​

7) Page_1의 Animation Editor에서의 설정도 POPUP 페이지와 동일하게 설정한다.

· 애니메이션 설정은 페이지별 적용이기 때문에, 같은 설정이더라도 다른 페이지에서 적용하고 싶다면 동일한 설정을 다시 설정해줘야 한다.

​

5. 실행하기

1) 저장 후 시작 버튼 또는 F5를 눌러 뷰어를 실행한다.

 · PUMP 01의 Pump 객체 클릭 시 POPUP 페이지가 새 창으로 활성화되는지 확인한다.

 · POPUP 페이지에서 ON, OFF, Close 버튼이 정상적으로 작동하는지 확인한다.

 · ON 버튼 클릭 시 POPUP 페이지와 Main 페이지의 Fan이 정상적으로 작동하는지 확인한다.