동운 HMI 내장 웹서버의 기술적 배경

동운 HMI에 내장되어 웹 기반 HMI 서비스를 제공하는 웹서버는 상용 IIS나 아파치 웹서버가 제공하는 것과 같은 다양한 기능이나 웹 스크립트 언어를 통한 효과적인 웹 페이지 구성을 지원하지는 않습니다. 웹 HMI 페이지에 필요한 최소한의 기능으로 구현 되었습니다.

 

HTTP 프로토콜에는 가장 많이 사용하는 GET과 POST를 비롯해서 PUT, PATCH, DELETE, OPTIONS, HEAD, CONNECT, TRACE 등의 메소드가 있지만 동운 HMI 웹서버에서는 대표적인 GET과 POST 메소드만 제공하고 GET과 POST 메소드에 대해서도 동운 HMI의 서비스 제공 범위 내에서만 제한적으로 서비스 합니다. 예를 들어 POST 메소드의 경우에는 현재 로그인 과정에서만 사용하고 정적 자원에 대한 요구나 태그 데이터 읽기등의 기능은 GET 메소드를 통해서 제한적으로 기능을 지원합니다.

 

이미지 파일이나 자바스크립트, CSS파일, HTML파일등의 정적 파일에 대해서는 파일 캐싱 기능을 지원해서 빈번하게 호출되는 파일은 메모리 캐싱으로 속도를 향상 시킬 수 있습니다. 캐싱 여부와 크기는 환경 파일에서 설정할 수 있습니다. 웹서비스는 통상 대량의 트래픽이 동시에 발생하는 특성이 있는데 동운 HMI의 내장 웹서버도 멀티 쓰레드를 통해서 동시에 요구되는 웹 페이지 요구에 대해서도 병렬 처리를 통해 원활한 서비스를 수행합니다.

 

많은 웹 개발 프로젝트에서 사용하는 PHP, ASP, JSP와 같은 서버측 웹 스크립트 언어는 내장 웹서버에서는 지원하지 않고 태그 데이터 조회 및 저장, 기록 조회등의 API는 웹서버의 내부 함수 형태로 C#으로 작성되기 때문에 불필요한 인터페이스가 없어 최적의 서비스를 제공할 수 있습니다. 

 

환경 설정에서 아이디/비밀번호 기반의 인증을 적용할 지를 선택할 수 있는데 인증을 선택하면 세션 쿠키를 사용해서 로그인한 웹페이지를 닫을 때 까지 인증이 유효하도록 서비스 합니다. 인증을 선택한 상태에서는 어떠한 웹 페이지도 접근할 수 없도록 제한 합니다.

 

웹 기반 HMI의 중요한 부분은 웹 클라이언트로 반응형 웹과 편리한 자바 스크립트 사용등을 위해서 핵심 프레임워크로 jQuery와  jQuery UI를 채용 했습니다.

 

 $.getJSON('/api/getgrp/overview')
          .done(function (data) {
              var curpos = $('#tag_A013_base').position().top + '|' + $('#tag_A013_base').position().left;
              if (pos_check != curpos) {
                  pos_check = curpos;
                  tag_init();
              }
              $('#pagestat').text('');
              $('#tag_A001').text(data.A001);
              $('#tag_A002').text(data.A002);
              $('#tag_A003').text(data.A003);
              $('#tag_A004').text(data.A004);
              $('#tag_A005').text(data.A005);
              $('#tag_A006').text(data.A006);
              $('#tag_A007').text(data.A007);
              $('#tag_A008').text(data.A008);
              $('#tag_A009').text(data.A009);
              $('#tag_A010').text(data.A010);
              $('#tag_A011').text(data.A011);
              $('#tag_A012').text(data.A012);

위의 코드는 jQuery를 이용해 작성된 웹 클라이언트의 코드 일부로 서버에서 태그 데이터들을 페이지 단위로 일괄로 전달받아 각 컨트롤에 값을 설정하는 내용입니다. 웹페이지를 작성하는 과정은 비주얼스튜디오와 같은 GUI 디자이너로 화면을 작성하는 것은 지원하지 않기 때문에 텍스트 편집기를 통해서 직접 코딩 하는 방식을 사용해야 합니다. 웹 HMI 페이지 제작을 위해서는 자바스크립트와 jQuery 및  jQuery UI에 대한 기본적인 지식을 필요로 합니다. 추후 각종 디지털 및 아날로그 컨트롤을 클래스 형태로 개발할 예정이므로 굳이 GUI 디자이너가 없어도 효과적인 웹페이지 개발이 가능하리라 기대하고 있습니다. 스마트폰, 태블릿, 데스크탑등 다양한 환경을 지원하는 반응형 웹이라면  jQuery UI와 같은 프레임웍 기반의 코딩 방법이 오히려 효과적일 것입니다.

 

위의 그림이나 코드에서 보듯이 웹서버가 클라이언트로 응답하는 방법은 JSON 형태입니다. JSON 형태로 서버에서 응답하기 때문에 웹페이지에서는 위의 코드와 같이 복잡한 과정을 거치지 않고도 효율적으로 서버의 응답을 처리할 수 있습니다.

 

 

(주)동운시스템 전화 041-358-3760

동운 HMI 소개 바로가기

[온라인 문의 및 견적요청]