enuSpace

LOGIC 프로그램밍, HMI라이브러리 인터페이스 방법

본 강좌에서는 로직 라이브러리를 이용하여 로직 프로그래밍을 수행하고, HMI 화면구성을 통하여 사용자 인터페이스 모니터링 및 제어화면을 구성하여 봅니다.

New Project

새로운 프로젝트를 생성하기 위해서 Home->New->New Project 메뉴를 선택합니다.

New Project (popup window)윈도우가 나타나면, 솔루션 이름과 솔루션을 저장할 디렉토리를 설정후 OK버튼을 클릭합니다.

Import Library

기존 제작한 Logic 및 hmi 라이브러리르 가져오기 위해서, Project Explorer의 Library의 팝업메뉴 Add Existing Hmi Library 메뉴를 이용합니다.

예시로 enuSpace for mars 설치시 포함된 presentation 디렉토리의 logic 라이브러리 파일을 선택하여 가져오기를 수행합니다. 기존 라이브러리는 유지하고, 본 프로젝트의 Library 디렉토리에 파일을 복사수행 후 로드를 수행합니다.

Properties 윈도우에서 상단의 콤보박스를 이용하여 해당사하는 라이브러리의 썸네일 이미지를 확인할 수 있습니다.  

불러온 라이브러리를 편집하고자 하는 경우에는, Project Explorer의 Library에서 HMI 또는 Logic의 파일의 하위의 심볼 아이템을 선택하여 Graphic 편집알 통하여 심볼을 편집합니다. 

New Picture

Create New Picture file

2개의 픽쳐화면을 생성합니다. 하나의 화면에는 로직 프로그래밍을 위한 픽쳐 페이지이고, 로직 프로그래밍에서의 입출력 변수 변수값을 사용자에게 제공할  HMI 화면작도를 위한 픽쳐입니다.

- 각종 연산 및 제어를 위한 로직을 구성하기 위해서 logic_picture.svg 파일을 추가합니다. 

- logic_picture.svg 파일에서 구성한 로직을 제어하기 위한 hmi_picture.svg 파일을 추가합니다.

본 강좌에서는 로직변수를 HMI변수에 적용하는 방법에 대하여 설명합니다. 

우선 간단하게 로직 페이지에 임의의 로직 객체를 추가합니다. 아래그림과 같이 로직을 추가하고 각각의 로직 객체의 id값을 고융한 id로 설정합니다.

로직 페이지 구성을 완료하였다면, hmi_picture.svg 파일에 로직의 값을 표현할 HMI 객체를 추가합니다.

Set Attribute

HMI 객체의 Properties 윈도우의 Variable Window를 확인하여 보면, 내부 멤버변수(Attribute)와 할당될 Assing 변수(Set Attribute)할당 부분이 있습니다. HMI 객체 제작시 제작자가 제공하는 인터페이스입니다. 자세한 구현 부분을 보고자 하는 경우에는 라이브러리 편집 모드에서 자세한 코드 구현 부분을 확인하시면 됩니다. 

본 예에서서는 추가된 HMI 객체에 logic_picture.svg파일에서 추가한 객체의 입력값을 인터페이스 합니다. 로직객체 ID_SINE_DOUBLE객체의 output값을 HMI객체에 연결하기 위해서 Set Attribute의 속성에 #+로직변수명을 입력합니다. 

추가한 HMI 라이브러리 gauge_pie의 라이브러리 제작은 아래와 같이 구성되어 있습니다. 인터페이스를 위한 멤버변수 m_value값에 따라서 게이지값을 표현되도록 구현된 라이브러리 입니다. gauge_pie의 라이브러리는 내부 구성을 보면 svg의 path객체가 포함되어 있습니다. path객체의 속성 d값을 변경하여 값에 따라 회전위치 정보를 계산하는 로직입니다. svg의 path정보는 사이트에서 좀더 자세히 확인해 보실수 있습니다.

참고 : https://www.w3schools.com/graphics/svg_path.asp

function _ontaskview()

{

//TODO Add your javascript code here

var datagap = m_max-m_min;

var data = m_value;

if (data < m_min)

data = m_min;

else if (data >m_max)

data = m_max;

var angle = ((360 * (data-m_min)) / (m_max - m_min) - 90);

// M40,40 L35.42,79.76 A40.00,40.00 0 1,0 40.00,0.00 Z

var x1 = 80+Math.cos(angle * 3.141592 / 180)*80;

var y1 = 80+Math.sin(angle * 3.141592 / 180)*80;

var dir = 0;

if (angle+90>180)

dir = 1;

ID_GAUGE.d = "M80,80 L"+x1.toString()+ ","+y1.toString()+" A80.00,80.00 0 "+ dir.toString()+",0 80.00,0.00 Z";

ID_LABEL.textContent = m_value.toString();

ID_GAUGE.fill = m_color;

}

내부 페이지 또는 별도의 페이지에 존재하는 로직 객체의 변수를 HMI 객체에 연동하는 방법에 대하여 알아보았습니다. 

다음 강좌에서는 시뮬레이션 사용방법에 대하여 알아보도록 하겠습니다.

-이엔유 주식회사-

SVG와 JavaScript를 이용한 다이나믹 심볼 제작 (온도 Gauge)

라이브러리 생성

엔유스페이스를 실행하고 Project Explorer에서 Library하위에서 Logic선택후 Add New logic Library를 선택합니다. 라이브러리 파일이름을 입력후 Create를 수행하면, 새로운 로직파일이 생성됩니다.

생성된 파일을 선택후 팝업메뉴를 이용하여 Add Node를 통하여 새로운 심볼을 생성합니다. 생성된 심볼을 디자인합니다. 디자인 객체를 이용하여 아래 그림과 같이 디자인을 수행합니다. 

각각의 객체의 속성에 id를 위 그림과 같이 설정합니다. 핀객체에 대해서는 name의 속성값을 설정합니다. 핀객체는 로직블럭과 로직블럭간의 연결선을 이용하여 연결이 가능합니다. 연결선을 이용하여 핀객체 연결시 데이터 전송 역할을 수행합니다.

심볼의 자체에 이벤트 함수를 등록합니다. _ontask()함수에 아래의 코드를 추가합니다. 입력핀의 객체 변수값을 출력핀의 객체 변수값으로 할당하는 코드입니다.

function _ontask()

--TODO Add your lua script code here

output = input

end

심볼에 입력데이터의 min, max를 정의하는 변수를 추가합니다. 

float min = 0

float max = 100

다음으로 ID_GAGUE객체를 선택하고 이벤트함수 _ontaskview()함수를 추가합니다. 이때 추가할 스크립트는 JavaScript를 이용하여 추가합니다. JavaScript를 이용하는 경우에는 웹 현시에 있어 동일한 스크립트가 동작되어 수행됩니다.

function _ontaskview()

{

//TODO Add your javascript code here

var datagap = max-min;

var data = output;

if (data < min)

data = min;

else if (data >max)

data = max;

var h = (43 * (data-min)) / (max - min);

ID_GAUGE.height = h;

ID_LABEL_VALUE.textContent = output.toString();

ID_LABEL_MIN.textContent = min.toString();

ID_LABEL_MAX.textContent = max.toString();

}

위 코드를 간단하게 보면, 출력 데이터의 값이 심볼변수를 설정한 min, max의 범위안에서 처리가 되도록 조건을 걸어줍니다. 다음으로 ID_GAUGE의 초기 Height값 43을 기준으로 출력 데이터의 실제 게이지의 높이값을 계산하여, ID_GAUGE객체의 높이값으로 치환합니다.

ID_LABEL_VALUE, ID_LABEL_MIN, ID_LABEL_MAX의 값 현시를 위한 코드를 추가합니다. 이와같은 방법으로 SVG 그래픽 과 JavaScript 코드를 이용하여 다양한 그래픽 심볼 라이브러리를 생성할 수 있습니다. 

화면 드로잉

생성된 라이브러리를 이용하여 픽쳐페이지에 적용합니다. Project Explorer에서 Picture를 선택후 Add New Picture Item 메뉴를 선택하여 픽쳐페이지를 생성합니다.

생성된 픽쳐페이지에 생성한 라이브러리를 마우스를 이용하여 드래그 & 드랍으로 객체를 생성합니다. 선택객체를 더블클릭하여 Value Table의 입력값을 조정하여 정상적으로 라이브러리가 생성되었는지 확인합니다.

입력값을 50으로 설정시 게이지바의 위치가 50의 위치하였음을 확인할 수 있습니다.

리본 메뉴의 Data/Communication에서 웹서버 기동 메뉴를 클릭하여, 웹서버를 기동한 후 웹브라우져를 통하여 제작한 픽쳐페이지가 정상적으로 현시되는지 확인합니다. 

다양한 형태의 게이지를 생성하여, 아래 그림과 같이 적용 및 활용할 수 있습니다.

enuSpace for Mars(2017)은 HMI/SCADA/DCS/IoT분야에 강력한 기능을 활용하여 적용할 수 있습니다. 

본 기술개발의 일부는 중소기업청의 창업기술개발사업의 일환으로 수행된 결과입니다.