enuSpace

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 그래픽 저작기 텍스트 객체(Text Object - SVG)

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

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

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

3. “Text” 버튼을 클릭하고 선택한 Picture에서 원하는 위치에 마우스를 클릭하면 “Input the Text”라는 초기 텍스트를 가진 Text Object를 생성한다.

4. “Input the Text” 영역을 마우스로 클릭하면 “Input the Text”는 사라지고 커서가 표시되고 Text를 입력한다.

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

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

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

enuSpace professional 2016 기준

enuSpace 그래픽 저작기 사각형 객체(Rectangle Object - SVG)

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

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

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

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

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

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

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

enuSpace professional 2016 기준

enuSpace 그래픽 저작기 타원 객체(Ellipse Object - SVG)

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

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

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

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

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

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

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