pvdevelop 프로젝트 -UI 편집 방법 - SVG 이미지 위젯 사용법-02

SVG 이미지 두번째

inkscape를 이용한 SVG 이미지 파일 생성

그림 1. Inkscape SVG 이미지 편집 화면

SVG 이미지는 객체 특성을 갖고 있습니다. 그림 1에 라인 처럼 만든 박스를 선택한 후 특성을확인해 보면 ID, Label, Title, Description,... 과 같은 값이 나타납니다. 선택 된 객체의 ID는 "pv.path101" 값을 가지고 있습니다.
 사용된 객체들을 정리해 보면 다음과 같습니다.

Object	ID	Remark
Rectangle	pv.path100	-
Rectangle	pv.path101	-
Circle	pv.led01	-
Circle	pv.led02	-
Circle	pv.led03	-
Group	pv.valve01	-
Text	pv.buttontext01	-
Text	pv.buttontext02	-
Rectangle	pv.button01	-
Rectangle	pv.button02	-
Text	pv.text10	-

명칭들이 정확하지 않더라도 그냥 넘어감니다. 정식으로 배운것이 아니기 때문에, 아주 기본적인 것도 잘 모릅니다.

그림 2. 디자이너모드 편집 화면

 그림 2는 디자이너 모드에서 Draw/SVG 위젯을 이용하여 SVG 이미지를 삽입한 화면입니다.
사용할 svg 이미지 파일은 svgFileName 항목에 넣어주시면 됩니다. 나중에 코드에서 변경할 수 있습니다.
현재 사용한 svg 이미지 파일의 크기는 800x600입니다.svg 위젯 속상창에서 폭과 높이를 svg 이미지 크기로 변경하여 주십시오. 나머지는 속성은 이름 빼고 변경할 필요는 없습니다.

 디자이너 모드에서 레이아웃 편집을 수정한, 최종화면이 그림 3 입니다.

그림 3.pvbrowser 실행 화면

그림 3과 같이 배치하기 위한 layout 코드는 다음과 같습니다. 필요시 edit laout 창에서 편집하여 주시기 바랍니다.

생성자 pvQLayoutVbox(p,ID_MAIN_WIDGET,-1); pvQLayoutHbox(p,LAY_Head,ID_MAIN_WIDGET); pvQLayoutHbox(p,LAY_Center,ID_MAIN_WIDGET); 레이아웃 편집 pvAddWidgetOrLayout(p,ID_MAIN_WIDGET,LAY_Head,-1,-1); pvAddWidgetOrLayout(p,ID_MAIN_WIDGET,LAY_Center,-1,-1); pvAddWidgetOrLayout(p,LAY_Head,lb_Head,-1,-1); pvAddStretch(p,LAY_Head,1); pvAddWidgetOrLayout(p,LAY_Head,pb_Home,-1,-1); pvAddWidgetOrLayout(p,LAY_Center,svg_01,-1,-1);

자, svg 이미지 파일을 pvbrowser에 나타나게 하였습니다. 이제 pvbrowser에서 svg 이미지에 있는 객체를 마우스로 눌러줄 때 어떤 메시지가 발생하는지 알아 볼까요.

그림 4. 서버 메시지 창

그림 4와 같은 메시지가 나타납니다.
TEXT_EVENT 로 svg 이미지 파일을 만들 때 사용한 객체의 ID가 메시지 맨 끝에 나타납니다.

 여기서 주의 사항
svg 이미지 객체 ID를 적어줄때 "pv" 값이 있어야 이 메시지가 나타납니다. 없으면 나타나지 않습니다. 메시지를 발행시키고자 하는 이미지 객체 ID 생성시 꼭 "pv.-----" 형태로 사용하시기 바랍니다.

이제 TEXT EVENT 에서 버튼이 눌러진 객체 별로 동작 코드를 작성하면 됩니다.
....
조금 쉬었다. 다시 하자. 6개월 전에 작업한 내용이라 현재 머리 속이 백지 상태입니다. 그떄 작성한 코드를 한번 살펴본 다음에 계속 진행하겠습니다.


곁가지로 이번 기회애 TEXT_EVENT 에 대해 알아보죠
TEXT_EVENT 가 발생할 때 나타나는 이벤트는 다음과 같은 것들이 있습니다. SVG 관련 발생하는 이벤트가 8개나 되는 군요.

ENUM	REMARK
PLAIN_TEXT_EVENT	-
SVG_LEFT_BUTTON_PRESSED
SVG_MIDDLE_BUTTON_PRESSED
SVG_RIGHT_BUTTON_PRESSED
SVG_LEFT_BUTTON_RELEASED
SVG_MIDDLE_BUTTON_RELEASED
SVG_RIGHT_BUTTON_RELEASED
SVG_BOUNDS_ON_ELEMENT
SVG_MATRIX_FOR_ELEMENT
WIDGET_GEOMETRY
PARENT_WIDGET_ID

그냥, 알아본 것이 아닙니다. SVG 객체를 변경하는 데 알아야 되는 내용이 있어 확인해 본 것입니다.

이 중, 본인이 사용하는 이벤트는 SVG_LEFT_BUTTON_PRESSED, SVG_RIGHT_BUTTON_RELEASED 이 두개의 이벤트를 이용합니다. 왼쪽 버튼이 눌러 졌을 때 ON, 왼쪽 버튼이 떨어졌을 떄(?) OFF.
간단하죠...
이벤트로로 넘어오는 text 문자열을 구문 분석하여 사용하려고 하니, pvslib에서 벌써 지원해 주는 군요. textEventType 함수를 이용하면 TEXT_EVENT 종류를 쉽게 알 수 있습니다. 또한 svg 이미지에서 어떤 객체인지 구문 분석 할 필요도 없습니다. svgObjectName() 함수를 이용하면 쉽게 어떤 객체인지 알 수 있습니다.

• int textEventType(const char *text);
• const char* svgObjectName(const char *text);

svg 객체의 스타일을 변경시킬 때 사용하는 함수는

• int rlSvgAnimator::svgPrintf(const char * objectname, const *tag, const chart* format,...);
• int rlSvgAnimator::svgTextPrintf(const char * objectname, const char * format,...);

이 함수들을 이용해 봅시다.

TEXT_EVENT 가 발생하였을 때 인자로 넘어오는 text 변수의 내용은 아래와 같은 내용들이 들어 있습니다.

  svgPressedLeftButton=pv.button01
  svgReleasedLeftButton=pv.button01

 이 text 변수를 svgObjectName() 함수에 넣어주면 pv.button01이라는 문자열을 얻을 수 있습니다. 즉 svg 객체의 이름을 얻을 수 있습니다. svg 객체를 수정하였다면 svg이미지를 다시 그려 클라이언트로 보내 주어야 클라이언트 화면이 변경됩니다.
무슨 내용인지 모르겠다고 포기하지 마십시오. 설명이 이상해서 그런거니까요. 그럼 한번 변경해 보죠.

SVG 객체 초기화

좋게 이야기해서 초기화,... SVG 이미지를 잘 못 만들어, 초기 형태를 변경하고자 할 경우, SVG 이미지를 읽은 후, 객체의 값을 변경하면 됩니다.
 그림3에 나타난 이미지는 초기 밸브(pv.valve01)의 상태가 CLOSE 상태로(색상을 변경), 버튼 1(pv.button01)의 문자(ON에서 OFF로 변경), pv.text10을 숨김상태로변경하겠습니다.

d->svgImg.read("svgtest.svg"); d->svgImg.show("pv.text10", 0); d->svgImg.svgTextPrintf("pv.buttontext01", "OFF"); d->svgImg.svgPrintf("pv.valve01", "style=", "fill:#009999"); drawSVG01(p, svg_01, d);

본인의 경우 myInit() 함수에서 변경하였습니다. 필요한 위치를 확인하여 변경하시기 바랍니다.

• d->svgImg.show("pv.text10", 0);
  pv.text10 객체를 숨김, 나타내고자 할 경우 1
• d->svgImg.svgTextPrintf("pv.buttontext01", "OFF");
  pv.buttontext01의 텍스트를 OFF로 변경
• d->svgImg.svgPrinft("pv.valve01", "style=", "fill:#009999");
  pv.valve01 의 색상을 #009999로 변경

그럼 이것이 어떻게 반영되지 실행해 보죠.

pv.valve01 의 색상이 바뀌었습니다. 우측 맨 위의 pv.button01 에 나타나는 텍스트가 OFF로 바뀌었습니다. 우측 하부 view 버튼 밑에 있던 pv.text10 객체가 없어졌습니다.
간단하죠.

SVG 버튼 동작 (마우스 클릭시 ON/OFF 토글)

pv.button01 객체를 눌렀을때 버튼의 색상을 녹색, 버튼 텍스트는 ON으로 변경해 볼까요. 물론 눌렀을 때만 ON 누르지 않았을 때는 OFF, 동작을 하는 코드 입니다.

if (id == svg_01) { switch(textEventType(text)) { case SVG_LEFT_BUTTON_PRESSED: if(!strcmp(svgObjectName(text), "pv.button01")) { d->svgImg.svgPrintf("pv.button01", "style=", "fill:#00FF00"); d->svgImg.svgTextPrintf("pv.buttontext01", "ON"); } break; case SVG_LEFT_BUTTON_RELEASED: if(!strcmp(svgObjectName(text), "pv.button01")) { d->svgImg.svgPrintf("pv.button01", "style=", "fill:#009999"); d->svgImg.svgTextPrintf("pv.buttontext01", "OFF"); } break; } drawSVG01(p, svg_01, d); }

코드가 지저분해서 그렇지, 어렵지 않습니다. 코드 삽입 위치는 slotTextEvent() 함수에 넣어주면 됩니다.

pb.button01 객체를 마우스로 눌렀을 때 객체의 색상, 텍스트를 변경하고, 눌렀다 놓을 때 원래의 색상, 텍스트로 변경하는 것이 코드의 내용입니다. svg 객체 내용이 변했을 경우 svg 이미지를 다시 그리기 위해 drawSVG01() 함수를 호출하였습니다.

이상하게 마우스 버튼은 캡처가 되지 않네요. 여하튼 ON으로 변한 버튼에 마우스를 올려놓고 마우스 왼쪽 버튼을 눌렀을 때 변경된 화면입니다.

SVG 이미지 초기화, SVG 버튼 동작 코드 모두 기본 사용 함수는 svgPrintf() 함수 입니다. 여기서, 조금 알아야 하는 내용이 있습니다. 바로 두번째 인자에 넣어 준 "style".
style 은 SVG 객체의 스타일을 설정하기 위해 사용됩니다. 관련된 style 매우 많습니다.
W3C 관련 svg styling 참조하시기 바랍니다. 원칙적으로 이 값들을 제어하면SVG 객체를 아주 디테일하게 제어할 수 있습니다. 하지만 너무 깊게 파고 들고 싶지는 않습니다. 저는 아주 초보적인 내용만 필요합니다.(색상변경, 텍스트 변경,...)

%pvbrowser 메뉴얼 페이지에 보면
svgPrintf("pv.button01", "fill=", "#00FF00"); 코드가 작동하여야 하는 데 작동하지 않네요...

 SVG 이미지는 Zoom, Animation 모두 지원합니다. (우선 저는 이 단계에서 pass~) 관심 있으시면,  링크 내용을 참조하시기 바랍니다. 영문이지만 쓸만한 자료입니다.

어쨋든 조금 더 진행하겠습니다.

P&ID 에 이용할 경우 공정 프로세스 라인의 현재 상태를 한 눈에 확인할 수 있으면 좋겠죠. pv.path101 수평라인을 파이프 라인(혹은 공정 흐름)이라 생각하고, pv.button01잉 ON  되었을 때 이 라인도 녹색으로 바꾸어 보겠습니다.

쉽게 하실 수 있을 겁니다.

svgPrintf("pv.path101", "style=", "fill:#00FF00");  코드를 필요한 곳에 넣어 주시기 바랍니다.

조금 더,...
pv.button01 객체가 ON 되었을 때 pv.led02 색상을 붉게, pv.text10에 "Button Pressed!" 메시지 출력
어떻게 해야 할 까요?


svgPrintf("pv.led02", style="fill:#FF0000");

show("pv.text10", 1);
svgTextPrintf("pv.text10" ,"Button Pressed!");

 pv.led02의 색상이 붉은색으로, pv.text10 이 나타나며 "Button Pressed" 메시지가 나타났습니다. 여기서 pv.led02의 객체의 크기가 작아진 것을 확인 할 수 있습니다.
syle 사용시 객체의 크기도 함께 지정하여야 합니다.

두서없이 SVG 이미지 사용법에 대해 알아 보았습니다. SVG 이미지를 이용하는 경우, 분명히 많은 이점이 있지만, 세부적인 설정을 하기 위해 많은 노력을 하셔야 합니다. 특히 글자의 위치라던가. 객체의 크기 라던가....