pvdevelop 프로젝트 -UI 편집 방법 - 2D graph (QwtPlot) 2편

오늘은 QwtPlot 2탄으로 마커 기능에 대해 알아보죠.
우선 지난 시간에 그냥 넘어간 함수들을 살펴보죠.

qpwInsertMarker(p, id, index);
qpwSetMarkerLineStyle(p, id, index, style);
qpwSetMarkerPos(p, id, index, x, y);
qpwSetMarkerLabelAlign(p, id, index, align);
qpwSetMarkerPen(p, id, index, r, g, b, style);
qpwSetMarkerLabel(p, id, number, "text");
//qpwSetMarkerFont(p, id, index, "family", size, style);
qpwSetMarkerSymbol(p, id, index, symbol, r1, g1, b1, r2, g2, b2, w, h);
qpwInsertLineMarker(p, id, index, "text", pos);

9개의 함수가 남아있네요... 한번 알아보겠습니다.
순서대로 만드시면 됩니다.

Marker Label 만드는 법

1. Marker 를 만듭니다.

int qpwInsertMarker(PARAM* p, int id, int index )

사용 예)
  qpwInsertMarker(p, qwtplot_01, 100);

 마커도 다른 커브 개념으로 생각하면 되는 것 같습니다. 마커용으로 100을 지정하였습니다.

2. MarkerSymbol 을 지정합니다.

int qpwSetMarkerSymbol(PARAM* p, int id, int index, int symbol, int r1, int g1, int b1, int r1, int g1, int b1, int w, int h )

MarkerSymbol
MarkerNone
MarkerEllipse
MarkerRect
MarkerDiamond
MarkerTriangle
MarkerDTriangle
MarkerUTriangle
MarkerLTriangle
MarkerRTriangle
MarkerCross
MakerXCross
MarkerStyleCnt

사용 예)
  qpwSetMarkerSymbol(p, id, 100, MarkerNone, RED,RED,0,0);

3. Marker를 표시할 위치를 지정합니다.

int qpwSetMarkerPos(PARAM* p, int id, int index, float x, float y )

사용 예)
  qpwSetMarkerPos(p, id, 100, 25,150);

4. Maker 라벨을 정렬합니다.

int qpwSetMarkerLabelAlign(PARAM* p, int id, int index, int align )

align

AlignAuto

AlignLeft

AlignRight

AlignHCenter

AlignJustify

AlignHorizontal_Mask

AlignTop

AlignBottom

AlignVCenter

AlignVertical_Mask

AlignCenter

사용 예)
   qpwSetMarkerLabelAlign(p, id, 100, AlignRight);

5. Marker 라벨의 내용를 넣습니다.

int qpwSetMarkerLabel(PARAM* p, int id, int number const char* text )

사용 예)
   qpwSetMarkerLabel(p, id, 100, "Test What is");

컴파일 후 확인해 보겠습니다. 저는 100, 101 마크 두개를 넣어 주었습니다.

그림 1. 마커삽입 화면

두개 모두 잘 나왔습니다.

---

Marker Line 만드는 법

이건 메뉴얼에 설명이 제대로 되어 있지 않아 고생 많이 했습니다. (정확한 것이 아닐 수 도 있습니다.)

1. MakerLine을 만들자.

int qpwInsertLineMarker(PARAM* p, int id, int index, const char* text, int pos ) pos = yLeft | yRight | xBottom | xTop

사용 예)
   qpwInsertLineMarker(p, id, 110, "L-Marker Test", yLeft);

% pos 가 하는 일이 무엇인지 모르겠습니다....

2. MakerLine Pen 지정

int qpwSetMarkerPen(PARAM* p, int id, int index, int r, int g, int b, int style )

사용 예)
   qpwSetMarkerPen(p, id, 110, RED, 0);

% style 부분에 대한 자료를확인하지 못했음.

3. MarkerLine 스타일 지정

int qpwSetMarkerLineStyle(PARAM* p, int id, int index, int style, ) style = NoLine | HLine | VLine | Cross

사용 예)
   qpwSetMarkerLineStyle(p, id, 110, 2);

style enum이 먹지 않습니다. 숫자로 넣어 주시기 바랍니다.
NoLine = 0; HLine =1; VLine =2; Cross=3

4. MarkerLine 위치 지정

int qpwSetMarkerPos(PARAM* p, int id, int index, float x, float y )

사용 예)
  qpwSetMarkerPos(p, id, 110, 60,120);

그림 2. marker Line- VLine

그림 2와 같이 현재 지정한 위치 기준으로 , 수직 라인(적색)이 만들어 졌습니다. 수직라인의 위치는 qpwSetMarkerPos() 에서 x 위치로 지정한 60입니다.

그림 3. marker Line - HLine

qwpSetMarkerLineStyle() 함수의 스타일을 수평라인(HLine) 으로 변경하였습니다. 수평라인의 위치는 qpwSetMarkerPos()에서 y 위치로 지정한 120 입니다.

그림 4.marker Line - Cross Line

qwpSetMarkerLineStyle() 함수의 스타일을 Cross라인으로 변경하였습니다. 수평, 수직라인이 그려지는 위치는 qpwSetMarkerPos()에서 y 위치로 지정한 60, 120 입니다.



한가지 더, qpwSetMarkerLabelAlign() 함수를 이용한 지정한 위치 기준 mark 텍스트를 정렬할 수 있습니다.

int qpwSetMarkerLabelAlign(PARAM* p, int id, int index, int align )

사용 예)
   qpwSetMarkerLabelAlign(p, id, 110, AlignRight);

그림 5. 라벨 문자열 정렬

"L-Maker Test" 문자열의 위치를 그림5와 비교하여 보십시오. 기본값이 중앙정렬에서 오른쪽 정렬으로 변경되었습니다.


최정적인 qwtPlotInit() 함수 입니다. 필요하신 분 참조하시기 바랍니다.

static int qwtPlotInit(PARAM *p, int id, DATA *d) { qpwSetCanvasBackground(p,id,239,239,239); //qpwEnableAxis(p, id, yLeft); qpwEnableAxis(p, id, yRight); //qpwEnableAxis(p, id, xBottom); qpwSetTitle(p, id, "Test QwtPlot"); //qpwEnableOutline(p, id, 1); //qpwSetOutlinePen(p, id, GREEN); qpwSetAutoLegend(p, id, 1); qpwEnableLegend(p, id, 1); qpwSetLegendPos(p, id, RightLegend); qpwSetLegendFrameStyle(p, id, Panel | Sunken); qpwSetAxisTitle(p, id, xBottom, "Alpha"); qpwSetAxisTitle(p, id, yLeft, "f(Alpha)"); qpwSetAxisTitle(p, id, yRight, "x(Alpha)"); //Insert Curve qpwInsertCurve(p, id, 0, "Test 0"); qpwSetCurvePen(p, id, 0, BLUE, 2, DashDotLine); qpwSetCurveYAxis(p, id, 0, yLeft); qpwSetCurveSymbol(p, id, 0, MarkerDiamond, RED, GREEN, 3,3); qpwInsertCurve(p, id, 1, "Test 1"); qpwSetCurvePen(p, id, 1, GREEN, 2, DashDotLine); qpwSetCurveYAxis(p, id, 1, yRight); qpwSetCurveSymbol(p, id, 1, MarkerEllipse, RED, GREEN, 3,3); //Axis qpwSetAxisScale(p, id, xBottom, 0, 100, 25); //qpwSetAxisScaleDraw(p, id, xBottom, "mm-ss"); //qpwSetAxisOptions(p, id, yRight, Inverted); qpwSetAxisMaxMajor(p, id, yLeft, 7); qpwSetAxisMaxMinor(p, id, yLeft, 7); //qpwSetGridMajPen(p, id, GREEN, DashLine); //qpwEnableGridXMin(p, id); //qpwSetGridMinPen(p, id, YELLOW, DashLine); qpwInsertMarker(p, id, 100); qpwSetMarkerSymbol(p, id, 100, MarkerNone, RED,RED,0,0); qpwSetMarkerPos(p, id, 100, 25,150); //qpwSetMarkerFont(p, id, 100, "Times New Roman", 100,1); qpwSetMarkerLabel(p, id, 100, "Test What is"); qpwInsertMarker(p, id, 101); qpwSetMarkerSymbol(p, id, 101, MarkerNone, GREEN, GREEN, 0, 0); qpwSetMarkerPos(p, id, 101, 75, 200); qpwSetMarkerLabelAlign(p, id, 101, AlignRight); qpwSetMarkerLabel(p, id, 101, "Test ---"); qpwInsertLineMarker(p, id, 110, "L-Marker Test", yLeft); qpwSetMarkerPen(p, id, 110, RED, 0); qpwSetMarkerLineStyle(p, id, 110, 3); qpwSetMarkerPos(p, id, 110, 60, 120); qpwSetMarkerLabelAlign(p, id, 110, AlignRight); return 0; }

그림 6.QwtPlot 위젯 영역 마우스 이벤트

캔버스 영역에서 왼쪽 마우스 버튼을 누르면 PLOT_MOUSE_PRESSED, PLOT_MOUSE_RELEASED 이벤트가 발생하면서 x, y 좌표가 나오네요. 이 이벤트를 이용하면 마커위치를 옮길 수 있을 것 같습니다.

한번 해 보겠습니다.

그림 7. 수직 마커 라인

QwtPlot 위젯 영역에서 마우스 왼쪽버튼을 눌렀을 때 발생하는 PLOT_MOUSE_PRESSED 이벤트를 처리하는 slot은 slotMousePressedEvent() 에서 처리됩니다. 이 함수로 넘어오는 실수형 x, y 값을 이용하여 Marker 라인을 움직이고, GUI 화면 좌측, 하단에 있는 label 위젯에 d->y1 배열에 저당된 값을 표시하도록 하였습니다.
마우스 버튼을 눌렀을 때 Markerline이 그려지게 하기 위해 qpwReplot()함수를 MousePressedEvent 함수에 같이 넣어주었습니다. nullEvent에서 처리하면 반응이 조금 느리네요.
입력된 코드는 다음과 같습니다.


static int slotMousePressedEvent(PARAM *p, int id, DATA *d, float x, float y) { if(p == NULL || id == 0 || d == NULL || x < -1000 || y < -1000) return -1; switch(id) { case qwtplot_01: printf(">>M x = %d y =%d\n", (int)x, (int)y); qpwSetMarkerPos(p, id, 110, (int)x, (int)y); qpwReplot(p, qwtplot_01); pvPrintf(p,lb_Bottom01,"Y : %f.0", d->y1[(int)x]); break; } return 0; }

 특이한 내용이 없으니,... 아, 주의해야 할 점이 있습니다.
이벤트로 넘어오는 실수형 x, y값의 QwtPlot 위젯 전체 영역에서 발생합니다. 즉 그래프가 그려지는 캔버스 영역이외에서도 발생합니다. 그렇게 큰 문제는 아니지만 캔버스 밖을 마우스로 누르면 Marker라인이 사라지는 군요..
x, y의 기준점, 즉 0,0 은 캔버스 좌측, 하단입니다. 만약 캔버스 영역 안에서 만 markerline이 반으하도록 하려면 코드를 수정하여야 합니다. 즉접 해 보시기 바랍니다.


마커에 표시되는 문자의 폰트 특성을 변경해주는 함수가 있네요... 하지만, 이 함수는 어떻게 사용해야 하나.... 짱구가 아프네... 뭐가 잘못 되었는지 모르겠지만 제대로 반응하지 않네요.

int qpwSetMarkerFont(PARAM* p, int id, int index, const char* family, int size, int style )