enuSpace를 이용한 HMI 라이브러리 생성 및 적용 방법 (1/2)


본 강좌에서는 다이나믹 데이터 디스플레이를 HMI Panel 라이브러리 제작하는 과정을 포함하고 있습니다.


동영상 미리보기



New Project

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


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


New Hmi library

Project Explorer->Library->Hmi 아이템을 선택후 마우스 오른쪽 버튼을 클릭하여 팝업메뉴를 호출한다. 팝업메뉴 Add New Hmi Library를 선택하여 라이브러리의 이름을 입력합니다.


Project Explorer에 추가된 hmi_library.svg 파일을 선택후 마우스 오른쪽 버튼을 클릭하여 팝업메뉴를 호출한다. 팝업메뉴 Add Symbol을 선택하여 심볼의 이름을 LABEL_VALUE입력하고 New 버튼을 클릭합니다. 


Project Explorer에서 앞에서 추가한 라이브러리를 선택하면 라이브러리 편집 Picture Window가 나타납니다.


다이나믹 디스플레이를 위한 패널 제작을 위하여 그래픽 편집도구를 이용하여 다음과 같이 구성합니다. 사각형 객체와 문자객체를 추가합니다.


문자객체에 데이터를 디스플레이할 경우, 항상 사각형의 중앙정렬이 되도록 문자객체를 선택하고 Properties Window의 속성 text-anchor의 값을 middle로 설정합니다.  

참고사이트 : https://www.w3.org/TR/SVG/text.html#TextAnchorProperty


라이브러리를 OOP(Object Oriented Programming)기반으로 제작하기 위해서 멤버변수를 추가합니다. 디스플레이할 값과 연동하기 위한 변수를 추가합니다. Project Explorer->lesson2->Library->Hmi->hmi_library.svg->LABEL_VALUE를 선택하거나, 빈 공간을 선택합니다. 선택후 Properties 에서 변수를 추가합니다.  


데이터 연동시 두가지 방법으로 추가가 가능합니다. 라이브러리의 멤버함수 ontaskview()에 추가하는 방법과 TEXT 객체의 멤버함수 ontaskview()함수에 추가하는 방법입니다.


라이브러리의 멤버함수에 ontaskview()함수에 추가하는 스크립트 코드는 아래와 같습니다.

function _ontaskview()

{

//TODO Add your javascript code here

ID_LABEL.textContent = m_value.toString();

}

TEXT객체에 고유한 ID이름을 설정하고 고유한 ID값을 이용하여 텍스트의 값을 멤버변수 m_value의 값을 문자열로 치환하는 방법입니다.


TEXT객체의 ontaskview()함수에 추가하는 스크립트 코드는 아래와 같습니다.

function _ontaskview()

{

//TODO Add your javascript code here

textContent = m_value.toString();

}

TEXT객체 자체에 추가하는 스크립트 코드는 자신의 ID값을 적용할 필요없이 textContent 속성값을 호출하면 됩니다.


본 강좌에서는 라이브러리의 ontaskview() 함수를 이용하여 구현합니다. 

이로써 값을 디스플레이하는 다이나믹 패널이 제작 완료되었습니다.


Using HMI Library in picture

앞에서 제작한 다이나믹 라이브러리를 이용하여 픽쳐를 구현해보도록 하겠습니다.

Project Explorer의 Picture를 선택후 오른쪽 버튼을 클릭하여 팝업메뉴를 호출합니다. sample로 입력후 Create 버튼을 클릭하여 새로운 픽쳐 페이지를 생성합니다.


HMI 라이브러리 창을 클릭후 앞에서 생성한 라이브러리를 선택 후 Drag & Drop으로 객체를 생성합니다.

생성된 객체를 선택한후 속성창의 Variable Window에서 앞에서 추가한 멤버변수가 나타나고 값을 할당하기 위한 Set Attribute항목이 나타납니다. #m_value의 값으로 입력할 수 있는 타입은  2가지입니다. 

1. 상수값을 입력합니다.

2. 인터페이스 되고자 하는 변수를 입력합니다.

어떠한값도 입력하지 않았을 경우에는 초기값을 유지합니다.


테스트를 위해서 Ribbon Menu->Script Operation의 Run 버튼을 클릭하여 스크립트를 기동합니다. 0으로 디스플레이 되는것을 확인할 수 있습니다. 50을 입력합니다. 아래 그림과 같이 50으로 변경되어 디스플레이 됨을 확인할 수 있습니다.

Set Attribute에 변수를 할당하기 위한 변수가 없기 때문에 sample.svg에 멤버변수를 추가하여 연동을 합니다. Project Explorer의 Picture하위 sample.svg를 선택하거나 Picture Window의 배경을 선택합니다. 속성창에서 Variable Window에서 픽쳐 변수를 생성합니다.

변수가 생성이 되었다면, 픽쳐의 멤버함수 ontask()함수에 lua 스크립트를 이용하여 추가합니다. enuSpace의 lua 스크립트를 사용하는 경우는 특정 모델에 해당하는 연산을 수행하고자 할 경우에는 ontask()함수를 사용합니다. ontask()함수는 lua 스크립트에서만 추가가능합니다.

다음과 같이 루아 스크립트를 추가합니다.

function _ontask()

--TODO Add your lua script code here

m_double = m_double + 1

if (m_double > 100) then

m_double = 0

end

end

Ribbon Menu의 Home->Script Operation의 Run 버튼을 클릭하면, Task의 logic_svg의 속성 Cycle(Hz)값에 따라 연산을 수행합니다. 간단하게 0에서 100까지 증가하는 연산을 구성하였다면, 앞에서 생성한 HMI 객체를 선택하고 Variable Window의 SetAttribute의 #m_value의 값에 #m_double을 입력합니다.


Picture에 추가한 멤버변수를 HMI 라이브러리의 변수를 연결을 수행하였습니다. 연결시 외부 데이터의 인터페이스를 수행하는 경우에는 변수명 앞에 #을 입력하여야 합니다. #의 의미는 데이터의 인터페이스를 의미합니다.

Home->Runtime 버튼을 클릭하여, 실제 동작화면을 통하여 변수값 변경 및 색상값 변경에 대한 결과를 확인할 수 있습니다.


패널의 색상 및 사이즈를 조정하시고자 하는 경우가 발생할 경우에 별도의 라이브러리를 만들지 않고 라이브러리의 기능을 확장하여 사용할 수 있습니다.

다음 강좌에서는 HMI 라이브러리의 확장 사용방법에 대하여 알아보도록 하겠습니다.

enuSpace를 이용한 HMI 라이브러리 생성 및 적용 방법(2/2)

- 이엔유 주식회사- 


저작자표시

'enuSpace for mars(2017) > Tutorial Guide' 카테고리의 다른 글

LOGIC 프로그램밍, HMI라이브러리 인터페이스 방법  (0) 2017.04.24
enuSpace를 이용한 LOGIC 라이브러리 생성 및 적용 방법  (0) 2017.04.21
enuSpace를 이용한 HMI 라이브러리 생성 및 적용 방법 (2/2)  (0) 2017.04.21
enuSpace를 이용하여 첫 프로젝트 만들기  (0) 2017.04.20
enuSpace for mars 개발 환경 및 구조  (0) 2017.04.20

enuSpace for Mars(2017) - 주요기능 소개 (ENU Co.ltd)


추가되는 기능


1. IoT 디바이스를 로직 심볼 형태로 제공합니다.

2. 웹 서버기능이 엔유스페이스 프로그램에서 자체 지원합니다.

3. IoT 디바이스 심볼과 로직 블럭을 이용하여 연산 및 제어처리가 가능합니다. 

4. 웹 브라우져를 통하여 로직 처리 결과 확인이 가능합니다. 


상세기능.

IoT 디바이스를 심볼로 구성하여 그래픽적인 연산처리를 수행한후 실시간 디바이스의 센서값을 웹을 통하여 현시 및 제어를 수행할 수 있습니다. 

enuSpace for Mars의 데이터 인터페이스 구성도

enuSpace for Mars는 

Raspberry PI 전용 Windows 10 IoT Core기반의 전용 응용프로그램,

Arduino의 StandardFirmata 프로그램을 설치하여 연계를 수행합니다.

디바이스 등록과정을 거친후 서버에서 모든 제어 및 모니터링을 수행합니다.

● Raspberry PI 응용프로그램을 이용한 디바이스 등록 방법

사용자 로그인 및 웹서버 주소 설정 과정

디바이스 등록 과정

디바이스 등록후 StandardFirmata를 이용한 Arduino 시리얼 통신 연결 

디바이스 심볼 객체를 이용하여 디바이스 모니터링 및 제어기 만들기.

※ 디바이스 심볼은 기 제공되는 심볼을 이용하거나, 사용자가 직접 심볼을 제작하여 등록후 사용이 가능합니다. 


● 디바이스 심볼 만들기 방법

ProjectExplorer에서 Library하위 Logic에서 신규 라이브러리 파일을 생성하고, Add Node 메뉴를 이용하여 신규 라이브러리를 생성합니다.

생성된 신규 라이브러리에 관련 이미지 또는 기본 드로잉 객체를 이용하여 심볼을 디자인 합니다. 디자인된 심볼에 외부의 데이터 인터페이스를 위한 PIN객체를 추가하고, PIN객체의 속성 name을 디바이스의 A0, A1, A2, A3, A4, A5, D0, ~, D13까지 생성합니다. 

본 단계는 사용자가 직접 제어를 위한 방법이며, 본 프로그램에서 제공되는 라이브러리를 이용하는 경우에는 별도의 작업이 필요치 않습니다.  

IoT 디바이스 라이브러리 생성 방법

라벨의 객체에 실시간 디바이스 센서값 표현하기 위해서는 신규 text 객체를 추가합니다. 추가된 객체에 javascript 함수를 추가합니다. javascript는 웹 모니터링시에 동일한 형태로 브라우져에서 현시됩니다.

텍스트 객체에 스크립트를 추가하는 방법

위 그림과 같이 ontaskview() 함수를 추가하고, textContent = A0.toString(); 코드를 추가함으로서 A0의 변수값을 text의 라벨값으로 현시하기 위한 코드를 추가합니다.

위와 같이 사용자가 다양한 형태의 게이지, 컴포넌트 등을 구성하여 라이브러리를 구성할 수 있습니다.


● 디바이스 심볼활용 방법 (픽쳐 드로잉)

ProjectExplorer에서 Picture의 하위에 Add New Picture Item 버튼을 클릭하여 새로운 픽쳐페이지를 생성합니다. 생성된 페이지에 Logic 객체와 HMI 객체를 이용하여 화면 드로잉을 수행합니다. 

IoT 디바이스 심볼 객체를 이용한 드로잉 방법

등록된 디바이스에 대하여 IoT 디바이스 심볼 객체에 대한 속성 설정을 통한 화면 연계를 수행합니다.

디바이스 심볼을 선택하고, interface 속성값을 true 설정, interface-id의 속성값을 디바이스 키값을 입력합니다. 인터페이스 설정이 완료되면 디바이스의 정보가 심볼객체를 통하여 데이터가 현시됩니다.


모든 화면 구성 및 그래픽적인 로직화면 구성이 완료되었다면 저장을 수행합니다.


● enuSpace for Mars의 웹 서버연동

위 작업이 마무리 되었으면, 엔유스페이스 프로그램이 실행된 컴퓨터의 서버주소를 브라우져를 실행하여 주소를 입력합니다.

서버의 정보가 클라이언트에 실시간 데이터가 모니터링됨을 확인 할 수 있습니다.

enuSpace for Mars(2017) 실행 화면

크롬 브라우져에서 enuSpace에 접속한 화면


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

저작자표시

'enuSpace for mars(2017) > Work note(mars)' 카테고리의 다른 글

enuSpace에서 확장용 web 모듈 사용하기  (0) 2017.02.08
SVG와 JavaScript를 이용한 다이나믹 심볼 제작(온도 Gauge)  (0) 2017.01.26
Windows 10 IoT Core Arduino Firmata 연계  (0) 2016.10.14
Windows 10 IoT Core C# Using SQLite  (0) 2016.10.12
Windows 10 IoT Core Remote Server 사용 Tip  (0) 2016.10.06

Windows 10 IoT Core C# Using SQLite


Step 1. Install the SQLite Visual Stuidio extension for Visual Studio 2015

http://sqlite.org/download.html


Step 2. SQLite.Net-PCL NuGet Installation.


Step 3. Add Reference


Step 4. using SQLite.Net.Attributes;


Step 5. SQLite DB Connection and Query.


SQLite DB Create DB Table Sample.

        public class Configuration

        {

            [PrimaryKey, AutoIncrement]

            public int Id { get; set; }

            public string Attribute { get; set; }

            public string Value { get; set; }

        }


        void LoadSqliteDB()

        {

            String path = Path.Combine(Windows.Storage.ApplicationData.Current.LocalFolder.Path, "enuspace.sqlite");

            m_conn = new SQLite.Net.SQLiteConnection(new SQLite.Net.Platform.WinRT.SQLitePlatformWinRT(), path);

            m_conn.CreateTable<Configuration>();

        }

위 코드를 이용하면, 테이블명은 Configuration, 컬럼명은 Id, Attribute, Value에 해당하는 테이블을 생성한다.


SQLite DB Check Table Exists and Create DB Table

        void LoadSqliteDB()

        {

            String path = Path.Combine(Windows.Storage.ApplicationData.Current.LocalFolder.Path, "enuspace.sqlite");

            m_conn = new SQLite.Net.SQLiteConnection(new SQLite.Net.Platform.WinRT.SQLitePlatformWinRT(), path);


            if (TableExist("Configuration", m_conn) == false)

                m_conn.CreateTable<Configuration>();

        }


        public bool TableExist(String tableName, SQLite.Net.SQLiteConnection conn)

        {

            String tableExistsQuery = "SELECT name FROM sqlite_master WHERE type='table' AND name='" + tableName + "';";

            String result = conn.ExecuteScalar<string>(tableExistsQuery);


            if (result == tableName)

                return true;

            else

                return false;

        }

프로그램 기동시 테이블의 존재유무를 체크하고자 하는 경우에는 ExecuteScalar를 이용하는 방법이 있다. 이때 리턴받는 문자열 result값에는 테이블이 존재하는 경우, 테이블 이름이 전달되며, 테이블 이름이 없다면 null이 리턴된다.


SQLite DB Table data query

        void LoadSqliteDB()

        {

            String path = Path.Combine(Windows.Storage.ApplicationData.Current.LocalFolder.Path, "enuspace.sqlite");

            m_conn = new SQLite.Net.SQLiteConnection(new SQLite.Net.Platform.WinRT.SQLitePlatformWinRT(), path);


            if (TableExist("Configuration", m_conn) == false)

                m_conn.CreateTable<Configuration>();

            else

            {

                var query = m_conn.Table<Configuration>();

                 foreach (var message in query)

                {

                    String strAttribute = message.Attribute;

                    String strValue = message.Value;

                }

            }

        } 

데이터 테이블 쿼리 요청에 따른 결과값 확인을 수행한다.


SQLite DB Data Insert


        m_conn.Insert(new Configuration() { Attribute = "auto-login", Value = "true" });


SQLite DB Data Update


                        var query = m_conn.Table<Configuration>().Where(x => x.Attribute == "auto-login");

                        var result = query.ToList();

                        if (result.Count == 0)

                            m_conn.Insert(new Configuration() { Attribute = "auto-login", Value = "true" });

                        else

                        {

                            result[0].Value = "true";

                            m_conn.Update(result[0]);

                        }

 


SQLite DB Data Delete


       var query = m_conn.Table<Configuration>().Where(x => x.Attribute == "user-pw");

        var result = query.ToList();

        foreach (var item in result)

        {

              m_conn.Delete(item);

        }

 



SQLite DB 조건을 이용하여 Query 정보를 확인.

 

         var query = m_conn.Table<Configuration>().Where(x => x.Attribute == "auto-login");

         var result = query.ToList();

         foreach (var item in result)

         {

                String test1 = item.Attribute;

                String test2 = item.Value;

        }





저작자표시

'enuSpace for mars(2017) > Work note(mars)' 카테고리의 다른 글

enuSpace for Mars(2017) - 주요기능 소개  (0) 2017.01.24
Windows 10 IoT Core Arduino Firmata 연계  (0) 2016.10.14
Windows 10 IoT Core Remote Server 사용 Tip  (0) 2016.10.06
Windows 10 IoT Core에서 WinRT C#용 Chart 그리기  (0) 2016.10.06
Windows 10 IoT Core, Raspberry PI, Arduino and enuSpace Platform  (0) 2016.10.05


엔유스페이스 소개 자료 V1.0 (pdf) 파일 다운

enuSpace 팜플렛.pdf








엔유스페이스 HMI/SCADA/IOT/APPLICATION 솔루션 소개



About enuSpace ?


엔유스페이스는 HMI/SCADA/DCS/IOT분야에서 활용되는 다기능 통합 개발자 솔루션입니다. 그래픽 편집 및 런타임 뷰어 기능을 포함하고 있으며, 동적 데이터 가시화 도구를 제공합니다. 객체 지향 프로그래밍(Object Oriented Programming:OOP) 개념을 도입한 사용자 정의 라이브러리를 생성하여 그래픽 컴포넌트로 적용 가능합니다.

엔유스페이스는 동적 디스플레이와 시뮬레이션 도구가 통합되어 로직 및 알고리즘 라이브러리 블럭을 이용하여 데이터 연결선만으로 플로우베이스 프로그래밍(Flowbased Programming)이 가능합니다. 연산결과는 동적 디스플레이 객체를 통하여 표현합니다.

엔유스페이스는 소프트웨어 개발자 도구(Software Development Kit :SDK)를 제공하며, SDK 그래픽 기능을 활용하여 빠르고 수려한 윈도우 그래픽 프로그램을 개발할 수 있습니다


HMI/LOGIC Total Solution Overview


Design symbol and drawing pictures for simulation and monitoring

Advanced GUI Programming (Flowbased Programming)

Extended file format(Scalable Vector Graphics + Lua Script Language)

Versatile software tool to develop and display dynamic graphical user interfaces

Graphic Component (Easy to development User Application Program)

Making Dynamic Symbols & Logic Symbols


Graphics Designer

엔유스페이스 편집기는 직관적 사용이 가능한 사용자 편의 편집 기능을 제공합니다. 모든 객체의 속성은 동적표현을 위한 인자로 활용될 수 있습니다.

스크립트 언어를 이용하여 모든 인자에 대한 속성 변경을 수행함으로서 유연한 인터페이스가 가능합니다. 편집과정 중에 실제 런타임 뷰어를 통한 실행 결과값을 확인 및 디버깅할 수 있습니다.


Flowbased Programming


엔유스페이스는 사용자가 로직 컴포넌트를 제작하여 시뮬레이션 알고리즘을 개발 및 적용할 수 있습니다. 적용범위는 단순로직에서 부터 복잡한 수식까지 적용 가능합니다.

Connect to your data using enuSpace APIs

응용 프로그램 개발 수행시 엔유스페이스 API를 이용하여 데이터 인터페이스를 수행할 수 있습니다. 뿐만 아니라, 각 개별 객체를 API를 이용하여 생성, 수정, 제거를 수행할 수 있습니다. 각 객체에 스크립트 함수등을 동적으로 추가 등록할 수 있는 API를 제공합니다.


Application Areas


엔유스페이스는 교육 및 연구용 시뮬레이션, 산업용 모니터링 및 제어분야 등 전범위 적용이 가능합니다. 발전소, 항공, 전기 생산, 분산 제어 시스템 분야에 있어 광범위하게 사용가능한 솔루션 입니다.

 



저작자표시

+ Recent posts

티스토리툴바