Gauge에 다양한 효과 적용하기!

Designer

Gauge에 다양한 효과 적용하기!


Gauge 활용하기

태그 값이 변할 때마다 특정 객체에 효과를 주어 태그 변화를 직관적으로 파악할 수 있다.

 


94c1bb7684d3c65339b33cc8cbc50420_1590397885_6619.png


1. 배경 설정

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

94c1bb7684d3c65339b33cc8cbc50420_1590397722_7315.png


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

94c1bb7684d3c65339b33cc8cbc50420_1590397722_779.png




2. 태그 생성하기

 1) Tag Explorer에서 Group Tag를 1개 추가한 뒤 Properties에서 이름을 “Gauge”로 변경한다.


94c1bb7684d3c65339b33cc8cbc50420_1590398462_1107.png


 2) 생성한 “Gauge” Group 안에 Analog Tag를 1개 추가한다.
94c1bb7684d3c65339b33cc8cbc50420_1590398600_439.png 




3. 화면 구성하기

 1) 태그 값 변경을 위한 수평 슬라이드를 만들기 위해 삼각형과 사각형, 타원 그리고 레이블을 이용해 아래와 같은 객체를 생성 후 면 색상을 변경한다.

· 수평 슬라이드 적용을 위한 삼각형 객체

· 레일처럼 활용할 검정색 사각형, 태그 값 변화에 따라 색상과 크기가 변화하는 연두색 사각형

· 타원, 온도 표시용 레이블

94c1bb7684d3c65339b33cc8cbc50420_1590398600_2597.png


 

 2) 아래와 같이 객체들을 배치한 뒤 각 객체에 동작 및 효과를 설정한다.

  (1) 아래와 같이 객체들을 배치한 뒤 삼각형 객체를 더블클릭한다.

94c1bb7684d3c65339b33cc8cbc50420_1590398600_3494.png



  (2) 객체 설정 창(Objects Settings)에서 수평 슬라이드(Horizontal Slide)를 체크선택 후 아래와 같이 설정한다.


e84e94bc04b82e05a6fceed3c0cba211_1590454594_6314.png


  (3) 레이블 객체 선택 후 속성(properties)에서 태그를 바인딩(Binding)한다.


e84e94bc04b82e05a6fceed3c0cba211_1590454594_6985.png


 

​  (4) 태그 값 변화에 따라 색상과 크기가 변화하는 연두색 사각형을 더블클릭 후 효과를 설정한다.

   (가) 객체 설정 창(Objects Settings)에서 크기 변화 효과(Resize)를 추가 후 아래와 같이 설정한다.

e84e94bc04b82e05a6fceed3c0cba211_1590454594_5136.png

· Gauge 폴더의 analog_1 태그의 값이 0과 100 사이로 변경할 때 높이 변화없이 너비를 왼쪽은 고정된 상태로 오른쪽으로만 680만큼의 너비 변화 효과를 가지겠다는 설정이다.


   (나) 4개의 면 색상 변화 효과(FillColor)를 추가 후 아래와 같이 설정한다.

e84e94bc04b82e05a6fceed3c0cba211_1590457414_9809.png

· Gauge 폴더의 analog_1 태그의 값이 90 이상이 되었을 때 빨간색으로 변화하도록 하는 설정이다.

· 아래 레이블의 값과 면 색상 변화를 참고하여 면 색상 변화 효과(FillColor)를 설정한다.

e84e94bc04b82e05a6fceed3c0cba211_1590457415_0927.png
e84e94bc04b82e05a6fceed3c0cba211_1590457415_15.png



 3) 심볼 라이브러리 이미지와 사각형 객체를 이용해 아래와 같이 온도계를 생성한다.

  (1) 게이지와 알람 객체 생성을 위해 우측의 Symbol Library - (svglink)에서 “Gauge” 그리고 “Alarm”이라고 검색 후 객체를 드래그해서 가져온다.

e84e94bc04b82e05a6fceed3c0cba211_1590457415_2205.png



  (2) 사각형 객체를 생성 후 속성(Properties)에서 면 색상을 변경 후 아래와 같이 배치한다.

e84e94bc04b82e05a6fceed3c0cba211_1590457542_2895.png

  (3) 온도계의 온도 증가를 표현하기 위해 사각형 객체를 더블클릭한 뒤 효과(Effects)에서 크기변화 효과(Resize)를 추가 후 아래와 같이 설정한다.

e84e94bc04b82e05a6fceed3c0cba211_1590457542_4216.png

· Gauge 폴더의 analog_1 태그 값이 0 ~ 100 사이를 움직일 때, 너비 변화없이 250 만큼의

높이를 아래쪽은 고정한 상태로 변화하도록 하는 설정이다.

  (4) 온도가 90도 이상 올라갔을 때 출몰/점멸할 램프를 더블클릭한 뒤 출몰 효과(Visible)와 점멸효과(Blink) 추가 후 아래와 같이 설정한다.

e84e94bc04b82e05a6fceed3c0cba211_1590457542_492.png



 4) 다른 형태의 게이지를 만들기 위해 심볼 라이브러리 이미지를 활용한다.

  (1) 우측의 Symbol Library - (svglink)에서 “Gauge”라고 검색 후 객체를 드래그해서 가져온다.

e84e94bc04b82e05a6fceed3c0cba211_1590457542_5525.png
 


  (2) 눈금의 시작 위치를 설정하기 위해 눈금 객체 선택 후 속성(Properties)에서 각도(Angle)를 270으로 설정한다.

e84e94bc04b82e05a6fceed3c0cba211_1590457559_8282.png



  (3) 태그 값 변화에 따른 게이지 변화를 표현하기 위해 눈금 객체를 더블클릭 후 회전 효과(Rotation)를 추가한 뒤 아래와 같이 설정한다.

e84e94bc04b82e05a6fceed3c0cba211_1590457559_5522.png


4. 실행하기

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


· 수평 슬라이드 제어에 따라 태그의 값이 정상적으로 변경되며, 레이블에 출력되는지 확인한다.

· 태그 값의 변화에 따라 사각형의 색이 정상적으로 변화되는지 확인한다.

· 태그 값의 변화에 따라 게이지의 변화가 제대로 이루어지는지 확인한다.

e84e94bc04b82e05a6fceed3c0cba211_1590457559_6881.png 




 




[이 게시물은 관리자님에 의해 2020-06-12 11:52:28 Designer에서 이동 됨]
0 Reply Comment
Title