KR20190102819A - Monitering and controlling system - Google Patents

Monitering and controlling system Download PDF

Info

Publication number
KR20190102819A
KR20190102819A KR1020180023777A KR20180023777A KR20190102819A KR 20190102819 A KR20190102819 A KR 20190102819A KR 1020180023777 A KR1020180023777 A KR 1020180023777A KR 20180023777 A KR20180023777 A KR 20180023777A KR 20190102819 A KR20190102819 A KR 20190102819A
Authority
KR
South Korea
Prior art keywords
hmi
html
html file
instance
screen
Prior art date
Application number
KR1020180023777A
Other languages
Korean (ko)
Other versions
KR102451878B1 (en
Inventor
이승주
Original Assignee
엘에스산전 주식회사
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 엘에스산전 주식회사 filed Critical 엘에스산전 주식회사
Priority to KR1020180023777A priority Critical patent/KR102451878B1/en
Publication of KR20190102819A publication Critical patent/KR20190102819A/en
Application granted granted Critical
Publication of KR102451878B1 publication Critical patent/KR102451878B1/en

Links

Images

Classifications

    • G—PHYSICS
    • G05—CONTROLLING; REGULATING
    • G05B—CONTROL OR REGULATING SYSTEMS IN GENERAL; FUNCTIONAL ELEMENTS OF SUCH SYSTEMS; MONITORING OR TESTING ARRANGEMENTS FOR SUCH SYSTEMS OR ELEMENTS
    • G05B23/00—Testing or monitoring of control systems or parts thereof
    • G05B23/02—Electric testing or monitoring
    • G05B23/0205—Electric testing or monitoring by means of a monitoring system capable of detecting and responding to faults
    • G05B23/0259—Electric testing or monitoring by means of a monitoring system capable of detecting and responding to faults characterized by the response to fault detection
    • G05B23/0267—Fault communication, e.g. human machine interface [HMI]
    • G05B23/0272—Presentation of monitored results, e.g. selection of status reports to be displayed; Filtering information to the user
    • G—PHYSICS
    • G05—CONTROLLING; REGULATING
    • G05B—CONTROL OR REGULATING SYSTEMS IN GENERAL; FUNCTIONAL ELEMENTS OF SUCH SYSTEMS; MONITORING OR TESTING ARRANGEMENTS FOR SUCH SYSTEMS OR ELEMENTS
    • G05B23/00—Testing or monitoring of control systems or parts thereof
    • G05B23/02—Electric testing or monitoring
    • G05B23/0205—Electric testing or monitoring by means of a monitoring system capable of detecting and responding to faults
    • G05B23/0259—Electric testing or monitoring by means of a monitoring system capable of detecting and responding to faults characterized by the response to fault detection
    • G05B23/0267—Fault communication, e.g. human machine interface [HMI]
    • G05B23/027—Alarm generation, e.g. communication protocol; Forms of alarm
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/20—Drawing from basic elements, e.g. lines or circles
    • G—PHYSICS
    • G05—CONTROLLING; REGULATING
    • G05B—CONTROL OR REGULATING SYSTEMS IN GENERAL; FUNCTIONAL ELEMENTS OF SUCH SYSTEMS; MONITORING OR TESTING ARRANGEMENTS FOR SUCH SYSTEMS OR ELEMENTS
    • G05B2219/00—Program-control systems
    • G05B2219/20—Pc systems
    • G05B2219/24—Pc safety
    • G05B2219/24072—Detect faulty circuit, display on screen and replace it

Landscapes

  • Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Human Computer Interaction (AREA)
  • Theoretical Computer Science (AREA)
  • Automation & Control Theory (AREA)
  • General Engineering & Computer Science (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

The present invention provides a method for creating an HMI screen created by a project engineering tool included in a web-based HMI system. The method for creating an HMI screen comprises the steps of: executing an HTML creation screen based on the input of a user; calling any one figure object of a canvas of the HTML creation screen based on the input of the user; and generating an instance by rendering a predetermined HTML file selected by the input of the user to the figure object.

Description

ＨＭＩ화면 작화 방법{Monitering and controlling system}How to draw HMII screens {Monitering and controlling system}

본 발명은 웹 기반 HMI 시스템에서의 HMI 화면 작화 방법에 관한 것이다. The present invention relates to a HMI screen drawing method in a web-based HMI system.

HMI(HumanMachine Interface) 시스템은 SCADA(Supervisory Control and Data Acquisition) 등의 감시제어시스템과 연동되고, 감시제어시스템의 모니터링데이터를 표시하는 화면을 제공한다.The HMI (Human Machine Interface) system is linked with a supervisory control system such as SCADA (Supervisory Control and Data Acquisition) and provides a screen displaying the monitoring data of the supervisory control system.

감시제어시스템은 원격지에 설치된 설비 및 시설들의 상태정보를 실시간으로 수집, 기록 및 표시하는 현장운영장치(Outstation)와, 상태정보에 기초하여 원격지의 설비 및 시설을 감시 및 제어하는 중앙제어장치(Master)을 포함한다. 이러한 감시제어시스템은 전기, 가스, 수도, 교통 등 기반시설의 관리 및 운영에 적용되고 있다.The supervisory control system is an outstation that collects, records, and displays the status information of facilities and facilities installed in remote locations in real time, and a central control unit (Master) that monitors and controls the facilities and facilities in remote locations based on the status information. ). This monitoring and control system is applied to the management and operation of infrastructure such as electricity, gas, water and transportation.

감시제어시스템의 모니터링데이터는 실시간데이터와 수집데이터 및 이들을 가공 처리한 연산데이터 등을 포함할 수 있다.Monitoring data of the monitoring and control system may include real-time data and collected data and processing data processing them.

HMI 시스템은 모니터링데이터를 표시하는 화면을 제공함으로써, 관리자는 감시제어시스템 및 HMI 시스템을 통해 원격지의 설비 및 시설을 감시 및 조작할 수 있다.The HMI system provides a screen displaying the monitoring data, so that the administrator can monitor and operate remote facilities and facilities through the monitoring control system and the HMI system.

HMI 시스템은 사용자에 의해 설정된 프로젝트에 기초하여 감시제어시스템의 모니터링데이터를 도식화한다. The HMI system plots the monitoring data of the monitoring control system based on the project set by the user.

특히, 웹 기반의 HMI 시스템은 웹 서비스 플랫폼 기반으로 모니터링데이터 표시를 위한 다양한 어플리케이션을 실행한다. 이 경우, HMI 시스템은 태그 데이터베이스 및 HMI화면 작화 등과 같은 프로젝트 엔지니어링 툴을 구비하고 프로젝트에 기초한 웹 화면 파일을 제공하는 서버와, 웹 브라우저를 통해 웹 화면 파일을 실행하는 클라이언트를 포함할 수 있다.In particular, the web-based HMI system executes various applications for monitoring data display based on the web service platform. In this case, the HMI system may include a server having a project engineering tool, such as a tag database and an HMI screen, and providing a web screen file based on the project, and a client executing the web screen file through a web browser.

일반적인 프로젝트 엔지니어링 툴은 HMI 시스템에 대한 전용 HTML 페이지 또는 ActiveX 컨테이너를 이용하여 HMI화면을 작화한다. Common project engineering tools design HMI screens using dedicated HTML pages or ActiveX containers for the HMI system.

전용 HTML 페이지를 이용하여 HMI화면을 작화하는 경우, HMI화면의 각 페이지에 포함된 일부 객체의 위치를 변경하거나 또는 일부 객체의 세부 속성을 변경하기 위해 코드를 변경해야 하는 번거로움이 있다. When designing an HMI screen using a dedicated HTML page, it is cumbersome to change the code in order to change the position of some objects included in each page of the HMI screen or to change detailed properties of some objects.

그리고, ActiveX 컨테이너를 이용하여 HMI화면을 작화하는 경우에도, HMI화면의 각 페이지에 포함된 일부 객체의 위치를 변경하거나 또는 일부 객체의 세부 속성을 변경하기 위해 소스코드를 수정해야 하는 번거로움이 있다. 또한, ActiveX의 특성 상 클라이언트 장치의 보안이 취약해지는 문제점이 있다.In addition, even when drawing an HMI screen using an ActiveX container, there is a need to modify the source code in order to change the position of some objects included in each page of the HMI screen or to change detailed properties of some objects. . In addition, there is a problem that the security of the client device is vulnerable due to the nature of the ActiveX.

이와 같이, 일반적인 프로젝트 엔지니어링 툴은 HMI화면의 각 페이지에 포함된 일부 객체의 위치를 변경하거나 또는 일부 객체의 세부 속성을 변경하기 위해 코드를 변경해야 하므로, 객체의 재활용성 및 변경 용이성이 개선되기 어려운 문제점이 있고, 그로 인해 유지보수 비용이 경감되기 어려운 문제점이 있다.As such, the general project engineering tool has to change the code to change the position of some objects included in each page of the HMI screen or to change the detailed properties of some objects. Therefore, it is difficult to improve the reusability and changeability of the objects. There is a problem, and thus there is a problem that the maintenance cost is difficult to reduce.

본 발명은 객체의 재활용성 및 변경 용이성이 향상될 수 있는 HMI화면 작화 방법을 제공하기 위한 것이다.An object of the present invention is to provide an HMI screen drawing method which can improve the recyclability and easy change of an object.

본 발명의 목적들은 이상에서 언급한 목적으로 제한되지 않으며, 언급되지 않은 본 발명의 다른 목적 및 장점들은 하기의 설명에 의해서 이해될 수 있고, 본 발명의 실시예에 의해 보다 분명하게 이해될 것이다. 또한, 본 발명의 목적 및 장점들은 특허 청구 범위에 나타낸 수단 및 그 조합에 의해 실현될 수 있음을 쉽게 알 수 있을 것이다.The objects of the present invention are not limited to the above-mentioned objects, and other objects and advantages of the present invention, which are not mentioned above, can be understood by the following description, and more clearly by the embodiments of the present invention. Also, it will be readily appreciated that the objects and advantages of the present invention may be realized by the means and combinations thereof indicated in the claims.

이와 같은 과제를 해결하기 위하여, 본 발명의 일 예시는 웹 기반의 HMI시스템에 포함된 프로젝트 엔지니어링 툴이 HMI화면을 작화하는 방법에 있어서, 사용자의 입력에 기초하여 HTML 작성 스크린을 실행하는 단계, 상기 사용자의 입력에 기초하여 상기 HTML 작성 스크린의 캔버스 중 어느 하나의 도형 객체를 호출하는 단계, 및 상기 사용자의 입력에 의해 선택된 소정의 HTML 파일을 상기 도형 객체에 렌더링하여 인스턴스를 생성하는 단계를 포함하는 HMI화면 작화 방법을 제공한다.In order to solve such a problem, an example of the present invention is a project engineering tool included in a web-based HMI system in the method of designing the HMI screen, the step of executing the HTML creation screen based on the user input, the Calling a figure object of any of the canvases of the HTML creation screen based on a user input, and rendering an HTML file selected by the user input to the figure object to create an instance; Provides HMI screen drawing method.

상기 HMI화면 작화 방법은 상기 인스턴스를 생성하는 단계 이전에, 상기 도형 객체의 렌더링 대상요소에 HTML 파일 형태를 추가하여, 상기 도형 객체의 속성을 변경하는 단계를 더 포함할 수 있다.The HMI screen drawing method may further include changing an attribute of the figure object by adding an HTML file form to a rendering target element of the figure object before generating the instance.

여기서, 상기 소정의 HTML 파일을 상기 도형 객체에 렌더링하는 단계는 상기 속성이 변경된 도형 객체에 HTML 페이지를 로드하는 단계, 상기 로드된 HTML 페이지에 DIV 객체를 생성하는 단계, 및 상기 선택된 HTML 파일을 상기 DIV 객체에 배치하는 단계를 포함한다.The rendering of the predetermined HTML file into the figure object may include loading an HTML page into a figure object whose attribute is changed, generating a DIV object in the loaded HTML page, and converting the selected HTML file into the figure object. Positioning on the DIV object.

상기 HMI화면 작화 방법은 디자인타임에서, 상기 도형 객체의 속성을 표시하는 단계, 및 런타임에서, 상기 HTML 파일에 대응한 어플리케이션을 활성화하는 단계를 더 포함할 수 있다. The HMI screen drawing method may further include displaying an attribute of the figure object at design time and activating an application corresponding to the HTML file at runtime.

여기서, 상기 어플리케이션은 상기 HMI시스템에 연결된 소정의 제어감시시스템의 모니터링데이터에 대응한 차트, 그래프 및 텍스트 중 적어도 하나를 표시하는 표시창, 및 상기 제어감시시스템의 모니터링데이터에 대응한 적어도 하나의 알람을 표시하는 알람창 중 어느 하나일 수 있다.The application may include a display window displaying at least one of a chart, a graph, and text corresponding to monitoring data of a predetermined control and monitoring system connected to the HMI system, and at least one alarm corresponding to the monitoring data of the control and monitoring system. It may be any one of the alarm windows to be displayed.

상기 HMI화면 작화 방법은 상기 인스턴스를 생성하는 단계 이후에, 상기 사용자의 입력에 기초하여 상기 인스턴스의 위치 및 크기 중 적어도 하나를 변경하는 단계를 더 포함할 수 있다.The HMI screen drawing method may further include changing at least one of a location and a size of the instance based on the user input after generating the instance.

전술한 바와 같은 HMI화면 작화 방법에 따르면, 사용자의 입력에 기초하여 HTML 작성 스크린의 캔버스 중 어느 하나의 도형 객체를 호출하고, 사용자의 입력에 의해 선택된 소정의 HTML 파일을 도형 객체에 렌더링하여 인스턴스를 생성한다. According to the HMI screen drawing method as described above, an instance is created by calling a shape object of one of the canvases of the HTML creation screen based on a user input, rendering a predetermined HTML file selected by the user input into the shape object. Create

이와 같이, HMI 시스템에 대한 전용의 HTML 페이지 또는 ActiveX 컨테이너를 이용하는 대신, HTML 작성 스크린의 캔버스에서 제공되는 도형 객체를 이용하여 HTML 파일에 대응한 인스턴스가 생성될 수 있다. As such, instead of using a dedicated HTML page or ActiveX container for the HMI system, an instance corresponding to the HTML file may be generated using a figure object provided on the canvas of the HTML creation screen.

이때, 캔버스에 있어서, 도형 객체의 위치 변경 및 크기 변경은 드래그앤드랍(Drag&Drop) 방식으로 실시될 수 있다. In this case, in the canvas, the position change and the size change of the figure object may be performed by a drag and drop method.

이에 따라, HTML 파일에 대한 코드 변경을 실시하지 않더라도, 도형 객체에 대한 드래그앤드랍(Drag&Drop)을 통해, 인스턴스의 위치 변경 및 크기 변경이 실시될 수 있다. 그로 인해, 객체의 재활용성 및 변경 용이성이 개선될 수 있다. 또한, 코드 변경을 위한 코드 작성 전문가가 불필요하므로, 유지보수 비용이 경감될 수 있다. Accordingly, even if the code is not changed in the HTML file, the position and size of the instance may be changed through drag and drop of the figure object. Thereby, the recyclability and changeability of the object can be improved. In addition, maintenance costs can be reduced because no code writing expert is required for code changes.

더불어, ActiveX를 배제시킬 수 있으므로, 보안이 향상될 수 있다.In addition, since ActiveX can be excluded, security can be improved.

도 1은 본 발명의 일 실시예에 따른 HMI 시스템에 대한 일 예시를 나타낸 도면이다.
도 2는 도 1에 도시된 HMI 서버의 프로젝트 엔지니어링 툴이 HMI화면을 작화하는 방법을 나타낸 도면이다.
도 3은 도 2의 인스턴스 생성 단계를 나타낸 도면이다.
도 4 내지 도 11은 도 2 및 도 3의 각 단계를 나타낸 도면이다.1 is a diagram illustrating an example of an HMI system according to an embodiment of the present invention.
FIG. 2 is a diagram illustrating a method for designing an HMI screen by the project engineering tool of the HMI server shown in FIG. 1.
3 is a diagram illustrating an instance generation step of FIG. 2.
4 to 11 are diagrams illustrating each step of FIGS. 2 and 3.

전술한 목적, 특징 및 장점은 첨부된 도면을 참조하여 상세하게 후술되며, 이에 따라 본 발명이 속하는 기술분야에서 통상의 지식을 가진 자가 본 발명의 기술적 사상을 용이하게 실시할 수 있을 것이다. 본 발명을 설명함에 있어서 본 발명과 관련된 공지 기술에 대한 구체적인 설명이 본 발명의 요지를 불필요하게 흐릴 수 있다고 판단되는 경우에는 상세한 설명을 생략한다. 이하, 첨부된 도면을 참조하여 본 발명에 따른 바람직한 실시예를 상세히 설명하기로 한다. 도면에서 동일한 참조부호는 동일 또는 유사한 구성요소를 가리키는 것으로 사용된다.The above objects, features, and advantages will be described in detail with reference to the accompanying drawings, whereby those skilled in the art to which the present invention pertains may easily implement the technical idea of the present invention. In describing the present invention, when it is determined that the detailed description of the known technology related to the present invention may unnecessarily obscure the gist of the present invention, the detailed description will be omitted. Hereinafter, exemplary embodiments of the present invention will be described in detail with reference to the accompanying drawings. In the drawings, the same reference numerals are used to indicate the same or similar components.

이하, 본 발명의 일 실시예에 따른 HMI화면 작성 방법에 대해 첨부한 도면을 참고로 하여 상세히 설명한다.Hereinafter, a method for creating an HMI screen according to an embodiment of the present invention will be described in detail with reference to the accompanying drawings.

먼저, 도 1을 참조하여, HMI 시스템에 대해 설명한다.First, an HMI system will be described with reference to FIG. 1.

도 1은 본 발명의 일 실시예에 따른 HMI 시스템에 대한 일 예시를 나타낸 도면이다.1 is a diagram illustrating an example of an HMI system according to an embodiment of the present invention.

도 1에 도시된 바와 같이, HMI 시스템(10)은 소정의 감시제어시스템(20)과 연동되고, 감시제어시스템(20)으로부터 모니터링데이터를 수신하며, 사용자에 의한 관리데이터를 감시제어시스템(20)에 송신한다.As shown in FIG. 1, the HMI system 10 is interlocked with a predetermined monitoring control system 20, receives monitoring data from the monitoring control system 20, and monitors management data by a user. To send).

감시제어시스템(20)은 각종 설비 및 시설들의 구동을 제어하고 각종 설비 및 시설들의 상태정보를 실시간으로 수집한다. The supervisory control system 20 controls the operation of various facilities and facilities and collects state information of various facilities and facilities in real time.

모니터링데이터는 감시제어시스템(20)에 의한 실시간데이터, 수집 데이터 및 이들을 가공 처리한 연산데이터를 포함할 수 있다. The monitoring data may include real time data collected by the monitoring control system 20, collected data, and calculation data obtained by processing them.

HMI 시스템(10)은 서버(11) 및 클라이언트(12)를 포함한다.The HMI system 10 includes a server 11 and a client 12.

서버(11)는 모니터링데이터의 도식화를 위한 프로젝트를 작성하는 프로젝트 엔지니어링 툴을 구비하고 프로젝트에 기초한 HMI화면 파일을 제공한다.The server 11 has a project engineering tool for creating a project for the mapping of monitoring data and provides an HMI screen file based on the project.

클라이언트(12)는 웹 브라우저를 통해 HMI화면 파일을 실행한다. The client 12 executes the HMI screen file through a web browser.

이하에서는 본 발명의 일 실시예에 따른 프로젝트 엔지니어링 툴이 HMI화면을 작화하는 방법을 설명한다. Hereinafter, a method of designing an HMI screen by a project engineering tool according to an embodiment of the present invention will be described.

도 2는 도 1에 도시된 HMI 서버의 프로젝트 엔지니어링 툴이 HMI화면을 작화하는 방법을 나타낸 도면이다. 도 3은 도 2의 인스턴스 생성 단계를 나타낸 도면이다. 도 4 내지 도 11은 도 2 및 도 3의 각 단계를 나타낸 도면이다.FIG. 2 is a diagram illustrating a method for designing an HMI screen by the project engineering tool of the HMI server shown in FIG. 1. 3 is a diagram illustrating an instance generation step of FIG. 2. 4 to 11 are diagrams illustrating each step of FIGS. 2 and 3.

도 2에 도시한 바와 같이, 본 발명의 일 실시예에 따른 HMI화면 작화 방법은 사용자의 입력에 기초하여 HTML 작성 스크린을 실행하는 단계(S110), 사용자의 입력에 기초하여 HTML 작성 스크린의 캔버스 중 어느 하나의 도형 객체를 호출하는 단계(S120), 도형 객체의 렌더링 대상요소에 HTML 파일 형태를 추가하여, 도형 객체의 속성을 변경하는 단계(S130) 및 사용자의 입력에 의해 선택된 소정의 HTML 파일을 도형 객체에 렌더링하여 인스턴스를 생성하는 단계(S140)를 포함한다.As shown in FIG. 2, in the method of designing an HMI screen according to an embodiment of the present invention, the step of executing an HTML creation screen based on a user input (S110) may be performed. Calling one of the figure objects (S120), adding a form of an HTML file to a rendering target element of the figure object, changing attributes of the figure object (S130), and a predetermined HTML file selected by a user input In operation S140, the rendering is performed on the figure object to generate an instance.

그리고, HMI화면 작성 방법은 인스턴스를 생성하는 단계(S140) 이후에 사용자의 입력에 기초하여 인스턴스의 위치 및 크기 중 적어도 하나를 변경하는 단계(S150)를 더 포함할 수 있다.The HMI screen creation method may further include changing at least one of the position and the size of the instance based on a user input after generating the instance (S140) (S150).

여기서, 도형 객체는 웹 브라우저 창의 일반적인 형태에 대응하는 사각형 객체일 수 있다.Here, the figure object may be a rectangular object corresponding to the general shape of the web browser window.

또한, 도 3에 도시된 바와 같이, 소정의 HTML 파일을 도형 객체에 렌더링하는 단계(S140)는 속성이 변경된 도형 객체에 HTML 페이지를 로드하는 단계(S141), 로드된 HTML 페이지에 DIV 객체를 생성하는 단계(S142) 및 선택된 소정의 HTML 파일을 DIV 객체에 배치하는 단계(S143)를 포함한다.In addition, as shown in Figure 3, the step of rendering a predetermined HTML file to the figure object (S140), the step of loading the HTML page to the figure object with the changed property (S141), generates a DIV object in the loaded HTML page And a step S142 of placing the selected predetermined HTML file in the DIV object.

구체적으로, 도 4에 도시된 바와 같이, 프로젝트 엔지니어링 툴은 HMI 화면 작화 개시를 지시하는 사용자의 입력에 기초하여 HTML 작성 스크린(200)을 실행한다. (S110)Specifically, as shown in FIG. 4, the project engineering tool executes the HTML creation screen 200 based on a user's input instructing the start of HMI screen design. (S110)

HTML 작성 스크린(200)은 HTML을 이용하여 HMI 화면의 각 페이지를 작성하기 위한 편집창(201), HMI 화면에 포함된 적어도 하나의 페이지의 리스트를 표시하는 리스트창(202), 편집창(201)에 호출되고 사용자의 입력에 의해 지시된 어느 하나의 도형 객체의 속성을 표시하는 속성창(203)을 포함한다. The HTML creation screen 200 includes an edit window 201 for creating each page of the HMI screen using HTML, a list window 202 for displaying a list of at least one page included in the HMI screen, and an edit window 201. And a property window 203 that displays properties of any one figure object, which is called by the user and indicated by the user's input.

그리고, HTML 작성 스크린(200)은 사용자의 용이한 활용을 위한 메뉴목록 및 적어도 하나의 리본메뉴를 포함한 메뉴창(204)을 더 포함할 수 있다. 여기서, 리본메뉴는 사용자가 빈번하게 사용하는 메뉴의 명령어에 대응한 도형 또는 그림으로 표시하는 버튼을 포함한다.In addition, the HTML creation screen 200 may further include a menu window 204 including a menu list and at least one ribbon menu for easy use by the user. Here, the ribbon includes a button for displaying a figure or a picture corresponding to a command of a menu frequently used by a user.

도 5에 도시된 바와 같이, 프로젝트 엔지니어링 툴은 사용자의 입력에 기초하여 HTML 작성 스크린(200)의 캔버스 중 어느 하나의 도형 객체(210)를 호출한다. (S120)As shown in FIG. 5, the project engineering tool calls the figure object 210 of any of the canvases of the HTML creation screen 200 based on the user's input. (S120)

여기서, 캔버스는 HTML5의 기능 중 하나로서 그래픽 편집에 이용된다. Here, the canvas is used for graphic editing as one of the functions of HTML5.

예시적으로, 도형 객체는 웹 브라우저의 일반적인 형태에 기초하여 사각형 객체로 선택될 수 있다. In exemplary embodiments, the figure object may be selected as a rectangular object based on a general shape of a web browser.

이때, 호출된 도형 객체(210)는 캔버스에 의해 기본 속성으로 지정된 크기로 이루어진다. In this case, the called figure object 210 has a size designated as a basic property by the canvas.

이와 같은 디자인타임에서, 편집창(201)에서 작업중인 도형 객체의 속성(210')이 속성창(203)을 통해 지속적으로 표시될 수 있다. At such a design time, the property 210 'of the figure object being worked on in the edit window 201 may be continuously displayed through the property window 203.

즉, 속성창(203)은 도형 객체(210)의 다양한 속성(210')을 표시할 수 있다. 예시적으로, 속성창(203)은 도형 객체(210)에 대응한 어플리케이션 이름, 객체 이름, 레이어, Left 좌표, Top 좌표, 너비 및 높이 중 적어도 하나의 속성(210')을 표시할 수 있다.That is, the property window 203 may display various properties 210 'of the figure object 210. For example, the property window 203 may display at least one property 210 ′ of an application name, an object name, a layer, a left coordinate, a top coordinate, a width, and a height corresponding to the figure object 210.

이어서, 프로젝트 엔지니어링 툴은 사용자의 입력에 기초하여 마우스 왼쪽 버튼을 이용하여 도형 객체의 세부 속성 변경창을 호출하고, 세부 속성 변경창을 이용하여 도형 객체의 렌더링 대상요소에 HTML 파일 형태를 추가한다. 이와 같이, 도형 객체(210)의 속성이 변경됨으로써, 도형 객체는 HTML 파일과 렌더링될 수 있는 상태가 된다. (S130)Subsequently, the project engineering tool calls the detailed property change window of the figure object by using the left mouse button based on a user input, and adds an HTML file type to the rendering target element of the figure object by using the detailed property change window. In this way, by changing the attributes of the figure object 210, the figure object is in a state that can be rendered with the HTML file. (S130)

다음, 도 6에 도시된 바와 같이, 프로젝트 엔지니어링 툴은 도형 객체(210)의 속성이 변경된 이후에, 사용자의 입력에 기초하여 도형 객체(210)에 HTML 페이지(211)를 로드한다. (S141) 이때, 도형 객체(210) 내에 배치된 HTML 페이지(211)가 생성된다.Next, as shown in FIG. 6, after the attribute of the figure object 210 is changed, the project engineering tool loads the HTML page 211 into the figure object 210 based on a user input. In this case, the HTML page 211 disposed in the figure object 210 is generated.

도 7에 도시된 바와 같이, 프로젝트 엔지니어링 툴은 사용자의 입력에 기초하여 로드된 HTML 페이지(211)에 DIV객체(211')를 생성한다. (S142)As shown in FIG. 7, the project engineering tool creates a DIV object 211 ′ in the loaded HTML page 211 based on the user's input. (S142)

도 8에 도시된 바와 같이, 프로젝트 엔지니어링 툴은 사용자의 입력에 따라 선택된 HTML 파일(212)을 DIV객체(211')에 배치한다. (S143)As shown in FIG. 8, the project engineering tool places the selected HTML file 212 in the DIV object 211 ′ according to the user's input. (S143)

HTML 파일(212)은 HMI시스템(도 1의 10)에 연결된 소정의 제어감시시스템(도 1의 20)의 모니터링데이터를 표시하기 위한 어플리케이션을 정의한다.HTML file 212 defines an application for displaying monitoring data of a predetermined control and monitoring system (20 in FIG. 1) connected to the HMI system (10 in FIG. 1).

예시적으로, 어플리케이션은 제어감시시스템의 모니터링데이터에 대응한 표, 그래프 및 텍스트 중 적어도 하나를 표시하는 표시창, 및 제어감시시스템의 모니터링데이터에 대응한 적어도 하나의 알람을 표시하는 알람창 중 어느 하나일 수 있다.For example, the application may include at least one of a display window displaying at least one of a table, a graph, and text corresponding to the monitoring data of the control and monitoring system, and an alarm window displaying at least one alarm corresponding to the monitoring data of the control and monitoring system. Can be.

일 예로, 도 8에는 실시간데이터를 표시하는 표시창의 어플리케이션(212)을 도시한다.For example, FIG. 8 illustrates an application 212 of a display window displaying real time data.

더불어, 프로젝트 엔지니어링 툴은 사용자의 입력에 기초하여 마우스 왼쪽 버튼을 이용하여 HTML 파일(212)의 보조 속성을 변경할 수 있다. In addition, the project engineering tool can change auxiliary attributes of the HTML file 212 using the left mouse button based on user input.

즉, 도 9에 도시된 바와 같이, 프로젝트 엔지니어링 툴은 사용자의 입력에 기초하여 마우스 왼쪽 버튼을 통해 HTML 파일(212)의 보조 속성을 표시하는 HTML세부속성창을 호출하고, HTML세부속성창을 이용하여 HTML 파일(212)의 각종 태그를 설정할 수 있다.That is, as shown in FIG. 9, the project engineering tool calls the HTML detail property window displaying the auxiliary property of the HTML file 212 through the left mouse button based on a user input, and uses the HTML detail property window. To set various tags of the HTML file 212.

이로써, HTML 파일(212)이 렌더링된 도형 객체로 이루어진 인스턴스(210)가 생성된다. (S140)As a result, an instance 210 of the figure object in which the HTML file 212 is rendered is generated. (S140)

그리고, 도 10에 도시된 바와 같이, 프로젝트 엔지니어링 툴은 사용자의 입력에 기초하여 인스턴스(210)의 위치 및 크기 중 적어도 하나를 변경할 수 있다. (S150) 이때, 인스턴스(210)의 변경된 속성(210")은 속성창(203)에 실시간으로 표시될 수 있다.As illustrated in FIG. 10, the project engineering tool may change at least one of the position and the size of the instance 210 based on a user input. In this case, the changed property 210 ″ of the instance 210 may be displayed in the property window 203 in real time.

그리고, 런타임에서, 프로젝트 엔지니어링 툴은 HTML 파일에 대응한 어플리케이션(212)을 활성화한다. And, at runtime, the project engineering tool activates the application 212 corresponding to the HTML file.

또는, 도 11에 도시된 바와 같이, 프로젝트 엔지니어링 툴은 사용자의 입력에 기초하여 둘 이상의 도형 객체(210, 220)를 편집창(201)에 호출할 수도 있다. Alternatively, as shown in FIG. 11, the project engineering tool may call two or more figure objects 210 and 220 to the edit window 201 based on a user input.

이때, 런타임기간 동안, 각 도형 객체(210, 220)에 렌더링된 HTML 파일(212, 222)의 어플리케이션이 활성화된다.At this time, during the runtime period, an application of the HTML files 212 and 222 rendered in the figure objects 210 and 220 is activated.

일 예로, 어느 하나의 도형 객체(210)에 렌더링된 HTML 파일(212)에 대응한 어플리케이션은 표시창일 수 있고, 다른 어느 하나의 도형 객체(220)에 렌더링된 HTML 파일(222)에 대응한 어플리케이션은 알람리스트를 표시하는 알람창일 수 있다.For example, the application corresponding to the HTML file 212 rendered in one of the figure objects 210 may be a display window, and the application corresponding to the HTML file 222 rendered in the other figure object 220. May be an alarm window displaying an alarm list.

이상과 같이, 본 발명의 일 실시예에 따르면, HTML5의 캔버스요소 중 도형 객체의 속성을 변경하여, HTML 파일을 도형 객체에 렌더링한다. 이로써, 전용 HTML 페이지 및 ActiveX 컨테이너를 이용하지 않더라도, HMI화면이 HTML 파일로 작화될 수 있다. As described above, according to the exemplary embodiment of the present invention, the HTML file is rendered to the figure object by changing the attribute of the figure object among the canvas elements of HTML5. In this way, the HMI screen can be made into an HTML file without using a dedicated HTML page and an ActiveX container.

여기서, HTML 파일이 렌더링된 도형 객체의 크기 또는 위치 변경은 마우스의 드래그앤드롭 동작으로 용이하게 구현될 수 있다. 즉, HTML 파일 객체의 크기 또는 위치 변경을 위한 코드 작업이 불필요하므로, 객체의 재활용성 및 변경 용이성이 향상될 수 있고, 유지보수 비용이 경감될 수 있다.Here, changing the size or position of the figure object in which the HTML file is rendered can be easily implemented by dragging and dropping the mouse. That is, since code work for changing the size or position of the HTML file object is unnecessary, the object can be improved in recyclability and changeability, and maintenance costs can be reduced.

전술한 본 발명은, 본 발명이 속하는 기술 분야에서 통상의 지식을 가진 자에게 있어 본 발명의 기술적 사상을 벗어나지 않는 범위 내에서 여러 가지 치환, 변형 및 변경이 가능하므로 전술한 실시예 및 첨부된 도면에 의해 한정되는 것이 아니다.The present invention described above is capable of various substitutions, modifications, and changes without departing from the spirit of the present invention for those skilled in the art to which the present invention pertains. It is not limited by.

10: HMI 시스템 11: 서버
12: 클라이언트 20: 감시제어시스템
200: HTML 작성 스크린
201: 편집창 202: 리스트창
203: 속성창 204: 메뉴창
210, 220: 도형 객체
212, 222: HTML 파일 또는 그에 대응한 어플리케이션10: HMI System 11: Server
12: Client 20: Surveillance Control System
200: HTML creation screen
201: Edit window 202: List window
203: Property window 204: Menu window
210, 220: shape objects
212, 222: HTML file or equivalent application

Claims (7)

웹 기반의 HMI시스템이 HMI화면을 작화하는 방법에 있어서,
사용자의 입력에 기초하여 HTML 작성 스크린을 실행하는 단계;
상기 사용자의 입력에 기초하여 상기 HTML 작성 스크린의 캔버스 중 어느 하나의 도형 객체를 호출하는 단계; 및
상기 사용자의 입력에 의해 선택된 소정의 HTML 파일을 상기 도형 객체에 렌더링하여 인스턴스를 생성하는 단계를 포함하는 HMI화면 작화 방법.
In the web-based HMI system how to design the HMI screen,
Executing an HTML creation screen based on a user input;
Calling any figure object of the canvas of the HTML creation screen based on the user input; And
And creating an instance by rendering a predetermined HTML file selected by the user's input to the figure object.
제 1 항에 있어서,
상기 인스턴스를 생성하는 단계 이전에,
상기 도형 객체의 렌더링 대상요소에 HTML 파일 형태를 추가하여, 상기 도형 객체의 속성을 변경하는 단계를 더 포함하는 HMI화면 작화 방법.
The method of claim 1,
Before the step of creating the instance,
And adding an HTML file type to the rendering target element of the figure object, and changing an attribute of the figure object.
제 2 항에 있어서,
상기 소정의 HTML 파일을 상기 도형 객체에 렌더링하는 단계는
상기 속성이 변경된 도형 객체에 HTML 페이지를 로드하는 단계;
상기 로드된 HTML 페이지에 DIV 객체를 생성하는 단계; 및
상기 선택된 HTML 파일을 상기 DIV 객체에 배치하는 단계를 포함하는 HMI화면 작화 방법.
The method of claim 2,
Rendering the predetermined HTML file to the figure object
Loading an HTML page into the figure object whose attribute is changed;
Creating a DIV object in the loaded HTML page; And
Disposing the selected HTML file in the DIV object.
제 3 항에 있어서,
디자인타임에서, 상기 도형 객체의 속성을 표시하는 단계; 및
런타임에서, 상기 HTML 파일에 대응한 어플리케이션을 활성화하는 단계를 포함하는 HMI화면 작화 방법.
The method of claim 3, wherein
Displaying a property of the figure object at design time; And
At runtime, activating an application corresponding to the HTML file.
제 4 항에 있어서,
상기 어플리케이션은
상기 HMI시스템에 연결된 소정의 제어감시시스템의 모니터링데이터에 대응한 차트, 그래프 및 텍스트 중 적어도 하나를 표시하는 표시창, 및
상기 제어감시시스템의 모니터링데이터에 대응한 적어도 하나의 알람을 표시하는 알람창 중 어느 하나인 HMI화면 작화 방법.
The method of claim 4, wherein
The application is
A display window for displaying at least one of a chart, a graph, and text corresponding to monitoring data of a predetermined control and monitoring system connected to the HMI system;
HMI screen design method of any one of the alarm window for displaying at least one alarm corresponding to the monitoring data of the control and monitoring system.
제 1 항에 있어서,
상기 인스턴스를 생성하는 단계 이후에,
마우스의 드래그앤드랍동작을 이용한 상기 사용자의 입력에 기초하여 상기 인스턴스의 위치 및 크기 중 적어도 하나를 변경하는 단계를 더 포함하는 HMI화면 작화 방법.
The method of claim 1,
After the step of creating the instance,
And changing at least one of a position and a size of the instance based on the user input using a drag and drop operation of a mouse.
제 1 항에 있어서,
상기 도형 객체는 사각형 객체인 HMI화면 작화 방법.The method of claim 1,
The HMI object drawing method of the figure object is a rectangular object.
KR1020180023777A 2018-02-27 2018-02-27 Monitering and controlling system KR102451878B1 (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020180023777A KR102451878B1 (en) 2018-02-27 2018-02-27 Monitering and controlling system

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020180023777A KR102451878B1 (en) 2018-02-27 2018-02-27 Monitering and controlling system

Publications (2)

Publication Number Publication Date
KR20190102819A true KR20190102819A (en) 2019-09-04
KR102451878B1 KR102451878B1 (en) 2022-10-06

Family

ID=67950670

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020180023777A KR102451878B1 (en) 2018-02-27 2018-02-27 Monitering and controlling system

Country Status (1)

Country Link
KR (1) KR102451878B1 (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR102492443B1 (en) * 2022-09-02 2023-01-30 주식회사 비에스티그룹 Method for building human-machine interface for scada system and apparatus thereof

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20040268299A1 (en) * 2003-06-30 2004-12-30 Shu Lei Application user interface template with free-form layout
KR101311887B1 (en) 2011-11-21 2013-11-13 주식회사 비츠로시스 Method for remote monitoring and controlling using remote terminal and device thereof
KR20160142436A (en) * 2015-06-02 2016-12-13 엘에스산전 주식회사 Hmi interface engineering method using smart symbol library

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20040268299A1 (en) * 2003-06-30 2004-12-30 Shu Lei Application user interface template with free-form layout
KR101311887B1 (en) 2011-11-21 2013-11-13 주식회사 비츠로시스 Method for remote monitoring and controlling using remote terminal and device thereof
KR20160142436A (en) * 2015-06-02 2016-12-13 엘에스산전 주식회사 Hmi interface engineering method using smart symbol library

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR102492443B1 (en) * 2022-09-02 2023-01-30 주식회사 비에스티그룹 Method for building human-machine interface for scada system and apparatus thereof

Also Published As

Publication number Publication date
KR102451878B1 (en) 2022-10-06

Similar Documents

Publication Publication Date Title
EP2851816B1 (en) Methods and systems for mapping and processing building information modeling (BIM)-based data
JP5715786B2 (en) Dynamically linked graphical messaging system, dynamically linked graphical message and method
US8417357B2 (en) Method and system for generating a control system user interface
US11513775B2 (en) Group control and management among electronic devices
US20030172371A1 (en) System and method for managing software applications, particularly manufacturing execution system (MES) applications
Serván et al. Assembly work instruction deployment using augmented reality
AU2016302390B2 (en) Systems and methods for executable content and executable content flow creation
KR101791335B1 (en) Hmi systemapparatus
CN104317595A (en) Background-push component-based graphical monitoring device based on SVG (scalable vector graphics) and operating method thereof
Coscetti et al. Factory maintenance application using augmented reality
Gonçalves et al. A new concept of 3D DCS interface application for industrial production console operators
KR102451878B1 (en) Monitering and controlling system
US8397154B2 (en) Remotely controlling a browser program
US11853727B2 (en) Group control and management among electronic devices
CN109086042B (en) Business interface development method based on operator and control
KR20170110957A (en) Supervisory control and data acauisition system and data engineering method therrof
JP4902567B2 (en) Work procedure manual creation system and work procedure manual creation program
JP2017027319A (en) Display/editing/storage method, device, and processing program of document documentation data
KR101498877B1 (en) Program-producing device and image control system
CN112766919A (en) Project management method for deep editing based on Gantt chart
KR101620564B1 (en) Method for Providing Supervisory Control Service Computer-Readable Recording Medium with Program therefore
KR101235467B1 (en) Construction work management system with four dimension
KR20220104361A (en) Industrial site danger prevention automatic generation platform base Artificial Intelligence
KR101851263B1 (en) Apparatus for setting multi display of hmi
JP2007026389A (en) Data input device

Legal Events

Date Code Title Description
A201 Request for examination
E902 Notification of reason for refusal
E701 Decision to grant or registration of patent right
GRNT Written decision to grant