KR101728786B1 - 에스브이지 파일 포맷을 이용한 컴포넌트 기반의 동적 이미지 표시 시스템 및 방법 - Google Patents

Abstract

본 발명은 SVG파일 포맷과 컴포넌트를 이용한 HMI(Human Machine Interface)를 시각적으로 쉽게 표현할 수 있도록 하는 SVG 파일 포맷을 이용한 컴포넌트 기반의 동적 이미지 표시 시스템 및 그 방법에 관한 것으로, 상기 SVG 이미지 표시 장치로부터 파일을 로드하는 SVG 파일 로드단계(S10)와, 로드된 SVG파일을 라이브러리 메모리 스택(20) 및 픽쳐 메모리 스택(30)으로 분류하는 메모리 스택 분류단계(S20)와, 상기 분류된 메모리 스택이 라이브러리인 경우 라이브러리 메모리를 생성하는 라이브러리 생성단계(S30) 및 분류된 메모리 스택이 픽쳐인 경우 픽쳐 메모리를 생성하는 픽쳐 생성단계(S40)와, 상기 라이브러리 및 픽쳐를 로드한 뒤 스케쥴링 모듈(60) 및 이벤트 처리모듈(50)을 이용하여 스크립트를 처리하는 스크립트 처리단계(S50)와, 연산된 결과를 렌더링하는 렌더링단계(S60)로 구성된다.
이에 따라서, 기본 객체를 응용하여 사용자가 커스텀 컴포넌트를 생성할 수 있는 환경을 만들어 주는 효과가 있다.

Description

에스브이지 파일 포맷을 이용한 컴포넌트 기반의 동적 이미지 표시 시스템 및 방법{COMPONENT-BASED DYNAMIC IMAGE DISPLAY SYSTEM AND METHOD USING THE SVG FILE FORMAT}

본 발명은 스카다 시스템의 HMI(Human Machine Interface)를 통한 동적 이미지 표시 시스템에 관한 것으로, 보다 상세하게는 SVG파일 포맷과 컴포넌트를 이용한 HMI(Human Machine Interface)를 시각적으로 쉽게 표현할 수 있도록 하는 SVG 파일 포맷을 이용한 컴포넌트 기반의 동적 이미지 표시 시스템 및 방법에 관한 것이다.

일반적으로 객체 지향 프로그래밍(Object-Oriented Programming, "OOP")은 프로그래밍의 패러다임으로 컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 여러 개의 독립된 단위, 즉 "객체"들의 모임으로 파악하고자 하는 것이다. 각각의 객체는 메세지를 주고받고 데이터를 처리할 수 있다.

객체 지향 프로그래밍은 프로그램을 유연하고 변경이 용이하게 만들기 때문에 대규모 소프트웨어 개발에 많이 사용된다. 또한 프로그래밍을 더 배우기 쉽게 하고 소프트웨어 개발과 보수를 간편하게 하며, 보다 직관적인 코드 분석을 가능하게 하는 장점을 갖고 있다. 그러나 지나친 프로그램의 객체화 경향은 실제 세계의 모습을 그대로 반영하지 못한다는 비판을 받기도 한다.

스택(Stack)은 자료 구조의 방법 중 하나이며 제한적으로 접근할 수 있는 나열구조이다. 접근 방법은 언제나 목록의 끝에서만 일어난다. 스택은 한 쪽 끝에서만 자료를 넣거나 뺄 수 있는 선형구조(First In Last Out, 이하 "FILO"이라함.)로 되어 있다. 프로그래밍을 할 때는 자료를 넣는 것을 '밀어 넣는다'하여 푸시(Push)라 하고 반대로 넣어둔 자료를 꺼내는 것을 팝(Pop)이라고 하는데, 이때 꺼내지는 자료는 가장 최근에 보관한 자료부터 나오게 된다. 이처럼 나중에 넣은 값이 먼저 나오는 것을 선형 구조(FILO)라고 한다.

또한, 스택(Stack)에는 픽쳐 메모리 스택(30)과 라이브러리 메모리 스택(20)의 두종류가 있고, 상기 픽쳐 메모리 스택(30)은 defs이외의 객체들을 저장하며 유즈(use)앨리먼트가 있다면 라이브러리 메모리 스택(20)에서 동일한 ID의 컴포넌트(심볼 구조체 메모리)를 복사하여 저장하며, 상기 라이브러리 메모리 스택(20)은 곧바로 컴포넌트(심볼 구조체 메모리)를 저장하는 특징이 있다.

프로그래밍이나 엔지니어링에서 말하는 컴포넌트란 더 큰 프로그램이나 구조물에서 식별 가능한 "일부분"이다. 대체로, 컴포넌트는 특정 기능이나 관련된 기능들의 조합을 제공한다. 프로그래밍 설계에서 시스템은 모듈로 구성된 컴포넌트로 나뉜다. 컴포넌트 시험이란 컴포넌트를 구성하는 모든 관련된 모듈이 상호 작동을 잘하는 조합인가 시험하는 것을 의미한다.

객체 지향 프로그래밍과 분산객체기술에서의 컴포넌트는 재사용이 가능한 프로그램 빌딩 블록으로서, 하나의 애플리케이션을 형성하기 위해 같은 컴퓨터에 있거나 또는 네트워크상의 다른 컴퓨터에 있는 컴포넌트들과 조합될 수 있다.

컴포넌트는 네트워크상에 있는 다른 서버들로 배포될 수 있으며, 필요한 서비스를 위해 서로 통신할 수 있다. 컴포넌트는 컨테이너라 불리는 환경 내에서 동작하는데 컨테이너의 예로는 웹 페이지나 웹 브라우저, 그리고 워드프로세서 등을 들 수 있다.

스크립트 언어(Scripting Language)란 컴퓨터 프로그래밍 언어로서 응용 소프트웨어를 제어한다. 스크립트 프로그래밍 언어라고도 한다. 스크립트 언어는 응용프로그램과 독립하여 사용되고 일반적으로 응용프로그램의 언어와 다른 언어로 사용되어 최종사용자가 응용프로그램의 동작을 사용자의 요구에 맞게 수행할 수 있도록 해준다. 스크립트(Scripts)는 연극 용어인 스크립트에서 유래되었으며 초창기 스크립트 언어는 배치언어(Batch Language) 또는 작업 제어 언어(Job Control Language)라고도 불리었다.

스카다(Supervisory Control and Data Acquisition, 이하 "SCADA"이라함.)는 집중 원격감시 제어시스템 또는 감시 제어 데이터 수집시스템이라고도 하는 스카다 시스템의 감시 제어기능을 말한다. 스카다 시스템은 통신 경로상의 아날로그 또는 디지털 신호를 사용하여 원격장치의 상태정보 데이터를 원격 소장치(Remote Terminalunit)로 수집, 수신,기록,표시하여 중앙 제어 시스템이 원격 장치를 감시 제어하는 시스템을 말하며 발전, 송배전시설, 석유화학 플랜트, 제철공정 시설, 공장 자동화 시설 등 여러 종류의 원격지 시설 장치를 중앙 집중식으로 감시 제어하는 시스템이다.

SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 표한하기 위한 XML기반의 파일 형식으로 SVG형식의 이미자와 그 작동은 XML텍스트 파일들로 정의 되어 검색화,목록화,스크립트화가 가능하며 필요하다면 압축도 가능하다.

SVG는 1999년 W3C(World Wide Web Consortium)의 주도하에 개발된 오픈 표준의 벡터 그래픽 파일 형식으로 현재 마이크로소프트의 인터넷 익스플로러 9버전이상과 크롬, 사파리 등 대부분의 웹 브라우저에서 지원하는 형식이다.

이와 같은 종래의 기술로는 대한민국 등록특허 제10-1262850호(캐싱 기법을 이용한 SVG 이미지 출력 장치 및 그 방법, 이하"선행기술"이라함.)가 있다.

상기 선행기술은 SVG 이미지 출력 장치에 관한 것으로서, 파싱된 SVG 파일을 저장하는 저장부; 및 SVG 파일이 입력되면, 상기 SVG 파일에 해당하는 파싱된 SVG 파일이 상기 저장부에 저장되어 있는지를 판단하고, 상기 SVG 파일에 해당하는 파싱된 SVG 파일이 저장되어 있는 경우에는 저장되어 있는 파싱된 SVG 파일을 기반으로 상기 SVG 파일의 SVG 이미지가 생성되도록 처리하는 캐시 제어부를 구비하며,

상기 캐시 제어부는, 상기 SVG 파일에 해당하는 파싱된 SVG 파일이 저장되어 있는 경우, 해당하는 파싱된 SVG 파일을 사용할 것인지 여부를 사용자에게 질의하고, 질의에 대한 사용자 선택에 따라 해당하는 파싱된 SVG 파일을 기반으로 상기 SVG 파일의 SVG 이미지가 생성되도록 처리한다.

그러나 상기의 선행기술에 의해서는 사용자가 프로그램 내에 정의된 기본객체들을 이용하여 편집하는 방식으로 기본 객체만으로 편집하기 때문에 기본객체가 많아야 편집기를 원활하게 쓸 수 있게 된다. 또한, 객체들이 많아지면 객체들의 속성관리가 어려워지는 문제점이 발생한다.

대한민국 등록특허 제10-1262850호(캐싱 기법을 이용한 SVG 이미지 출력 장치 및 그 방법, 등록일자 2013년05월03일)

상기와 같은 문제점을 해결하기 위해 본 발명은 심볼(Symbol)과 유즈(Use)를 사용함에 있어서 특별한 속성을 등록하고 속성의 값을 변경하여 각각의 조합된 객체에 동적인 동작을 적용할 수 있도록 해주고, 유즈(Use)로 사용된 객체마다 별도의 ID를 주고 별도의 컴포넌트(심볼 메모리 구조체)로 관리하여 각각의 사용된 유즈(Use)를 별도의 조합 객체로 사용하고 동적으로 표현하는 데에 그 목적이 있다.

또한, 본 발명은 조합된 객체를 라이브러리에서 컴포넌트로 만들어 등록하여 관리하고 라이브러리에서 생성된 컴포넌트를 복사하고, 등록하여 별도로 관리함으로써 각각의 컴포넌트에 대하여 동적인 표현을 할 수 있도록 하는데에 그 목적이 있다.

상기와 같은 목적을 달성하기 위해 안출된 것으로 본 발명의 시스템 구동 방법은 SVG 이미지 표시 장치로 부터 파일을 로드하는 SVG 파일 로드단계(S10)와, 로드된 SVG파일을 라이브러리 메모리 스택(20) 및 픽쳐 메모리 스택(30)으로 분류하는 메모리 스택 분류단계(S20)와,상기 분류된 메모리 스택이 라이브러리인 경우 라이브러리 메모리를 생성하는 라이브러리 생성단계(S30) 및 분류된 메모리 스택이 픽쳐인 경우 픽쳐 메모리를 생성하는 픽쳐 생성단계(S40)와, 상기 라이브러리 및 픽쳐를 생성한 뒤 스케쥴링 모듈(60) 및 이벤트 처리모듈(50)을 이용하여 스크립트를 처리하는 스크립트 처리단계(S50)와, 라이브러리와 픽쳐의 구조체 데이터를 이용하여 화면에 그려주는 렌더링단계(S60)를 포함한다.

이때, 상기 SVG 파일 로드단계(S10)는, SVG파일을 불러오는 과정에서 SVG파일 포맷의 앨리먼트인 defs를 라이브러리로 분리한다.

여기서 defs는 definition의 약자로 프로그래밍에서 정의를 나타낸다.

또한, 상기 라이브러리 생성단계(S30) 이후에, 상기 라이브러리 메모리 스택(20)에서 심볼의 메모리를 생성하는 심볼 메모리 생성단계(S31)와, 생성된 메모리를 라이브러리 메모리 스택(20)에 추가한다.

또한, 상기 픽쳐 생성단계(S40) 이후에, 상기 픽쳐 메모리 스택(30)은 상기 라이브러리 메모리 스택(20)에서 심볼 구조체 메모리를 복사하고, 픽쳐 메모리에 추가하는 심볼 메모리 복사 및 추가단계(S41)와, 기본 객체에 대해서 기본객체 메모리를 생성하여 픽쳐 메모리 스택(30)에 추가한다.

또한, 상기 스크립트 처리단계(S50)는, 스케쥴링 모듈(60) 및 이벤트처리 모듈을 이용하여 스크립트를 처리하고 처리된 내용을 메모리 스택에 적용할 때 ID를 이용하여 구조체 메모리를 찾아서 데이터를 변경해준다.

또한, 상기 렌더링단계(S60)는, 상기 라이브러리 메모리 스택(20)과 픽쳐 메모리 스택(30)에 생성된 메모리를 각각 추가하고, 상기 픽쳐 메모리 스택(30)에는 기본 객체에 대한 기본객체 메모리를 생성하고, 상기 기본객체 메모리를 이용하여 확장객체를 생성할 수 있다.

또한, 상기 스크립트 처리단계(S50)는, 스케쥴링 모듈(60) 및 이벤트 처리모듈(50)을 이용하여 스크립트를 처리하고, 처리된 내용을 메모리 스택에 적용할 때 ID를 이용하여 구조체 메모리를 찾아서 데이터를 변경해준다.

상기와 같은 구성으로 전체적인 프로세스 중에서 SVG파일을 불러오는 과정에서 XML언어가 잘못 입력 되어있는지 확인하고 잘못된 부분을 알려준다.

그 후, 구조체 메모리를 만들고 데이터가 입력되었다면 구조체 메모리를 이용하여 화면에 띄워준다.

또한, 본 발명의 시스템은 SVG 파일을 앨리먼트 단위로 파싱하여 <defs>앨리먼트의 유/무에 의해서 각각의 메모리 스택으로 보내주는 SVG파일부(10)와, 상기 SVG파일부(10)로부터 분류된 앨리먼트를 이용하여 심볼 구조체 메모리를 생성하고 컴포넌트로 만드는 라이브러리 메모리 스택(20); 및 상기 SVG파일부(10)로부터 분류된 앨리먼트에서 픽쳐 구조체 메모리를 생성하고, <use>앨리먼트가 있다면 라이브러리 메모리 스택(20)에서 동일한ID를 가진 컴포넌트의 메모리를 복사 및 추가하는 픽쳐 메모리 스택(30)과, 상기 라이브러리 및 픽쳐 메모리 스택(30)에서 만들어진 컴포넌트들을 스크립트 처리하기 위한 스크립트 처리모듈(40)과, 시스템에서 특정 이벤트를 받았을 때 이벤트를 처리하는 이벤트처리 모듈과, 상기 입력된 단계에 따른 정보를 처리하는 스케쥴링 모듈(60), 그리고 메모리 스택에 있는 구조체 메모리를 이용하여 화면에 띄워주는 랜더러 모듈(70)을 포함하여 구성된다.

이에 따라서, 본 발명의 SVG 파일 포맷을 이용한 컴포넌트 기반의 동적 이미지 표시 시스템 및 방법을 이용하면, SVG파일을 컴포넌트 형태로 만들어져 재사용하기가 수월해지는 효과가 있다.

또한, 본 발명을 이용하면 기본 객체를 응용하여 사용자가 확장 컴포넌트를 생성할 수 있는 환경을 만들어 주는 다른 효과가 있다.

또한, 본 발명을 이용하면 컴포넌트의 재사용이 가능하여 반복된 그래픽 작업을 하는 분야에서 사용이 가능해지는 또 다른 효과가 있다.

도 1은 본 발명의 SVG 파일을 표시하기 위한 시스템 구성도이다.
도 2는 본 발명의 SVG 파일의 동적 이미지를 표시하기 위한 흐름도이다.
도 3a은 기초 컴포넌트의 파일 포맷을 통한 실제 출력 이미지를 나타내는 예시도이다.
도 3b는 확장 컴포넌트의 파일 포맷을 통한 실제 출력 이미지를 나타내는 예시도이다.
도 4a는 기본적인 SVG파일의 프로그램 형태를 나타내는 예시도이다.
도 4b는 도 4a의 프로그램 구조를 나타내는 구조도이다.
도 5a는 도 4a의 심볼을 사용한 다른 파일의 프로그램 형태를 나타내는 예시도이다.
도 5b는 도 5a의 프로그램 구조를 나타내는 구조도이다.
도 6a는 본 발명의 일실시예에 따른 SVG파일에 속성값을 입력하는 상태를 보여주는 예시도이다.
도 6b는 본 발명의 일실시예에 따른 특정 창으로 컴포넌트를 옮기는 상태를 보여주는 예시도이다.
도 6c는 도 6a의 컴포넌트에 스크립트를 넣어주는 상태를 보여주는 예시도이다.
도 6d는 본 발명의 일실시예에 따른 컴포넌트 속성값을 변경함에 따라 출력되는 결과값을 보여주는 예시도이다.

이하, 첨부된 도면을 참조하여 본 발명을 상세히 설명한다.

도 1은 본 발명의 SVG 파일을 표시하기 위한 시스템 구성도이다.

도 1을 참조하여 설명하면, SVG 이미지 표시 장치에 관한 것으로서, 파싱된 SVG 파일이 저장되고 메모리 스택으로 출력이 되는 SVG파일부(10)와, 상기 SVG파일부(10)로부터 분류된 SVG파일에서 심볼 메모리를 생성하고 라이브러리를 렌더링하는 라이브러리 메모리 스택(20) 및 상기 SVG파일부(10)로부터 분류된 SVG파일에서 픽쳐 메모리를 로드하고 심볼 메모리를 복사 및 추가하며 픽쳐 렌더링을 하는 픽쳐 메모리 스택(30)과, 상기 라이브러리 및 픽쳐 메모리 스택(30)에서 만들어진 컴포넌트들을 스크립트 처리하기 위한 스크립트 처리모듈(40)과, 시스템에서 특정 이벤트를 받았을 때 이벤트를 처리하는 이벤트 처리모듈(50)과, 상기 입력된 단계에 따른 정보를 처리하는 스케쥴링 모듈(60), 그리고 메모리 스택에 있는 구조체 메모리를 이용하여 화면에 띄워주는 랜더러 모듈(70)을 포함하여 구성된다.

여기서 라이브러리 메모리 스택(20)과 픽쳐 메모리 스택(30)에 저장된 데이터들을 컴포넌트라고 하며 각각의 메모리 스택에서 지우지 않았다면 언제든 재사용이 가능하다.

또한, 상기 라이브러리 메모리 스택(20)에서 만들어진 컴포넌트들은 픽쳐 메모리 스택(30)에서도 사용할 수 있다.

이때, 픽쳐 메모리 스택(30)에서 사용하는 방식은 기본 객체와는 다르게 라이브러리 메모리 스택(20)의 객체들의 메모리를 복사한 후 복사한 구조제 메모리를 픽쳐 메모리 스택(30)에 저장해두면 사용이 가능해진다.

상기 픽쳐 메모리 스택의 의미는 <defs>이외의 기본객체들을 저장하며 <use>앨리먼트가 있다면 라이브러리 메모리 스택에서 동일한 ID의 컴포넌트(심볼 구조체 메모리)를 복사하여 저장하는 것을 말한다.

또한 상기 라이브러리 메모리 스택은 컴포넌트(심볼 구조체 메모리)를 저장하는 것을 말한다.

도 2는 본 발명의 SVG 파일의 동적 이미지를 표시하기 위한 흐름도이다.

도 2를 참조하여 설명하면, 상기 SVG 이미지 표시 장치로부터 파일을 로드하는 SVG 파일 로드단계(S10)와,로드된 SVG파일을 라이브러리 메모리 스택(20) 및 픽쳐 메모리 스택(30)으로 분류하는 메모리 스택 분류단계(S20)와, 상기 분류된 메모리 스택이 라이브러리인 경우 라이브러리 메모리를 생성하는 라이브러리 생성단계(S30) 및 분류된 메모리 스택이 픽쳐인 경우 픽쳐 메모리를 생성하는 픽쳐 생성단계(S40)와, 상기 라이브러리 및 픽쳐를 로드한 뒤 스케쥴링 모듈(60) 및 이벤트 처리모듈(50)을 이용하여 스크립트를 처리하는 스크립트 처리단계(S50)와, 연산된 결과를 렌더링하는 렌더링단계(S60)를 포함하여 구성된다.

이때, 상기 SVG 파일 로드단계(S10)는, SVG파일을 불러오는 과정에서 SVG파일 포맷의 앨리먼트인 defs를 라이브러리로 분리한다.

또한, 상기 라이브러리 생성단계(S30) 이후에, 상기 라이브러리 메모리 스택(20)에서 심볼의 메모리를 생성하는 심볼 메모리 생성단계(S31)를 더 포함하여 구성한다.

또한, 상기 픽쳐 생성단계(S40) 이후에, 상기 픽쳐 메모리 스택(30)은 상기 라이브러리 메모리 스택(20)에서 심볼 구조체 메모리를 복사하고, 픽쳐 메모리에 추가하는 심볼 메모리 복사 및 추가단계(S41)를 더 포함한다.

또한, 상기 렌더링단계(S60)는, 상기 라이브러리 메모리 스택(20)과 픽쳐 메모리 스택(30)에 생성된 메모리를 각각 추가하고, 상기 픽쳐 메모리 스택(30)에는 기본 객체에 대한 기본객체 메모리를 생성하고, 상기 기본객체 메모리를 이용하여 확장객체를 생성할 수 있다.

또한, 상기 스크립트 처리단계(S50)는, 스케쥴링 모듈(60) 및 이벤트 처리모듈(50)을 이용하여 스크립트를 처리하고, 처리된 내용을 메모리 스택에 적용할 때 ID를 이용하여 구조체 메모리를 찾아서 데이터를 변경해준다.

상기와 같은 구성으로 전체적인 프로세스 중에서 SVG파일을 불러오는 과정에서 XML언어가 잘못 입력 되어있는지 확인하고 잘못된 부분을 알려준다.

그 후, 구조체 메모리를 만들고 데이터가 입력되었다면 구조체 메모리를 이용하여 화면에 띄워준다.

따라서 랜더링 단계는 라이브러리 메모리 스택과 픽쳐 메모리 스택에 저장된 구조체 메모리를 이용하여 화면에 띄워준다.

도 3a은 기초 컴포넌트의 파일 포맷을 통한 실제 출력 이미지를 나타내는 예시도이고, 도 3b는 확장 컴포넌트의 파일 포맷을 통한 실제 출력 이미지를 나타내는 예시도이다.

도 3a 및 도 3b를 참조하여 설명하면, 도 3a의 data-attribute는 심볼을 제어하는 변수로 적용되고, 상기 data-attribute는 복수개의 형태로 추가할 수 있으며, 각각의 data-attribute에 따라서 스크립트를 통하여 심볼의 동작을 제어할 수 있다.

또한, HMI컴포넌트를 이용하여 도 3a 및 도 3b와 같이 기초 컴포넌트를 이용하여 확장컴포넌트를 생성할 수 있다. 확장 컴포넌트의 경우 defs안의 symbol에 기초컴포넌트 use가 추가된 구조이다. 기초컴포넌트 data-attribute가 선언되어 있는 경우, 확장컴포넌트에서 기초 컴포넌트를 data-attribute로 속성을 바꿔줄 수 있다. 확장 컴포넌트는 새로운 확장 컴포넌트에 포함되어 활용될 수 있다.

도 4a는 기본적인 SVG파일의 프로그램 형태를 나타내는 예시도이고, 도 4b는 도 4a의 프로그램 구조를 나타내는 구조도이고, 도 5a는 도 4a의 심볼을 사용한 다른 파일의 프로그램 형태를 나타내는 예시도이고, 도 5b는 도 5a의 프로그램 구조를 나타내는 구조도이다.

도 4a 내지 도 5b를 참조하여 설명하면, 도 4a는 일반적인 SVG 파일의 컴포넌트를 만드는 방식이고, 도 4b는 도 4a의 메모리 구조를 나타낸다.

도 4a에서 defs 앨리먼트를 이용하여 생성한 symbol객체는 도 4a의 파일 안에서 객체를 정의해준다. 정의된 객체를 use를 이용하여 재사용해준다.

도 4b의 메모리 구조를 보면 defs앨리먼트를 이용하여 생성한 symbol객체의 메모리 구조를 use앨리먼트를 이용하여 가져온 것을 볼 수 있다.

이때, 구조체 메모리에는 사용자가 생성한 속성들도 들어갈 수 있다. 예를 들면 도 5b 에서 data로 시작하는 앨리먼트는 컴포넌트(사용자가 만든 커스텀 객체인 HMI 심볼 객체)의 속성 앨리먼트이다.

여기서, 속성 앨리먼트는 심볼 객체의 속성을 변경해주거나 데이터를 추가, 변경, 제어할 때 사용된다.

또한, 도 5a에서 data로 시작하는 속성은 앨리먼트에 붙는 data와 마찬가지로 사용자가 만들 수 있으며 기본속성만으로는 부족할 때 data라는 이름을 앞에 붙여서 추가해 줄 수 있다.

도 4a, 4b에서 사용되는 defs앨리먼트는 각종 앨리먼트들을 정의해 주는 역할을 한다. 즉, 컴포넌트로 만들어준다고 할 수 있다.

도 4a의 구조를 도 4b와 비교 설명하면 defs의 하위로 symbol이 포함되고, 다시 symbol의 하위로 rect와 data-attribute가 포함된다. 상기 rect는 SVG 파일의 기본 앨리먼트로 사각형을 그린다. data-attribute는 SVG파일의 커스텀 앨리먼트로 symbol의 추가속성을 나타내준다.

상기 defs와 동일 위치에 use앨리먼트가 있다. 이 앨리먼트는 defs에서 정의한 symbol을 도 5a에서 'xlink:href="#ID'를 이용하여 가져올 수 있다. 이 때, ID는 가져오려는 객체의 ID를 가져오면 된다.

또한, use를 이용하면 가져온 컴포넌트는 도 4a를 보면 defs에서 정의한 symbol의 메모리 구조를 모두 가져온 것을 볼 수 있다.추가로 가져오는 symbol객체에 data-attribute속성이 있을 경우 data-set-attribute가 자동으로 생성된다.

상기 data-set-attribute는 스크립트와 마찬가지로 스케줄러에 의해서 data-attribute에 데이터를 보낸다.

또한, 상기 defs는 symbol을 정의하며 하나의 객체로 만들 수 있다. 상기 defs에서 정의한 symbol을 use에서 symbol의 ID를 이용하여 사용한 것이고, 상기 use의 안에 data-set-attribute가 생긴 것을 볼수 있는데 이는 symbol의 data-attribute를 제어하기 위한 사용자 정의 속성이다.

도 5a는 도 4a에서 정의한 symbol을 가져온 SVG파일을 나타낸 도면이다.

도 5b의 메모리 구조를 보면 다른 파일이지만 symbol의 메모리 구조를 그대로 가져온 것을 볼 수 있다. 도4a에서 구조체 메모리를 생성하여 defs에서 정의된 symbol앨리먼트를 컴포넌트로 만들었기 때문이다. 컴포넌트로 만들면 여러 파일에서 컴포넌트를 사용할 수 있다.

또한, 컴포넌트들을 하나의 SVG파일로 만드는 기능을 지원한다. 이를 통해 SVG파일포맷을 지원하는 단말장치나 브라우저에서 사용할 수 있게 된다.

도 6a는 본 발명의 일실시예에 따른 SVG파일에 속성값을 입력하는 상태를 보여주는 예시도이고, 도 6b는 본 발명의 일실시예에 따른 특정 창으로 컴포넌트를 옮기는 상태를 보여주는 예시도이고, 도 6c는 도 6a의 컴포넌트에 스크립트를 넣어주는 상태를 보여주는 예시도이고, 도 6d는 본 발명의 일실시예에 따른 컴포넌트 속성값을 변경함에 따라 출력되는 결과값을 보여주는 예시도이다.

도 6a 내지 도 6b를 참조하여 설명하면, 먼저 도 6a에서 SVG파일을 만들어 사각형(S1)을 만든다. 만들어 진 사각형의 속성창에서 드롭 다운 메뉴를 이용하여 add attribute(S2)를 한다. 작은 창(S3)에서 변수형(S4), 변수이름(S5), 초기값(S6)을 지정해주고 accept를 누른다.

그 후, 도 6b에서는 도 6a에서 만들어 준 컴포넌트를 다른 파일에서 사용하는 화면이다. 컴포넌트를 선택하는 창(S7)에서 사용하고자 하는 파일로 컴포넌트를 옮겨준다.

상기와 같은 방법을 이용하여 사용자가 쉽게 재사용이 가능해지는 효과가 있다.

이후의 예시는 고급 사용자들을 위한 기능이다.

도 6c에서는 도6a의 컴포넌트에 스크립트를 넣어주는 화면이다. 도 6d는 넣어준 스크립트를 사용하는 화면이다. 도 6c의 파일 브라우저(S8)에서 컴포넌트를 선택한다. 그리고 속성창(S9)에서 onactivate를 선택하여 스크립트 창을 띄운다. 스크립트 창에 스크립트 코드(S10)를 작성하고 accept를 눌러준다. 스크립트 코드의 내용은 switch의 값이 1이면 rect(S1)의 채우기 색을 붉은색으로 변경해주고, switch의 값이 0이면 흰색이 되게 하는 코드이다.

도 6d에서 가져온 컴포넌트의 속성에서 set-attribute속성의 값(S11)을 1로 바꿔주면 컴포넌트의 색이 붉은색으로 변경된 것을 확인할 수 있다. 다시 set-attribute속성의 값(S12)을 0으로 바꿔주면 컴포넌트의 색이 흰색으로 변경된다.

이처럼 스크립트 언어를 이용하여 다양한 작업을 실행할 수 있다. 스크립트를 좀 더 심화해서 공부하면 조금 더 복잡한 작업을 지정 할 수 있다.

본 발명의 일부 단계들은 컴퓨터가 읽을 수 있는 기록매체에 컴퓨터가 읽을 수 있는 코드로서 구현하는 것이 가능하다. 컴퓨터가 읽을 수 있는 기록매체는 컴퓨터 시스템에 의하여 읽혀질 수 있는 데이터가 저장되는 모든 종류의 기록 장치를 포함한다. 컴퓨터가 읽을 수 있는 기록 매체의 예로는 ROM, RAM, CD-ROM, CD-RW, 자기테이프, 플로피디스크, HDD, 광 디스크, 광자기 저장장치 등이 있을 수 있으며, 또한 캐리어 웨이브(예를 들어, 인터넷을 통한 전송)의 형태로 구현되는 것도 포함한다. 또한 컴퓨터가 읽을 수 있는 기록 매체는 네트워크로 연결되 컴퓨터 시스템에 분산되어, 분산 방식으로 컴퓨터가 읽을 수 있는 코드로 저장되고 실행될 수 있다.

이상에서와 같이 도면과 명세서에서 최적의 실시예가 개시되었다. 여기서 특정한 용어들이 사용되었으나, 이는 단지 본 발명을 설명하기 위한 목적에서 사용된 것이지 의미 한정이나 특허청구범위에 기재된 본 발명의 범위를 제한하기 위하여 사용된 것은 아니다. 그러므로, 본 기술 분야의 통상의 지식을 가진자라면 이로부터 다양한 변형 및 균등한 타 실시예가 가능하다는 점을 이해할 것이다. 따라서, 본 발명의 진정한 기술적 보호범위는 첨부된 특허청구범위의 기술적 사상에 의해 정해져야 할 것이다.

10 : SVG파일부
20 : 라이브러리 메모리 스택
30 : 픽쳐 메모리 스택
40 : 스크립트 처리모듈
50 : 이벤트 처리모듈
60 : 스케쥴링 모듈
70 : 랜더러 모듈

Claims (7)

1. SVG 이미지 표시 장치를 이용한 컴포넌트 기반의 동적 이미지 표시 방법에 관한 것으로서,
   상기 SVG 이미지 표시 장치로부터 파일을 로드하는 SVG 파일 로드단계(S10)와;
   로드된 SVG파일을 라이브러리 메모리 스택(20) 및 픽쳐 메모리 스택(30)으로 분류하는 메모리 스택 분류단계(S20)와;
   상기 분류된 메모리 스택이 라이브러리인 경우 라이브러리 메모리를 생성하는 라이브러리 생성단계(S30); 및 분류된 메모리 스택이 픽쳐인 경우 픽쳐 메모리를 생성하는 픽쳐 생성단계(S40)와;
   상기 라이브러리 및 픽쳐를 로드한 뒤 스케쥴링 모듈(60) 및 이벤트 처리모듈(50)을 이용하여 스크립트를 처리하는 스크립트 처리단계(S50)로 구성하되,
   상기 스크립트 처리단계(S50)는,
   스케쥴링 모듈(60) 및 이벤트 처리모듈(50)을 이용하여 스크립트를 처리하고, 처리된 내용을 메모리 스택에 적용할 때 ID를 이용하여 구조체 메모리를 찾아서 데이터를 변경해주고,
   연산된 결과를 렌더링하는 렌더링단계(S60);를 포함하되,
   상기 렌더링단계(S60)는,
   상기 라이브러리 메모리 스택(20)과 픽쳐 메모리 스택(30)에 생성된 메모리를 각각 추가하고, 상기 픽쳐 메모리 스택(30)에는 기본 객체에 대한 기본객체 메모리를 생성하고, 상기 기본객체 메모리를 이용하여 확장객체를 생성하는 기능을 하여,
   SVG파일을 불러오는 과정에서 XML언어가 잘못 입력 되어 있는지 확인하고 잘못된 부분을 알려 주는 기능을 수행하는 것을 특징으로 하는 에스브이지 파일 포맷을 이용한 컴포넌트 기반의 동적 이미지 표시 방법.
   
2. 제 1 항에 있어서,
   상기 SVG 파일 로드단계(S10)는, SVG파일을 불러오는 과정에서 SVG파일 포맷의 앨리먼트인 defs를 라이브러리로 분리하는 것을 특징으로 하는 에스브이지 파일 포맷을 이용한 컴포넌트 기반의 동적 이미지 표시 방법.
   
3. 제 1 항에 있어서,
   상기 라이브러리 생성단계(S30) 이후에,
   상기 라이브러리 메모리 스택(20)에서 심볼의 메모리를 생성하는 심볼 메모리 생성단계(S31);를 더 포함하여 구성된 것을 특징으로 하는 에스브이지 파일 포맷을 이용한 컴포넌트 기반의 동적 이미지 표시 방법.
   
4. 제 1 항에 있어서,
   상기 픽쳐 생성단계(S40) 이후에,
   상기 픽쳐 메모리 스택(30)은 상기 라이브러리 메모리 스택(20)에서 심볼 구조체 메모리를 복사하고, 픽쳐 메모리에 추가하는 심볼 메모리 복사 및 추가단계(S41);를 더 포함하여 구성된 것을 특징으로 하는 에스브이지 파일 포맷을 이용한 컴포넌트 기반의 동적 이미지 표시 방법.
   
5. 삭제
6. 삭제
7. SVG 이미지 표시 장치에 관한 것으로서,
   SVG 파일을 파싱하여 라이브러리 및 픽쳐 메모리 스택(30)으로 보내주는 SVG파일부(10)와;
   심볼 메모리를 생성하는 라이브러리 메모리 스택(20); 및 라이브러리 메모리 스택(20)에서 심볼 메모리를 복사 및 추가하는 픽쳐 메모리 스택(30)과;
   상기 라이브러리 및 픽쳐 메모리 스택(30)의 라이브러리 및 픽쳐 메모리에 포함된 스크립트들을 처리하기 위한 스크립트 처리모듈(40)과;
   시스템에서 특정 이벤트를 받았을 때 이벤트를 처리하는 이벤트처리 모듈(50)을 구성하되;
   스케쥴링 모듈(60) 및 이벤트 처리모듈(50)을 이용하여 스크립트를 처리하고, 처리된 내용을 메모리 스택에 적용할 때 ID를 이용하여 구조체 메모리를 찾아서 데이터를 변경해주고,
   메모리 스택에 있는 메모리를 이용하여 화면에 띄워주는 랜더러 모듈(70);을 포함하여 구성되되,
   상기 랜더러 모듈(70)은 상기 라이브러리 메모리 스택(20)과 픽쳐 메모리 스택(30)에 생성된 메모리를 각각 추가하고, 상기 픽쳐 메모리 스택(30)에는 기본 객체에 대한 기본객체 메모리를 생성하고, 상기 기본객체 메모리를 이용하여 확장객체를 생성하여,
   SVG파일을 불러오는 과정에서 XML언어가 잘못 입력 되어 있는지 확인하고 잘못된 부분을 알려 주는 기능을 수행하는 것을 특징으로 하는 에스브이지 파일 포맷을 이용한 컴포넌트 기반의 동적 이미지 표시 시스템.
   

Images