[VTK] MFC에서 VTK 2D Bar 차트 사용하기

VTK SDK에는 보통 3D 시각화 도구라고만 알고 계실 것 같은데요.

사실 VTK SDK는 2D, 3D에 관련된 많은 기능들을 지원하고 있습니다.

아래 링크는 VTK에서 제공하는 공식 예제 사이트입니다.

링크: https://lorensen.github.io/VTKExamples/site/Cxx

오늘 보여드릴 예제는 평소에 사용될 만한 도구 중 하나인 '차트'입니다.

<MFC BarChart 예제>

먼저 예제는 아래 링크에서 확인할 수 있습니다.

링크: https://lorensen.github.io/VTKExamples/site/Cxx/Plotting/BarChart/

실행 결과는 위 그림과 같은데요.

마우스 이벤트가 등록되어 있어 이동, 확대/축소가 가능하며,
사용자 입맛에 맞게 글자 크기, 색상, Tick 간격 등 모든 것을 변경할 수 있습니다.

MFC UI에는 Chart라는 것이 없기 때문에 사용자가 직접 만들어야 하는데요.

이런 기능을 가져다 사용할 수 있으면, 굳이 만들지 않아도 되겠죠?

자, 본격적으로 예제 만들기를 실습해 보겠습니다.
(핵심 부분만 설명합니다. 자세한 내용은 본문 하단의 예제 코드를 참고해주세요.)

먼저 Dialog 기반으로 프로젝트를 생성합니다.

Dialog 기반 프로젝트 생성하기.

그리고 MFC에서 VTK 사용을 위해 아래 링크를 참고하여 설정합니다.

[VTK] Visual Studio 2015 MFC에서 VTK 사용 준비하기

1. VTK 초기화

Main Dialog header 파일에 아래의 초기화 코드를 추가합니다.

#include <vtkAutoInit.h>

#define vtkRenderingCore_AUTOINIT 3(vtkRenderingOpenGL2,vtkInteractionStyle, vtkRenderingFreeType)
#define vtkRenderingContext2D_AUTOINIT 1(vtkRenderingContextOpenGL2)

#include <vtkRenderer.h>
#include <vtkRenderWindow.h>
#include <vtkSmartPointer.h>
#include <vtkRenderWindowInteractor.h>
#include <vtkInteractorStyleTrackballCamera.h>
#include <vtkVersion.h>
#include <vtkChartXY.h>
#include <vtkPlot.h>
#include <vtkAxis.h>
#include <vtkTable.h>
#include <vtkTextProperty.h>
#include <vtkIntArray.h>
#include <vtkContextView.h>
#include <vtkContextScene.h>
#include <vtkColorSeries.h>
#include <vtkNamedColors.h>
#include <vtkColor.h>

2. Picture Control에 그려질 vtkRenderWindow를 초기화합니다.

<Header File>

<Source File>

void CExampleBarChartDlg::InitializeVTKWindow(void* hWnd)
{
	vtkNew<vtkRenderWindowInteractor> interactor;
	
	interactor->SetInteractorStyle(vtkSmartPointer<vtkInteractorStyleTrackballCamera>::New());

	vtkNew<vtkRenderer> renderer;
	renderer->SetBackground(0.1, 0.2, 0.3);

	m_vtkRenderWindow->SetParentId(hWnd);
	m_vtkRenderWindow->SetInteractor(interactor);
	m_vtkRenderWindow->AddRenderer(renderer);
	m_vtkRenderWindow->Render();
}

void CExampleBarChartDlg::ResizeVTKWindow()
{
	CRect rc;
	GetDlgItem(IDC_PC_CHART)->GetClientRect(rc);
	m_vtkRenderWindow->SetSize(rc.Width(), rc.Height());
}

3. Button Event에 Chart data를 불러오는 코드를 정의합니다.

void CExampleBarChartDlg::OnBnClickedBtnInitchart()
{
	// Colors
	vtkNew<vtkColorSeries> colorSeries;
	colorSeries->SetColorScheme(vtkColorSeries::BREWER_SEQUENTIAL_YELLOW_ORANGE_BROWN_3);
	colorSeries->SetColorScheme(vtkColorSeries::BREWER_DIVERGING_SPECTRAL_3);
	colorSeries->SetColorScheme(vtkColorSeries::BREWER_DIVERGING_BROWN_BLUE_GREEN_3);
	colorSeries->SetColorScheme(vtkColorSeries::BREWER_SEQUENTIAL_BLUE_GREEN_3);
	colorSeries->SetColorScheme(vtkColorSeries::BREWER_SEQUENTIAL_BLUE_PURPLE_3);
	colorSeries->SetColorScheme(vtkColorSeries::BREWER_DIVERGING_PURPLE_ORANGE_3);

	vtkNew<vtkNamedColors> colors;
	vtkColor3d backgroundColor = colors->GetColor3d("Sienna");
	vtkColor3d axisColor = colors->GetColor3d("Wheat");
	vtkColor3d titleColor = colors->GetColor3d("Wheat");

	// Set up a 2D scene, add an XY chart to it
	vtkNew<vtkContextView>  view;
	view->GetRenderer()->SetBackground(backgroundColor.GetData());
	view->GetRenderWindow()->SetSize(640, 480);
	
	// 추가
	view->SetRenderWindow(m_vtkRenderWindow);

	vtkNew<vtkChartXY>  chart;
	view->GetScene()->AddItem(chart);

	// Set various properties
	vtkAxis *xAxis = chart->GetAxis(vtkAxis::BOTTOM);
	xAxis->SetTitle("Monthly");
	xAxis->GetTitleProperties()->SetColor(axisColor.GetData());
	xAxis->GetTitleProperties()->SetFontSize(16);
	xAxis->GetTitleProperties()->ItalicOn();
	xAxis->GetLabelProperties()->SetColor(axisColor.GetData());

	vtkAxis *yAxis = chart->GetAxis(vtkAxis::LEFT);
	yAxis->SetTitle("Circulation");
	yAxis->GetTitleProperties()->SetColor(axisColor.GetData());
	yAxis->GetTitleProperties()->SetFontSize(16);
	yAxis->GetTitleProperties()->ItalicOn();
	yAxis->GetLabelProperties()->SetColor(axisColor.GetData());

	chart->SetTitle("Circulation 2008, 2009, 2010");
	chart->GetTitleProperties()->SetFontSize(24);
	chart->GetTitleProperties()->SetColor(titleColor.GetData());
	chart->GetTitleProperties()->BoldOn();

	// Create a table with some points in it...
	vtkNew<vtkTable>  table;

	vtkNew<vtkIntArray>  arrMonth;
	arrMonth->SetName("Month");
	table->AddColumn(arrMonth);

	vtkNew<vtkIntArray>  arr2008;
	arr2008->SetName("2008");
	table->AddColumn(arr2008);

	vtkNew<vtkIntArray>  arr2009;
	arr2009->SetName("2009");
	table->AddColumn(arr2009);

	vtkNew<vtkIntArray>  arr2010;
	arr2010->SetName("2010");
	table->AddColumn(arr2010);

	table->SetNumberOfRows(12);
	for (int i = 0; i < 12; i++)
	{
		table->SetValue(i, 0, i + 1);
		table->SetValue(i, 1, data_2008[i]);
		table->SetValue(i, 2, data_2009[i]);
		table->SetValue(i, 3, data_2010[i]);
	}

	// Add multiple line plots, setting the colors etc
	vtkPlot *line = 0;
	line = chart->AddPlot(vtkChart::BAR);
	line->SetColor(colorSeries->GetColor(0).GetRed() / 255.0,
		colorSeries->GetColor(0).GetGreen() / 255.0,
		colorSeries->GetColor(0).GetBlue() / 255.0);
	line->SetInputData(table, 0, 1);

	line = chart->AddPlot(vtkChart::BAR);
	line->SetColor(colorSeries->GetColor(1).GetRed() / 255.0,
		colorSeries->GetColor(1).GetGreen() / 255.0,
		colorSeries->GetColor(1).GetBlue() / 255.0);
	line->SetInputData(table, 0, 2);

	line = chart->AddPlot(vtkChart::BAR);
	line->SetColor(colorSeries->GetColor(2).GetRed() / 255.0,
		colorSeries->GetColor(2).GetGreen() / 255.0,
		colorSeries->GetColor(2).GetBlue() / 255.0);
	line->SetInputData(table, 0, 3);

	//Finally render the scene and compare the image to a reference image
	view->GetRenderWindow()->SetMultiSamples(0);
	view->GetRenderWindow()->Render();
	view->GetInteractor()->Initialize();
	//view->GetInteractor()->Start();
}

기본 C++ 예제 코드를 MFC Dialog 프로젝트로 변경한 것 밖에 없으니 간단하죠?

자세한 내용은 첨부된 코드를 참고해주세요.

ExampleBarChart.zip