enuSpace SDK를 이용한 그래픽 편집기 제작
상세코드를 확인하실려면 샘플 프로젝트를 다운 받아주세요.
샘플 다운
GUIEditor#1.zip
제1강
enuSpace HMI/SCADA 솔루션은 개발자에게 그래픽 응용프로그램을 쉽고 빠르게 제작할 수 있는 SDK를 제공합니다. 본 제1강에서는 enuSpace SDK를 이용하여 나만의 저작기 생성방법을 소개 합니다.
우선, 나만의 그래픽 편집기를 제작하기 위해서 Visual Studio 2012를 이용하여 새로운 프로젝트를 생성합니다.
간단한 예시용 프로젝트 이므로, 단일 문서에 CView 기반의 SDI 프로젝트로 생성합니다.
생성된 프로젝트에 enuSpace를 이용하기 위해 SDK의 라이브러리와 해더 파일을 추가합니다.
MFC 프로젝트의 stdafx.h 파일에 라이브러리와 해더파일을 추가합니다.
stdafx.h
// ~~
#include "header\enuLibrary.h"
#include "header\SvgDefine.h"
#pragma comment (lib, "lib\\enuSpaceLib.lib")
// ~~
MFC의 프로젝트 속성을 조금더 수행하면, 출력 디렉토리에 Bin의 디렉토리로 변경, 대상이름은 Debug와 Release에 구분하여 GUIEditor_R, GUIEditor_D로 구분하여 생성하도록 옵션을 수정합니다.
여기까지 프로젝트 설정을 마무리하고 컴파일하여 빌드된 프로그램을 실행하면, 빈 프로젝트가 실행됩니다. 여기에 enuSpace SDK 프로젝트를 생성하고, View를 생성하여 보겠습니다.
해더에 멤버변수 3개를 추가하도록 합니다.
class CGUIEditorView : public CView
{
// ~~
private:
HPROJECT m_pProject;
HVIEW m_pENUView;
HSVG m_pSvgHandle;
m_pProject는 enuSpace 의 프로젝트 핸들입니다.
m_pENUView는 enuSpace의 뷰의 핸들입니다. 뷰핸들을 이용하여 그래픽 객체를 제어할 경우에 사용되는 멤버 변수입니다.
m_pSvgHandle은 enuSpace의 SVG 파일 핸들입니다.
각 핸들을 추가한후, 뷰의 OnInitialUpdate() MFC 가상함수를 추가합니다. 추가된 함수에 아래코드를 추가하여 빌드를 수행합니다.
void CGUIEditorView::OnInitialUpdate()
{
CView::OnInitialUpdate();
// Create Project
m_pProject = enuCreateProject();
// Project Open
wchar_t szPath[MAX_PATH];
GetModuleFileName(NULL, szPath, MAX_PATH);
wchar_t drive[MAX_PATH]; // Drive
wchar_t dir[MAX_PATH]; // Directory
wchar_t fname[MAX_PATH]; // Filename
wchar_t ext[MAX_PATH]; // Ext
_wsplitpath_s(szPath, drive, dir, fname, ext);
CString strProjectName;
strProjectName.Format(L"%s%sGUI\\GUI.enup", drive, dir);
enuLoadProjectFile(strProjectName.GetBuffer(0));
// ENU View Create
m_pENUView = enuCreateView(this->m_hWnd);
// ENU View Size Set.
RECT rect;
GetClientRect(&rect);
enuSetWindowPos(m_pENUView, rect.left, rect.top, rect.right, rect.bottom);
// ENU View Window Color Set.
enuSetWindowColor(m_pENUView, 200,200,200);
// ENU View ID Set.
enuSetViewID(m_pENUView, L"KoreaAIP");
// New Page Create.
CString strPicture = L"picture\\KoreaAIP.svg";
m_pSvgHandle = enuNewSvgPageFile(strPicture.GetBuffer(0));
// ENU View Attach Set Page
enuSetSvgPageView(m_pENUView, strPicture.GetBuffer(0));
// Page Canvas Color Set.
enuSetCanvasColor(m_pENUView, 100,100,100);
}
위 코드의 내용을 간략히 살펴보면, 새로운 프로젝트를 생성하는 API 함수 enuCreateProject(), 프로젝트를 로드 수행하는 enuLoadProjectFile() 함수 여기 샘플에서는 기본 프로젝트를 생성하여 로드한 결과입니다. enuSpace의 뷰를 생성하는 enuCreateView()함수와 윈도우의 위치지정을 위한 enuSetWinwosPos() 함수, 윈도우의 색상을 지정하는 enuSetWindowColor()함수, 윈도우의 ID를 지정하는 enuSetViewID()함수, 그리고 새로운 그래픽 페이지를 생성하는 enuNewSvgPageFile()함수입니다.
그리고 생성된 뷰에 새로운 그래픽 페이지를 연결을 수행하여 화면상에 보여지도록 하는 enuSetSvgPageView()를 호출하였습니다.
만약 여러개의 그래픽 페이지를 생성하였고, 상황에 맞게 뷰에 보여지도록 설정하는 함수가 enuSetSvgPageView()함수입니다.
처음 생성하였을 경우, 기본적으로 그래픽 편집모드로 생성됩니다. 운영 모드로 변경하고자 하는 경우에는 enuSetScriptOperationMode(true)를 수행함으로서 운영모드로 변경할 수 있습니다.
여기까지 진행이 되었다면, 다음으로 객체를 생성하기 위한 인터페이스를 열어주어야 합니다. 이때 enuSetCallBackSelectToolBar()함수를 이용하여 툴바의 객체 선택정보가 변경되었을 경우, 응용프로그램에게 전달 받고자하는 콜백함수를 설정을 추가합니다.
그리고 Ribbon 메뉴에 각 기초객체를 생성하기 위해 MainFrm.cpp에 CreateRibbonBar()를 생성합니다.
BOOL CMainFrame::CreateRibbonBar()
{
if (!m_wndRibbonBar.Create(this))
{
return -1; // fail to create
}
m_PanelImages.SetImageSize(CSize(16, 16));
if (!m_PanelImages.Load(IDB_PANEL_IMAGE))
{
TRACE0("Failed to load panel images\n");
return -1;
}
CMFCRibbonCategory* pCategory = m_wndRibbonBar.AddCategory(_T("Home\nh"), IDB_FILESMALL, IDB_FILELARGE);
CMFCRibbonPanel* pPanelDraw = pCategory->AddPanel(_T("Object"), m_PanelImages.ExtractIcon(1));
pPanelDraw->Add(new CMFCRibbonButton(ID_SEL_POINTER, _T("Select\ns"), 0));
pPanelDraw->Add(new CMFCRibbonButton(ID_SEL_LINE, _T("Line\nl"), 0));
pPanelDraw->Add(new CMFCRibbonButton(ID_SEL_POLYLINE, _T("Polyline\nl"), 0));
pPanelDraw->Add(new CMFCRibbonButton(ID_SEL_POLYGON, _T("Polygon\ny"), 0));
pPanelDraw->Add(new CMFCRibbonButton(ID_SEL_CIRCLE, _T("Circle\ne"), 0));
pPanelDraw->Add(new CMFCRibbonButton(ID_SEL_ELLIPSE, _T("Ellipse\ne"), 0));
pPanelDraw->Add(new CMFCRibbonButton(ID_SEL_RECT, _T("Rectangle\nr"), 0));
pPanelDraw->Add(new CMFCRibbonButton(ID_SEL_TEXT, _T("Text\nn"), 0));
pPanelDraw->Add(new CMFCRibbonButton(ID_SEL_IMAGE, _T("Image\nn"), 0));
pPanelDraw->Add(new CMFCRibbonButton(ID_SEL_EDITBOX, _T("Edit Box\n"), 0));
pPanelDraw->Add(new CMFCRibbonButton(ID_SEL_CHART, _T("Chart\n"), 0));
// Add quick access toolbar commands:
CMFCRibbonQuickAccessToolBarDefaultState qatState;
m_wndRibbonBar.SetQuickAccessDefaultState(qatState);
// Add elements to the right side of tabs:
CMFCRibbonButton* pVisualStyleButton = new CMFCRibbonButton((UINT) -1, _T("Style\ns"));
pVisualStyleButton->SetMenu(IDR_THEME_MENU, FALSE , TRUE );
pVisualStyleButton->SetToolTipText(_T("Modify Visual Style"));
pVisualStyleButton->SetDescription(_T("Choose one of the following looks:\r\nMS Office 2003 or MS Office 2007"));
m_wndRibbonBar.AddToTabs(pVisualStyleButton);
m_wndRibbonBar.AddToTabs(new CMFCRibbonButton(ID_APP_ABOUT, _T(""), m_PanelImages.ExtractIcon(0)));
return TRUE;
}
생성된 리본바에 기초객체 버튼에 기능을 인터페이스 해주기 위하여 enuSetSelectToolBar(int iSel)함수에 생성하고자하는 객체의 타입을 전달합니다. 이미지의 객체를 생성하는 인터페이스 함수는 enuCreateImage()함수를 이용합니다. 자세한 코드는 샘플 프로젝트의 GUIEditorView.cpp 에 있습니다.
CGUIEditorView* g_GUIEditor = NULL;
void SelectToolBarCallBack(int iSel)
{
if (g_GUIEditor)
g_GUIEditor->SetSelectToolBar(iSel, false);
}
void CGUIEditorView::SetSelectToolBar(int iSel, bool bFlag)
{
m_iSelToolbar = iSel;
if (!bFlag)
return;
enuSetSelectToolBar(iSel);
}
void CGUIEditorView::OnInitialUpdate()
{
CView::OnInitialUpdate();
g_GUIEditor = this;
// Create Project
m_pProject = enuCreateProject();
// Editor Toolbar status callback function set.
enuSetCallBackSelectToolBar(SelectToolBarCallBack);
.
.
.
.
}
메뉴 연결 수행만으로 그래픽의 기초객체를 추가, 제거, 편집할 수 있는 응용 프로그램이 개발되었습니다.
마우스 휠을 이용한 스케일 조정, 회전, 사이즈 조정이 가능합니다.
enuSpace SDK를 이용하면 그래픽 저작기 뿐만 아니라 그래픽 컴포넌트로서 디테일하게 제어하지 못한 그래픽 제어 기능을 제공합니다.
다음 강좌 제2강에서는 생성된 객체의 속성을 연결하기 위한 속성바 생성 및 속성변경시 객체의 속성 변경 이벤트에 대하여 설명 드리도록 하겠습니다.