enuSpace

enuSpace professional 2016 기준

enuSpace HMI 편집기를 이용한 동적 디스플레이 기능

Dynamic Script

속성 변경

속성의 변수 타입이 boolean인 속성은 스크립트 내에서는 true, false 값을 할당함으로써 바꿀 수 있으며, wchar 인 속성은 string의 보조 함수인 string.format 함수를 이용해서 바꿀 수 있다. wchar 속성의 변수를 string.format 함수를 사용하지 않고 직접 할당할 경우 처음에 할당되었던 문자의 크기보다 새로이 할당된 문자의 크기가 클 경우 메모리 침범이 발생할 수 있으며, 심해질 경우 프로그램이 정지할 수도 있다. 속성 변수의 이름은 -가 포함될 수 없으며 '-'는 '_'로 대치(속성 : fill-opacity, 변수명 : fill_opacity)하여 변수를 설정하였으므로 반드시 '-'는 '_'로 바꾸어 사용해야 한다.

boolean : visibility, lock, disabled, multiline, password, read-only, want-return, border, number, lowercase, uppercase, static-edge, auto-scroll, horizontal-scroll, vertical-scroll 등.

wchar : id, fill, stroke-dash, stroke, points, d, text, font-family 등.

int : stroke-width, stroke-linejoin, stroke-linecap, text-anchor, font-style, font-weight 등.

float, double : fill-opacity, stroke-opacity, x, y, rx, ry, width, height, translate-x, translate-y, rotate, scale-x, scale-y, center-x, center-y, cx, cy, r, rx, ry, font-size 등. 

색상변경 : 문자열 속성

각 객체의 색상은 텍스트 문자열로 "rgb(0,0,0)" , "black" 또는 "#000000" 처럼 스크립트 내에서 입력함으로써 변경할 수 있다.

onmousedown 이벤트에 의해 index의 값을 바꾸고 index 값에 따라 색상 값을 반환해주는 GetColor함수에서 색상 값을 받아서 사각영역을 채우는 색상 fill값을 바꾼다.

투명도 변경 : float 속성

각 객체의 색상은 0~1 사이의 투명도를 가지며 실수이다. 0은 완전 투명 1은 완전 불투명이다. 

onmousedown 이벤트에 의해 index의 값을 바꾸고 index 값에 따라 투명도 값을 반환해주는 GetOpacity함수에서 투명도 값을 받아서 사각영역의 투명도를 설정하는 fill-opacity 값을 바꾼다.

visibility 변경 : boolean 속성

각 객체의 속성 중 visibility는 객체가 보여질 것인지 보여지지 않을 것인지에 대해 결정하며 조건에 따라 객체가 보여질지 안 보여질지에 대해 스크립트 내에서 설정할 수 있는데 visibility의 변수 타입은 boolean이므로 스크립트 내에서 true 혹은 false로 할당하여 바꿀 수 있다.

다음 그림 예시는 세 개의 문자열 "빨강", "녹색", "파랑"의 visibility속성을 사각형의 마우스 다운이벤트가 한번 발생할 때마다 바뀌는 예시이며, 각각의 문자열은 사각형에 이웃한 객체의 고유한 id를 가지고 id.visibility를 바꾸는 스크립트를 작성한 예제이다.

다음 그림은 visibility를 바꾸는 이벤트 함수가 차례로 실행되어 표시된 상태이고 ○1은 편집 창에서의 표시를 나타내고 ○2는 실행창에서의 표시를 나타낸다. 편집 창에서는 편집을 위해 객체가 완전히 사라지지 않고 hidden 상태를 나타내는 회색 박스를 표시한다. 

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 그래픽 저작기 라인 객체(Polyine Object - SVG)

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

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

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

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

4. 생성을 완료하려면 “ESC” 버튼을 클릭하여 완료할 수 있다.

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

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

Polyline Object Property List

enuSpace professional 2016 기준

enuSpace 편집기 단축 명령어 기능

그래픽 편집기에서는 객체 편집 시 사용되는 Common Edit Command를 제공하며, 종류는 Copy, Cut, Paste, Delete, Select를 제공한다.

Copy는 Paste를 하기 전에 선택한 객체를 메모리에 복사하여 놓는다. 키보드 단축키로는 “Ctrl + C”를 눌러 할 수 있고 편집기 화면에서는 아래 그림의 3번 항목을 클릭하여 실행할 수 있다. 객체의 선택은 선택하고자 하는 객체를 영역을 드래그 함으로써 영역 내에 있는 모든 객체를 선택하는 방법과 원하는 객체를 Shift+클릭을 함으로써 추가 할 수 있다.

Cut은 Paste를 하기 전에 선택한 객체를 메모리에 복사하여 놓고 원래의 선택된 객체 또는 객체들을 삭제한다. 키보드 단축키는 “Ctrl + X”를 눌러 할 수 있으며, 편집기 화면에서는 아래 그림의 1번 항목을 클릭하여 실행할 수 있다. 객체의 선택은 선택하고자 하는 객체를 영역을 드래그 함으로써 영역 내에 있는 모든 객체를 선택하는 방법과 원하는 객체를 Shift+클릭을 함으로써 추가 할 수 있다.

Paste는 Copy 또는 Cut를 사용하여 메모리에 저장된 객체를 새로운 객체로 생성하는 것이다. 키보드 단축키는 “Ctrl + V”를 눌러 할 수 있고 편집기 화면에서는 아래 그림 1번 항목을 클릭하여 실행할 수 있다.

Delete는 선택한 객체를 삭제하며 키보드 단축키는 “Delete” 버튼을 눌러 실행할 수 있고, 편집기 화면에서는 4번 항목으로 실행할 수 있다.

Select는 객체를 선택할 때 사용되며 편집기에서는 단일 선택, 전체 선택 및 선택해제 기능을 지원한다. 전체선택은 Picture에 있는 모든 객체를 선택하며, 키보드 단축키는 “Ctrl + A”를 눌러 할 수 있다. 선택해제는 Picture에서 객체가 없는 빈 공간을 클릭함으로써 해제 할 수 있다.

아래 그림은 편집기에서 제공하는 Common Edit Command의 위치를 나타낸다.