pvdevelop 프로젝트 -UI 편집 방법 - GUI 화면 생성 및 전환

이번에는 새로운 UI 화면을 만들고, UI 화면을 전환하는 방법에 대해 알아보자.

새로운 UI 화면 생성

1. 신규 Mask 추가

새로운 UI 화면을 만드는 방법은 간단하다. pvdevelop Action 메뉴 Insert Mask를 누르면 새로운 Mask가 추가된다. 기존에 Mask가 한개만 있다면 생성되는 Mask는 mask2.cpp, mask2_slot2.h 두 파일이 생성된다.

추가적으로 변경되는 내용은 다음과 같다.

프로젝트의 pro 파일

  HEADERS += mask2_slots.h
  SOURCES += mask2.cpp

pvapp.h 파일

  int show_mask2(PARAM *p);

main.c 파일

main 파일 pvMain 함수의 무한 루프 구문에 다음의 내용이 추가된다.

case 2: pvStatusMessage(p,-1,-1,-1,"mask2"); ret = show_mask2(p); break;

pvMain 함수의 본업 중 하나인 mask(GUI 화면) 전환을 위해 추가된 구문이다.
간단히 살펴보면 pvbrowser 상태바에 현재 선택된 mask를 표시(원하는 경우 text를 바꿔 주어도 무방하다.)한 후 mask를 보여주는 함수를 실행시킨다.

2. 신규 Mask GUI 작화(작화란 이름이 타당한지는 모르겠다...)

 디자이너 모드에서 위젯을 이용하여 GUI 화면을 작성한다. 에디터 모드에서 Masknr.을 확인 한 후 작성하자. 빈 디자이너 모드에서는 어느 Mask 화면을 작성하는지 알 수 없다.

Mask(GUI 화면) 전환을 하기 위해 가장 많이 사용하는 방법은 pushbutton을 만들어 버튼을 누르면 화면을 전화하는 것이다. 따라서 pushbutton을 mask1에 만들자. 라벨 위젯을 만들어 본 사용자라면 쉽게 만들 수 있을 것이다.
모르겠다면 디자이너 모드에서 마우스 오른쪽 버튼을 눌러 나타나는 팝업에서 insert Widget을 선택하면 된다. 나머지는 알아서 하시도록...

그림 1. SCREEN01 Pushbutton 추가.

pushbutton 특성은 그림 2와 같다. 위치 및 기타 설정을 동일하게 할 필요는 없다. 단지 pushbutton 하나만 있으면 된다.

그림 2. PushButton 특성 창

pushbutton 위제 특성창을 보면 라벨 위젯과 거의 동일하다. 단지 style을 설정하는 것이 없다.
여하튼 이쁜 모양의 pushbutton을 만들기는 틀렸다.

자, 에디터 모드에서 컴파일 한 후 pvbrowser에서 방금 만든 pushbutton을 눌러보자.버튼의 가장자리가 선택되었다가 사라지는 것을 볼수 있을 것이다.
우리가 원한 것은 버튼을 누르면 화면이 전환되는 것인데... 어떻게 하면 화면을 전환 시킬 수 있을까. 서버 도스창에 답이 있다.

화면 전환용 코드 작성

그림 3. 서버 메시지 창

도스창에 있는 메시지를 잘 살펴보면 BUTTON_EVENT id=14 가 눈에 들어온다. 이 메시지는pushbutton 위젯을 눌렀을 때 발생하는 메시지로 id 가 14인 위젯을 눌렀다는 것이다.

자, 그러면 mask2.cpp에 있는 기본 BUTTON_EVENT 함수를 살펴보자.

case BUTTON_EVENT: if(trace) printf("BUTTON_EVENT id=%d\n",i); if((ret=slotButtonEvent(p,i,&d)) != 0) return ret; break

여기서 재미있는 변수가 있다.  바로 'ret' 이 변수는 pvMain 함수에 정수형으로 정의되어 있으며, 이 변수값을 pvMain 무한루프에서 감지하여 mask 화면을 전환하는 용도로 사용된다. 일반적인 경우 ret 값이 0 이다. 만약 ret값이 1이면 mask1, 2 이면 mask2,....

자, 이제 무슨 변수를 변경시켜야 하는지 알았으니까 써 먹어보자. 써 먹기 전에 어디서 써 먹을지 알아보기 위해 BUTTON_EVENT 함수가 불러들이는 slotButtonEvent 함수도 함께 살펴보자.

static int slotButtonEvent(PARAM *p, int id, DATA *d) { if(p == NULL || id == 0 || d == NULL) return -1; return 0; }

이 곳에서리턴 되는 값을 원하는 mask 넘버로 지정하면 화면이 바뀔 것이다. 그럼 수정을 해보자.

static int slotButtonEvent(PARAM *p, int id, DATA *d) { if(p == NULL || id == 0 || d == NULL) return -1; if(id == 14) return 2; return 0; }

단 한줄의 코드가 추가되었다. 즉 눌러진 pushbutton의 id가 14번이면 '2' 값을 돌려주어라.(써 놓고 보니 말이 이상하네...)
반송값으로 넣어 준 '2' 는 mask2를 의미한다. 이 값은 Button_Event에서 pvMain 함수로 값을 전달하게 되며 이 값은 ret 변수에 입력되어 화면 전환이 이루어 지게 된다.
(말발 없다고 뭐라 하지 마라... 생각나는데로 적다보니 다시 읽어보면 나도 뭔 소리하는지 잘 모르겠다....)

화면 전환에 필요한 코드는 모두 넣어 주었으니까. 컴파일 서버를 실행한 후 pvbrowser에서 SCREEN01 버튼을 눌러보자

그림 4. 화면 전환 후 GUI 화면

그림 4 상태바에 보면 mask2가 나타난 것을 볼 수 있다.
그럼 이 화면에서 다시 mask1 화면으로 갈려면.... 동일한 코드에서 ret 변수로 전달되는 값을 1로 바꾸어 주면된다. 이 코드는 Masknr. 2번에서 하여야 한다.
직접 한번 해보기 바란다. 코드 한 줄 만 추가하면 된다.

.
.
.
.
.
.
.
.
.
.

static int slotButtonEvent(PARAM *p, int id, DATA *d) { if(p == NULL || id == 0 || d == NULL) return -1; if(id == 2) return 1; return 0; }

Mask 2 헤더파일의 slotButtonEvent 에 단 한 줄의 코드가 추가 되었다.
id 2 는 mask 2 pushbutton의 id가 2 이기 때문이다.

기타...

일일이 위젯의 id 넘버를 확인, 머리가 좋은 면 기억할 수 있겠지만, 본인은 기억력이 나빠 일일이 id 넘버를 확인하여야 한다. 정~~~말 귀찮다.
좀 편하게 해보자. 위젯을 생성하면 위젯 이름을 넣어주어야 하는 것을 잘 알 것이다. 이름을 수정하지 않았으면 obj1, obj2, obj3,... 이런 식으로 이름이 자동으로 지정된다.
바로 이 이름을 숫자 대신 넣어주면 된다.

if (id == obj1) return 2;

위젯 이름이 기억나지 않는다면 에디터 모드 좌측하단에 있는 Widget Names 버튼을 누르면 사용하고 있는 위젯 이름을 확인할 수 있다. 위젯 이름을 삽입하고 싶은 코드 위치에 커서를 위치한 후 widget Names 에 있는 이름을  왼쪽 마우스 버튼으로 눌러주면 팝업 창이 뜬다. 여기서 name 을 선택한 후 insert 버튼을 누르면 현재 위치에 위젯 이름이 삽입된다.

------