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강에서는 생성된 객체의 속성을 연결하기 위한 속성바 생성 및 속성변경시 객체의 속성 변경 이벤트에 대하여 설명 드리도록 하겠습니다. 







enuSpace professional 2016 기준

enuSpace 그래픽 저작기 이미지 객체(Image Object - SVG)



그래픽 편집기에서 Image Object 생성 방법은 아래와 같다.


1. Image Object를 생성할 Picture를 선택한다.

2. 그래픽 편집기 상단의 메뉴에서 “Image” 버튼을 클릭한다.

3. “Image” 버튼을 클릭하면 그래픽 편집기 화면 중앙에 다이얼로그 화면이 팝업 되어 나타나며, 이 다이얼로그 화면에서 원하는 이미지가 있는 위치로 이동하여 이미지를 선택하고 “열기”을 클릭한다.

4. “열기” 버튼을 클릭하면, Image 파일을 프로젝트가 위치한 폴더의 Resource 폴더로 해당 이미지를 복사하고 이를 Picture 화면으로 불러와 Image Object를 생성한다.

5. 생성된 Image Object는 그래픽 편집기 오른쪽에 위치한 “Property Window” 에서 설정한다.


아래 그림은 Image Object 생성 및 속성 설정 방법을 나타낸다.




아래 표는 Image Object의 Property 항목 및 기능에 대한 설명을 나타낸다.



분류

항목

기능

Property

id

고유 식별자 설정

visibility

화면 표시 여부 설정

lock

편집 모드 시 선택 여부 설정

Pen

stoke

외곽선 색상 설정

stoke-opacity

외곽선 투명도 설정

불투명 : 1.0 투명 : 0.0

stoke-width

외곽선 두께 설정

stoke-linecap

외곽선 끝 모양 설정

stoke-linejoin

외곽선의 꼭지점 모양 설정

stoke-dasharray

외곽선 패턴 설정

패턴 입력의 구분자는 ‘ , ’이고 첫 패턴은 실선 두 번째는 공백의 순으로 반복

Layout

x

객체 그리는 x 좌표 설정

y

객체의 그리는 y 좌표 설정

width

넓이 값 설정

height

높이 값 설정

href

이미지 링크 주소 설정

Transform

translate-x

원점으로부터 이동한 거리 X 좌표 설정

translate-y

원점으로부터 이동한 거리 Y 좌표 설정

rotate

회전 값 설정

scale-x

크기 변경 X 좌표 설정

scale-y

크기 변경 Y 좌표 설정

center-x

센터 포인터의 X 좌표 설정

center-y

센터 포인터의 Y 좌표 설정

Style & Class

style

외부 스타일 정의

class

내부 스타일 정의



+ Recent posts