enuSpace

enuSpace professional 2016 기준

enuSpace 그래픽 저작기 검색 기능(Find)

Find 기능은 그래픽 편집기에서 제공하는 기능 중의 하나로 현재 Picture 또는 프로젝트 전체에서 객체를 찾을 수 있도록 지원하는 기능이다. 

아래 그림은 그래픽 편집기에서 Find 기능을 사용하는 방법을 나타낸 것이다.

Find 기능은 아래와 같이 사용한다.

1. 각각의 객체에 ID를 설정한다.

2. 편집기 우측 상단에 “Find” 버튼을 클릭하면 편집기 화면 중앙에 Find를 위한 다이얼로그 창이 나타난다.

3. Find를 위한 다이얼로그 창에 찾고자 하는 객체 ID를 입력한다.

4. 검색하고자 하는 객체의 검색 범위를 선택한다. 범위는 Picture 또는 프로젝트 전체와 “Match case” (선택하여 대/소문자를 구분한 찾기 범위 설정) 및 “Find whole words only” (문자의 길이 및 전체 문자가 동일한 찾기 범위 설정) 와 같은 범위를 지원한다. 

5. 다이얼 로그 창 중앙에 위치한  “Search” 버튼을 클릭한다.

6. 검색 결과는 다이얼로그 창 하단의 리스트 창에서 보여지며, 검색 결과를 클릭하면 편집기에 있는 객체에서 검색한 객체가 선택된 상태로 표시된다.

enuSpace professional 2016 기준

enuSpace 그래픽 저작기 윈도우 (Window)

통합 그래픽 편집기에서는 객체의 속성 정보 및 속성 값 설정을 위한 Properties Window와 객체의 이벤트 정의 및 함수 정의를 위한 Event Window, 객체에 사용되는 전역 변수 및 변수 설정을 위한 Variable Window를 제공한다. 각 Window의 선택 방법은 아래와 같다. 

1. 그래픽 편집기 우측에 위치한 속성 창에서 상단에 위치한 콤보 박스를 이용해 선택할 수 있다.

2. 콤보 박스 아래에 위치한 아이콘을 클릭하여 각각의 Window를 선택할 수 있다.

아래 그림은 그래픽 편집기에서 Window를 선택하는 방법에 대해 나타낸 것이다.

Properties Window

Properties Window는 Picture 또는 HMI, Logic Symbol 등 객체에 대한 속성 정보 및 각 속성 별 설정 값을 변경할 수 있는 기능을 제공하는 Window이다. 선택 객체 속성은 객체를 클릭하면 속성 창에 선택 객체에 대한 속성이 나타나며 직접 입력을 통해 설정할 수 있다. 아래 그림은 그래픽 편집기에서 Properties Window를 선택하는 방법에 대해 나타낸 것이다.

Event Window

Event Window는 Picture 를 구성하는 객체 및 Picture 자체에 대한 이벤트 함수를 정의할 때 사용되며, Picture 전체의 이벤트 함수로서 Mouse Click 이벤트와 Window 이벤트 함수를 제공한다. Shape Entered, Shape Left는 객체 이벤트 기능으로, Drag and Drop은 편집 이벤트 기능으로 전체 Picture의 Runtime 이벤트 함수에서 처리하지 않는다. 스크립트를 통한 Picture의 편집 기능은 Create(), Clear(), zoom() 을 구현한다. align(), copy(), cut(), paste(), freeze(), name(), fullName(), lower(), raise(), undo(), redo(), move(), setFocus(), toBack(), toFront(), gorup(), ungroup(), pan(), title() 의 기능은 runtime 중에 사용하지 않는 기능으로 component API(Application Programming Interface)로 제공된다. 아래 그림은 그래픽 편집기에서 Event Window를 선택하는 방법을 나타낸 것이다.

Variable Window

Variable Window는 객체 및 Picture, Global에서 사용되는 Variable의 데이터 정보 및 정의 및 수정 등 프로젝트에서 사용되는 Variable을 관리하는 Window이다. 

아래 그림은 Variable Window를 그래픽 편집기에서 선택하는 방법을 나타낸 것이다.

enuSpace professional 2016 기준

enuSpace 그래픽 저작기 회전 기능(Rotation)

객체의 Rotation은 기본적으로 회전할 객체를 선택 후 객체 상단의 회전 트래커를 이용하여 Rotation 한다. 회전 트래커를 마우로 클릭 후 드래그하여 회전 시키면 객체는 사용자가 회전 시킨 만큼 Rotation 한다. 또한 센터 포인터는 객체 회전 시 회전 중심점 역할을 수행하고 센터 포인터의 위치를 중심으로 회전을 한다. 이 센터 포인터는 사용자가 임의로 위치를 변경할 수 있으며, 위치 변경 방법은 마우스 클릭 후 드래그하여 이동 시킬 수 있다. 아래 그림은 객체 Rotation 방법에 대해 나타낸 것이다.

Rotate Left 90

“Rotate Left 90” 기능은 객체를 정확히 왼쪽으로 90도 회전 시키고자 할 때 사용하며, 사용 방법은 아래와 같다.

1. 회전하고자 하는 객체들을 선택 후 그래픽 편집기 상단 중앙에 위치한 “Arrange” 버튼을 클릭한다. 

2. 하위 메뉴로 나타나는 메뉴 중 “Rotate” 항목을 클릭하면 하위로 다시 메뉴항목이 나타나고 이 중 “Rotate Left 90” 항목을 클릭한다.

아래 그림은 “Rotate Left 90” 기능에 대한 사용 방법을 나타낸 것이다.

Flip Vertical

“Flip Vertical” 기능은 객체를 세로 방향을 기준으로 수직 전환 시키고자 할 때 사용하며, 사용 방법은 아래와 같다.

1. 정렬하고자 하는 객체들을 선택 후 그래픽 편집기 상단 중앙에 위치한 “Arrange” 버튼을 클릭한다. 

2. 하위 메뉴로 나타나는 메뉴 중 “Rotate” 항목을 클릭하면 하위로 다시 메뉴항목이 나타나고 이 중 “Flip Vertical” 항목을 클릭한다.

아래 그림은 “Flip Vertical” 기능에 대한 사용 방법을 나타낸 것이다.

Flip Horizontal

“Flip Horizontal” 기능은 객체를 가로 방향을 기준으로 수평 전환 시키고자 할 때 사용하며, 사용 방법은 아래와 같다.

1. 정렬하고자 하는 객체들을 선택 후 그래픽 편집기 상단 중앙에 위치한 “Arrange” 버튼을 클릭한다. 

2. 하위 메뉴로 나타나는 메뉴 중 “Rotate” 항목을 클릭하면 하위로 다시 메뉴항목이 나타나고 이 중 “Flip Horizontal” 항목을 클릭한다.

아래 그림은 “Flip Horizontal” 기능에 대한 사용 방법을 나타낸 것이다.

enuSpace professional 2016 기준

enuSpace 그래픽 저작기 그룹/언그룹 기능(Group/Ungroup)

그래픽 편집기는 객체들 간의 Group과 Ungroup 기능을 제공하며, Group은 Group으로 표현할 객체들을 선택하고, 그래픽 편집기 상단 가운데에 위치한 “Arrange” 버튼을 클릭한다. 하위 메뉴로 나오는 “Group” 버튼을 클릭하면 객체들이 하나의 객체로 Group 되어 표현된다. 아래 그림은 객체의 Group을 사용하는 방법을 나타낸 것이다.

UnGroup은 Group된 객체를 다시 각각의 객체로 나누기 위해 사용하며, Group 객체를 선택하고, 그래픽 편집기 상단 가운데에 위치한 “Arrange” 버튼을 클릭한다. 하위 메뉴로 나오는 “UnGroup” 버튼을 클릭하면 Group 된 객체가 Group 이전의 객체들로 분리되어 표현된다. 아래 그림은 객체의 UnGroup을 사용하는 방법을 나타낸 것이다.

enuSpace professional 2016 기준

enuSpace 그래픽 저작기 정렬 기능(Arrange)

그래픽 편집기는 객체들 간의 정렬 기능을 제공한다.

Bring to Front

Bring to Front는 그래픽 편집기에서 제공하는 정렬 기능 중 하나로 여러 개의 객체가 겹쳐 있을 때 선택한 객체가 객체들 맨 위쪽으로 보여지기 원할 때 사용하는 정렬 기능이다. 

그래픽 편집기에서 Bring to Front의 사용 방법은 아래와 같다.

1. 정렬하고자 하는 객체를 선택 후 그래픽 편집기 상단 중앙에 위치한 “Arrange” 버튼을 클릭한다. 

2. 하위 메뉴로 나타나는 메뉴 중 “Bring to Front” 항목을 클릭한다.

아래 그림은 Bring to Front 기능에 대해 사용 방법을 나타낸 것이다.

Send to Back

Send to Back은 그래픽 편집기에서 제공하는 정렬 기능 중 하나로 여러 개의 객체가 겹쳐 있을 때 선택한 객체가 객체들 맨 뒤쪽으로 보여지기 원할 때 사용하는 정렬 기능이다. 그래픽 편집기에서 Send to Back의 사용 방법은 아래와 같다.

1. 정렬하고자 하는 객체를 선택 후 그래픽 편집기 상단 중앙에 위치한 “Arrange” 버튼을 클릭한다. 

2. 하위 메뉴로 나타나는 메뉴 중 “Send to Back” 항목을 클릭한다.

아래 그림은 Send to Back 기능에 대해 사용 방법을 나타낸 것이다.

Bring Forward

Bring to Forward는 그래픽 편집기에서 제공하는 정렬 기능 중 하나로 여러 개의 객체가 겹쳐 있을 때 선택한 객체가 한 단계 위쪽으로 보여지기 원할 때 사용하는 정렬 기능이다. 그래픽 편집기에서 Bring to Forward의 사용 방법은 아래와 같다.

1. 정렬하고자 하는 객체를 선택 후 그래픽 편집기 상단 중앙에 위치한 “Arrange” 버튼을 클릭한다. 

2. 하위 메뉴로 나타나는 메뉴 중 “Bring to Forward” 항목을 클릭한다.

아래 그림은 Bring to Forward 기능에 대해 사용 방법을 나타낸 것이다.

Bring Backward

Bring Backward 그래픽 편집기에서 제공하는 정렬 기능 중 하나로 여러 개의 객체가 겹쳐 있을 때 선택한 객체가 한 단계 뒤쪽으로 보여지기 원할 때 사용하는 정렬 기능이다. 그래픽 편집기에서 Bring Backward의 사용 방법은 아래와 같다.

1. 정렬하고자 하는 객체를 선택 후 그래픽 편집기 상단 중앙에 위치한 “Arrange” 버튼을 클릭한다. 

2. 하위 메뉴로 나타나는 메뉴 중 “Bring Backward” 항목을 클릭한다.

아래 그림은 Bring Backward 기능에 대해 사용 방법을 나타낸 것이다.

Align Left

Align Left은 그래픽 편집기에서 제공하는 정렬 기능 중 하나로 여러 개의 객체를 왼쪽으로 정렬할 때 사용하는 정렬 기능이다. 그래픽 편집기에서 Align Left의 사용 방법은 아래와 같다.

1. 정렬하고자 하는 객체들을 선택 후 그래픽 편집기 상단 중앙에 위치한 “Arrange” 버튼을 클릭한다. 

2. 하위 메뉴로 나타나는 메뉴 중 “Align” 항목을 클릭하면 하위로 다시 메뉴항목이 나타나고 이 중 “Align Left” 항목을 클릭한다.

아래 그림은 Align Left 기능에 대해 사용 방법을 나타낸 것이다.

Align Center

Align Center는 그래픽 편집기에서 제공하는 정렬 기능 중 하나로 여러 개의 객체를 가운데로 정렬할 때 사용하는 정렬 기능이다. 그래픽 편집기에서 Align Center의 사용 방법은 아래와 같다.

1. 정렬하고자 하는 객체들을 선택 후 그래픽 편집기 상단 중앙에 위치한 “Arrange” 버튼을 클릭한다. 

2. 하위 메뉴로 나타나는 메뉴 중 “Align” 항목을 클릭하면 하위로 다시 메뉴항목이 나타나고 이 중 “Align Center” 항목을 클릭한다.

아래 그림은 Align Center 기능에 대해 사용 방법을 나타낸 것이다.

Align Right

Align Right는 그래픽 편집기에서 제공하는 정렬 기능 중 하나로 여러 개의 객체를 오른쪽으로 정렬할 때 사용하는 정렬 기능이다. 그래픽 편집기에서 Align Right의 사용 방법은 아래와 같다.

1. 정렬하고자 하는 객체들을 선택 후 그래픽 편집기 상단 중앙에 위치한 “Arrange” 버튼을 클릭한다. 

2. 하위 메뉴로 나타나는 메뉴 중 “Align” 항목을 클릭하면 하위로 다시 메뉴항목이 나타나고 이 중 “Align Right” 항목을 클릭한다.

아래 그림은 Align Right 기능에 대해 사용 방법을 나타낸 것이다.

Align Top

Align Top은 그래픽 편집기에서 제공하는 정렬 기능 중 하나로 여러 개의 객체를 가로 기준으로 위쪽으로 정렬할 때 사용하는 정렬 기능이다. 그래픽 편집기에서 Align Top의 사용 방법은 아래와 같다.

1. 정렬하고자 하는 객체들을 선택 후 그래픽 편집기 상단 중앙에 위치한 “Arrange” 버튼을 클릭한다. 

2. 하위 메뉴로 나타나는 메뉴 중 “Align” 항목을 클릭하면 하위로 다시 메뉴항목이 나타나고 이 중 “Align Top” 항목을 클릭한다.

아래 그림은 Align Top 기능에 대해 사용 방법을 나타낸 것이다.

Align Middle

Align Middle은 그래픽 편집기에서 제공하는 정렬 기능 중 하나로 여러 개의 객체를 가로 기준으로 가운데 정렬할 때 사용하는 정렬 기능이다. 그래픽 편집기에서 Align Middle의 사용 방법은 아래와 같다.

1. 정렬하고자 하는 객체들을 선택 후 그래픽 편집기 상단 중앙에 위치한 “Arrange” 버튼을 클릭한다. 

2. 하위 메뉴로 나타나는 메뉴 중 “Align” 항목을 클릭하면 하위로 다시 메뉴항목이 나타나고 이 중 “Align Middle” 항목을 클릭한다.

아래 그림은 Align Middle 기능에 대해 사용 방법을 나타낸 것이다.

Align Bottom

Align Bottom은 그래픽 편집기에서 제공하는 정렬 기능 중 하나로 여러 개의 객체를 가로 기준으로 아래쪽으로 정렬할 때 사용하는 정렬 기능이다. 그래픽 편집기에서 Align Bottom의 사용 방법은 아래와 같다.

1. 정렬하고자 하는 객체들을 선택 후 그래픽 편집기 상단 중앙에 위치한 “Arrange” 버튼을 클릭한다. 

2. 하위 메뉴로 나타나는 메뉴 중 “Align” 항목을 클릭하면 하위로 다시 메뉴항목이 나타나고 이 중 “Align Bottom” 항목을 클릭한다.

아래 그림은 Align Bottom 기능에 대해 사용 방법을 나타낸 것이다.

Distribute Horizontally

Distribute Horizontally은 그래픽 편집기에서 제공하는 정렬 기능 중 하나로 여러 개의 객체가 있을 때 선택한 객체들이 수평으로 공간이 같도록 배치되길 원할 때 사용하는 정렬 기능이다. 그래픽 편집기에서 Distribute Horizontally의 사용 방법은 아래와 같다.

1. 정렬하고자 하는 객체를 선택 후 그래픽 편집기 상단 중앙에 위치한 “Arrange” 버튼을 클릭한다. 

2. 하위 메뉴로 나타나는 메뉴 중 “Align” 항목을 클릭하면 하위로 다시 메뉴항목이 나타나고 이 중 “Distribute Horizontally” 항목을 클릭한다.

아래 그림은 Distribute Horizontally 기능에 대해 사용 방법을 나타낸 것이다.

Distribute Vertically

Distribute Vertically는 그래픽 편집기에서 제공하는 정렬 기능 중 하나로 여러 개의 객체가 있을 때 선택한 객체들이 수직으로 공간이 같도록 배치되길 원할 때 사용하는 정렬 기능이다. 그래픽 편집기에서 Distribute Vertically의 사용 방법은 아래와 같다.

1. 정렬하고자 하는 객체를 선택 후 그래픽 편집기 상단 중앙에 위치한 “Arrange” 버튼을 클릭한다. 

2. 하위 메뉴로 나타나는 메뉴 중 “Align” 항목을 클릭하면 하위로 다시 메뉴항목이 나타나고 이 중 “Distribute Vertically” 항목을 클릭한다.

아래 그림은 Distribute Vertically기능에 대해 사용 방법을 나타낸 것이다.

enuSpace professional 2016 기준

enuSpace 그래픽 저작기 쉐이프 객체(path Object - SVG)

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

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

2. 그래픽 편집기 상단의 메뉴에서 도형 모음이 있는 곳에서 원하는 Shape Object를 클릭한다.

3. Shape Object를 클릭하고 선택한 Picture에서 원하는 위치 및 길이만큼 마우스로 Drag하여 Shape Object를 생성한다.

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

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

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

enuSpace professional 2016 기준

enuSpace 그래픽 저작기 에디트 박스 객체(Edit box Object)

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

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

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

3. “Edit Box” 버튼을 클릭하고 선택한 Picture에서 원하는 위치 및 길이만큼 마우스로 드래그하여 Edit Box Object를 생성한다.

4. “Input the Text”라는 초기 텍스트를 가진 Edit Box Object를 생성되면 “Input the Text” 영역을 마우스로 클릭하면 “Input the Text”는 사라지고 커서가 표시되고 Text를 입력한다.

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

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

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

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 항목 및 기능에 대한 설명을 나타낸다.

enuSpace professional 2016 기준

enuSpace 그래픽 저작기 라인 객체(Line Object)

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

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

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

3. “Line” 버튼을 클릭하고 선택한 Picture에서 원하는 위치 및 길이만큼 마우스로 Drag하여 Line Object를 생성한다.

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

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

Line Object Property List

enuSpace professional 2016 그래픽 편집기와 루아 스크립트

그래픽 편집기는 그래픽에 대한 속성들과 사용자 정의 전역 및 지역 변수 들을 가지고 있으며 현재의 값을 Lua Script에 전달하고 Lua Script에서 함수의 실행에 의해 바뀐 값을 그래픽 편집기의 그래픽 속성이나 전역 또는 지역변수에 전달하여 값을 변경시킨다. 모든 값을 변경시키는 행위는 프로그램이나 사용자의 마우스 이벤트 등에 의해 발생되며 현재 값의 전달 및 변경된 값의 반환이 함수의 실행 전과 실행 후에 각각 발생한다. 아래 그림은 그래픽 편집기에서 객체의 사용자 정의 함수인 GetColor()에 대한 예시를 나타낸 것이다.

아래 그림은 그래픽 편집기에서 객체의 사용자 정의 함수인 onmousedown()에 대한 예시를 나타낸 것이다.

Lua Script 내부에서만 실행되는 변수 및 함수는 별도로 User Interface가 지원되며Lua Script내부에서는 이벤트 또는 사용자 함수에 의해서 사용 가능하다.

그래픽 편집기에서 Lua Script를 사용하는 방법은 아래와 같다.

1. Lua Script 편집 창을 연다. 

2. Lua Script 편집 다이얼로크 창에서 편집된 내용을 Lua Script에 등록한다.

3. Lua Script에 등록된 변수의 값을 확인하거나 새로운 값을 할당하는 스크립트를 작성한다.

4. 3번 항목에서 작성된 스크립트를 Lua Script에서 실행한다.

5. COLOR 테이블을 Lua Script에 작성하는 스크립트.

6. COLOR 테이블에서 Red 필드.

7. 4번 항목에서 실행한 결과 값의 표현.

그래픽 편집기에서는 전역변수 및 각 객체의 속성 등 다양한 구조적 변수를 가지고 있으며 이러한 구조적 변수를 Lua State에 그대로 가지지 않는다. 모든 값의 변경은 Lua Script에 등록된 함수의 실행에 의해 이루어 지며, 사용되는 변수와 함수 스크립트는 Lua Script에 테이블을 생성하여 변수 및 함수로 등록한다. 이벤트 및 프로그램에 의해 실행되는 함수는 각 함수에 해당하는 Lua Script 테이블과 1:1 대응 관계에 있으며 변수의 인터페이스나 반환 값이 없는 경우 그래픽 편집기 함수는 Lua State에 등록되지 않는다. 아래 그림은 그래픽 편집기의 데이터 구조를 나타낸 것이다.

아래 그림은 Lua Script데이터 구조에 대해 나타낸 것이다.