You are here

LabVIEW Tech-Tip 18호: 측정 UI 구성하기 1

 

사용자 인터페이스는 갈수록 직관적이고 핵심적인 내용만을 효과적으로 전달하기 위해 변화해가고 있습니다. 이번 시간에는 LabVIEW에서 그림링을 이용한 사용자 정의 컨트롤을 이용하여 간단한 장식을 위한 객체를 만든 후, 효과적으로 활용한 사용자 인터페이스 사례를 보여드리기로 하겠습니다.

 

그 사례로 아래와 같이 풍력 발전기의 블레이드의 속도와 상태를 모니터링하는 사용자 인터페이스를 꾸며보도록 하겠습니다.

 

예제 파일 다운로드 

PDF 파일 다운로드

 

본 Tech-tip에서는 예제파일에서 사용하는 그림들을 사용하여 위와 같은 사용자 인터페이스를 구성하도록 합니다. 먼저 사용자 인터페이스에서 돌아가는 풍력발전기 객체를 생성합니다. 풍력발전기 객체는 블레이드 위치가 다른 6개의 그림을 그림링에 삽입하여 만들게 됩니다.
참고) 사용되는 그림을 첨부된 예제파일에 존재합니다.

 

1. LabVIEW를 실행하고 새 VI 를 실행합니다.
2. 컨트롤 팔레트에서 클래식>>클래식 링 & 열거형>> 그림링을 선택하여 프론트패널에 가져다 놓습니다.

 

 

3. 링 컨트롤에서 마우스 오른쪽 버튼을 클릭하여 고급>>사용자정의를 선택합니다. 이렇게 하면 새로운 컨트롤 편집창이 뜨게되며, 이 곳에서 사용자가 원하는 객체를 새롭게 편집합니다.

 

 

먼저 작은 풍력발전기 모양을 디스플레이 하는 그림링을 편집하도록 합니다.

4. 그림링에서 마우스 오른쪽 버튼을 클릭하여, 보이는 아이템>> 라벨, 증가/감소의 체크를 비활성화 하여 보이지 않게 설정합니다.

 

 

5. 그림링에 삽입할 그림을 선택하기 위해, 상위 메뉴바의 편집 >> 클립보드에 그림 반입을 선택합니다.

 

 

6. 클립보드에 넣을 그림파일 선택 창에서 첫번째로, aPicture1.png 파일을 선택합니다.

 

 

7. 그림링에서 마우스 오른쪽 버튼을 눌러 클립보드에서 그림반입 메뉴를 선택합니다.

 

 

8. 그림이 그림링에 삽입된 그림링의 크기를 크게하여 모든 그림이 나타날 수 있도록 조정합니다.

 

 

9. 두번째 그림을 선택하기 위해 다시 편집 >> 클립보드에 그림 반입을 선택합니다.
10. 두번째 그림인 aPicture2.png 파일을 선택합니다.
11. 또 다시 그림링으로 이동하여 현재 그림 다음에 두번째 그림을 추가하기 위해, 마우스 오른쪽 버튼을 눌러, 다음 아이템 추가를 선택합니다.

 

 

12. 9번에서 11번 과정을 남아있는 4개의 그림에도 동일하게 수행합니다.
13. 6개의 그림의 삽입이 완료되었으면, 마우스 커서를 그림링에 위치하여 동작 버튼커서로 클릭해보면 다음과 같이 그림링에 삽입된 6개의 그림이 잘 나타나는지 확인합니다.

 

 

14. 그림링을 배경화면으로 활용하기 위해 투명한 배경을 가질수 있도록 설정합니다. Shift 키를 누른후 마우스 오른쪽 버튼을 눌러 도구 팔레트를 호출합니다.
15. 도구팔레트의 하단에 색 설정을 선택합니다.

 

 

16. 색설정 커서를 아래 그림과 같이 그림링 경계선에 위치하고 마우스 오른쪽 버튼을 누른후 색상 선택창에서 우측 상단의 T(투명)을 선택합니다. 그리고, 바로 좌측 옆 그림링 공간을 마우스 좌측 클릭을 하여 또한 그림링 컨트롤을 투명하게 만듭니다. 실행 후 ?다시 도구 팔레트에서 자동 도구툴을 선택합니다.

 


주의)여기서 삽입한 그림 크기의 영역을 클릭하게 될 경우 풍력발전기 그림이 투명하게 될 수 있습니다. 이럴경우는 Ctrl+Z를 클릭하여 실행취소합니다.

 


17. 이 사용자 정의 컨트롤을 Small Windmill.ctl로 저장하고 오른쪽 상단의 종료버튼을 눌러 편집을 마칩니다.

 

 

18. 이 때, VI에 있는 그림링을 지금 편집한 컨트롤로 교체할 것을 묻는 창이 팝업됩니다. 를 선택하여 VI의 그림링을 편집한 사용자 정의 그림링으로 업데이트 합니다.

 

 

이제 큰 풍력발전기 모양을 디스플레이 하는 그림링을 편집합니다.

19. 컨트롤 팔레트에서 클래식>>클래식 링 & 열거형>> 그림링을 선택하여 새로운 그림링을 프론트패널에 가져다 놓습니다.
20. 링 컨트롤에서 마우스 오른쪽 버튼을 클릭하여 고급>>사용자정의를 선택하고, 사용자 정의 창에서 위에서 수행하였던 4번부터 18번까지의 과정을 진행합니다. 단, 여기서 삽입하는 그림은 Picture1.png 에서 Picture6.png 그림을 사용합니다.
21. 15번까지 진행하고 나면, VI에는 아래 그림과 같이 만들어졌을 것입니다.
22. 처음 보았던 UI 처럼 풍력발전기를 크기별로 좌우에 1개씩 배치하기 위해, 컨트롤팔레트>>컨트롤선택을 클릭하여 앞서 만들었던 Small Windmill.ctl, Large Windmill.ctl 파일을 각각 하나씩 VI로 불러온 후 완성하고자 하는 UI의 모양대로 적절하게 배치합니다.

 

 

전체 배경화면을 추가합니다.

23. VI 프론트패널 아래쪽의 수평 스크롤바에서 마우스 오른쪽 버튼을 누르고, 프로퍼티를 선택하여 구획프로퍼티 설정창으로 이동합니다.

 


24. 구획프로퍼트 설정창에서 배경 이미지 선택하는 곳에서 탐색을 눌러 예제파일의 field.jpg 파일을 선택하고 설정을 종료합니다.

 


25. 아래와 같이 배경화면이 꾸며진 것을 확인합니다.

 

 

26. 각각의 풍력발전기 객체를 추가적으로 하나씩 더 호출하기 위하여 컨트롤 팔레트에서 생성한 사용자 정의 객체를 각각 하나씩 더 호출하여 아래 그림과 같이 위치시킵니다.

 

 

이제 실제 데이터가 모니터링 되는 객체를 추가합니다.

27. 컨트롤팔레트에서 일반>>숫자형>>미터를 선택하여 프론트패널에 위치시키고, 라벨은 속도, 우측 경계값을 100으로 변경합니다.

 

28. 도구팔레트에서 색 설정을 선택하여 미터의 경계선을 투명으로 설정합니다. 설정 후, 커서는 다시 자동선택으로 변경합니다.

 


29. 블레이드의 상태(ok, failure)를 나타내주는 불리언 객체를 컨트롤팔레트>>컨트롤선택에서 Blade.ctl 파일을 프론트패널에 가져다 놓습니다. 본 객체는 예제파일에 첨부되어 있습니다.

 

 

30. Blade.ctl 객체에서 마우스 오른쪽 버튼을 누르고 보이는 아이템>>라벨을 체크를 해제시켜 객체의 이름을 보이지 않게 설정합니다.

 

 

31. 4개의 블레이드에 대해서 모니터링 하기 때문에 Blade.ctl 객체 4개를 위치시킵니다. 28번 과정을 3번더 수행하시거나, 컨트롤을 클릭한 채 호출한 blade.ctl객체를 마우스로 선택하여 드래그 하시면 객체를 복사할 수 있습니다.

 


32. 컨트롤팔레트에서 일반>>그래프>>웨이브폼 차트를 선택하여 프론트패널에 가져다 놓습니다.

 


33. 웨이브폼 차트에서 마우스 오른쪽 버튼을 누르고, 보이는 아이템>> 라벨, 플롯 범례의 체크를 해제합니다.

 


34. 웨이브폼 차트에서 다시 마우스 오른쪽 버튼을 클릭하여 X 스케일>>스케일 라벨보이기 의 체크를 해제합니다. Y축도 동일하게 작업합니다.

 

 

35. 도구 팔레트의 색 설정 도구를 이용하여 웨이브폼 차트의 외곽부분을 투명으로, 그리고 플롯되는 영역을 흰색으로 설정합니다.

36. 웨이브폼 차트에서 다시 마우스 오른쪽 버튼을 클릭하여 프로퍼티를 선택하고, 플롯탬에서 플롯 라인을 두껍게, 색상을 밝은 파랑으로 설정하고, 스케일 탭에서 X,Y 각축의 주요눈금을 하늘색으로 변경합니다.

 


37. 이렇게 변경한 웨이브폼 차트를 복사하여 아래와 같이 위치시킵니다.

 


38. 마지막으로 바람 속도를 시뮬레이션하는 컨트롤을 추가합니다. 컨트롤팔레트>>시스템>>숫자형>>시스템 수평 슬라이드를 차트 아래쪽에 위치시키고, 상위 리미트 값을 100으로 변경합니다.

 

 

이제 장식 객체를 추가하여 사용자인터페이스 구성을 마무리 합니다. 장식 객체는 LabVIEW에서 기본적으로 제공하는 객체를 사용하셔도 되지만, 파워포인트에서 만든 반투명 객체들을 그림으로 반출하여 사용하면 효과적입니다. 여기에서는 이 방법을 사용하도록 하겠습니다.

 

39. 설치되어 있는 MSOffice 파워포인트를 실행합니다.(MSOffice 2007 기준)
40. 상단 홈 메뉴바에 있는 그리기 영역의 도형영역에서 모서리가 둥근 직사각형을 선택하여 템플릿에 가져다 놓고, 원하는 크기로 변경합니다.

 

 


41. 도형에서 마우스 오른쪽버튼을 클릭하여 도형서식을 클릭하여 도형의 속성을 편집합니다.

 

A 채우기 탭에서 색상을 회색으로 투명도를 50%로 설정합니다.

 


B 선 색 탭에서 선없음을 선택합니다.

 


C 3차원 서식 탭에서 입체효과 위쪽을 둥글게로 설정합니다.

 


42. 설정을 마친 도형에서 마우스 오른쪽 버튼을 클릭하여 그림으로 저장을 선택하고, png 파일로 저장합니다.

 

 

LabVIEW에서 파워포인트에서 만들어진 객체를 호출합니다.
43. 프론트패널의 메뉴바에서 편집>>클립보드에 그림반입을 선택하여 파워포인트에서 만든 png파일을 선택합니다.
44. 프론트패널에서 Ctrl+V를 눌러 장식객체를 불러옵니다.

 

 

45. 불러온 객체를 모니터링 객체에 맞게 크기를 조절하고, 객체를 선택한 후 LabVIEW의 메뉴에서 순서 재설정을 선택하여 맨뒤로 이동을 선택합니다.

 


46. 다시 장식객체를 선택하고 순서 재설정을 선택하여 잠금을 선택합니다. 장식 객체는 다른 객체를 편집할 때 방해가 되므로, 잠금을 하면 다른 객체를 편집할 때 편리합니다.

 


47. 동일한 장식 객체를 다시 불러와 상태를 나타내는 부분만을 부각시키도록 크기를 조절한 후 위에서와 같이 순서조절 및 잠금을 합니다.

48. 풍력발전기 객체들을 각각 선택하여 순서재설정의 맨뒤로 이동, 그리고 잠금을 선택하여 배경으로 고정시킵니다.

 


49. 속도 게이지 좌측에서 더블클릭하여 풍력발전기 모니터링 이라는 텍스트를 입력하고 프론트 패널의 편집을 마무리 합니다..

블록 다이어그림은 프론트 패널이 아래쪽에 위치해 있는 슬라이드로 바람의 속도를 변경하였을 때, 모니터링 화면이 어떻게 변경되는지를 보여주도록 프로그래밍 합니다.

50. 아래 그림을 블록다이어그림에 드래그 앤 드롭 하시면 코드가 생성됩니다.( VI스니핏 기능이 지원되는 LabVIEW2009 이후 버전에서만 가능)

 


51. 생성된 코드에 존재하는 각각의 컨트롤과 인디케이터를 삭제하고, 본인이 직접 생성한 컨트롤로 대체하여 와이어를 연결합니다.

코드 수정을 완료하였으면, 코드를 실행하고, 프론트패널 하단의 슬라이드바(바람속도)를 변경하여 모니터링 화면이 어떻게 변경되는지 확인해 보십시요.

 

본 Tech-Tip을 통해 그림링이 효과적인 컨트롤, 인디케이터 뿐만 아니라 프론트패널 장식으로까지 활용될 수 있는 것과, MSOffice의 객체를 LabVIEW에서도 효과적으로 활용할 수 있음을 알 수 있습니다.