You are here

LabVIEW Tech-Tip 19호: 온도 챔버의 원격 모니터링 및 컨트롤

Web UI Builder를 활용한 웹 모니터링 어플리케이션 개발 

 

개요

본 Tech-Tip에서는 웹 기반의 어플리케이션 개발을 하기 위해 LabVIEW 웹서비스로 배포된 어플리케이션을 웹브라우저 상의 UI개발을 LabVIEW와 동일한 개념으로 할 수 있도록 새롭게 출시된 NI Web UI Builder의 기능에 대하여 살펴봅니다. 실제 업무에 적용하기 쉽도록 LabVIEW에서 개발된 어플리케이션을 웹 서비스를 구축하고 컴퓨터에 배포하여 데이터를 수집하고 전송하며, 버추얼 온도 챔버를 모니터링하고 컨트롤하기 위한 웹 사용자 인터페이스 (UI)를 생성하는 방법을 알아봅니다.

본 Tech-Tip 진행시 요구사항

  • LabVIEW 2010이후 버전
  • Web UI Builder사용을 위한 인터넷 연결 및 Microsoft Silverlight 설치

예제 파일 다운로드

 

설정


먼저 LabVIEW 어플리케이션 웹 서버가 활성화되었는지 확인합니다.

1. 웹 브라우저에 http://localhost:3580을 입력하여 NI 웹 서버 설정 유틸리티를 실행합니다.
2. 웹 서버 설정 탭을 클릭합니다.어플리케이션 웹 서버가 활성화되었고 포트 8080을 사용하고 있는지 확인합니다.

LabVIEW 어플리케이션을 웹서비스로 배포

1. 예제파일을 다운받아 압축을 푼 후 Temperature Chamber Controller.lvproj를 엽니다.

 

 

2.빌드 스펙을 마우스 오른쪽 클릭하고 새로 만들기 >> 웹 서비스(RESTful)를 선택합니다.

 

3. 아래 그림과 같이 빌드 스펙 이름과 서비스 이름을 입력합니다.

빌드 스펙 이름: WebService
서비스 이름 : WebControl

 

 

4.항목에서 소스 파일을 선택하고, Auxiliary.vi를 서비스 VI 목록에 추가합니다.

 

 

5. Auxiliary.vi이 RESTful VI설정창에서 보통 VI를 선택하고 확인을 클릭합니다.

 

 

6. method.vi를 서비스 VI 목록에 추가합니다.

 

7. method.vi의 RESTful VI설정창에서 RESTful 웹 메소드 VI, 터미널 출력 포맷을 XML 로 설정합니다.

 

8. 좌측의 탭에서 URL 맵핑을 선택하고 URL맵핑이 아래와 같은 표시되는지 확인합니다.
/method/:mode/:fan/:stop/:lamp/:setpoint

 

9. 빌드를 클릭하고 빌드가 완성되기를 기다립니다.
10. 프로젝트 탐색기에서 나의 웹 서비스를 마우스 오른쪽 클릭하고 배포를 선택합니다.

 

Web UI 를 활용한 웹용 UI 개발

 

1.웹 브라우저의 주소창에 http://www.ni.com/uibuilder/를 입력하여 LabVIEW Web UI Builder를 엽니다.


 

2.Web UI Builder는 웹브라우저 상에서 모든 작업이 가능하며 NI 서버에 프로젝트를 저장하게 됩니다. 
그렇기 때문에 로그인을 하여 어플리케이션을 시작합니다. 계정이 없을 경우, 계정을 생성하십시오.

 

참고 : Web UI Builder는 기본적으로 평가판으로 사용이 가능합니다. 평가판의 경우 기본적인 사용은 되나, 개발 후 웹 기반의 빌드 및 배포가 되지 않습니다. 향후 배포가 필요하시 될 경우에는 정품 라이선스를 구매하시기 바랍니다.

 

3. 메인 창 New VI 버튼을 클릭하여 새 VI를 생성합니다.(또는 상단 메뉴창의Project 탭의 New VI)

 

4. 편집기 왼쪽에 고정되어 있는 Palette 윈도우에서 Boolean 를 확장하고 Power Switch와 Slider Switch를 프런트 패널로 드래그합니다.

 

5. Numerics에서 Numeric Control과 Horizontal Slider를 프런트 패널에 추가합니다.

 

6. Horizontal Slider속성을 변경합니다.
a. Horizontal Slider를 클릭하면 상위 메뉴에 Configuration에 메뉴가 나타납니다.
b. Configuration 탭에서 Horizontal Slider의 Maximum값을 100으로 변경합니다.


 

7. 모든 컨트롤들의 이름을 아래 이미지와 같이 변경합니다.

 

8. Numerics 에서2개의 숫자형 인디케이터, Strings & Text 에서 텍스트 박스, 그리고 Graphs 에서 차트 
인디케이터를 아래 그림과 같이 구성합니다.

 

9. Chart의 속성을 변경합니다.
a. Chart를 선택하여 Configuration 탭이 상단 탭에 나타나도록 합니다. 
b. Axes 탭으로 이동하여, X Axis를 Samples로 이름을 변경하고 Y 축을 Temperature로 변경합니다.

 

 

c. Y 축 설정에서 Auto-Scale 바로가기 메뉴에서 None을 선택하고 아래 그림처럼 Minimum 및 Maximum 
값을 각각 24와 40으로 변경합니다.

 

 

10. Text Box를 선택하고 “Temperature Control Chamber”를 입력한 후, 메뉴창의 프로퍼티 또는 Design 탭을 선택하여 설정창에서 폰트 크기를 26으로 변경합니다.

 

 

11. 최종 프론트패널이 아래 이미지와 같이 되었는지 확인합니다.

 

 

12. 패널 왼쪽에 위치한 Block Diagram 버튼을 눌러 블록 다이어그램으로 전환합니다.

 

 

13. Structures에서 While loop를 선택하여 블록 다이어그램에 위치시킵니다.

 

 

14.정지 터미널에 False 상수를 연결하여 웹상에서 어플리케이션이 지속적으로 실행되도록합니다. 
(LabVIEW Web UI Builder에서는 마우스 오른쪽 클릭 기능을 지원하지 않고, 왼쪽 클릭으로 수행됩니다.)
a. While loop오른쪽 하단의 정지 터미널의 왼쪽에 나타나는 터널을 마우스 왼쪽 버튼으로 클릭합니다.

 

 

b. 나타나는 팝업 메뉴 상단의 Create Constant 아이콘을 선택하여 False 상수를 위치시킵니다.

 

 

15. 프론트패널에서 생성된 객체들의 좌측 패널에 아래와 같이 나타납니다. 이 객체들을 블록다이어그램의 While loop안에 하나씩 위치시킵니다.

 

 

16. LabVIEW에서 배포된 어플리케이션을 반입합니다. 
a. 메뉴의 Project에서 Import Web Service 버튼을 클릭합니다. 이 마법사는 자동으로 배포된
LabVIEW 해당 웹 서비스를 호출하여 Web UI Builder내의 프로젝트에 추가합니다.

 

 

b.Import Web Service 마법사의 Server URL에서 localhost IP:8080 를 입력한 후 Connect를 누릅니다. 
c. 아래쪽 메뉴에서 컴퓨터에서 사용할 수 있는 LabVIEW 웹 서비스가 나타납니다. 앞서서 배포한 
“WebControl”라고 이름이 붙여진 웹서비스를 선택하고 Import를 클릭합니다. 
참고: 사전에 웹 서비스를 배포하지 않았다면 아무것도 보이지 않을 수 있습니다.

 

 

17. LabVIEW Web UI Builder는 “WebService” 웹 서비스의 메소드를 호출하는데 필요한 subVI를 Project 
윈도우에 추가하였습니다. 해당 Method.vix를 블록 다이어그램의 while loop로 드래그합니다.

 

 

18. Operating Mode, Fan, Lamp Level, Desired Temperature 컨트롤을 subVI 입력에 각각 연결하고
Temperature 및 Lam Intensity 을 sub VI 출력에 각각 연결합니다.

 

 

19. Timing 팔레트의 Wait (ms)을 While 루프에 추가합니다. 입력 터미널에 상수를 생성하고 600 ms로
설정합니다.

 

 

20. Array 팔레트에서 2개의 Build Array를 선택하여 while 루프에 위치시키고 아래 이미지처럼 와이어 
연결합니다.

 

 

21. 툴바의 Save All 버튼을 눌러 전체 프로젝트를 저장합니다.
a. 프로젝트를 HandsOn.lvprojx로 저장합니다.
b. 저장 위치를 선택합니다. NI Web Storage 또는 My Computer
c. 최상위 VI를 Main.vix로 저장합니다.
d. 나머지 VI이름은 기본 값으로 저장합니다.


 

22. 이제 개발된 웹 어플리케이션을 실행합니다. 
a. 상단 메뉴에서 Run 버튼을 클릭하여 실행합니다. 
b. 웹 UI의 Operating Mode switch를 변경하게 되면 LabVIEW어플리케이션을 동작을 변경할 수 있습니다. 
c. 팬은 온도 챔버에 추가적인 냉각을 추가하여 냉각을 하게 됩니다. 

 

 

23. 동작을 확인한 후, 프로그램을 정지합니다.

 

알람 추가

기본적인 씬 클라이언트 어플리케이션을 생성한 후, 특정 조건 발생시 사용자 인터페이스에 알람을 추가할 수 있습니다.

여기서는 Temperature Desired Temperature보다 높을 경우 차트의 배경색을 빨간색으로 변경되도록 프로그래밍합니다. 

24.Block Diagram 버튼을 이용하여 블록 다이어그램으로 전환합니다.
25.Comparison 에서 Greater 와 Select 를 블록 다이어그램에 가져다 놓습니다.

 

 

26. Cluster 팔레트에서 두 개의 Create Color 를 블록 다이어그램에 가져다 놓고, RGB 값을 입력합니다.

 

 

27. VI를 아래 그림과 같이 연결합니다 .

 

 

28. 차트의 배경색 변경을 위한 프로그래밍을 수행합니다.
a. LabVIEW Web UI Builder는 LabVIEW에서와 같이 프로퍼티 노드가 존재하는 것이 아니라, 데이터 터미널
의 개념을 가집니다. 기본적으로 프런트 패널 객체는 이 객체의 ‘Value’ 프로퍼티에 해당하는 데이터 터미널
을 가지게 됩니다. 하지만 실질적으로 이 데이터 터미널은 모든 프로퍼티에서 대해서 활용할 수 있습니다.

  b. 블록 다이어그램의 차트 데이터 터미널을 클릭하면 아래와 같이 몇 가지 버튼이 나타나며, 여기에서
“Duplicate Terminal” 버튼을 선택합니다.

 

 

c. 새롭게 만들어진 데이터 터미널 복사본을 선택한 후, 상단 메뉴의 Configuration 탭에서 Property에서
여러가지 항목 중 Background 프로퍼티를 설정합니다.

 

 

d. Select VI의 출력을 “Temperature and Desired Temperature Background” 데이터 터미널에 연결합니다.
프로그램밍이 아래 그림과 같이 되었는지 최종적으로 확인합니다.

 

 

프로그램의 동작을 확인합니다.

 
29. 다시 Run 버튼을 누르고 Desired Temperature를 현재 온도보다 낮게 설정합니다. 차트의 배경이 파란색에서
빨간색으로 변하는 것을 확인합니다.

 

 

빌드 및 배포

Web UI 기능 구현을 마친 후 실행하여 기능을 테스트하면, 독립형 Silverlight 웹 어플리케이션에 소스 코드를 빌드하고 배포할 준비가 된 것입니다. 이 프로세스는 Build and Deploy Project 마법사를 통해 진행합니다. 

참고: 독립형 웹 어플리케이션 구축 기능은 LabVIEW Web UI Builder에서 유일하게 라이선스가 필요한 기능입니다. 라이선스를 구입하지 않았다면 다음 단계를 진행할 수 없습니다.

1.메뉴의 Project 탭의 Build and Deploy Project 를 클릭합니다.
2. 어플리케이션의 최상위 VI를 선택하고 배포 위치를 선택합니다.

 

 

3. Next를 누릅니다.
4. Download the application to disk를 선택합니다. 웹 사이트를 실행하기 위해 필요한 파일들이 포함된 .zip 폴더
를 다운로드하게 됩니다. 압축을 풀고 index.html 파일을 열면 구축한 Web UI를 확인할 수 있습니다. 
5. 해당 파일들의 압축을 풀고 웹서비스 경로(LabVIEW 2011버전의 경우 C:\Program Files\National
Instruments\LabVIEW 2011\www)에 위치시키게 되면 외부에서 접속하여 개발한 WebUI를 웹 브라우저를 통해
모티터링 및 컨트롤할 수 있습니다.

 

관련 문서 :