KR102111279B1 - a file format for expressing the flow based programming by using the svg graphic file format and the file format structure - Google Patents

a file format for expressing the flow based programming by using the svg graphic file format and the file format structure Download PDF

Info

Publication number
KR102111279B1
KR102111279B1 KR1020180064717A KR20180064717A KR102111279B1 KR 102111279 B1 KR102111279 B1 KR 102111279B1 KR 1020180064717 A KR1020180064717 A KR 1020180064717A KR 20180064717 A KR20180064717 A KR 20180064717A KR 102111279 B1 KR102111279 B1 KR 102111279B1
Authority
KR
South Korea
Prior art keywords
pin
graphic
file format
information
svg
Prior art date
Application number
KR1020180064717A
Other languages
Korean (ko)
Other versions
KR20190138368A (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 KR1020180064717A priority Critical patent/KR102111279B1/en
Publication of KR20190138368A publication Critical patent/KR20190138368A/en
Application granted granted Critical
Publication of KR102111279B1 publication Critical patent/KR102111279B1/en

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/34Graphical or visual programming

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Stored Programmes (AREA)

Abstract

본 발명은 컴포넌트화된 플로우 기반 프로그래밍에서 외부 프로세서 모니터링 및 제어를 수행하기 위한 방법 및 표현하기 위한 포맷에 관한 것으로, 소프트웨어 개발 플랫폼에 있어서 SVG, XML, JavaScript 등이 포함된 W3C 표준기반의 정보를 이용하여 플로우 기반 프로그래밍을 표현할 수 있는 기술이다.
이를 위해, W3C 그래픽 파일 포맷 SVG(Scalable Vector Graphics, SVG)를 이용하여 플로우 기반 프로그래밍을 표현하기 위한 파일 포맷 구조에 있어서, SVG 심볼 정의 포맷에 입력, 출력 핀(pin)엘리먼트와 SVG 그래픽에 연결선(link)엘리먼트가 포함된 에스브이지 그래픽 파일 포맷을 이용하여 플로우 기반 프로그래밍을 표현하기 위한 파일 포맷 구조 및 파일 포맷을 제공하게 된다.
The present invention relates to a method and expression format for performing external processor monitoring and control in componentized flow-based programming, and uses W3C standards based information including SVG, XML, and JavaScript in a software development platform. It is a technology that can express flow-based programming.
To this end, in a file format structure for expressing flow-based programming using the W3C graphic file format SVG (Scalable Vector Graphics, SVG), input and output pin elements in the SVG symbol definition format and a connection line to the SVG graphic ( link) It provides a file format structure and a file format for expressing flow-based programming using the SBG graphic file format including elements.

Description

에스브이지 그래픽 파일 포맷을 이용하여 플로우 기반 프로그래밍을 표현하기 위한 파일 포맷 및 그 구조{a file format for expressing the flow based programming by using the svg graphic file format and the file format structure}A file format for expressing the flow based programming by using the svg graphic file format and the file format structure}

본 발명은 컴포넌트화된 플로우 기반 프로그래밍에서 외부 프로세서 모니터링 및 제어를 수행하기 위한 방법 및 표현하기 위한 포맷에 관한 것으로, 소프트웨어 개발 플랫폼에 있어서 SVG, XML, JavaScript 등이 포함된 W3C 표준기반의 정보를 이용하여 플로우 기반 프로그래밍을 표현할 수 있는 기술이다.The present invention relates to a method and expression format for performing external processor monitoring and control in componentized flow-based programming, and uses W3C standards-based information including SVG, XML, and JavaScript in a software development platform. It is a technology that can express flow-based programming.

일반적으로 컴퓨터 프로그래밍에서 플로우 기반 프로그래밍 (flow-based programming, FBP)은 응용 프로그램을 "블랙 박스"프로세스의 네트워크로 정의하는 프로그래밍 패러다임으로, 메시지 전달을 통해 미리 정의된 연결간에 데이터를 교환하며, 이러한 연결은 프로세스 외부에서 지정되기도 한다. In computer programming, flow-based programming (FBP) is a programming paradigm that defines an application as a network of "black box" processes, exchanging data between predefined connections through message passing. Is also specified outside the process.

이러한 블랙 박스 프로세스는 내부적으로 변경하지 않고도 다시 연결하여 다양한 애플리케이션을 구성할 수 있는데, 플로우 기반 프로그래밍은 자연스럽게 구성 요소 지향적인 것이 특징이다.These black box processes can be reconnected without changing internally to form a variety of applications. Flow-based programming is naturally component-oriented.

이와 같은 플로우 기반 프로그래밍은 정의된 정보 패킷, 명명된 포트 및 별도의 연결 정의를 기반으로 하는 특정 유형의 데이터 흐름 프로그래밍이며, 일반적으로 "스케줄러"라고 불리는 소프트웨어를 통하여 연결 목록을 정의하기도 한다.This type of flow-based programming is a specific type of data flow programming based on defined information packets, named ports, and separate connection definitions. It also defines a connection list through software called "scheduler".

또한, 연결은 프로세스 코드와 심볼 정의 간에 합의된 이름을 통해 프로세스에 연결되며, 하나 이상의 프로세스가 동일한 코드를 실행할 수도 있는 것이다.In addition, a connection is linked to a process through a name agreed between the process code and the symbol definition, and more than one process may execute the same code.

예를 들어, 어떤 시점에서, 주어진 정보 패킷은 단일 프로세스에 의해서만 소유되거나 두 프로세스 간에 이동 중에 있을 수도 있으며, 정보 패킷은 단순 정보이거나 배열 유형일 수 있다.For example, at some point in time, a given information packet may be owned only by a single process or may be in motion between two processes, and the information packet may be simple information or an array type.

보다 구체적으로 플로우 기반 프로그램의 정의는 일반적으로 다이어그램이며 일부 저급 언어 또는 표기법으로 연결 목록으로 변환되는, 시각적인 프로그래밍 언어로 볼 수 있다.More specifically, the definition of a flow-based program is generally a diagram and can be viewed as a visual programming language, which translates into a linked list in some low-level language or notation.

또한, 이러한 플로우 기반 프로그램은 언어 독립적인 특징을 가지고 있으며, 실제로 충분히 낮은 수준의 언어로 작성된 스케줄러를 사용하면 서로 다른 언어로 작성된 구성 요소를 단일 네트워크에서 함께 연결할 수 있다. 이러한 특징상 플로우 기반 프로그램은 도메인 특정 언어 또는 "미니 언어"개념에 적합한 것이다.In addition, these flow-based programs have language-independent features, and in fact, using a scheduler written in a sufficiently low-level language, components written in different languages can be connected together in a single network. Due to these characteristics, flow-based programs are suitable for the domain specific language or "mini language" concept.

이러한 플로우 기반 프로그램 언어에 대한 표현방법 중 하나인 SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 표한하기 위한 XML기반의 파일 형식으로 SVG형식의 이미자와 그 작동은 XML텍스트 파일들로 정의 되어 검색화, 목록화, 스크립트화가 가능하며 필요하다면 압축도 가능하다.SVG (Scalable Vector Graphics), one of the expressions for the flow-based programming language, is an XML-based file format for displaying two-dimensional vector graphics. The SVG format imager and its operation are defined as XML text files and searched. , Cataloging, scripting is possible, and compression is also possible if necessary.

이와 같은 SVG는 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식으로 현재 마이크로소프트의 인터넷 익스플로러 9버전이상과 크롬, 사파리 등 대부분의 웹 브라우저에서 지원하는 형식이며, W3C(World Wide Web Consortium)에서 정의한 SVG 파일 포맷은 그래픽 정보에 대하여 정의를 수행하나, 종래의 기술은 정의된 표준 그래픽 정보를 이용하여 플로우 기반 프로그래밍에 필요한 모델 그래픽 제공은 불가한 문제점이 발생한다.SVG is an open standard vector graphic file format developed under the leadership of the World Wide Web Consortium (W3C) in 1999. It is currently supported by Microsoft's Internet Explorer version 9 or higher and most web browsers such as Chrome and Safari. The SVG file format defined by W3C (World Wide Web Consortium) performs definition for graphic information, but the conventional technology provides a problem that it is impossible to provide model graphics necessary for flow-based programming using defined standard graphic information.

대한민국 등록특허 제10-1728786호(에스브이지 파일 포맷을 이용한 컴포넌트 기반의 동적 이미지 표시 시스템 및 방법, 2017년 04월 18일 등록)Republic of Korea Patent No. 10-1728786 (Component based dynamic image display system and method using SB file format, registered on April 18, 2017)

본 발명은 이와 같은 문제점을 극복하기 위해, 소프트웨어 개발시 이용되는 플랫폼에서 SVG, XML, JavaScript 등과 같이 다양한 형식이 포함된 W3C 표준기반의 정보를 이용하여 보다 용이하게 플로우 기반 프로그래밍을 표현 및 연동할 수 있는 파일포맷 및 그 구조를 제공하는 것을 목적으로 한다.In order to overcome this problem, the present invention can more easily express and link flow-based programming using W3C standards-based information including various formats, such as SVG, XML, and JavaScript, on platforms used in software development. The purpose is to provide a file format and its structure.

본 발명의 목적을 달성하기 위한 W3C 그래픽 파일 포맷 SVG(Scalable Vector Graphics, SVG)를 이용하여 플로우 기반 프로그래밍을 표현하기 위해, SVG 심볼 정의 포맷에 입력, 출력 핀(pin)의 엘리먼트와 SVG 그래픽에 연결선(link) 엘리먼트가 포함된 에스브이지 그래픽 파일 포맷을 이용하여 플로우 기반 프로그래밍을 표현하기 위한 파일 포맷 구조를 제공하는 것이다.In order to express the flow-based programming using the W3C graphic file format SVG (Scalable Vector Graphics, SVG) for achieving the object of the present invention, the input and output pin elements in the SVG symbol definition format and a connection line to the SVG graphic It provides a file format structure for expressing flow-based programming using the SBG graphic file format including (link) element.

또한, 핀(pin)엘리먼트의 정의는 심볼 엘리먼트 하위에 핀(pin)엘리먼트 정보가 위치하며, 핀(pin)엘리먼트 하위에 영역설정이 가능한 그래픽 엘리먼트가 위치되고, 핀(pin)엘리먼트의 정의는 심볼 엘리먼트 하위에 영역설정이 가능한 그래픽 엘리먼트가 위치하며, 그래픽 태그 하위에 핀(pin)엘리먼트 위치된다.In addition, in the definition of the pin element, pin element information is located under the symbol element, and a graphic element capable of area setting is located under the pin element, and the definition of the pin element is symbol A graphic element capable of setting a region is positioned below the element, and a pin element is positioned below the graphic tag.

또한, 연결선(link)엘리먼트의 정의는 SVG 태그 하위에 연결선(link)엘리먼트 정보가 위치하며, 연결선(link)엘리먼트 하위에 라인설정이 가능한 그래픽 엘리먼트가 위치되고, 연결선(link)엘리먼트의 정의는 SVG 엘리먼트 하위에 라인설정이 가능한 그래픽 엘리먼트 정보가 위치하며, 그래픽 엘리먼트 하위에 연결선(link)엘리먼트 정보가 위치된다.Also, in the definition of the link element, the link element information is located under the SVG tag, the graphic element capable of setting the line is located under the link element, and the definition of the link element is SVG. Graphic element information capable of line setting is positioned below the element, and link element information is positioned below the graphic element.

여기서, 상기 핀(pin)엘리먼트의 속성 입출력정의, 변수의 타입, 초기값 정보를 포함하고, 연결선(link) 엘리먼트는 입력 use객체의 아이디와 출력 use객체의 아이디, 입력단 핀(pin)의 이름 출력단 핀(pin)의 이름 정보를 포함하게 된다.Here, the pin element includes input / output definition, variable type, and initial value information, and the link element includes the ID of the input use object and the ID of the output use object, and the name of the input terminal pin It will contain the pin's name information.

이때, 확장된 SVG 파일 포맷기반의 플로우 파일 포맷 구조에 있어서, 그래픽 리소스를 제외한 심볼이름, 노드의 아이디, 입력 핀 리스트 정보, 출력 핀 리스트 정보를 포함하는 특징을 갖는 에스브이지 그래픽 파일 포맷을 이용하여 플로우 기반 프로그래밍을 표현하기 위한 파일 포맷 구조를 제공하게 된다.At this time, in the extended SVG file format-based flow file format structure, the SBG graphic file format using characteristics including symbol names, node IDs, input pin list information, and output pin list information excluding graphic resources is used. Therefore, a file format structure for expressing flow-based programming is provided.

이와 같은 에스브이지 그래픽 파일 포맷을 이용하여 플로우 기반 프로그래밍을 표현하기 위한 파일 포맷 구조에 적용되는 파일 포맷은The file format applied to the file format structure for expressing flow-based programming using the SBG graphic file format is

입력정보에 자신의 핀이름, 자신 핀 타입, 자신 핀의 배열 정보, 자신 핀의 인터페이스 타입, 자신 핀의 초기값, 입력핀의 심볼 이름, 입력핀의 심볼 아이디, 입력핀의 이름, 입력핀의 인터페이스 타입을 포함고, 출력정보에 자신의 핀이름, 자신 핀 타입, 자신 핀의 배열 정보, 자신 핀의 인터페이스 타입, 자신 핀의 초기값, 출력핀의 심볼 이름, 출력핀의 심볼 아이디, 출력핀의 이름, 출력핀의 인터페이스 타입을 포함하는 것을 특징으로 하는 파일 포맷을 제공함으로써 본 발명의 목적을 보다 잘 달성할 수 있는 것이다.In the input information, your pin name, your pin type, your pin arrangement information, your pin's interface type, your pin's initial value, input pin's symbol name, input pin's symbol ID, input pin's name, input pin's Including the interface type, the pin information of the pin, the pin type of the pin, the array information of the pin, the interface type of the pin, the initial value of the pin, the symbol name of the output pin, the symbol ID of the output pin, the output pin By providing a file format characterized by including the interface type of the name, the output pin is to achieve the object of the present invention better.

본 발명은 W3C 그래픽 파일 포맷 SVG(Scalable Vector Graphics, SVG)를 이용하여 플로우 기반 프로그래밍을 표현하기 위한 파일 포맷 구조에 있어서, SVG 심볼 정의 포맷에 입력, 출력 핀(pin)의 엘리먼트와 SVG 그래픽에 연결선(link)엘리먼트가 포함된 에스브이지 그래픽 파일 포맷을 이용하여 플로우 기반 프로그래밍을 표현하기 위한 파일 포맷 구조를 제공한다.The present invention provides a file format structure for expressing flow-based programming using a W3C graphic file format SVG (Scalable Vector Graphics, SVG), an input and output pin element in an SVG symbol definition format, and a connection line to an SVG graphic (link) Provides a file format structure for expressing flow-based programming using the SBG graphic file format including elements.

또한 본 발명은 핀(pin)엘리먼트의 정의는 심볼 엘리먼트 하위에 핀(pin)엘리먼트 정보가 위치하며, 핀(pin)엘리먼트 하위에 영역설정이 가능한 그래픽 엘리먼트가 위치되고, 핀(pin)엘리먼트의 정의는 심볼 엘리먼트 하위에 영역설정이 가능한 그래픽 엘리먼트가 위치하며, 그래픽 엘리먼트 하위에 핀(pin)엘리먼트가 위치되는 특징을 갖는 에스브이지 그래픽 파일 포맷을 이용하여 플로우 기반 프로그래밍을 표현하기 위한 파일 포맷 구조을 제공한다.In addition, in the present invention, the definition of a pin element includes pin element information below a symbol element, a graphic element capable of setting a region below a pin element, and definition of a pin element. Provides a file format structure for expressing flow-based programming using the SBG graphic file format, which has a feature in which a configurable graphic element is located under the symbol element and a pin element is located under the graphic element. do.

또한 본 발명은 연결선(link)엘리먼트의 엘리먼트는 SVG 엘리먼트 하위에 연결선(link)엘리먼트 정보가 위치하며, 연결선(link)엘리먼트 하위에 라인설정이 가능한 그래픽 엘리먼트가 위치되고, 연결선(link)엘리먼트의 정의는 SVG 엘리먼트 하위에 라인설정이 가능한 그래픽 엘리먼트 정보가 위치하며, 그래픽 엘리먼트 하위에 연결선(link)엘리먼트 정보가 위치되는 특징을 갖는 에스브이지 그래픽 파일 포맷을 이용하여 플로우 기반 프로그래밍을 표현하기 위한 파일 포맷 구조를 제공한다.In addition, according to the present invention, in the element of the link element, the link element information is located below the SVG element, the graphic element capable of setting the line is located under the link element, and the definition of the link element is provided. Is a file format for expressing flow-based programming using the SVG graphic file format, which has the feature that the line-configurable graphic element information is located below the SVG element and the link element information is located below the graphic element. Provide structure.

또한 본 발명은 핀(pin)엘리먼트의 속성 입출력정의, 변수의 타입, 초기값 정보를 포함하고, 연결선(link) 엘리먼트는 입력 use객체의 아이디와 출력 use객체의 아이디, 입력단 핀(pin)의 이름 출력단 핀(pin)의 이름 정보를 포함하는 특징을 갖는 파일 에스브이지 그래픽 파일 포맷을 이용하여 플로우 기반 프로그래밍을 표현하기 위한 파일 포맷 구조를 제공한다.In addition, the present invention includes a pin element attribute input / output definition, variable type, and initial value information, and a link element includes an input use object ID, an output use object ID, and an input pin name. It provides a file format structure for expressing flow-based programming using a file SBG graphic file format having characteristics including name information of an output pin.

또한 본 발명은 확장된 SVG 파일 포맷기반의 플로우 파일 포맷 구조에 있어서, 그래픽 리소스를 제외한 심볼이름, 노드의 아이디, 입력 핀 리스트 정보, 출력 핀 리스트 정보를 포함하는 특징을 갖는 에스브이지 그래픽 파일 포맷을 이용하여 플로우 기반 프로그래밍을 표현하기 위한 파일 포맷 구조를 제공한다.In addition, the present invention is a SV file format structure based on the extended SVG file format, which includes a symbol name excluding a graphic resource, an ID of a node, input pin list information, and output pin list information. To provide a file format structure for expressing flow-based programming.

또한 본 발명은 상기의 에스브이지 그래픽 파일 포맷을 이용하여 플로우 기반 프로그래밍을 표현하기 위한 파일 포맷 구조에 적용되는 파일 포맷은 입력정보에 자신의 핀이름, 자신 핀 타입, 자신 핀의 배열 정보, 자신 핀의 인터페이스 타입, 자신 핀의 초기값, 입력핀의 심볼 이름, 입력핀의 심볼 아이디, 입력핀의 이름, 입력핀의 인터페이스 타입을 포함하는 것을 특징으로 하는 파일 포맷 구조를 제공한다.In addition, the present invention is a file format applied to the file format structure for expressing flow-based programming using the above SBG graphic file format, its pin name in its input information, its own pin type, its own pin information, its own It provides a file format structure characterized by including the interface type of the pin, the initial value of the pin, the symbol name of the input pin, the symbol ID of the input pin, the name of the input pin, and the interface type of the input pin.

또한 본 발명은 상기의 에스브이지 그래픽 파일 포맷을 이용하여 플로우 기반 프로그래밍을 표현하기 위한 파일 포맷 구조에 적용되는 파일 포맷은 출력정보에 자신의 핀이름, 자신 핀 타입, 자신 핀의 배열 정보, 자신 핀의 인터페이스 타입, 자신 핀의 초기값, 출력핀의 심볼 이름, 출력핀의 심볼 아이디, 출력핀의 이름, 출력핀의 인터페이스 타입을 포함하는 것을 특징으로 하는 파일 포맷 구조를 제공한다.In addition, the present invention is a file format applied to the file format structure for expressing flow-based programming using the above SBG graphic file format, its pin name, its own pin type, its own pin array information, its own It provides a file format structure characterized by including the pin's interface type, the initial value of its pin, the symbol name of the output pin, the symbol ID of the output pin, the name of the output pin, and the interface type of the output pin.

본 발명의 파일 포맷 및 그 구조를 제공함으로써, 소프트웨어 개발시 이용되는 플랫폼에서 SVG, XML, JavaScript 등과 같이 다양한 형식이 포함된 W3C 표준기반의 정보를 이용하여 보다 용이하게 플로우 기반 프로그래밍을 표현 및 연동할 수 있는 효과가 있다.By providing the file format and its structure of the present invention, flow-based programming can be more easily expressed and interlocked using W3C standards-based information including various formats, such as SVG, XML, and JavaScript, on platforms used in software development. It has the effect.

도 1은 본 발명에 따른 구성도이다.
도 2와 도 3은 본 발명에 따른 확장포맷의 예시이다.
도 4는 본 발명의 핀(pin)엘리먼트의 구조도이다.
도 5는 본 발명에 따른 확장된 핀(pin)엘리먼트를 포함한 심볼의 디스플레이 예시이다.
도 6은 연결선(link)객체의 확장 포맷 예시이다.
도 7은 연결선(link)엘리먼트의 구조도이다.
도 8은 use객체의 핀(pin)객체와 연결선(link) 정보를 통한 디스플레이 예시이다.
도 9는 플로우 기반 프로그래밍을 위한 플로우 파일 포맷의 예시이다.
1 is a configuration diagram according to the present invention.
2 and 3 are examples of an extended format according to the present invention.
4 is a structural diagram of a pin element of the present invention.
5 is an exemplary display of a symbol including an extended pin element according to the present invention.
6 is an example of an extended format of a link object.
7 is a structural diagram of a link element.
8 is an example of a display using pin information of a use object and link information.
9 is an example of a flow file format for flow-based programming.

이하에서 통상의 기술자가 본 발명을 용이하게 실시할 수 있도록 도면을 참조하여 상세하게 설명하도록 한다.Hereinafter will be described in detail with reference to the drawings so that a person skilled in the art can easily implement the present invention.

본 발명은 SVG의 심볼(sybmol) 정의에 핀(pin)엘리먼트 정보를 정의한다. 심볼(sybmol) 정의는 W3C에서 정의한 SVG 심볼 특성에 따라 use태그 정보를 통하여 적용된다. use엘리먼트 속성중 하나인 “xlink:href”는 정의된 심볼과의 연결 고리 역할을 수행한다.The present invention defines pin element information in the SVG symbol definition. The symbol (sybmol) definition is applied through use tag information according to the SVG symbol characteristics defined in W3C. One of the use element attributes, “xlink: href”, serves as a link to the defined symbol.

본 발명에서 확장된 핀(pin)엘리먼트는 컴포넌트의 정보를 담고 있는 컨테이너의 역할을 수행한다. 이러한 정보에는 변수, 배열의 정보를 담는 용도로 사용된다. 또한, 외부의 참조정보를 지시하는 용도로 사용될 수 도 있다. 핀(pin)엘리먼트는 연결선을 통하여 다른 객체의 핀(pin)노드와 연결되는 특성을 갖는다. The pin element extended in the present invention serves as a container that contains information of a component. This information is used to hold information of variables and arrays. In addition, it may be used to indicate external reference information. The pin element has a characteristic of being connected to a pin node of another object through a connecting line.

이와 같은 본 발명 에스브이지 그래픽 파일 포맷을 이용하여 플로우 기반 프로그래밍을 표현하기 위한 파일 포맷 및 그 구조에 대해서 도 1의 에스브이지 그래픽 파일 포맷을 이용하여 플로우 기반 프로그래밍을 표현하기 위한 파일 포맷 구조를 도시하기 위한 구조도를 참조하여 상세하게 설명하면, 본 발명의 에스브이지 그래픽 파일 포맷을 이용하여 플로우 기반 프로그래밍을 표현하기 위한 파일 포맷 구조는 심볼정의부(10)와 그래픽 구현부(20) 및 오브젝트 정렬부(30)로 구성된다.A file format structure for expressing flow-based programming using the SBG graphic file format of FIG. 1 with respect to the file format and its structure for expressing flow-based programming using the SBG graphic file format of the present invention In detail with reference to the structural diagram for illustration, the file format structure for expressing flow-based programming using the SBG graphic file format of the present invention includes a symbol definition unit 10, a graphic implementation unit 20, and an object. It is composed of an alignment unit (30).

상기 심폴정의부(10)에는 핀(pin)엘리먼트(100)가 포함되고, 그래픽 구현부(20)에는 연결선엘리먼트(200)가 포함된다.The sympole definition unit 10 includes a pin element 100 and a graphic implementation unit 20 includes a connection line element 200.

보다 상세하게 설명하면, 상기 심볼정의부(10)에는 입력, 출력 또는 상수에 해당하는 핀(pin)엘리먼트 정보가 포함된다.(도 2 참조)In more detail, the symbol definition unit 10 includes pin element information corresponding to an input, output, or constant (see FIG. 2).

이와 같은 입력, 출력 또는 상수에 해당하는 핀(pin)엘리먼트 정보를 심볼 핀 정의라고 칭하도록 한다.Pin element information corresponding to the input, output, or constant is referred to as a symbol pin definition.

이는 심볼 태그 하위에 핀(pin)엘리먼트 정보가 포함되거나, 그래픽 엘리먼트 하위에 핀(pin)엘리먼트 정보를 포함하는 것도 가능하다.(도 3 참조)This may include pin element information below the symbol tag or pin element information below the graphic element (see FIG. 3).

이때, 상기 그래픽 엘리먼트는 심볼정의부(10)에 더 포함될 수 있는 것이다.In this case, the graphic element may be further included in the symbol definition unit 10.

여기서, 그래픽 엘리먼트를 포함하여 확장된 형태일 경우 핀(pin)엘리먼트의 속성 정보는 변수의 이름에 해당하는“name”, 입출력을 정의하는 “type”, 변수의 타입 정보를 정의하는 “var-type”, 초기값을 정의하는 “default-value”, 변수의 타입을 자동으로 변경 정의하는 “auto”, 자동 변수에 대한 인터페이스 “auto-interface”속성을 포함한다. 각 속성의 이름은 실시 예이며, 추가된 핀(pin) 엘리먼트정보에는 각각의 속성이 포함되는 특징을 갖는다.Here, in the extended form including graphic elements, the property information of the pin element is “name” corresponding to the variable name, “type” defining input / output, and “var-type” defining variable type information. ”,“ Default-value ”for defining initial values,“ auto ”for automatically changing and defining variable types, and“ auto-interface ”properties for automatic variables. The name of each attribute is an example, and each attribute is included in the added pin element information.

상기와 같은 속성에는 '핀 이름', '핀 설명', '핀 정보(입력-Input, 출력-Output, 상수-const)', '변수 타입(int, bool, double, string)', '초기값', '오토 타입 플래그', '오토 변수 타입' 이 있을 수 있다.The above properties include 'pin name', 'pin description', 'pin information (input-input, output-output, constant-const)', 'variable type (int, bool, double, string)', 'initial value' There may be ',' auto type flag ', and' auto variable type '.

이와 같이 추가된 핀(pin) 엘리먼트(101)의 서브엘리먼트에는 디스플레 표현을 위한 그래픽 속성이 포함되거나, 또다른 형태의 추가된 핀(pin) 엘리먼트(102)와 같이 그래픽 엘리먼트의 서브엘리먼트에 핀(pin)엘리먼트가 더 포함되는 특징을 갖는다.The sub-element of the added pin element 101 includes a graphic attribute for display, or a pin (sub-element) of the graphic element, such as another type of added pin element 102. pin) It has a characteristic that the element is further included.

상기 그래픽 엘리먼트의 속성에는 원객체, 사각형 객체 엘리먼트 등 영역이 존재하는 그래픽 엘리먼트를 포함시킬 수 있으며, 그래픽 리소스의 속성에는 SVG의 속성을 상속받아 적용하게 된다.The attribute of the graphic element may include a graphic element having an area such as an original object or a square object element, and the attribute of the SVG is inherited and applied to the attribute of the graphic resource.

상기와 같은 확장된 핀(pin)엘리먼트를 보다 상세하게 설명하기 위해 도 5를 참조하도록 한다.Reference will be made to FIG. 5 to describe the extended pin element in more detail.

도 5에 의하면, 핀(pin)엘리먼트와 그래픽 엘리먼트정보를 통하여 현시된 정보(401)는 플로우 프로그램 편집 수행시, 해당 그래픽 영역을 통하여 연결선이 연결할 수 있는 정보로 활용될 수 있다.According to FIG. 5, the information 401 displayed through pin elements and graphic element information may be used as information that a connection line can connect through a corresponding graphic area when performing flow program editing.

이때, 각각의 그래픽 객체(400, 402)와 같이 심볼의 디스플레이 정보를 제공하기 위한 디자인 적인 요소로 활용될 수 있다.At this time, it can be used as a design element for providing the display information of the symbol, such as each of the graphic objects (400, 402).

여기서 디자인 적인 요소라 함은 디스플레이 정보를 제공할 때, 시각적인 표현이 가능한 것을 말하는 것이다. Here, the design element means that visual expression is possible when providing display information.

이와 같이 핀(pin)엘리먼트가 추가된 심볼을 이용하여 심볼간의 플로우 연결을 수행함에 있어 연결선을 위한 정의가 필요하게 되는데, 확장된 심볼을 이용하여 use객체 간의 연결선을 표현하기 위하여는 연결선 엘리먼트를 포함하게 된다.(도 6 참조)In order to perform flow connection between symbols using a symbol in which a pin element is added as described above, a definition for a connection line is required. In order to express a connection line between use objects using an extended symbol, a connection line element is included. (See FIG. 6).

도 6에서와 같이 연결선(link) 엘리먼트는 입력 use객체의 아이디와 출력 use객체의 아이디, 입력단 핀(pin)의 이름 출력단 핀(pin)의 이름을 포함하는 특징을 갖는다.As shown in FIG. 6, the link element has a characteristic including an ID of an input use object, an ID of an output use object, and a name of an input terminal pin.

또한, 본 발명에 따른 연결선(link)엘리먼트의 구조를 도시한 도 7을 참조하여 설명하면, 그래픽 구현부(20)의 연결선(link)엘리먼트(201)의 하위에 그래픽 엘리먼트를 포함하는 특징을 갖는다.In addition, referring to FIG. 7 showing the structure of a link element according to the present invention, it has a feature of including a graphic element under the link element 201 of the graphic implementation 20. .

여기서, 상기와 같이 연결선을 활용할 수 있는 그래픽 엘리먼트인 라인 그래픽엘리먼트(202)는 polline, line, path 등을 적용할 수 있으며, 이는 링크(LINK)를 통하여 제공 받을 수도 있다.Here, the line graphic element 202, which is a graphic element that can utilize the connection line as described above, may apply polline, line, path, etc., which may be provided through a link (LINK).

또한, 이에 대하여 도 8과 같이 use객체의 핀(pin)객체와 연결선(link) 정보를 통한 디스플레이를 구현할 수 있는데, 연결선(link)엘리먼트 정보와 심볼이름, 아이디, 입력정보를 포함하여 추가된 노드(NODE)의 연결선 정보에 따라 시작노드를 기준으로 마지막 연결선에 도달하는 순으로 저장되어 제공된다.In addition, as shown in FIG. 8, a display through a pin object of a use object and link information may be implemented, and additional nodes including link element information, symbol name, ID, and input information According to the connection information of (NODE), it is stored and provided in the order of reaching the last connection line based on the starting node.

이는 외부 프로세서에서 효율적으로 적용할 수 있도록 하기 위한 것이다.This is to enable efficient application from an external processor.

물론, 앞서 설명한데로 순차적으로 저장되는 방식 이외에 개별 노드에 저장되어도 무방하다.Of course, as described above, it may be stored in individual nodes in addition to the sequentially stored method.

이와 같은 파일 포맷구조를 가지는 파일포맷을 이용하여 플로우 파일을 생성할 때, 플로우 파일정보는 도 9와 같이 그래픽 리소스가 포함되지 않은 노드의 정보만이 포함되는 특징을 갖는다. 노드의 정보는 심볼 이름, 노드 아이디, 입력 핀 리스트 정보, 출력 핀 리스트 정보를 포함한다.When a flow file is generated using a file format having such a file format structure, as shown in FIG. 9, the flow file information has a characteristic that only information of a node that does not include a graphic resource is included. The node information includes symbol name, node ID, input pin list information, and output pin list information.

노드의 입력정보("input")는 도 2의 심볼 핀 정의 정보와 연계되어 입력(input, const) 속성을 제공하는 특징을 갖는다.The input information of the node ("input") has a feature of providing input (const) attributes in connection with symbol pin definition information of FIG. 2.

노드의 출력정보("output")는 심볼 핀정의 정보와 연계되어 출력(output) 속성을 제공하는 특징을 갖는다.The node's output information ("output") has a feature of providing an output attribute in association with symbol pin definition information.

또한, 확장된 SVG 파일 포맷은 핀(pin) 정의에 앞서 설명한 심볼 핀 정의를 통하여 입력, 출력, 상수 핀에 대하여 정의되었으며, 입력, 상수 핀에 대하여 노드정보를 포함하게 된다.In addition, the extended SVG file format is defined for the input, output, and constant pins through the symbol pin definition described above, and includes node information for the input and constant pins.

상기 노드정보는 '자신의 핀이름', '자신 핀 타입(int, bool, float, double, string)', '자신 핀 초기값', '저장 타입', '자신 핀의 배열 정보', '자신 핀의 인터페이스 타입', '자신 핀의 초기값', '입력핀의 심볼 이름', '입력핀의 심볼 아이디', '입력핀의 이름', '입력핀의 인터페이스 타입'을 포함하게 된다.The node information includes 'own pin name', 'own pin type (int, bool, float, double, string)', 'own pin initial value', 'storage type', 'own pin array information', and 'own pin' It includes' pin 'interface type', 'initial value of own pin', 'symbol name of input pin', 'symbol ID of input pin', 'name of input pin', and 'interface type of input pin'.

이와 같은 SVG파일 포맷의 핀(pin) 및 연결선(link)엘리먼트는 플로우 파일의 포맷에 적용할 수 있도록 하는 것으로, 플로우 파일 포맷의 output 정보에 포함되는 속성으로는 '자신 핀이름', '자신 핀 타입(int, bool, float, double, string)', '자신 핀 초기값 저장 타입(text, binary)', '자신 핀의 배열정보', '자신 핀의 인터페이스 타입', '자신 핀의 초기값', '출력핀의 심볼 이름', '출력핀의 심볼 아이디', '출력핀의 이름', '출력핀의 인터페이스 타입'이 포함되고, 확장 정의된 SVG파일 포맷의 핀(pin) 및 연결선(link) 엘리먼트 정보와 상관관계를 갖을 수 있다.The pin and link elements of the SVG file format can be applied to the format of the flow file. The attributes included in the output information of the flow file format include 'own pin name' and 'own pin'. Type (int, bool, float, double, string) ',' Own pin initial value storage type (text, binary) ',' Own pin array information ',' Own pin interface type ',' Own pin initial value Includes', 'symbol name of output pin', 'symbol ID of output pin', 'name of output pin', and 'interface type of output pin', and pins and connection lines of the SVG file format defined extended ( link) It can be correlated with element information.

예를 들어, 심볼의 정의에 입력 핀 3개, 출력 핀 2개를 정의하여 적용하였을 경우, 해당 플로우 포맷은 input 3개, output 정보 2개로 제공된다.For example, when three input pins and two output pins are defined and applied to the symbol definition, the corresponding flow format is provided as three inputs and two output informations.

이와 같이 본 발명에 따른 에스브이지 그래픽 파일 포맷을 이용하여 플로우 기반 프로그래밍을 표현하기 위한 파일 포맷 및 그 구조를 제공함으로써, 편집기 및 랜더러 개발 시 정의된 핀(pin)과 링크(link)의 포맷 정보와 플로우 파일의 포맷정보가 유기적으로 연결될 수 있도록 하여, 다양한 형식이 포함된 W3C 표준기반의 정보를 이용하여 보다 용이하게 플로우 기반 프로그래밍을 표현 및 연동할 수 있도록 할 수 있는 것이다.As described above, by providing a file format and its structure for expressing flow-based programming using the SBG graphic file format according to the present invention, the format information of pins and links defined during editor and renderer development By allowing the format information of and flow files to be organically linked, it is possible to more easily express and link flow-based programming using W3C standards-based information including various formats.

10 : 심볼정의부 20 : 그래픽 구현부
30 : 오브젝트 정렬부 100 : 핀(pin)엘리먼트
101, 102 : 추가된 핀(pin)엘리먼트 200 : 연결선엘리먼트
201 : 연결선(link)엘리먼트 202 : 라인 그래픽엘리먼트
400,402 : 그래픽 객체 401 : 현시된 정보
10: symbol definition unit 20: graphic implementation unit
30: object alignment unit 100: pin (pin) element
101, 102: added pin element 200: connection line element
201: link element 202: line graphic element
400,402: Graphic object 401: Presented information

Claims (4)

W3C 그래픽 파일 포맷 SVG(Scalable Vector Graphics, SVG)를 이용하여 플로우 기반 프로그래밍을 표현하기 위한 파일 포맷 구조를 포함하되,
상기한 파일 포맷 구조는 심볼정의부(10)와 그래픽 구현부(20) 및 오브젝트 정렬부(30)로 구성되고,
상기한 심볼정의부(10)에는 핀(pin)엘리먼트(100)가 포함되고, 그래픽 구현부(20)에는 연결선엘리먼트(200)가 포함되고,
SVG 심볼 정의 포맷에 입력, 출력 핀(pin)엘리먼트와 SVG 그래픽에 연결선(link)엘리먼트가 포함된 에스브이지 그래픽 파일 포맷을 이용하여 플로우 기반 프로그래밍을 표현하되,
심볼(sybmol) 정의는 W3C에서 정의한 SVG 심볼 특성에 따라 use태그 정보를 통하여 적용되고, use엘리먼트 속성중 하나인 “xlink:href”는 정의된 심볼과의 연결 고리 역할을 수행하고,
핀(pin)엘리먼트의 정의는 심볼 엘리먼트 하위에 핀(pin)엘리먼트 정보가 위치하며, 핀(pin)엘리먼트 하위에 영역설정이 가능한 그래픽 엘리먼트가 위치되고, 핀(pin)엘리먼트의 정의는 심볼 태그 하위에 영역설정이 가능한 그래픽 엘리먼트가 위치하며, 그래픽 엘리먼트 하위에 핀(pin)엘리먼트가 위치되는 특징을 갖고,
심볼 태그 하위에 핀(pin)엘리먼트 정보가 포함되거나, 그래픽 엘리먼트 하위에 핀(pin)엘리먼트 정보를 포함하고,
추가된 핀(pin) 엘리먼트(101)의 서브엘리먼트에는 디스플레 표현을 위한 그래픽 속성이 포함되거나, 또 다른 형태의 추가된 핀(pin) 엘리먼트(102)의 그래픽 엘리먼트의 서브엘리먼트에 핀(pin)엘리먼트가 더 포함되며,
상기 그래픽 엘리먼트 및 확장된 핀(pin)엘리먼트는 심볼정의부(10)에 더 포함되되,
확장된 핀(pin)엘리먼트와 그래픽 엘리먼트 정보를 통하여 현시된 정보(401)는 플로우 프로그램 편집 수행시, 해당 그래픽 영역을 통하여 연결선이 연결할 수 있는 정보로 활용되고, 각각의 그래픽 객체(400, 402)와 같이 심볼의 디스플레이 정보를 제공하기 위한 디자인적인 요소로 활용되게 되며,
연결선(link)엘리먼트의 정의는 SVG 엘리먼트 하위에 연결선(link)엘리먼트 정보가 위치하며, 연결선(link)엘리먼트 하위에 라인설정이 가능한 그래픽 엘리먼트가 위치되고, 연결선(link)엘리먼트의 정의는 SVG 엘리먼트 하위에 라인설정이 가능한 그래픽 엘리먼트 정보가 위치하며, 그래픽 엘리먼트 하위에 연결선(link)엘리먼트 정보가 위치되는 특징을 갖으며,
상기와 같이 연결선을 활용할 수 있는 그래픽 엘리먼트인 라인 그래픽엘리먼트(202)는 polline, line 또는 path가 적용되고 링크(LINK)를 통하여 제공 받으며,
상기한 연결선(link) 엘리먼트는 입력 use객체의 아이디와 출력 use객체의 아이디, 입력단 핀(pin)의 이름 출력단 핀(pin)의 이름을 포함하는 구성으로 되는 것을 특징으로 하는 파일 포맷 구조를 포함하는 컴퓨터 시스템.
W3C graphic file format includes a file format structure for expressing flow-based programming using SVG (Scalable Vector Graphics).
The above-described file format structure is composed of a symbol definition unit 10, a graphic implementation unit 20, and an object alignment unit 30,
The pin definition element 10 includes the pin element 100, and the graphic implementation unit 20 includes the connection line element 200,
Expresses flow-based programming using the SVG graphic file format that includes input and output pin elements in SVG symbol definition format and link elements in SVG graphics.
The symbol (sybmol) definition is applied through use tag information according to the SVG symbol characteristics defined in W3C, and one of the use element attributes, “xlink: href”, serves as a link to the defined symbol,
In the definition of the pin element, pin element information is located below the symbol element, and a graphic element capable of setting a region is located below the pin element, and the definition of the pin element is below the symbol tag. The graphic element that can be set in the area is located, and the pin element is located below the graphic element.
The pin element information is included under the symbol tag, or the pin element information is included under the graphic element,
The sub-element of the added pin element 101 includes a graphic attribute for displaying a display, or a pin element in another form of the sub-element of the graphic element of the added pin element 102 Is further included,
The graphic element and the extended pin element are further included in the symbol definition unit 10,
The information 401 displayed through the extended pin element and graphic element information is used as information that the connection line can connect through the corresponding graphic area when performing flow program editing, and each graphic object 400 or 402 As such, it will be used as a design element to provide the display information of the symbol.
In the definition of the link element, the link element information is located under the SVG element, the graphic element capable of setting the line is located under the link element, and the definition of the link element is the SVG element. The graphic element information that can be set in the line is located, and the link element information is located below the graphic element.
As described above, the line graphic element 202, which is a graphic element that can utilize the connection line, is applied with a polline, line, or path and is provided through a link (LINK).
The above-described link element includes a file format structure characterized in that it comprises an ID of an input use object, an ID of an output use object, and a name of an input terminal pin. Computer system.
삭제delete 삭제delete 제1항에 있어서,
핀(pin)엘리먼트 속성은 입출력정의, 변수의 타입, 초기값 정보를 포함하고, 연결선(link) 엘리먼트는 입력 use객체의 아이디와 출력 use객체의 아이디, 입력단 핀(pin)의 이름 출력단 핀(pin)의 이름 정보를 포함하는 특징을 갖는 파일 에스브이지 그래픽 파일 포맷을 이용하여 플로우 기반 프로그래밍을 표현하기 위한 파일 포맷 구조를 포함하는 컴퓨터 시스템.

According to claim 1,
The pin element attribute includes input / output definition, variable type, and initial value information, and the link element contains the ID of the input use object and the ID of the output use object, the name of the input terminal pin, the output terminal pin Computer file system including a file format structure for expressing flow-based programming using a file SBG graphic file format having characteristics including name information of).

KR1020180064717A 2018-06-05 2018-06-05 a file format for expressing the flow based programming by using the svg graphic file format and the file format structure KR102111279B1 (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020180064717A KR102111279B1 (en) 2018-06-05 2018-06-05 a file format for expressing the flow based programming by using the svg graphic file format and the file format structure

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020180064717A KR102111279B1 (en) 2018-06-05 2018-06-05 a file format for expressing the flow based programming by using the svg graphic file format and the file format structure

Publications (2)

Publication Number Publication Date
KR20190138368A KR20190138368A (en) 2019-12-13
KR102111279B1 true KR102111279B1 (en) 2020-05-19

Family

ID=68847229

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020180064717A KR102111279B1 (en) 2018-06-05 2018-06-05 a file format for expressing the flow based programming by using the svg graphic file format and the file format structure

Country Status (1)

Country Link
KR (1) KR102111279B1 (en)

Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2009238215A (en) * 2008-03-03 2009-10-15 Just Syst Corp Data processing device and data processing method

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR101728786B1 (en) 2014-12-29 2017-04-25 이엔유 주식회사 Component-based dynamic image display system and method using the svg file format

Patent Citations (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2009238215A (en) * 2008-03-03 2009-10-15 Just Syst Corp Data processing device and data processing method

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
Ashley Davis, "Implementing a Flowchart with SVG and AngularJS"(2016.11.)

Also Published As

Publication number Publication date
KR20190138368A (en) 2019-12-13

Similar Documents

Publication Publication Date Title
US20190236118A1 (en) Filtered stylesheets
US10565293B2 (en) Synchronizing DOM element references
US10013245B2 (en) Systems and methods for converting typed code
CN107066618B (en) Method and device for displaying converted webpage
US7849439B2 (en) Application-generic sequence diagram generator driven by a non-proprietary language
US7941746B2 (en) Extended cascading style sheets
US9152619B2 (en) System and method for constructing markup language templates and input data structure specifications
WO2019214539A1 (en) Document display method and apparatus
CN112100550A (en) Page construction method and device
US9141596B2 (en) System and method for processing markup language templates from partial input data
US20200117704A1 (en) System and method to convert a webpage built on a legacy framework to a webpage compatible with a target framework
US20160012144A1 (en) Javascript-based, client-side template driver system
CN111158687B (en) Interface generation method and device of JAVA plugin, computer equipment and storage medium
CN110727429B (en) Front-end page generation method, device and equipment
US20160012147A1 (en) Asynchronous Initialization of Document Object Model (DOM) Modules
CN116954450A (en) Screenshot method and device for front-end webpage, storage medium and terminal
CN112947900A (en) Web application development method and device, server and development terminal
KR20090000199A (en) Web server application framework, web application processing method using the framework and computer readable medium processing the method
CN112764757A (en) Applet processing method, device, equipment and storage medium
CN111078529B (en) Client writing module testing method and device and electronic equipment
CN113721910A (en) Interface code generation method and device, electronic equipment and computer readable medium
KR102111279B1 (en) a file format for expressing the flow based programming by using the svg graphic file format and the file format structure
CN112486378B (en) Graph generation method, device, terminal and storage medium
US11843679B2 (en) Automated dependency management based on page components
US9916315B2 (en) Computer implemented system and method for comparing at least two visual programming language files

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