You are here

LabVIEW Tech-Tip 21호: 스톱워치 UI 제작 – 최적의 사용자 인터페이스 개발하기 2

 

개요

본 Tech-Tip에서는 LabVIEW의 기본 컨트롤을 이용하여 사용자가 원하는 모양의 사용자 컨트롤과 인티케이터로 편집하는 방법을 알려드립니다. 여기서는 일반적인 게이지 객체를 실제 스톱워치처럼, 일반 숫자형 디스플레이를 디지털 인디케이터로 보이도록 만들어 보겠습니다. 

 

본 Tech-Tip 진행시 요구사항

PC에 LabVIEW2011 이후 버전이 설치되어 있어야 하며, 추가적으로 EHSMB.TTF 폰트가 설치되어 있어야 합니다.

예제 폴더에 있는 EHSMB.TTF 폰트파일을 C:\Windows\Fonts 에 간단하게 드래그 & 드롭하고 LabVIEW를 다시 시작합니다. 

      예제 파일 다운로드

       

      단계

      1. "Stopwatch - Original.vi" 파일을 더블클릭하여 엽니다. 

       

      2. 아이콘이 포함된 불리언 버튼 컨트롤이 프론트패널 아래쪽에 있음을 확인합니다. (없을 경우 컨트롤 팔레트»실버»불리언»버튼 에서 컨트롤을 선택하여 사용하면 됩니다. LabVIEW 2011 이후 버전)

       

      3. VI를 실행하고, Start, Stop, Reset 버튼을 눌러 스톱워치와 같이 실행되는지 살펴봅니다. 스톱워치의 동작을 구현하기 전 본 인디케이터가 어떻게 동작하는 지 살펴보십시오.

       

      4. 디지털 디스플레이부터 편집을 시작합니다.  

      a. 먼저 도구 팔레트에서 색 설정 도구 를 선택합니다. (도구 팔레트는 메뉴의 보기>>도구 팔레트, 또는 Shift + 마우스 오른쪽 버튼 을 누르시면 됩니다.)a. 먼저 도구 팔레트에서 색 설정 도구를 선택합니다. (도구 팔레트는 메뉴의 보기>>도구 팔레트, 또는 Shift + 마우스 오른쪽 버튼을 누르시면 됩니다.)

       

      b. 숫자형 디스플레이에서 마우스 오른쪽 버튼을 클릭하여 배경 색을 투명으로 설정합니다.

      c. 컨트롤의 프레임에서 마우스 오른쪽 버튼을 클릭하여 primary 및 secondary 색 모두를 투명으로 설정합니다. (primary 와 secondary 간의 전환은 스페이스 바를 사용합니다. 

       

      d. 아래와 같이 숫자형 인디케이터가 변경되었는지 확인합니다.

       

      e. 이제 숫자가 디스플레이 되는 형식을 변경할 것입니다. 마우스 오른쪽 버튼 클릭을 하여 디스플레이 포맷 을 선택합니다.

       

      f. 속성 창에서 아래 그림과 같이 몇 가지 설정 항목을 변경합니다. 이 설정은 숫자형 데이터나 문자열을 텍스트로 디스플레이 하는 대부분의 컨트롤과 인디케이터에 적용이 가능합니다.

       

      *보다 세부적인 변경을 위해 고급 편집 모드 (빨간색 화살표)로 항상 전환합니다.
      *그 다음 보여주고자 하는 데이터 타입을 풀다운 메뉴에서 선택하고 올바른 코드로 테이블을 채웁니다 (파란색 화살표).
      *테이블의 코드와 세부적인 포맷 문자열을 구축합니다. 여기에서 원하는 시간 형식은 %<%M:%S%2u>t 이며, 언어로 “분, 콜론, 초, 상대 시간에서 소수점 2째자리까지 표현되는 디짓”으로 변환됩니다. 이 코드는 간편한 복사 및 붙여넣기를 위해 “time format code.txt” 파일에 포함되어 있습니다.
      *확인을 클릭합니다.

       

      g. 인디케이터가 아래와 같이 나타나는지 확인합니다.

       

      h. 이 컨트롤을 마우스로 다시 선택하고 키보드의 Ctrl + = 키를 몇 번 눌러 폰트 크기를 확대합니다.

      i. 인디케이터의 모든 숫자가 보일 수 있도록 크기를 조정합니다.

      j. 인디케이터가 선택된 상태에서 텍스트 셋팅을 클릭하고 자리맞춤»가운데를 선택합니다.

       

      k. 적당한 폰트를 고릅니다. 디지털 LED 폰트를 가지고 계시다면 아래와 같이 나타나게 될 것입니다. 

       

      5. 스톱워치와 더 비슷하게 보이도록 게이지를 변경합니다.

      a. 게이지를 마우스 오른쪽 클릭하고 고급»사용자 정의 를 선택하여 사용자 정의 컨트롤 편집기를 불러옵니다. 

      b. 사용자 정의 모드로 변경 아이콘을 클릭하여 편집 모드로 변경합니다.

       

      c. 게이지의 프레임을 마우스 오른쪽 클릭하고 파일로부터 반입 을 선택합니다.  Stopwatch Background.png 를 선택합니다.  이러한 이미지는 인터넷을 통해 구매하거나, 직접 편집하실 수 있습니다. 

       

      d. 이번에는 스톱워치의 중앙부분을 선택하여 Stopwatch Center Piece.png 이미지로 변경합니다.

       

      e. 컨트롤이 아래와 같이 변경되었는지 확인합니다.

       

      f. 위에서 한 것과 같이 도구팔레트의 색 설정 도구 를 이용하여 게이지의 흰 부분이 투명하게 만듭니다.

       

      g. Stopwatch Background 이미지를 선택하고 중앙 부분이 일치할 때까지 이동합니다.

       

      h. 편집 모드로 변경 아이콘을 클릭하여 편집 모드로 전환합니다.

       

      i. 이제 정렬 및 정리 과정을 진행하도록 하겠습니다.

      j. 눈금 숫자 중 하나를 마우스 오른쪽 클릭하고 틱 뒤집기 를 선택합니다.  실질적인 최종 상태에서는 볼 수 없지만 다음 작업을 진행하는데 더 편리하고 숫자를 바깥으로 이동시킬 수 있다는 것을 알아두는 것이 좋습니다.

       

      k. 게이지 상태를 보면 7시 위치에서 시간 재기가 시작되어 5시 방향에서 멈추게 되는 것을 확인할 수 있습니다. 이 상태를 12시에서 시작해서 정지하고자 하도록 설정하기 위해서, 커서 모양이 아래처럼 변경되도록 게이지 테두리 쪽에 마우스 포인터를 가져갑니다.

       

      l. 시계 반대 방향으로 눈금을 회전하면, 회전에 따라 0과 60이 겹치게 되고, 이 상태에서 12시 위치까지 회전시킵니다.

       

      m. 이제 눈금이 제 위치에 놓였으므로 이미지 위의 눈금 표시를 제거할 수 있습니다. 숫자를 마우스 오른쪽 클릭하고 스타일 을 선택한 후 비어있음 옵션을 선택합니다.

       

      n. 색 설정 도구를 이용하여 초침을 검정색으로 변경 합니다.

       

      o. 이제 컨트롤 정의를 완료했습니다. 컨트롤 편집기 창 오른쪽 상단에 있는 X를 클릭합니다. 원래 컨트롤을 새로운 컨트롤로 대체할 것인지 물어보면, 예를 선택합니다. 저장 여부를 물어보면 저장 안함을 선택합니다.

       

      6. 컨트롤이 아래와 같이 편집되었는지 확인하십시오.

       

      7. 만약 잘되지 않을 경우에는, 사전에 완성해 놓은 Stopwatch – Solution.vi를 열어 확인해보시기 바랍니다.

       

      정리

      본 Tech-Tip에서 보신 바과 같이 사용자가 원하는 컨트롤은 해당하는 이미지와 사용자 정의 컨트롤로 직접 제작할 수가 있습니다. 최적의 사용자 인터페이스 개발을 위해 본 Tech-Tip을 잘 활용하시기 바랍니다.