페이지 제어 적용하기

Designer

페이지 제어 적용하기


페이지 제어 적용하기


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


 


1. 배경 설정


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


7eb1bb986b774f9e018b537dbc51b6df_1588135211_3992.png 



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

7eb1bb986b774f9e018b537dbc51b6df_1588135211_4677.png


 


2. 태그 생성하기


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

7eb1bb986b774f9e018b537dbc51b6df_1588135211_5775.png



3. 화면 구성하기


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

7eb1bb986b774f9e018b537dbc51b6df_1588135211_6411.png



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

7eb1bb986b774f9e018b537dbc51b6df_1588135211_7478.png



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

7eb1bb986b774f9e018b537dbc51b6df_1588135211_8096.png



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

7eb1bb986b774f9e018b537dbc51b6df_1588135211_8921.png



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

7eb1bb986b774f9e018b537dbc51b6df_1588135211_951.png



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

7eb1bb986b774f9e018b537dbc51b6df_1588135212_1053.png



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


1) 페이지 제어 설정하기


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


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

7eb1bb986b774f9e018b537dbc51b6df_1588135231_3416.png



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

7eb1bb986b774f9e018b537dbc51b6df_1588135231_4026.png



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


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

7eb1bb986b774f9e018b537dbc51b6df_1588135231_5065.png



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

7eb1bb986b774f9e018b537dbc51b6df_1588135231_5926.png



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

7eb1bb986b774f9e018b537dbc51b6df_1588135231_677.png



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


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

7eb1bb986b774f9e018b537dbc51b6df_1588135231_7446.png



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

7eb1bb986b774f9e018b537dbc51b6df_1588135231_8417.png



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


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


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

7eb1bb986b774f9e018b537dbc51b6df_1588135231_9176.png



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


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

7eb1bb986b774f9e018b537dbc51b6df_1588135231_9881.png



5. 실행하기


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


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


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


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


7eb1bb986b774f9e018b537dbc51b6df_1588135232_0676.png
 

[이 게시물은 관리자님에 의해 2020-06-12 11:52:28 Designer에서 이동 됨]
0 답글
제목