DataMon(HMI) Web Monitoring 시스템 구축

돌핀와우의 김정현입니다.

다빈소프트 의뢰를 받아 DataMon 모니터링 화면을 웹브라우저에 구현하는 시스템(DataMon Web Viewer)을 제작했습니다.

DataMon은 Data Monitoring & Control 소프트웨어 제품으로 DCS, PLC, CNC등의 각종 계전 장치 및 가공 설비로부터 실시간 신호를 취득해 시각화하여 감시 및 제어할 수 있는 소프트웨어 제품입니다. 데이터 시각화를 위한 화면 편집기능은 파워포인트처럼 사용자가 직접 편집할 수 있어 설비 데이터를 의도대로 시각화하여 업무효율을 높일 수 있는 특징이 있습니다.

하지만, DataMon은 CS방식의 시스템이어서 DataMon이 설치된 PC에서만 모니터링 할 수 있는 아쉬움이 있었습니다. 이를 개선하기 위해 웹브라우저에서도 모니터링이 가능하도록 시스템을 제작했습니다. 때문에 스마트폰, 태블릿 등 인터넷 접속이 가능한 다양한 기기를 통해 어디서나 모니터링 할 수 있습니다.
 

DataMon Web Viewer의 구성

DataMon Web Viewer 중 Web 구성은 크게 세가지로 나눠져 있습니다.

1. DataMon Rendering Viewer

DataMon에서 제작한 드로잉 파일을 웹브라우저에서 PC와 동일하게 렌더링하는 소프트웨어입니다. Web 주소 호출방식과 Vue.JS Component 이용 방식을 동시에 지원합니다. Component를 이용하면 기존 시스템에 쉽게 Embedding 할 수 있습니다.

2. DataMon File Manager

DataMon의 드로잉 파일을 관리할 수 있는 파일 매니저입니다. 파일은 개별 사용자별 및 통합 관리를 지원합니다. 즉, 조직내의 사용자가 회원가입을 통해 자신의 파일을 별도로 관리할 수 있고, 관리자는 다른 사용자들의 파일을 모두 관리할 수 있습니다.

3. DataMon Gateway

DataMon 서버와 DataMon Rendering Viewer와 정보를 주고 받을 수 있는 Gateway입니다. 보안과 안정성을 위해 Web에서 서버로 직접 접근하지 않고 Gateway를 거치도록 구성하였습니다.

시스템 주안점

보안성, 관리의 편리성, 시스템 속도 등 기본에 충실하도록 노력 하였고, 특히 PC 화면과 동일성, Embedding 효율성에 많은 노력을 기울였습니다.

PC화면과 동일성

웹브라우저에서 사용하는 JavaScript는 C#에 비해 수치 연산에 취약성이 있습니다. 이는 벡터 기반의 드로잉에 정교함을 해치는 요인이 됩니다. 이를 극복하기 위해 다양한 방식의 연산을 적용 하였고, 그 결과 PC 화면과 99% 이상의 동일성을 이루어 눈으로는 차이점을 찾을 수 없는 결과를 도출했습니다. 1% 미만의 차이는 개발자가 아쉬워하는 수준입니다.

Embedding 효율성

모니터링 화면을 웹 화면에 전체 화면으로 표시할 수도 있지만, 기존에 운영되고 있는 시스템 화면에 내장해야 할 때를 대비해 Vue.JS Component를 지원합니다. 컴포넌트 호출을 통해 너무나도 손쉽게 기존 시스템에 자연스럽게 Embedding 할 수 있습니다.

DataMon Web Viewer 개발 주요 언어 및 라이브러리

웹 브라우저에서 동작하는 소프트웨어라 주로 다음과 같은 개발 언어와 라이브러리가 사용 되었습니다.

Language
JavaScript, TypeScript, Python, SCSS, CSS, HTML, C#

Framework and Library
Vue.JS, Django