enuSpace professional 2016 기준

enuSpace 그래픽 저작기 심볼 제작 기능 (HMI, Logic Library)



HMI 및 Logic 파일을 생성한 후 파일에 Symbol을 정의하여 Picture에서 사용할 수 있으며, 각 Symbol은 사용자가 원하는 이벤트 및 기능 정의를 이용하여 Picture에서 사용할 수 있다. 


HMI 심볼 편집


HMI Symbol은 “그래픽 라이브러리 객체” 라고 불리며 HMI Symbol 생성하는 방법은 아래와 같다. 

1. 생성된 HMI 파일을 선택한 후 마우스 우클릭을 한다.

2. 우클릭 후 나타나는 하위 메뉴 중 “Add Symbol” 항목을 클릭한다.

3. “Add Symbol” 항목을 클릭 하면 화면 중앙에 팝업 다이얼로그가 나타나며, 다이얼로그에 생성할 Symbol 이름을 입력하고 “New” 버튼을 클릭한다.

4. “New” 버튼을 클릭하면, HMI Symbol을 정의할 화면이 나타나며, 선택한 HMI 파일 하위에 생성한 Symbol이 위치해 있다.

아래 그림은 HMI Symbol 생성에 대해 나타낸 것이다.





HMI Symbol이 생성되면 화면에 Symbol을 생성하고 Symbol의 기능 및 이벤트를 정의할 수 있다. HMI Symbol 편집 방법은 아래와 같다.


1. Symbol 생성을 위한 Object를 생성한 후 Object를 선택한다.

2. Object를 선택한 후 편집기 오른쪽에 위치한 속성 창에서 Event Window를 선택한다.

3. Event Window 선택한 후 Event Window를 구성하는 이벤트 함수 중 사용자가 원하는 이벤트 함수에서 Combo Box를 클릭하면 “Add” 라는 메뉴가 나타나며 이를 클릭한다. 

4. “Add” 메뉴를 클릭하면 그래픽 편집기 화면 중앙에 “Script Editor” 팝업 다이얼로그 화면이 나타나며, 여기에 생성하고자 함수 기능을 정의한다.

5. 작성이 완료되면 “Compile” 버튼을 클릭하여 기능 정의가 에러 없이 정상적으로 정의 되었는지 검증할 수 있으며, 결과는 “Script Editor” 화면 하단의 “Output”에서 확인할 수 있다. 

6. “Compile” 버튼을 클릭하여 기능 정의가 완료된 함수는 “Accept” 버튼을 클릭하여 함수를 적용한다.

7. 기능 정의 및 검증이 완료된 함수를 실행해서 결과를 확인해 보기 원할 때는  “Execute” 버튼을 클릭하여 확인해 볼 수 있다. HMI 파일 하위에 생성한 Symbol이 위치해 있다.

아래 그림은 HMI Symbol 편집에 대해 나타낸 것이다.






HMI Symbol 편집이 완료되면, Picture에서 HMI Symbol을 사용할 수 있으며, 사용 방법은 아래와 같다. 


1. 편집이 완료된 HMI Symbol을 사용할 Picture를 선택한다.

2. Picture를 선택한 후 편집기 우측에 있는 속성 창 하단에서 “HMI” 탭 메뉴를 선택한다.

3. “HMI” 탭 메뉴를 선택하며, 생성한 HMI Symbol이 보이며, 이 Symbol을 마우스 드래그를 통해 Picture 화면으로 옮겨 사용할 수 있다.


아래 그림은 HMI Symbol 사용 방법에 대해 나타낸 것이다.





Logic 심볼 편집


HMI Symbol을 생성하는 방법은 아래와 같다. 


1. 생성된 Logic 파일을 선택한 후 마우스 우클릭을 한다.

2. 우클릭 후 나타나는 하위 메뉴 중 “Add Node” 항목을 클릭한다.

3. “Add Node” 항목을 클릭 하면 화면 중앙에 팝업 다이얼로그가 나타나며, 다이얼로그에 생성할 Node 이름을 입력하고 “New” 버튼을 클릭한다.

4. “New” 버튼을 클릭하면, Logic Symbol을 정의할 화면이 나타나며, 선택한 Logic 파일 하위에 생성한 Symbol이 위치해 있다.


아래 그림은 Logic Symbol 생성에 대해 나타낸 것이다.




Logic Symbol이 생성되면 Symbol 간의 연결점인 Connection Pin을 추가할 수 있다. Connection Pin은 하나의 Logic Symbol에서 처리된 결과를 다른 Logic Symbol에 전달할 때 사용되며, 이 Connection Pin은 하나의 Symbol에 여러 개 생성하여 사용할 수 있다. Logic Symbol에서 Connection Pin을 생성하는 방법은 아래와 같다.


1. 생성된 Logic 파일을 선택한 후 마우스 우클릭을 한다.

2. 우클릭 후 나타나는 하위 메뉴 중 “Add Connection Pin” 항목을 클릭한다. 다른 방법으로는 그래픽 편집기 중앙에 위치한 “Connection Pin” 버튼을 클릭함으로 서 “Connection Pin” 을 생성할 수 있다.

3. “Add Connection Pin” 클릭한 후 미리 생성한 Object의 원하는 위치에 클릭하면 “Connection Pin”이 생성된다.


아래 그림은 Logic Symbol의 Connection Pin 생성 방법에 대해 나타낸 것이다.






Logic Symbol이 생성되면 화면에 Symbol을 생성하고 Symbol의 기능 및 이벤트를 정의할 수 있다. Logic Symbol 편집 방법은 아래와 같다.


1. Symbol 생성을 위한 Object를 생성한 후 Object를 선택한다.

2. Object를 선택한 후 편집기 오른쪽에 위치한 속성 창에서 Event Window를 선택한다.

3. Event Window 선택한 후 Event Window를 구성하는 이벤트 함수 중 사용자가 원하는 이벤트 함수에서 Combo Box를 클릭하면 “Add” 라는 메뉴가 나타나며 이를 클릭한다. 

4. “Add” 메뉴를 클릭하면 그래픽 편집기 화면 중앙에 “Script Editor” 팝업 다이얼로그 화면이 나타나며, 여기에 생성하고자 함수 기능을 정의한다.

5. 작성이 완료되면 “Compile” 버튼을 클릭하여 기능 정의가 에러 없이 정상적으로 정의 되었는지 검증할 수 있으며, 결과는 “Script Editor” 화면 하단의 “Output”에서 확인할 수 있다. 

6. “Compile” 버튼을 클릭하여 기능 정의가 완료된 함수는 “Accept” 버튼을 클릭하여 함수를 적용한다.

7. 기능 정의 및 검증이 완료된 함수를 실행해서 결과를 확인해 보기 원할 때는  “Execute” 버튼을 클릭하여 확인해 볼 수 있다. Logic 파일 하위에 생성한 Symbol이 위치해 있다.


아래 그림은 Logic Symbol 편집에 대해 나타낸 것이다.




Logic Symbol 편집이 완료되면, Picture에서 Logic Symbol을 사용할 수 있으며, 사용 방법은 아래와 같다. 


1. 편집이 완료된 Logic Symbol을 사용할 Picture를 선택한다.

2. Picture를 선택한 후 편집기 우측에 있는 속성 창 하단에서 “Logic” 탭 메뉴를 선택한다.

3. “Logic” 탭 메뉴를 선택하며, 생성한 Logic Symbol이 보이며, 이 Symbol을 마우스 드래그를 통해 Picture 화면으로 옮겨 사용할 수 있다.

아래 그림은 Logic Symbol 사용 방법에 대해 나타낸 것이다.





Logic Symbol 객체가 추가된 상태에서는 상단 중앙에 “Transfer” 버튼이 활성화 되고 객체의 입출력 선을 연결할 수 있다.  “Transfer” 의 사용 방법은 아래와 같다. 


1. 사용할 Logic Symbol을 마우스 드래그를 통해 Picture에 위치 시킨다.

2. 그래픽 편집기 화면 상단 중앙에 위치한 “Transfer” 버튼을 클릭하고, 각각의 Logic Symbol에 위치한 “Connection Pin”에 마우스 클릭을 통해 “Transfer” 선을 연결한다.


아래 그림은 Logic Symbol에서 Transfer의 사용 방법을 나타낸 것이다.





선은 출력에서 입력으로 해야 하며, 거꾸로 하면 안 된다. 객체의 입출력을 Transfer로 연결할 때 변수의 타입이 맞지 않으면 에러 메시지가 출력된다. 연결된 Transfer 객체를 선택하면 우측 속성 창에 속성이 표시되며, 아래 그림과 같이 from-id와 to-id가 입력한 시작 객체 ID와 끝 객체 ID가 표시되고, 각 객체의 입출력 변수 명으로 “from-id” 과 “to-id”가 표시된다.






enuSpace professional 2016 기준

enuSpace 그래픽 저작기 확대 축소 기능(Zoom In/Out)



그래픽 편집기에서 제공하는 Zoom 기능은 프로그램 오른쪽 하단에 위치해 있으며, 아래 그림은 그래픽 편집기에서 제공하는 Zoom 기능에 대해 나타낸 것이다. 



그래픽 편집기의 Zoom 기능은 “-“, “+” 버튼을 클릭하여 Zoom Out, Zoom In을 할 수 있으며, 이들 버튼 사이에 슬라이드 바를 Drag하여 Zoom Out, Zoom In을 할 수 있다. Zoom In/Out 시 원 상태로 되돌리기를 원하면 “100%” 버튼을 클릭하면 원래 사이즈로 돌아온다.



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 그래픽 저작기 그룹/언그룹 기능(Group/Ungroup)



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




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






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


분류

항목

기능

Property

id

고유 식별자 설정

visibility

화면 표시 여부 설정

lock

편집 모드 시 선택 여부 설정

Brush

fill

객체의 면 색상 채우기 설정

fill-opacity

면 색상 투명도 설정

Pen

stoke

외곽선 색상 설정

stoke-opacity

외곽선 투명도 설정

불투명 : 1.0 투명 : 0.0

stoke-width

외곽선 두께 설정

stoke-linecap

외곽선 끝 모양 설정

stoke-linejoin

외곽선의 꼭지점 모양 설정

stoke-dasharray

외곽선 패턴 설정

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

Layout

x

객체 그리는 x 좌표 설정

y

객체의 그리는 y 좌표 설정

width

넓이 값 설정

height

높이 값 설정

Transform

translate-x

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

translate-y

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

rotate

회전 값 설정

scale-x

크기 변경 X 좌표 설정

scale-y

크기 변경 Y 좌표 설정

center-x

센터 포인터의 X 설정

center-y

센터 포인터의 Y 설정

Style & Class

Style

외부 스타일 정의

class

내부 스타일 정의

Edit Box

font-family

글자 모양 설정

font-size

글자 크기 설정

font-style

글자 스타일 설정 (normal, italic, oblique)

font-weight

글자 가중치 설정 (normal, bold, bolder )

text

글자 삽입 내용 설정

text-color

글자 색 설정

disabled

글자 입력 제한 여부 설정

multiline

두 줄 이상 입력 여부 설정

password

패스워드 형식으로 표시 설정

read-only

읽기 전용 설정

want-return

Enter 입력 설정 여부

text-align

글자 좌우 정렬 설정

border

Edit Box 테두리 설정

number

숫자만 입력 설정

lowercase

소문자 입력 표시 설정

uppercase

대문자 입력 표시 설정

static-edge

그림자 표시 여부 설정

auto-scroll

자동 스크롤 설정

horizontal-scroll

가로 스크롤 설정

vertical-scroll

세로 스크롤 설정


+ Recent posts