pvdevelop 프로젝트 -UI 편집 방법 - Modal Dialog Window

pvbrowser에서 지원해주는 다이얼로그 창에 대해 한번 알아보고 넘어가겠습니다.

• pvFileDialog
• pvMessageBox
• pvInputDialog
• pvPopupMenu
• pvRunModalDialog
• pvTerminateModalDialog

 필요한 것 들을 모두 지원해 주는 것 같군요.

pvRunModalDialog

이 함수는 pvslib에 다음과 같이 정의되어 있습니다.

int pvRunModalDialog(PARAM * p, int width, int height, int(*)(PARAM *p) showMask, void * userData, int(*)(void *d) readData, int(*)(PARAM *p, void *d) showData, void* d )

아무런 설명도 없이 인자들만 나열되어 있군요.

pvsexample 예제프로그램의 마스크3에 있는 코드를 살펴보면 mask4를, 모달 다이얼로그로 나타내기 위해 다음과 같은 코드를 사용하고 있습니다.

pvRunModalDialog(p,330,100,show_mask4,&d->modalInput,NULL,(showDataCast)slotNullEvent,d);

Parameter	value
p	p
width	330
height	100
showMask	show_mask4
userData	&d->modalInput
readData	NULL
showData	(showDataCast) slotNullEvent
d	d

• p
• width, height
  말 그대로 모달 다이얼로그 창의 폭과 높이를 지정합니다.
• showMask
  모달 다이얼로그를 mask 형태로 만들어야 합니다. 다이럴로그 창으로 나타내고자하는 mask를 지정합니다.
• showMaks
  모달창에 나타내고자하는 mask
  pvapp.h 에 정의되었는 함수명을 넣어 줍니다.
• userData
  모달 창과 베이스 창 데이터를 교환하기 위해 사용합니다.(정확한지는 모름...)
  
  &d->modalInput은 베이스 mask의 DATA 구조체에 정의되어 있습니다.
  iint modalInput;
  즉 정수형 변수입니다. 변수의 주소를 넘겨주기위해 &를 사용하였군요.
• readData
  NULL  (이것에 대한 내용은 잘 모르겠습니다.)
• showData
  인자값을 보면 showDataCast 로 형 변환한 slotNullEvent 함수가 들어 있군요
  
  showDataCast 는 다음과 같이 정의되어 있습니다.
  
  #define showDataCast int(*)(PARAM *, void *)
  
  다이얼로그 창을 띄워주는 현재 mask의 slotNullEvent() 함수를 값으로 넘겨주네요.
  이 값을 NULL로 하면 모달창을 띄워주는 mask의 slotNullEvent가 작동하지 않습니다. 즉 베이스 창의  NULL_EVENT가 정지됩니다. 돌려서 이야기 하자면 모달창을 띠운 후 백그라운드는 정지한다고 생각하면 됩니다.
  이 값만 modal창 mask로 넘겨준다고 베이스 화면이 변경되지는 않습니다. modal창 slotNullEvent() 함수에서 계속 업데이터 해주어야 됩니다.
  
  모달 다이얼로그창을 띄워도 기본 마스크 화면의 slotNullEvent가 계속 동작하게 하기 위해서는 "(showDataCast) slotNullEvent" 값을 인자에 꼭 넣어주어야 합니다.그리고 모달창 mask의 slotNullEvent() 에 "pvUpdateBaseWindow(p);" 함수를 넣어 주십시오. 이렇게 해야 베이스 창이 계속 업데이트 됩니다.
  
• d
  d, 현재 마스크의 구조체 변수의 포인터를 넘겨주는 군요.

 자, pvRunModalDialog() 함수를 이용하여 모달 창을 띄우고, 모달창에서 필요한 조작을 다 하였다면 어떻게 창을 닫아야 하겠죠.

모달 창을 종료할 때 (닫을 떄) 사용하는 함수가 pvTerminateModalDialog() 입니다.
다음과 정의 되어 있군요.

int pvTerminateModalDialog(PARAM *p) Terminate the modal dialogBox

별 내용없이 그냥 닫아 주네요.

그럼 모달창에서 변경된 데이터 혹은 입력된 데이터들은 어떻게 해야 할까요. 전달해주는 인자들이 없는 것 같아 보이는데.

데이터를 교환하기 위해서는 PARAM p 인자에 있는modalUserData 변수를 이용합니다. 이 변수에 베이스와 모달 상호간 데이터 교환을 위한 변수의 포인터 값을 지정하여 직접적으로 메모리를 제어하는 방식입니다.

한번 해 볼까요...

그림 1. 모달 다이얼로그춍 GUI 화면

모달 다이얼로그 창을 만들기 위해 사용한 위젯은 다음과 같습니다.

Widget	Name
Label	lb_Val01
Label	lb_Val02
SpinBox	spinbox_Value01
SpinBox	spinbox_Value02
PushButton	pb_ok
PushButton	pb_cancel

보기 좋게 배열한 후 사용하시기 바랍니다.

지난 시간에 만들었던 SVG를 이용한 GUI 화면에 있는 VIEW 버튼을 눌렀을 때  모달창이 나타나게 하였습니다. 잘 나타나죠. 폭, 높이 지정을 너무 했네요.

먼저 VIEW 버튼을 눌렀을 때 모달 창을 띄워주는 코드를 넣어보죠. 어디에...
SVG 이미지를 이용할 경우 TEXT_EVENT를 이용해야 합니다. 지난 시간 SVG 이미지 관련 자료를 확인하시기 바랍니다.

if(!strcmp(svgObjectName(text), "pv.button02")) { pvRunModalDialog(p,400,200,show_mask5,&d->svgTextVal,NULL,(showDataCast)slotNullEvent,d); }

본인의 경우 띄우고자하는 모달창이 mask5이기 때문에 show_mask5를 사용하였습니다.


SVG GUI 화면에 val01, val02 값을 표시하기 위해, 다음과 같은 정수 변수를 DATA 에 정의하였습니다. 이 값들을 모달 창에서 변경할 겁니다. pvRunModalDialog() 함수에 사용한 d->svgTextVal 와 동일합니다.

typedef struct // (todo: define your data structure here) { rlSvgAnimator svgImg; int svgTextVal[2]; } DATA;

변수 svgTextVal 은 slotInit() 함수에서 초기화 하여 사용하였습니다. 초기값은 15, 10을 넣어주었습니다.(그리 중요한 이야기 아님.)

SVG 관련 내용이 변경되면 SVG 화면을 다시 그려줘야 한다고 했죠.(안 했나..) 다시 한번 강조합니다. SVG 관련 내용이 변경되면 다시 그려줘야 합니다.
slotNullEvent() 함수에 다음과 같이 넣어주었습니다.

static int slotNullEvent(PARAM *p, DATA *d) { if(p == NULL || d == NULL) return -1; d->svgImg.svgTextPrintf("pv.textVal01", "%d", d->svgTextVal[0]); d->svgImg.svgTextPrintf("pv.textVal02", "%d", d->svgTextVal[1]); drawSVG01(p, svg_01, d); return 0; }

컴파일 후pvbrowser에서 확인해 보았습니다.

SVG 객체 pv.textVal01, pv.textVal02 만든 후 이 값들을 d->svgTextVal[]을 이용하여 변경한 화면 입니다. Null Event에서 drawSVG01() 함수를 실행시키면 부하가 많이 걸릴 것 같은데 여하튼 쉽게 작성하였습니다.


그럼, 모달 창에서 변수를 받고 처리해 보죠.

모달 mask DATA 구조에도 동일한 형식의 변수를 만들어 놀고 사용하는 것이 편리합니다.


typedef struct // (todo: define your data structure here) { int inputValue[2]; } DATA;

변수명은 틀리지만 형식은 동일하게 만들었습니다.

스핀 박스 창에 있는  spinbox_Value01,  spinbox_Value02 값을 베이스 GUI에서 넘어오는 값으로 변경해 보죠. slotInIt() 함수에 다음과 같이 입력하십시오.

static int slotInit(PARAM *p, DATA *d) { if(p == NULL || d == NULL) return -1; memset(d,0,sizeof(DATA)); int *ptr = (int *) p->modalUserData; d->inputValue[0] = *ptr; d->inputValue[1] = *(ptr + 1); pvSetValue(p,spinbox_Value01, d->inputValue[0]); pvSetValue(p,spinbox_Value02, d->inputValue[1]); return 0; }

코드 중, 중요한 부분은

int *ptr = (int *) p->modalUserData;

정의 부분입니다. PARAM p 에 정의 된 modalUserData 영역의 메모리 주소를 정수형 포인터 ptr 에 넣어 준 후 사용하였습니다. (중요합니다...)
그리고 inputValue 배열에 ...

여하튼 값을 지정해 준 후 pvSetValue를 이용하여 스핀박스의 값을 변경하였습니다.


자, 그럼 마지막으로 모달창에서 필요한 조작(이 경우 스핀박스 값을 변경)을 수행한 후 모달 창을 닫고자 할 때, 어떻게 해야 할까요.

간단합니다. 마우스 버튼을 눌렀을 때 필요한 조작을 해주면 됩니다. 푸쉬버튼의 경우 slotButtonEvent() 함수에서...

static int slotButtonEvent(PARAM *p, int id, DATA *d) { if(p == NULL || id == 0 || d == NULL) return -1; if (id == pb_OK) { int *ptr = (int *) p->modalUserData; *ptr = d->inputValue[0]; pvTerminateModalDialog(p); } if (id == pb_Cancel || id == -1) { pvTerminateModalDialog(p); } return 0; }

pb_OK가 눌러졌을 때 변수값을 스핀박스의 최종값으로 변경한 후, pvTerminateModalDialog() 함수를 불러주면됩니다.
pb_Cancel 혹은 창 닫기 버튼을 누르면, 그냥 pvTerminateModalDialog()를 실행하면 되겠죠.


아.. 두가지를 설명하지 않았군요.

1. slotNullEvent Update를 이용해 베이스 창을 계속 업데이트 하자.

모달창 마스크에 있는 slotNullEvent를 다음과 같아...


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

pvUpdateBaseWinow() 함수는 이곳에 넣어 주시면 됩니다.

2. 스핀 박스값이 변경되었을 때 연관된 변수 inputValue 를 변경해 주자.

스핀 박스관련 이벤트는 slotSliderEvent 입니다.
다음과 같이 변경하면 됩니다. 이 구문이 없으면 현재 모달창을 만든 이유가 없는 거죠...

static int slotSliderEvent(PARAM *p, int id, DATA *d, int val) { if(p == NULL || id == 0 || d == NULL || val < -1000) return -1; if (id == spinbox_Value01) d->inputValue[0] = val; if (id == spinbox_Value02) d->inputValue[1] = val; return 0; }

별거 없습니다. 어떤 스핀박스 위젯이 변경되었는 지 확인하고, 변경된 위젯의 값을 inputValue 변수에 넣어주면 됩니다.

쉽게 정리한다고 노력은 하였지만, 이해하시기에 본인의 글빨이 좋지않아 고생 많으셨읍니다. 모달 창 사용법을 제대로 익히셨다면, 이제부터의 내용은 매우, 매우 쉽습니다.... 아, 동작코드 작성은 어려울 수 있습니다. 여하튼...

나머지는 창들은 다음번 기회에....