enuSpace profession 2016 - Sample Project
enuSapce(엔유스페이스) professional 2016을 이용한 Sample 입니다.
첨부 파일 다운로드
enuSpace_sample.zipSample Project 실행 영상
enuSpace(엔유스페이스) Runtime을 이용한 기동하면.
enuSpace Sample Project 설명.
1. 상단 로고 이미지 속성 변경(visibility)을 이용한 동적 효과 적용하기.
상단 로고를 특정 시간에 맞추어 변경하기 위한 스크립트를 삽입합니다.
각 개별 이미지 로고 6개를 불러옵니다.
각 객체의 이벤트 함수 ontaskview() 함수에 아래와 같이 스크립트를 작성합니다.
g_fTimer는 전역변수로 선언하고, 픽쳐단의 ontask()함수에 0.1단위로 증분수행 스크립트 추가.
function ontaskview() if (math.floor(g_fTimer) % 6 == 5) then visibility = true else visibility = false end end |
각 객체는 시간에 따라서 자신이 visibility 속성을 변경함으로서, 다이나믹한 그래픽 효과를 표현합니다.
2. 마우스 오버, 아웃, 다운 이벤트 기능
Main feature 항목의 글에 마우스 오버시 색상 변경과 다운 이벤트에 따라서 화면 페이지 변경을 수행합니다.
선택한 텍스트 객체에 아래와 같이 스크립트를 추가합니다.
택스트의 색상값을 변경하는 스크립트와 마우스 다운시 화면 전환을 수행하는 함수를 호출합니다.
function onmouseover() stroke = string.format("rgb(60,170,60)") end function onmouseout() stroke = string.format("rgb(0,0,0)") end function onmousedown() ChangePicture("window", "picture\\simulation.svg") end |
3. 이웃 객체의 속성 핸들링을 통한 Tool Tip 보여지기 기능
ToolTip 객체를 Group 설정을 한 후 Group 객체의 고유한 아이디를 설정합니다. ID_TOOLTIP
텍스트 객체에 마우스 오버시 ToolTip 객체의 Visibility의 속성을 변경하는 스크립트를 추가합니다.
function onmouseover() stroke = string.format("rgb(60,170,60)") ID_TOOLTIP.visibility = true end function onmouseout() stroke = string.format("rgb(0,0,0)") ID_TOOLTIP.visibility = false end function onmousedown() ChangePicture("window", "picture\\graphic_component.svg") end |
텍스트 객체에 마우스 오버 및 아웃시 동적 표현을 수행합니다.
4. 로직 심볼 제작 기능
로직 심볼은 생성하는 방법은 Project Explorer를 이용하여, Library 하위에 Logic 디렉토리의 팝업 메뉴를 이용하여 추가하여 제작합니다.
AND Gate를 생성하기 위한 AND Gate를 그림을 드로잉합니다. Connection Pin 객체를 이용하여 인터페이스 변수를 생성합니다. 생성된 핀객체의 이름을 변수의 타입과 이름을 입력합니다.
추가된 객체를 이용하여 연산을 수행하기 위한 스크립트를 작성합니다.
ontaskview()이벤트 함수는 동적인 화면 연출에 사용되는 함수이며, ontask()이벤트 함수는 로직 테스크의 연산 내용을 추가합니다.
function ontaskview() if(input1 == false) then ID_INPUT1_LINE.stroke = string.format("rgb(255,0,0)") elseif(input1 == true) then ID_INPUT1_LINE.stroke = string.format("rgb(0,255,0)") end
if(input2 == false) then ID_INPUT2_LINE.stroke = string.format("rgb(255,0,0)") elseif(input2 == true) then ID_INPUT2_LINE.stroke = string.format("rgb(0,255,0)") end if(output == false) then ID_OUTPUT_LINE.stroke = string.format("rgb(255,0,0)") elseif(output == true) then ID_OUTPUT_LINE.stroke = string.format("rgb(0,255,0)") end end function ontask() if(input1 == true and input2 == true) then output = true else output = false end end |
사용자 정의 logic 심볼을 제작후, Picture단에서 Transfer Line을 이용하여 시뮬레이션 알고리즘을 구현합니다.
5. logic simulation 기능.
아래 그림과 같이 simulation 페이지를 구성합니다.
기 제작된 로직 심볼 (Logic Symbol)을 이용하여 화면에 드로잉을 수행합니다. 각 logic 심볼간에는 Transfer line을 이용하여 연결을 수행합니다.
실제 동작시에는 연결된 객체간에는 연산 결과를 전달합니다. 로직 객체를 더블클릭하여 로직의 변수값을 변경하여 시뮬레이션을 수행합니다.
6. 기초객체 및 path 객체를 이용하여 화면 드로잉 기능.
enuSpace pro 2016은 SVG(Scalable Vector Graphics) 포맷과 lua script language를 이용합니다.
enuSpace 편집기를 이용하여 다양한 객체를 생성하여 적용합니다.
7. 다이나믹 HMI 심볼, Zoom Control을 이용한 화면 네비게이션 기능.
다이나믹 Zoom Control은 HMI Symbol로 제작되어 동작을 수행합니다. 다양한 컴포넌트를 사용자가 제작하거나 공유하여 사용할 수 있습니다.
샘플의 ZoomControl은 마우스 다운시 스크립트가 동작을 수행하여 자신의 패널 사이즈 맞추어 Zoom 기능을 제공합니다.
Zoom 기능을 위한 ZoomControl 라이브러리 객체의 멤버변수 속성을 지정합니다.
화면 Navigation을 위하여 Arrow 객체의 마우스 다운스 ZoomControl의 마우스 다운 이벤트를 호출하여 이동하고자 하는 ZoomControl를 호출합니다.
function onmousedown() ID_PANEL1.onmousedown() end |
8. enuSpace SDK를 이용한 응용 프로그램 개발
enuSpace SDK는 C++ 응용 프로그램에 라이브러리와 해더만을 추가함으로서 손쉽게 탑재가 가능합니다.
* enuSpace SDK의 API를 이용하여 enuSpace pro 2016 편집기와 유사한 형태의 응용 프로그램을 개발할 수 있습니다.
'enuSpace Reference > enuSpace Sample' 카테고리의 다른 글
| Using enuSpace develope working video (demo) (0) | 2016.01.04 |
|---|
