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

SVG(Scalable Vector Graphics) 파일을 이용해 GUI 파일을 만들어 보겠습니다.

SVG 이미지 파일을 이용해 GUI 파일을 구성하면 P&ID (Process & Instrumentation Diagram) 를 쉽게 만들 수 있습니다.  SCADA 시스템을 만들때 가장 시간이 많이 걸리면서, 100% 만족 못하는 것이 GUI 화면입니다. pvbrowser는 opensource 프로그램이다 보니 이쪽은 더..더욱... , 여하튼 위젯을 이용하여 보기좋은 GUI 화면을 만들 수도 있겠지만, 너무 많은 시간을  빼앗아가는 삽집, 노가다의 연속입니다. 공들여 좋은 화면을 만들어 놓아도, pvbrowser 창 크기가 변하거나, 모니터가 변경되는 경우.... OTL...

보다 적은 시간을 투자하면서 창(혹은 모니터) 크기에 따라 가변적으로 변하는 GUI 하면을 만들 방법을 찾다, 우연히 찾은 기능이 SVG 위젯입니다. SVG가 뭔지도 모를 때는, 그냥 벡터 이미지 파일이니 창 크기가 변경될 때, 배경이미지나 쉽게 바꾸어 볼려도 시도해 보았습니다.

한번 시도해 보시기 바랍니다. 단지 창 크기에 대응하는 정도인지...
SVG 파일을 이용할 때 얻을 수 있는 장점 중, 가장 작은 부분 중 하나가 일지도 모릅니다.

그림 1. svg 위젯 디자이너 화면

그림 1은 디자이너모드에서 svg 이미지 위젯을 삽입한 화면입니다. svg 이미지 화면은 opnsource 프로그램(예: inkscape,...)을 이용하여 만든 파일을 이용하였습니다. 만약 파일이 없는 경우 인터넷 검색을 하여 아무 svg 이미지 파일을 사용하여도 됩니다. 우선은 svg 이미지 파일을 나타나게 하는 것이 오늘의 목표입니다.
svg 파일을 프로젝트 폴더에 넣어주십시오, main.cpp, mask1.cpp,...와 같은 파일이 있는 폴더에 넣어주시면 됩니다.(경로를 지정해도 상관없지만... 편하게 접근하죠.)
svg 위젯 속성창의 text 항목에 파일이름을 풀네임(????.svg)으로 넣어 주시면, 그림 1과 같이 디자이너 모드에서 이미지가 나타납니다. 나타나지 않을 경우 위젯 크기를 키우거나., 파일의 위치가 정확한지 다시 한번 확인하십시오, 나타나는 것이 정상입니다.

컴파일 후 pvbrowser에서 확인해 보죠.

그림 2. pvbrowser 실행화면

으잉, 웬 빈화면...

svg 이미지 위젯용 공간이 빈 공간으로 나타났습니다. 서버 메시지 창에 에러도 없는데 왜 이러냐...

 SVG 이미지를 사용하기 위해서는 svg  이미지 객체를 만들고, 관리할  전용  library를 사용하여야 합니다.  필요한 라이브러리는 pvbrowser 오픈 소스에서 제공해주는 rlsvganimator.h 를 이용하면 됩니다.

pvapp.h에 다음과 같이 입력합니다. 별거 없습니다. svg 이미지 파일용 라이브러리를 프로젝트 주 헤더파일에서 지정해 주는 것입니다.

//#include "ppidaemon.h" // this is generated #include "rlsvganimator.h" int show_mask4(PARAM *p);

modbus, ppi  데몬과 같이 기본으로 지정되어(주석처리 되어 있음) 명기되어 있지 않습니다.  pvbrowser에서 제공하는 다른 라이브러리도 필요한 경우 이 곳에서 include시켜야 합니다.

자, 프로젝트에 rlsvganimato 라이브러리를 로딩하였습니다. 그럼 svg용 객체는 어디서 만들어야 할까요? 답은 필요한 mask 헤더 파일에서 만들어 주면 됩니다.

typedef struct // (todo: define your data structure here) { rlSvgAnimator svgImg; } DATA;

추가적으로 필요한 코드들은 pvsexample 에 있는 소스 코드를 복사하여 사용 하였습니다.
왜냐하면(정확한 사용법을 모르기 때문에 우선은... 그대로 사용하였습니다.

static int drawSVG01(PARAM *p, int id, DATA *d) { if(d == NULL) return -1; if(d->svgImg.isModified == 0) return 0; gBeginDraw(p, id); d->svgImg.writeSocket(); gEndDraw(p); return 0; }

이 코드는 SVG 이미지 파일을 변경하였을 때 SVG 이미지 파일의 변경내용을 클라이언트로 다시 내보내는 데 사용됩니다. 물론 SVG 이미지를 처음 로딩한 후 클라이언트에 화면에 나타내기 위해서도 사용됩니다. 즉 반복적으로 사용되는 부분이기 때문에 연관 코드를 함수형태로 사용합니다.

본인은 mask 생성시 초기화 구문(slotInit)에서 처리할 내용이 많을 경우  myInit()이라는 전용 초기화 함수를 하나 만들어 사용합니다. svg 이미지 처리용 코드도 이곳에 적어 주었습니다.


static int myInit(PARAM *p, DATA *d) { d->svgImg.setSocket(&p->s); d->svgImg.setId(obj1); d->svgImg.read("test01.svg"); drawSVG01(p, obj1, d); return 0; }

우선은 pvsexample 에서 필요한 코드를 복사하여 사용하였기 때문에 정확한 작동 방식을 설명할 수는 없지만, 클라이언트와 소켓 통신을 위한 구문이 존재하며, svg 객체를 위한 이미지 파일을 읽어들인후 생성된 소켓으로 이미지 파일을 내보내는 구문으로 구성되어 있습니다. 맨 처음 SVG 이미지를 로드 하기 위한 코드입니다.

프로젝트를 컴파일 한 후 pvbrowser 화면에서 확인해 보았습니다.

그림 3. 브라우저 실행 화면

자 svg 이미지가 브라우저 화면에 나타났습니다. 하지만 백터 이미지의 장점을 확인할 수는 없습니다. 그냥 일반 이미지 파일과 동일합니다.

오늘은 그냥 svg 파일을 어떻게 나타내는지만 살펴 보았습니다. ..

pvsexample maske10을 참조하시기 바랍니다.svg 파일 관련 예제입니다.
이 예제 파일을 보면 SVG 이미지 파일의 특정부분을 확대하거나, 애니메이션이 가능합니다.
또, 다른 예제파일을 보면 텍스트나 기타 항목들을 숨기거나, 나타내기,... 여하튼 어떤 방식으로 코드를 짜느냐에 따라 활용도가 매우 높습니다.