pvdevelop 프로젝트 -UI 편집 방법 - 라벨 위젯 사용법

서론

 GUI 에서 가장 기본적인 항목이 위젯이다. 좋은 위젯이 있고, 위젯의 종류가 많을 수록, 보다 편리하고 보기 좋은 GUI 화면을 만들 수 있다. pvbrowser는 Qt SDK를 이용하기 때문에 Qt의 기본 위젯들을 pvdevelop에서 사용할 수 있다. 기본 위젯 이외에도 외부 Qt Widget 가운데 그래프관련 툴인 Qwt가 기본적으로 지원되기 때문에 2D 그래프를 쉽게 만들수 있다. 만약 사용하고자하는 다른 위젯이 있다면 custom widget 형태로 사용도 가능하다.

자 그럼 이제 한 놈만 패.... 아니 라벨 위젯 하나만 집중적으로 살펴보자. 지원되는 나머지 위젯들도 거의 유사한 특성을 갖기 때문에 하나만 습득하면 특별한 경우를 제외하고 나머지 위젯도 동일하게 사용할 수 있다.

라벨 위젯사용법

우선 아주 간단한 라벨 위젯을 하나 넣어보자.
디자이너 모드에서 오른쪽 마우스 버튼을 눌러 Insert Widget을 선택하면 나타나는 다이얼로그 창에서 그림 1과 같이 Label을 선택한 후 OK 버튼을 눌러주자.

그림 1. 위젯 창

그림 2. 디자이너 창

그림 2와 같이 디자이너 창에 Label 위젯이 삽입된다. 삽입된 위젯을 선택한 후 오른쪽 마우스 버튼을 누르면 라벨 위젯 속성창이 나타난다. 이 창에서 라벨 위젯의 대부분 속성을 변경할 수 있다.

그림 3. 위젯 라벨 속성창

라벨의 이름, 위치, 크기 변경

• 라벨이름 변경
  기본값으로 ObjectName이 obj1으로 설정되어 있다. 이것을 그대로 이용해도 되지만, 복잡한 UI 화면을 구성할 경우 알기 쉬운 이름으로 바꿔서 사용하는 것이 추후 작업이 용이하다. 라벨 위젯 이고 타이틀로 이용할 것이기 때문에 이름을 label_title 로 변경한다.
• 라벨 위치 변경
  
  • 직접 라벨 윈쪽, 상단이 위치할 위치를 지정할 수 있다.
  • 속성창을 이용하지 않고 마우스를 위젯 위로 옮기면 십자 화살표가 나타난다. 이떄 왼쪽 마우스 버튼을 누른 후 마우스를 이동하면 위젯의 위치가 변경된다.
• 라벨 크기 변경
  
  • 라벨 폭, 높이를 입력하면 크기를 변경할 수 있다.
  • 속성창을 이용하지 않고 마우스를 위젯 오른쪽, 하단으로 이동하면 화살표가 변경된다. 이때 왼쪽 마우스 버튼을 누르고 드레그 하면 위젯의 크기가 변경된다.

값들을 변경한 후 Update 버튼을 누르면 변경 내용을 바로 확인 할 수 있다.

라벨 표시 내용 변경

라벨이 표시할 내용은 속성창을 연 후 Text 항목에 표시하고자하는 내용을 넣어주면 된다. 한글을 입력하여도 잘 작동한다.

그림 4. 라벨 속성 변경 및 적용

 라벨 속성을 변경한 후 에디터 모드로 변경하자. 이때 변경 내용을 저장할 지 물어보는 창이 나타난다. 변경 내용을 적용할 것이므로 OK를 눌러준다.
Action->start server를 실행한 후 pvbrowser를 실행하면 그림 5와 같은 화면이 나타난다.

그림 5.pvbrowser 실행 창

그림 5 화면 상단에 라벨이 나타난다. 물론 한글 입력 내용이 제대로 표시되었다.

곁가지로 위젯이 프로그램 소스 어느 곳에 어떤 식으로 입력되는지 확인해 보자.
에디터 모드에서 Masks를 선택하면 나타나는 코드의 특정 부위를 발취한 내용이다. 아래와 같은 내용이 자동으로 삽입되어 있는 것을 알 수 있다. 코드는 mask1.cpp에 저장된다.

// our mask contains the following objects enum { ID_MAIN_WIDGET = 0, label_title, ID_END_OF_WIDGETS }; // our mask contains the following widget names static const char *widgetName[] = { "ID_MAIN_WIDGET", "label_title", "ID_END_OF_WIDGETS", ""}; static const char *toolTip[] = { "", "", ""}; static const char *whatsThis[] = { "", "", ""}; static const int widgetType[ID_END_OF_WIDGETS+1] = { 0, TQLabel, -1 }; static int generated_defineMask(PARAM *p) { int w,h,depth; if(p == NULL) return 1; if(widgetName[0] == NULL) return 1; // suppress unused warning w = h = depth = strcmp(toolTip[0],whatsThis[0]); if(widgetType[0] == -1) return 1; if(w==h) depth=0; // fool the compiler pvStartDefinition(p,ID_END_OF_WIDGETS); pvQLabel(p,label_title,0); pvSetGeometry(p,label_title,50,50,100,30); pvSetText(p,label_title,pvtr("안녕하세요!")); pvSetFont(p,label_title,"Gulim",9,0,0,0,0); pvEndDefinition(p); return 0; }

다음과 같은 항목들이 코드에 있는 것을 확인할 수 있다.

• 새로만든 위젯 명칭을 위한 enum
• Tooltip, whatsThis, widgetType 같은 항목들을 저장하기 위한 2차원 포인터 배열
• 코드 하부에 보면 Label을만들어 주기 위한 pvQLabel, pvSetGeometry, pvSetText, pvSetFont 함수가 들어 있다.

배경, 글자색 변경

 라벨의 선택한 후 속성창을 열어 배경, 글자색을 변경한 후 update 버튼을 누르면 배경, 글자색이 변경되는 것을 확인할 수 있다.
% 예전에는 잘 작동하지 않았는데 잘 작동한다. 에디터 모드, 디자인 모드를 몇번 왔다 갔다 하면 값이이상하게 변한다... (이래서 소스 코드를 변경하게 된다. 소스 코드에서 변경시키면 더이상 값이 이상하게 변하지 않는다...OTL...)

그림 6. 배경 및 글자색 변경

pvQLabel(p,label_title,0); pvSetGeometry(p,label_title,50,50,100,30); pvSetText(p,label_title,pvtr("안녕하세요!")); pvSetPaletteForegroundColor(p,label_title,250,250,250); pvSetPaletteBackgroundColor(p,label_title,250,100,50); pvSetFont(p,label_title,"Gulim",9,0,0,0,0);

pvSetPaletteForegroundColor, pvSetPaletteBackgroudColor 함수를 이용하여 라벨의 색상을 변경하는 것을 알 수 있다.

 누누이 강조하지만 가능하면 Mask 파일을 수정하지 말자. 잘못해서 꼬이면 대책이 서지 않는다. 그래도 하고 싶으면 원본을 복사한 후 변경, 적용하도록, 배경색의 RGB 같은 경우는 코드에서 직접 변경하여도 적용은 된다.

라벨을 여러개 입력한 후 다른 속성들을 변경해 보자.

라벨 스타일 변경

 라벨 속성창을 열면 style 항목이 있다. 콤보박스를 열면 다음과 같은 Box 타입과, 가장자리 효과를 설정할 수 있다.

• NoFrame
• Box
• Panel
• WinPanel
• HLine
• VLine
• StyledPanel

• Plane
• Raised
• Sunken

추가적으로 라인폭, 여백을 설정할 수 있다.

그림 7. 라벨 Style 적용 후 실행 화면

라벨 Tooltip, What'sThis 사용

디자이너모드에서 위젯 속성창에 있는Tooltip, What'sThis에 표시하고자 하는 문장을 넣어주면 UI 화면에서 정보를 표시할 수 있다.

• ToolTip
  클라이언트 화면에서 위젯 위에 마우스를 올려 놓으면 표시되는 문장
• What'sThis
  클라이언트 화면에서 메뉴에 있는 물음표를 누른 후 위젯을 누르면 나타나는 문장
  물음표를 누르면 마우스 포인터 모양이 변한다.

그림 8. Tooltip 표시

그림 9.What's This 표시

두 경우 모두 클라이언트(pvbrowser) 사용자에게 사용 방법을 직관적으로 알려주기위해 사용한다.

라벨 폰트 변경

폰트는 Gulim , 9 가 기본값이다. 이제 이 값을 변경하여 글자의 모양을 변경해 보자.

선택가능한 폰트

• Gulim
• Arial
• Times
• Courier

글꼴 효과

• bold
• italic
• underline
• strikeout

그림 10. 여러 폰트 적용

이값들을 변경하면 그림 10과 같은 결과를 얻을 수 있다. 폰트의 특성을 변경하면 위젯의 크기도 맞추어 변경하여야 이~쁜결과를 얻을 수 있다.

기타 설정

한가지 항목만 남은 상태에서 기타 설정이라니...
위젯 속성창의 하부에 보면 MinSize/MaxSize 설정 항목이 있다. 개별적으로 폭과 높이를 설정할 수 있다. MinSize 의 폭과 높이는 기본값이 0, MaxSize의 기본값은 99999,99999이다.
MinSize, MaxSize를 이용하면 pvbrowser의 창 크기가 변경되었을 때 위젯의 크기를 어떻게 할 것인가를 설정하는 항목이다.
직접 한번 해보시기를.... 조금 중요한 항목이지만 귀차니즘 때문에...(이번에는 위젯 속성 변경을 숙지하는 것이 중요하다. 앞으로 살펴볼 레이아웃 편집에서 이 내용을 함께 다룰 예정이다.)

마무리 글

라벨 속성을 변경하면서 위젯의 모양을 변경시켜 보았다. 속성창에 있는 내용들을 변경하면서 update 버튼을 누르면 변경되는 내용을 바로 확인 할 수 있다. 아주 기본적인 것들만 있는 것 같지만 이것만 가지고도 충분하다.
디자인모드에서 위젯을 복사, 붙여놓기가 지원되면 보다 원할한 작업이 가능할 것 같은 데 이것을 지원하지 않는 것인지, 하는 방법을 모르는 것인지. 여하튼 반복작업이 매우 힘들다. 다른 HMI, SCADA 프로그램도 GUI 작화는 속된 말로 노가다라고 표현하지만...