KR100843082B1

KR100843082B1 - Apparatus for making documents by automatically recording image informations

Info

Publication number: KR100843082B1
Application number: KR1020070140238A
Authority: KR
Inventors: 조수호
Original assignee: 삼성전자주식회사
Priority date: 2007-12-28
Filing date: 2007-12-28
Publication date: 2008-07-02
Also published as: KR20080047309A

Abstract

이미지 정보의 문서화 장치가 제공된다. 본 발명의 실시예에 따른 이미지 정보의 문서화 장치는 메타 데이터가 입력된 이미지 파일을 불러들여 이미지를 표시하는 이미지 로드부, 이미지에 표시할 메타 데이터의 종류를 선택하는 이미지 정보 선택부 및 선택된 메타 데이터의 정보를 자동으로 이미지에 표시하는 이미지 정보 표시부를 포함한다. An apparatus for documenting image information is provided. According to an embodiment of the present invention, an apparatus for documenting image information includes an image loading unit displaying an image by inputting an image file into which metadata is input, an image information selecting unit selecting a type of metadata to be displayed on the image, and selected metadata. It includes an image information display unit for automatically displaying the information of the image.

이미지 크롭, 일괄 저장, 이미지 데이터의 문서화 Image cropping, batch storage, documenting of image data

Description

Apparatus for making documents by automatically recording image informations}

본 발명은 이미지 정보의 문서화 장치에 관한 것으로, 보다 상세하게는 이미지 내 다중 선택된 영역을 일괄적으로 저장하여 반복적인 작업의 수고를 더는 이미지 내 선택 영역을 일괄 저장하는 장치와 이미지에 대한 정보(메타 데이터)를 기입한 이미지 파일의 문서화 작업을 간편하게 할 수 있도록 한 이미지 정보의 문서화 장치에 관한 것이다.The present invention relates to an apparatus for documenting image information. More particularly, the present invention relates to an apparatus for collectively storing multiple selected regions in an image and to repetitively performing a repetitive work, and to a device for collectively storing selected regions in an image and information on an image ( The present invention relates to a documenting apparatus for image information which makes it easy to document an image file written with meta data).

휴대폰, PDA 등의 전자제품에 내장되는 그래픽 유저 인터페이스(GUI; Graphic User Interface)를 구성하는 그래픽 이미지들은 디자이너에 의해 작성되고, 이를 전자 제품에 구현하기 위해 작성된 그래픽 이미지들은 S/W 개발자에게 전달된다. Graphic images constituting a Graphic User Interface (GUI) embedded in electronic products such as mobile phones and PDAs are created by the designer, and the graphic images created to implement them in the electronic products are delivered to the S / W developer. .

이때, 디자이너들은 일반적으로 제품의 디스플레이 전체를 포함하는 화면을 기준으로 디자인 작업을 수행하나, S/W 개발자에 의해 디자인된 이미지가 구현될 때에는 이미지 내의 각 요소들을 기준으로 잘려진 이미지가 사용된다. In this case, designers generally design based on the screen including the entire display of the product, but when the image designed by the S / W developer is implemented, the cut image is used based on each element in the image.

도 1은 그래픽 유저 인터페이스(GUI; Graphic User Interface) 이미지를 제 작한 후 이미지를 잘라내어 세분화하는 것을 보여주는 도면이다. FIG. 1 is a diagram illustrating cutting and subdividing an image after producing a Graphic User Interface (GUI) image.

좌측의 이미지(10)는 디스플레이 전체를 포함하는 화면을 기준으로 디자이너들에 의해 제작된 이미지(10)를 나타내고, 우측의 이미지(20)는 S/W 개발자에게 전달될 때 상기 이미지 내 각 요소들을 기준으로 잘려진 이미지(20)를 나타낸다. The image 10 on the left represents an image 10 produced by the designers based on the screen including the entire display, and the image 20 on the right represents each element in the image when delivered to the S / W developer. Represents an image 20 that is cropped by reference.

따라서, 디자이너들에 의해 제작된 이미지 내의 각 요소들은 잘라서 저장되어야 한다. 종래에는 잘려지는 각 영역에 대하여 영역을 설정하고 새 문서에 복사한 후, 파일 이름을 부여하며 저장하는 과정을 반복하여야만 했다. 이러한 작업은 매우 단순 반복적인 작업으로 비효율적이라는 문제점이 있다. 또한, 반복적인 작업에 의해 잘려지는 영역 선택시 오류가 발생할 가능성이 높다는 문제점이 있다. Therefore, each element in the image produced by the designers must be cut off and stored. In the related art, the process of setting a region for each cropped area, copying it to a new document, giving a file name, and saving the file was repeated. This work is very simple and repetitive work has the problem of being inefficient. In addition, there is a problem that an error is likely to occur when selecting a region that is cut by repetitive work.

또한, 그래픽 유저 인터페이스 디자이너가 제작한 전체 이미지와 잘려진 이미지를 S/W 개발자에게 전달될 때, 워드프로세서 등의 일반 문서 작성기를 이용하여 이미지의 위치, 색깔, 파일명, 크기 등의 이미지 정보를 기입하여 S/W 개발자에게 전달된다.In addition, when the entire image and the cropped image produced by the graphic user interface designer are delivered to the S / W developer, the image information such as image position, color, file name, size, etc. can be filled in using a general document writer such as a word processor. It is delivered to the software developer.

도 2는 그래픽 유저 인터페이스의 이미지에 대한 이미지 정보를 문서화한 것을 보여주는 도면이다. 2 shows documenting image information for an image of a graphical user interface.

디자이너들이 제작한 이미지(30)가 개발자에게 전달될 때, 도면과 같이 크기, 폰트, 배경색 등의 디자인 정보(40)와 디자이너의 요구사항 등을 기입하여 작성된 문서로 전달된다. 이러한 이미지에 대한 문서화 작업을 일일이 타이핑하여 입력하는 것은 시간 소모적이고 반복적인 작업으로 비효율적이라는 문제점이 있다. When the image 30 produced by the designers is delivered to the developer, the design information 40 such as the size, font, and background color and the requirements of the designer are filled in as shown in the drawing, and the document 30 is delivered to the developer. Typing and inputting documentation on such images is a time-consuming and repetitive task that is inefficient.

본 발명은 상기한 문제점을 개선하기 위해 고안된 것으로, 본 발명이 이루고자 하는 기술적 과제는 이미지 내에 다중으로 선택된 영역에 대하여 일괄적으로 저장을 하여 이미지를 자르는 작업의 효율을 높이는 것이다.The present invention has been devised to improve the above problems, and the technical problem to be achieved by the present invention is to increase the efficiency of cropping an image by collectively storing a plurality of selected areas in the image.

본 발명의 또 다른 목적은 이미지 정보를 문서화할 때 이미지 내 저장된 메타데이터를 기초로 이미지 정보가 자동으로 기입되도록 하여 작업 효율을 높이는 것이다.Still another object of the present invention is to increase the work efficiency by automatically writing image information based on metadata stored in the image when documenting the image information.

본 발명의 목적들은 이상에서 언급한 목적들로 제한되지 않으며, 언급되지 않은 또 다른 목적들은 아래의 기재로부터 당업자에게 명확하게 이해될 수 있을 것이다.The objects of the present invention are not limited to the above-mentioned objects, and other objects that are not mentioned will be clearly understood by those skilled in the art from the following description.

상기 목적을 달성하기 위하여, 본 발명의 실시예에 따른 이미지 정보의 문서화 장치는 메타 데이터가 입력된 이미지 파일을 불러들여 이미지를 표시하는 이미지 로드부, 상기 이미지에 표시할 메타 데이터의 종류를 선택하는 이미지 정보 선택부 및 상기 선택된 메타 데이터의 정보를 자동으로 상기 이미지에 표시하는 이미지 정보 표시부를 포함한다. In order to achieve the above object, an image information documenting apparatus according to an embodiment of the present invention is an image load unit for displaying an image by importing the image file input meta data, selecting the type of metadata to be displayed on the image And an image information display unit for automatically displaying the information of the selected metadata on the image.

또한, 상기 목적을 달성하기 위하여, 본 발명의 실시예에 따른 이미지 정보의 문서화 장치는 이미지의 메타 데이터를 기록할 이미지표를 불러들이는 이미지표 로드부; 메타 데이터가 입력된 하나 이상의 이미지 파일을 불러들이는 이미지 파일 로드부; 및 상기 이미지 파일의 메타 데이터를 상기 이미지표의 각 셀에 입력하는 이미지 정보 입력부를 포함한다.In addition, in order to achieve the above object, an image information documenting apparatus according to an embodiment of the present invention includes an image table loading unit for importing an image table to record the metadata of the image; An image file loading unit for importing one or more image files into which meta data is input; And an image information input unit which inputs metadata of the image file to each cell of the image table.

또한, 상기 목적을 달성하기 위하여, 본 발명의 실시예에 따른 이미지 정보의 문서화 장치는 이미지의 메타 데이터와 표시 시간이 기록되는 애니메이션표를 불러들이는 애니메이션표 로드부; 메타 데이터가 입력된 하나 이상의 이미지 파일을 불러들이는 이미지 파일 로드부; 및 상기 이미지 파일의 메타 데이터를 상기 이미지표의 각 셀에 입력하는 이미지 정보 입력부를 포함한다. In addition, in order to achieve the above object, an image information documenting apparatus according to an embodiment of the present invention includes an animation table loading unit for importing an animation table in which the metadata and the display time of the image is recorded; An image file loading unit for importing one or more image files into which meta data is input; And an image information input unit which inputs metadata of the image file to each cell of the image table.

또한, 상기 목적을 달성하기 위하여, 본 발명의 실시예에 따른 이미지 정보의 문서화 장치는 동일 위치에서 상황에 따라 바뀌어 표시되는 이미지를 설명하는 인디케이터표를 불러들이는 인디케이터표 로드부; 메타 데이터가 입력된 하나 이상의 이미지 파일을 불러들이는 이미지 파일 로드부; 및 상기 이미지 파일의 메타 데이터로부터 동일 위치에 표시되는 이미지를 자동으로 정렬하여 표시하는 인디케이터 표시부를 포함한다. In addition, in order to achieve the above object, an apparatus for documenting image information according to an embodiment of the present invention comprises: an indicator table loading unit for importing an indicator table for explaining an image displayed in accordance with a situation at the same location; An image file loading unit for importing one or more image files into which meta data is input; And an indicator display unit for automatically aligning and displaying images displayed at the same position from the metadata of the image file.

상기한 바와 같은 본 발명의 이미지 정보의 문서화 장치에 따르면 다음과 같은 효과가 하나 혹은 그 이상 있다. According to the documenting apparatus for image information of the present invention as described above has one or more of the following effects.

첫째, 이미지 내 복수의 영역을 선택하여 일괄적으로 저장하도록 하여 이미지를 잘라 저장하는 반복 작업의 수고를 덜 수 있다는 장점이 있다. First, there is an advantage in that it is possible to select a plurality of areas in the image and store them collectively, thereby reducing the trouble of repetitive work of cutting and storing the image.

둘째, 이미지로부터 잘려진 이미지들이 저장될 때 시작 좌표를 메타데이터로 저장하여 이미지 파일의 문서화 작업을 할 때 편리하게 사용할 수 있다는 장점도 있다. Second, when the images cut from the image are stored, the starting coordinates are stored as metadata so that they can be conveniently used when documenting the image file.

셋째, 이미지의 레이어 상태 조작을 손쉽게 할 수 있다는 장점도 있다.Third, it is easy to manipulate the layer state of the image.

넷째, 이미지 정보를 기입하여 이미지 파일의 문서화 작업을 할 때 일일이 타이핑할 필요가 없이 자동으로 입력될 수 있도록 하여 작업의 수고를 덜 수 있다는 장점이 있다. Fourth, there is an advantage that the work can be saved by automatically inputting the image information and do not need to type manually when documenting the image file.

기타 실시예들의 구체적인 사항들은 상세한 설명 및 도면들에 포함되어 있다.Specific details of other embodiments are included in the detailed description and the drawings.

본 발명의 이점 및 특징, 그리고 그것들을 달성하는 방법은 첨부되는 도면과 함께 상세하게 후술되어 있는 실시예들을 참조하면 명확해질 것이다. 그러나 본 발명은 이하에서 개시되는 실시예들에 한정되는 것이 아니라 서로 다른 다양한 형태로 구현될 수 있으며, 단지 본 실시예들은 본 발명의 개시가 완전하도록 하고, 본 발명이 속하는 기술분야에서 통상의 지식을 가진 자에게 발명의 범주를 완전하게 알려주기 위해 제공되는 것이며, 본 발명은 청구항의 범주에 의해 정의될 뿐이다. 명세서 전체에 걸쳐 동일 참조 부호는 동일 구성 요소를 지칭한다 Advantages and features of the present invention and methods for achieving them will be apparent with reference to the embodiments described below in detail with the accompanying drawings. However, the present invention is not limited to the embodiments disclosed below, but can be implemented in various different forms, and only the embodiments make the disclosure of the present invention complete, and the general knowledge in the art to which the present invention belongs. It is provided to fully inform the person having the scope of the invention, which is defined only by the scope of the claims. Like reference numerals refer to like elements throughout.

이하, 본 발명의 실시예들에 의하여 이미지 정보의 문서화 장치를 설명하기 위한 도면들을 참고하여 본 발명에 대해 설명하도록 한다.Hereinafter, the present invention will be described with reference to the drawings for describing an apparatus for documenting image information according to embodiments of the present invention.

도 3은 본 발명의 일 실시예에 따른 이미지 내 선택 영역을 일괄 저장하는 장치의 블록도이고, 도 4는 본 발명의 일 실시예에 따른 이미지 내 선택 영역을 일괄 저장하는 장치의 유저 인터페이스를 보여주는 도면이다. 3 is a block diagram of an apparatus for collectively storing a selection area in an image according to an embodiment of the present invention, and FIG. 4 is a view illustrating a user interface of an apparatus for collectively storing a selection area in an image according to an embodiment of the present invention. Drawing.

본 발명의 일 실시예에 따른 이미지 내 선택 영역을 일괄 저장하는 장치는 이미지 편집부(100), 부분 확대부(110) 및 선택 이미지 관리부(120)를 포함하여 구성될 수 있다. 또한, 레이어 관리부(130)를 더 포함할 수 있다. The apparatus for collectively storing a selection area in an image according to an exemplary embodiment of the present invention may include an image editing unit 100, a partial enlargement unit 110, and a selection image management unit 120. In addition, the layer manager 130 may be further included.

이때, 본 실시예에서 사용되는 '~부'라는 용어는 소프트웨어 또는 FPGA또는 ASIC과 같은 하드웨어 구성요소를 의미하며, '~부'는 어떤 역할들을 수행한다. 그렇지만 '~부'는 소프트웨어 또는 하드웨어에 한정되는 의미는 아니다. '~부'는 어드레싱할 수 있는 저장 매체에 있도록 구성될 수도 있고 하나 또는 그 이상의 프로세서들을 재생시키도록 구성될 수도 있다. 따라서, 일 예로서 '~부'는 소프트웨어 구성요소들, 객체지향 소프트웨어 구성요소들, 클래스 구성요소들 및 태스크 구성요소들과 같은 구성요소들과, 프로세스들, 함수들, 속성들, 프로시저들, 서브루틴들, 프로그램 코드의 세그먼트들, 드라버들, 펌웨어, 마이크로코드, 회로, 데이터, 데이터베이스, 데이터 구조들, 테이블들, 어레이들, 및 변수들을 포함한다. 구성요소들과 '~부'들 안에서 제공되는 기능은 더 작은 수의 구성요소들 및 '~부'들로 결합되거나 추가적인 구성요소들과 '~부'들로 더 분리될 수 있다.In this case, the term '~ part' used in the present embodiment refers to software or a hardware component such as an FPGA or an ASIC, and '~ part' performs certain roles. However, '~' is not meant to be limited to software or hardware. '~ Portion' may be configured to be in an addressable storage medium or may be configured to play one or more processors. Thus, as an example, '~' means components such as software components, object-oriented software components, class components, and task components, and processes, functions, properties, procedures, and the like. Subroutines, segments of program code, drivers, firmware, microcode, circuits, data, databases, data structures, tables, arrays, and variables. The functionality provided within the components and the 'parts' may be combined into a smaller number of components and the 'parts' or further separated into additional components and the 'parts'.

이미지 편집부(100)는 이미지 파일을 불러들여 이미지를 표시하고 편집할 수 있다. 일반적인 문서 작성기 메뉴에 있는 파일 열기 메뉴를 이용하거나, 마우스를 이용한 드래그 앤 드랍 등을 이용하여 이미지 파일을 불러들일 수 있다. 이미지 파일을 불러들일 때 이미지 파일의 이미지 비트값, 이미지의 메타 데이터, 이미지의 레이어 정보를 불러들일 수 있다. 이때, 메타 데이터는 파일명, 이미지의 크기, 시작 좌표값 등을 포함할 수 있다. 레이어 정보는 레이어 크기, 레이어의 상태(레이 어의 선택 또는 해제 상태), 플래그 값(레이어를 그룹핑하기 위한 값) 등이 될 수 있다. 불러들인 이미지(이미지 비트값)는 이미지 표시부에서 표시되며, 레이어 정보는 레이어 관리부에서 보여진다. The image editing unit 100 may load an image file to display and edit the image. You can import an image file by using the Open File menu in the general document composer menu or by dragging and dropping with a mouse. When loading an image file, an image bit value of the image file, metadata of the image, and layer information of the image may be loaded. In this case, the metadata may include a file name, an image size, a starting coordinate value, and the like. The layer information may be a layer size, a state of a layer (selection or release state of a layer), a flag value (a value for grouping layers), and the like. The imported image (image bit value) is displayed on the image display unit, and the layer information is shown on the layer manager.

일반적인 프로그램과 마찬가지로 이미지 편집부(100)는 불러들인 이미지에 비해 이미지 편집부의 화면이 작을 경우 스크롤 기능이 작동한다. 또한, 이미지는 편집이 용이하도록 확대, 축소될 수도 있다. Similar to the general program, the image editing unit 100 operates when the screen of the image editing unit is smaller than the imported image. In addition, the image may be enlarged or reduced to facilitate editing.

이미지 편집부(100)에서 표시되는 이미지에 소정의 입력 수단을 이용하여 잘라서 저장할 영역을 선택할 수 있다. 입력 수단은 컴퓨터 마우스, 터치 펜 등 본 발명이 사용되는 환경에 따라서 다양하게 바뀔 수 있다. 이미지 내에서 입력 수단을 이용해서 직사각형 형태의 선택 영역을 설정할 수 있다. 입력 수단의 방식이나 선택할 영역의 형태에 따라 선택 영역은 직사각형 형태뿐만 아니라 다양한 형태로 설정될 수 있음은 물론이다. 이때 선택된 영역은 점선 등의 소정의 선으로 표시될 수 있다. 선택된 영역의 색깔이 바뀌게 할 수도 있다. The image edit unit 100 may select an area to be cut and stored in the image displayed by using a predetermined input means. The input means can be variously changed according to the environment in which the present invention is used, such as a computer mouse and a touch pen. A rectangular selection area may be set using an input means in the image. The selection area may be set in various shapes as well as a rectangular shape according to the method of the input means or the shape of the area to be selected. In this case, the selected area may be indicated by a predetermined line such as a dotted line. You can also change the color of the selected area.

이미지 편집부(100)는 입력 수단에 의해 연속적으로 선택 영역을 설정할 수 있도록 하는 연속 선택 설정부(102)를 포함할 수 있다. 일반적인 문서 작성기에서 그리기 툴을 이용해서 사각형을 그리는 방식과 동일하게 영역 선택 메뉴(또는 아이콘)을 클릭한 후 영역을 선택할 수 있다. 본 발명에서는 다수의 영역을 선택할 수 있는데, 위의 방법을 반복하는 방법으로, 즉 영역 선택 메뉴를 선택하고 영역을 선택하는 과정을 반복하여 다수의 영역을 선택할 수 있다. 매번 영역을 선택하기 위해 영역 선택 메뉴를 선택하는 것이 번거로울 경우에는 연속 선택 설정부를 이용할 수 있다. 연속 선택 설정부(102)를 선택하면 영역 선택 메뉴가 항상 활성화 되어 있으므로 입력 수단을 이용해서 연속적으로 영역을 선택할 수 있다. 예를 들어, 도 4에 본 발명의 일 실시예에 따른 영역 선택 설정부(102)가 두 개의 아이콘으로 도시되어 있다. 좌측에 사각형만으로 이루어진 아이콘은 한 번 선택 시 하나의 영역만을 선택할 수 있도록 하고, 우측의 아이콘을 선택하면 연속적으로 이미지 내에서 잘라서 저장할 영역을 선택할 수 있다. The image editing unit 100 may include a continuous selection setting unit 102 to continuously set the selection area by the input unit. You can select an area by clicking the area selection menu (or icon) in the same way as you would draw a rectangle using the drawing tool in a normal document writer. In the present invention, a plurality of regions can be selected, and a plurality of regions can be selected by repeating the above method, that is, selecting a region selection menu and repeating the region selection. If it is cumbersome to select an area selection menu to select an area each time, the continuous selection setting unit can be used. When the continuous selection setting unit 102 is selected, the area selection menu is always activated, so that the area can be continuously selected using the input means. For example, in FIG. 4, the area selection setting unit 102 according to an embodiment of the present invention is illustrated by two icons. The icon consisting of a square on the left side allows only one area to be selected at a time, and the icon on the right side allows you to select areas to be cut and stored in the image continuously.

영역 선택 메뉴가 해제되었을 경우에는 선택 영역을 수정할 수 있다. 즉, 의도한 대로 영역이 선택되지 않았을 때, 점선 등으로 나타난 선택 영역을 수정할 수 있다. 영역을 선택하면 점선 등으로 영역이 표시되는데, 직사각형의 영역 표시선의 경우 모서리를 마우스로 드래그하면 영역 크기를 일정한 비율로 변경할 수 있으며, 선을 잡고 드래그하면 드래그한 방향으로 영역의 크기를 바꿀 수 있다. When the region selection menu is released, the selection region can be modified. That is, when the region is not selected as intended, the selection region indicated by a dotted line or the like may be corrected. If you select an area, the area is indicated by a dotted line. In the case of a rectangular area display line, you can change the size of the area by dragging the corner with a mouse. .

부분 확대부(110)는 이미지 편집부에 표시된 이미지 위에 입력 수단이 위치한 곳을 확대하여 보여준다. 정밀한 크기로 영역을 선택해야 하는 경우에는 부분 확대부(110)를 이용해서 정확하게 영역을 선택할 수 있다. The partial enlargement unit 110 enlarges and shows a location where the input unit is located on the image displayed in the image editing unit. When the area needs to be selected with a precise size, the area may be accurately selected using the enlarged part 110.

이때 부분 확대부(110)에서는 소정의 정보를 표시하는 정보 표시부(112)를 포함할 수 있다. 이때 소정의 정보는 입력 수단의 위치(좌표 값), 입력 수단이 위치한 곳의 픽셀값, 입력 수단이 위치한 곳의 색깔, 입력 수단에 의해 영역을 선택하는 경우 선택된 영역의 크기 등이 될 수 있다. 이러한 정보 표시부(112)를 이용해 사용자는 입력 수단에 의한 현재 상태의 정확한 정보를 파악하면서 영역을 선택할 수 있다. In this case, the partial enlargement unit 110 may include an information display unit 112 displaying predetermined information. In this case, the predetermined information may be a position (coordinate value) of the input means, a pixel value where the input means is located, a color of where the input means is located, and a size of the selected area when selecting the area by the input means. By using the information display unit 112, the user can select an area while grasping accurate information of the current state by the input means.

선택 이미지 관리부(120)는 이미지 위에 선택된 영역을 추출하여 일괄적으로 저장을 한다. The selected image manager 120 extracts the selected region on the image and stores the selected regions collectively.

도 5는 본 발명의 일 실시예에 따른 이미지 내 선택 영역을 일괄 저장하는 장치에 따라 이미지 편집부(100)에서 선택된 영역들이 선택 이미지 관리부(120)로 추출되어 일괄 저장되는 모습을 보여주는 도면이다. 5 is a diagram illustrating a state in which selected regions are extracted by the image editing unit 100 and collectively stored in the selection image manager 120 according to an apparatus for collectively storing selected regions in an image according to an embodiment of the present invention.

도 5의 좌측에 있는 이미지 편집부(100)에서는 이미지 위에 3개의 영역(104a, 104b, 104c)을 선택한 후, 사용자의 명령에 따라 선택된 영역은 우측에 있는 선택 이미지 관리부(120)로 추출(121a, 121b, 121c)되어 관리된다. 선택된 영역을 일괄적으로 또는 개별적으로 추출하는 것이 가능하다. 추출된 이미지들은 선택 이미지 관리부(120)에서 일괄적으로 저장할 수 있다. In the image editing unit 100 on the left side of FIG. 5, three regions 104a, 104b, 104c are selected on the image, and the selected region is extracted by the selection image manager 120 on the right side 121a, 121b, 121c) to manage them. It is possible to extract the selected areas collectively or separately. The extracted images may be collectively stored in the selection image manager 120.

선택된 영역이 이미지 파일로 일괄 저장될 때 이미지 파일의 메타 데이터도 함께 저장된다. 본 발명에서는 저장될 때, 원 이미지를 기준으로 한 선택된 영역의 좌표 정보(시작 좌표)를 메타 정보로 저장할 수 있다. 저장된 좌표 정보는 후술할 이미지 정보의 문서화 장치에서 원 이미지 상에서의 위치를 추적할 때 활용될 수 있다. When the selected area is saved as an image file, the metadata of the image file is also saved. In the present invention, when stored, the coordinate information (starting coordinate) of the selected area based on the original image may be stored as meta information. The stored coordinate information may be utilized when tracking the position on the original image in the documenting apparatus of the image information to be described later.

도 6은 본 발명의 일 실시예에 따른 이미지 내 선택 영역을 일괄 저장하는 장치의 선택 이미지 관리부(120)의 블록도이다. 6 is a block diagram of a selection image manager 120 of an apparatus for collectively storing a selection area in an image according to an exemplary embodiment.

본 발명의 일 실시예에 따른 선택 이미지 관리부는 썸네일 표시부(122), 저장 조건 지정부(124), 파일명 지정부(124), 메타데이터 표시부(125), 파일 형식 지정부(126), 저장 위치 지정부(127)를 포함하여 구성될 수 있다. The selected image managing unit according to the exemplary embodiment of the present invention includes a thumbnail display unit 122, a storage condition specifying unit 124, a file name specifying unit 124, a metadata display unit 125, a file format specifying unit 126, and a storage location. Designation unit 127 may be included.

썸네일 표시부(122)는 도 5와 같이 탭을 가진 리스트 창에 썸네일(121) 형식으로 선택된 영역의 이미지를 표시할 수 있다. 사용자는 이 탭을 추가, 삭제하여 잘려진 이미지를 분류하는 데 사용할 수 있다. 각각의 썸네일(121)에는 저장될 파일명을 표시할 수 있다. 이때, 파일명은 탭의 이름이나 파일명 지정부(124)에 사용자가 입력한 이름이 표시된다. 썸네일(121)에 표시된 파일명은 개별적으로 수정할 수도 있다. 사용자가 탭을 추가, 삭제하여 저장되는 이미지를 분류할 수도 있다. 특정 그룹의 이미지들은 특정 탭에서 관리하는 것이다. 탭에 있는 썸네일(121)들은 복사하여 다른 탭으로 이동 또는 복사할 수도 있다. The thumbnail display unit 122 may display an image of a region selected in the form of a thumbnail 121 in a tabbed list window as shown in FIG. 5. You can add and remove this tab to sort the cropped images. Each thumbnail 121 may display a file name to be stored. At this time, the file name is displayed in the name of the tab or the name entered by the user in the file name designation unit 124. The file name displayed on the thumbnail 121 may be individually modified. Users can also add and delete tabs to sort the stored images. Images in a specific group are managed in a specific tab. The thumbnails 121 in the tab may be copied and moved or copied to another tab.

저장 조건 지정부(123)에서는 썸네일 표시부(122)에 표시된 이미지를 모두 이미지 파일로 일괄 저장할 것인지, 아니면 썸네일 표시부(122)에서 선택된 이미지만 일괄 저장할 것인지를 지정할 수 있다. The storage condition specifying unit 123 may specify whether to collectively store all of the images displayed on the thumbnail display unit 122 as an image file, or to collectively store only the images selected by the thumbnail display unit 122.

파일명 지정부(124)에서는 일괄 저장될 때 저장되는 파일명을 지정한다. 파일명을 지정하면 공통된 파일명에 일련번호를 더하여 파일명이 생성될 수 있다. 예를 들어, 파일명을 "indicator"라고 지정을 하면, 일괄 저장시에 각각의 이미지 파일명이 "indicator01, indicator02, indicator03..."으로 자동으로 부여될 수 있다. The file name designation unit 124 designates a file name to be stored when the batch is stored. If a file name is specified, a file name can be generated by adding a serial number to the common file name. For example, if the file name is designated as "indicator", each image file name can be automatically assigned as "indicator01, indicator02, indicator03 ..." at the time of batch storage.

메타 데이터 표시부(125)는 썸네일 표시부(122)에서 특정 썸네일(121)을 선택하였을 때, 특정 썸네일(121)이 나타내는 영역의 메타 데이터 정보를 표시한다. 예를 들어, 선택된 영역의 위치(좌표값), 선택된 영역의 크기(폭과 높이)등이 될 수 있다. When the thumbnail display unit 122 selects a particular thumbnail 121, the metadata display unit 125 displays metadata information of an area indicated by the specific thumbnail 121. For example, the position (coordinate value) of the selected area, the size (width and height) of the selected area may be.

파일 형식 지정부(126)는 선택된 영역이 이미지 파일로 일괄 저장될 때, 저장되는 파일의 형식을 설정한다. 예를 들어 이미지 파일의 형식으로 jpg, bmp, gif, png 등이 될 수 있을 것이다.The file format designation unit 126 sets the format of the file to be stored when the selected area is collectively stored as an image file. For example, the image file may be jpg, bmp, gif, or png.

저장 위치 지정부(127)는 각 탭의 썸네일 표시부(122)에 있는 이미지를 이미지 파일로 생성하여 저장할 위치를 지정한다. The storage location designation unit 127 designates a location to generate and store an image in the thumbnail display unit 122 of each tab as an image file.

다시, 도 3 및 도 4로 돌아가 본 발명의 일 실시예에 따른 이미지 내 선택 영역을 일괄 저장하는 장치는 레이어 관리부(130)를 더 포함할 수 있다. 3 and 4, the apparatus for collectively storing the selection area in the image according to the exemplary embodiment of the present invention may further include a layer manager 130.

레이어 관리부(130)는 이미지 편집부(100)에서 불러들인 이미지의 레이어 정보를 보여주며 레이어를 관리한다. 레이어는 포토샵 등과 같은 이미지 작성 프로그램에서 사용하는 개념으로, 2차원 적인 이미지에 층을 부여하여 각 층을 합한 이미지를 전체 이미지로 만들 때 각 층을 일컫는 용어이다. 따라서, 레이어 개념을 이용하면 각 층을 수정 또는 추가하여 언제든지 원본 이미지에 손상을 주지 않으면서 원하는 이미지로 변형하거나 효과를 줄 수 있다. The layer manager 130 shows layer information of an image imported from the image editor 100 and manages layers. Layer is a concept used in an image creation program such as Photoshop, and it is a term that refers to each layer when assigning layers to two-dimensional images to make the combined image into an entire image. Thus, using the concept of layers, you can modify or add each layer to transform or effect the desired image at any time without damaging the original image.

본 발명에 있어서 레이어 관리부(130)는 불러들인 이미지 파일의 레이어 정보로부터 각 레이어를 리스트(132)로 보여주고, 각 레이어의 플래그(131)와 각 레이어의 선택 또는 해제 상태를 나타낼 수 있다. 이는 기존의 이미지 작성 프로그램의 레이어 창과 동일하다. 다만, 본 발명에서는 레이어를 관리하는 기능이 추가되었다. In the present invention, the layer manager 130 may display each layer as a list 132 from the layer information of the imported image file, and may indicate a flag 131 of each layer and a selected or deselected state of each layer. This is the same as the layer window of an existing image creation program. However, in the present invention, a function for managing layers has been added.

도 7은 본 발명의 일 실시예에 따른 이미지 내 선택 영역을 일괄 저장하는 장치의 레이어 관리부(130)의 블록도이고, 도 8, 도 9, 도 10은 각각 본 발명의 일 실시예에 따른 레이어 관리부(130) 내의 배경색 지정부(134), 레이어 플래그 선택부(136), 레이어 상태 저장복귀부(138)를 보여주는 도면이다. 7 is a block diagram of a layer manager 130 of a device for collectively storing a selection area in an image according to an embodiment of the present invention, and FIGS. 8, 9, and 10 are layers according to an embodiment of the present invention, respectively. The background color designator 134, the layer flag selector 136, and the layer state storage return unit 138 in the manager 130 are illustrated.

레이어 관리부(130)는 배경색 지정부(134), 레이어 플래그 선택부(136) 및 레이어 상태 저장복귀부(138)를 포함하여 구성될 수 있다. The layer manager 130 may include a background color designator 134, a layer flag selector 136, and a layer state storage return unit 138.

배경색 지정부(134)는 특정 레이어의 이미지에서 투명한 색으로 지정된 부분에 임의의 색을 넣을 수 있다. 예를 들어 특정 레이어에서 디자이너가 이미지를 그릴 때, 디자이너가 그린 영역의 나머지 영역은 배경색에 해당하는 것으로 투명하게 도시되어야 한다. 그러나, S/W 개발 플랫폼의 제약에 따라 개발자에게 이미지를 전달할 때에는 투명한 부분을 특정색으로 표시하는 경우가 많다. 따라서 종래에는 배경색에 해당하는 레이어와 디자이너가 그린 이미지에 해당하는 레이어를 합쳐서 배경색을 나타내었다. 배경색을 나타내기 위한 작업은 원본 이미지와는 무관한 작업이므로 번거로운 작업이다. 본 발명에서 배경색 지정부(134)는 종래에 배경색을 나타내기 위해 별도의 배경색을 나타내는 레이어를 만들 필요가 없이, 디자이너가 이미지를 그린 레이어에 배경색을 지정할 수 있도록 한다. 도 8에서 좌측을 선택하면 배경색은 투명색으로 처리되고, 우측을 선택하면 배경색을 특정색으로 치환할 수 있다. 물론, 색상값은 임의로 지정할 수 있다. The background color designator 134 may insert an arbitrary color into a portion designated as a transparent color in an image of a specific layer. For example, when a designer draws an image on a particular layer, the rest of the area drawn by the designer should be shown transparently, corresponding to the background color. However, when the image is delivered to the developer due to the limitations of the S / W development platform, the transparent part is often displayed in a specific color. Therefore, conventionally, the background color is represented by combining the layer corresponding to the background color and the layer corresponding to the image drawn by the designer. The task of displaying the background color is cumbersome because it is irrelevant to the original image. In the present invention, the background color designator 134 conventionally allows a designer to designate a background color to a layer on which an image is drawn, without having to make a layer representing a separate background color to represent a background color. In FIG. 8, when the left side is selected, the background color is treated as a transparent color, and when the right side is selected, the background color can be replaced with a specific color. Of course, the color value can be arbitrarily specified.

레이어 플래그 선택부(136)는 종래와 같이 레이어가 플래그(131)를 이용하여 그룹핑될 때, 그룹핑된 레이어를 일괄적으로 선택 및 해제할 수 있도록 한다. 연관된 레이어들은 플래그(131)를 이용하여 그룹핑될 수 있다. 도 4에서 레이어 리스트(132)에서 각 레이어의 앞에는 플래그(131)로 표시되어 그룹핑된다. 플래그(131) 의 색상을 달리하여 각 레이어가 그룹핑된 경우, 도 9에서 특정 색의 플래그(131)를 선택하면 레이어 리스트(132)에 있는 특정 플래그(131)로 표시된 레이어들이 한꺼번에 선택 또는 해제된다. 물론, 이러한 레이어의 선택, 해제에 따라 이미지 표시부에 나타난 이미지도 선택된 레이어에 의해 표시되도록 바뀐다. The layer flag selector 136 selects and releases the grouped layers collectively when the layers are grouped using the flag 131 as in the related art. Associated layers may be grouped using flag 131. In FIG. 4, in front of each layer in the layer list 132, a flag 131 is displayed and grouped. When each layer is grouped by different colors of the flag 131, when the flag 131 of a specific color is selected in FIG. 9, the layers indicated by the specific flag 131 in the layer list 132 are selected or released at once. . Of course, as the layer is selected or released, the image displayed on the image display unit is also changed to be displayed by the selected layer.

레이어 상태 저장복귀부(138)는 레이어 리스트(132)에서 레이어의 선택 및 해제 상태를 저장하고, 다시 저장된 상태로 복귀하도록 한다. 레이어의 현재 상태를 임지 저장하고, 나중에 다시 복귀하는 것이다. 디자인을 할 때, 레이어를 무규칙적으로 선택, 해제하는 경우보다는 특정 몇가지 상태를 전환해 가면서 작업을 해야 되는 경우가 많기 때문에, 특정 레이어 상태를 몇 개 저장한 후 레이어 상태를 쉽게 전환하면서 이미지 작업을 수행할 수 있다. 도 10에서 REC 버튼을 선택하면 현재 레이어의 선택, 해제 상태를 저장하게 되고 네모 박스 안(139)에 저장한 상태의 이미지가 썸네일로 도시된다. 이러한 방법으로 몇몇의 레이어 상태를 저장한 후에 썸네일을 선택하면 저장된 레이어 상태로 복귀한다.The layer state storage return unit 138 stores the selected and released states of the layer in the layer list 132 and returns to the stored state. Immerse and save the current state of the layer and return to it later. When designing, you often need to switch between several specific states rather than randomly selecting and deselecting layers, so you can save a few layers of states and easily switch between them. Can be done. In FIG. 10, when the REC button is selected, the state of selecting and deselecting the current layer is stored, and an image of the state stored in the box 139 is shown as a thumbnail. After saving some layer states in this way, selecting a thumbnail will return you to the saved layer state.

이어서, 본 발명의 일 실시예에 따른 이미지 정보의 문서화 장치를 설명하기로 한다. 보통 그래픽 유저 인터페이스의 개발과정에 있어서, 디자이너는 자신이 제작한 이미지의 메타 데이터 및 요구 사항 등을 기입한 문서를 만들어서 개발자에게 전달한다. 후술할 본 발명의 이미지 정보의 문서화 장치는 이러한 문서화 과정을 편리하게 하기 위한 장치이다. Next, an apparatus for documenting image information according to an embodiment of the present invention will be described. In the process of developing a graphical user interface, a designer usually creates a document containing metadata and requirements of an image he or she creates and delivers it to a developer. An apparatus for documenting image information of the present invention to be described later is an apparatus for facilitating such a documenting process.

도 11은 본 발명의 일 실시예에 따른 이미지의 메타 데이터를 문서에 자동으로 입력하는 이미지 정보의 문서화 장치의 블록도이다. 11 is a block diagram of an apparatus for documenting image information for automatically inputting meta data of an image into a document according to an embodiment of the present invention.

본 발명의 일 실시예에 따른 이미지 정보의 문서화 장치는 이미지 로드부(200), 이미지 정보 선택부(210), 이미지 정보 표시부(220)를 포함하여 구성될 수 있다. An apparatus for documenting image information according to an embodiment of the present invention may include an image load unit 200, an image information selector 210, and an image information display unit 220.

이미지 로드부(200)는 메타 데이터가 입력된 이미지 파일을 문서에 불러들여 이미지를 표시한다. 이미지는 일반 문서작성기와 동일한 방법(드래그 앤 드랍, 파일 열기 메뉴, 파일 열기 아이콘을 이용하는 방법 등)으로 문서에 불러들여질 수 있다. 전술한 바와 같이 이미지를 저장할 때 이미지 파일에는 이미지의 메타 데이터도 입력되어 있다. 따라서 이미지 파일을 불러들일 때 이미지의 메타 데이터로 로드된다. 특히, 전체 이미지를 기준으로 잘려진 이미지의 위치(시작 좌표)에 관한 메터 데이터가 입력되어 있음은 전술하였다. The image loading unit 200 loads an image file input with meta data into a document and displays an image. Images can be loaded into a document in the same way as a regular document writer (drag and drop, open file menu, use open file icon, etc.). As described above, when storing an image, metadata of the image is also input to the image file. Therefore, when loading an image file, it is loaded with the image's metadata. In particular, it has been described above that the meter data regarding the position (starting coordinate) of the cut image is input based on the entire image.

이미지 정보 선택부(210)는 이미지에 표시할 메타 데이터의 종류를 선택한다. 이미지에 표시할 메타 데이터는 전체 이미지를 기준으로 이미지의 위치 정보(시작 좌표값), 컬러 정보(픽셀값), 이미지의 폭, 이미지의 높이 및 파일명 등이 포함될 수 있다. 예를 들어 이미지 위에 마우스를 올려놓고 오른쪽 버튼을 클릭하면 전술한 메타 데이터의 종류를 나타내는 다이얼로그 박스가 나타나고 사용자는 입력할 메타 데이터의 종류를 선택할 수 있다. The image information selector 210 selects a type of meta data to be displayed on the image. Meta data to be displayed on the image may include location information (starting coordinate value), color information (pixel value), width of the image, height of the image, and file name of the image based on the entire image. For example, if the user clicks the mouse button on the image and clicks the right button, a dialog box indicating the type of metadata described above appears and the user can select the type of metadata to be input.

이미지 정보 표시부(220)는 이미지 정보 선택부(210)에서 선택된 메타 데이터의 정보를 자동으로 이미지에 표시를 한다. 이때, 이미지에 표시되는 메타 데이터의 정보는 가이드선을 이용해서 표시될 수 있다. The image information display unit 220 automatically displays the information of the metadata selected by the image information selector 210 on the image. In this case, the information of the metadata displayed on the image may be displayed using guide lines.

도 12, 도 13, 도 14 및 도 15는 각각 본 발명의 일 실시예에 따른 시작 좌 표값, 컬러값, 이미지의 높이와 폭, 파일명을 자동으로 문서에 입력하는 과정을 보여주는 도면이다. 12, 13, 14, and 15 are diagrams illustrating a process of automatically inputting a start coordinate value, a color value, a height and width of an image, and a file name according to an embodiment of the present invention into a document.

도 12의 좌측 도면처럼 문서에 불러들인 이미지 위에 오른쪽 마우스 버튼을 클릭하여 입력할 메타 데이터의 종류를 선택하는 다이얼로그 박스를 생성한다. 다이얼로그 박스에서 시작 좌표를 선택하면, 자동으로 우측의 도면과 같이 시작 좌표값(244)이 좌측 상단 꼭지점에 생성된다. 본 발명에서는 전술한 바와 같이 이미지 내에서 잘려진 이미지를 일괄적으로 저장할 때 전체 이미지를 기준으로 한 잘려진 이미지의 좌표값이 메타 데이터로 저장되므로 자동으로 이러한 메타 데이터 값을 입력할 수가 있다. 이때, 시작 좌표임을 알려주는 가이드선(242)이 포함됨을 알 수 있다. As shown in the left figure of FIG. 12, a dialog box for selecting a type of meta data to be input is generated by clicking a right mouse button on an image loaded into a document. When the starting coordinate is selected in the dialog box, the starting coordinate value 244 is automatically generated at the upper left corner as shown in the figure on the right. In the present invention, as described above, when the images cut in the image are collectively stored, the coordinate values of the cut image based on the entire image are stored as the metadata, and thus the metadata values can be automatically input. In this case, it can be seen that the guide line 242 indicating that the start coordinates are included.

도 13에서는 도 12와 동일한 방법으로 컬러값(244)을 자동으로 입력하는 과정을 보여준다. 이는 이미지 내 특정 위치의 컬러값(244)을 자동으로 입력하는 것이다. 이때에도 도면과 같이 가이드선(242)이 생성될 수 있는데, 가이드선이 이미지에서 시작하는 부분의 픽셀값(244)을 이미지 데이터로부터 불러들여서 자동으로 입력을 한다. FIG. 13 illustrates a process of automatically inputting the color value 244 in the same manner as in FIG. 12. This automatically inputs the color value 244 at a particular location within the image. In this case, the guide line 242 may be generated as shown in the drawing. The guide line fetches the pixel value 244 of the starting portion of the image from the image data and automatically inputs it.

도 14에서도 도 12와 동일한 방법으로 이미지의 폭(244)과 높이를 자동으로 입력하는 과정을 보여준다. 이미지에 대한 설명이 문서로 작성될 경우 가장 중요한 정보 중의 하나는 이미지의 크기이다. 경우에 따라 이미지 전체의 크기 혹은 이미지 내부의 특정 점 간의 간격 등이 중요한 정보로 표시되어야 하는 경우가 있다. 도 14와 같이 간단하게 폭 측정 또는 높이 측정을 선택하면 자동으로 가이드 선(242)인 화살표와 함께 이미지의 길이(244)를 입력해준다. 이때 가이드선(242)은 간단한 조작을 통해서 그 위치를 조작할 수 있는데 변경에 따라서 입력된 메타 데이터 값이 자동으로 갱신되면서 바뀐다. 이는 도 17을 참조하여 후술하기로 한다. FIG. 14 also shows a process of automatically inputting the width 244 and the height of the image in the same manner as in FIG. 12. When a description of an image is documented, one of the most important pieces of information is the size of the image. In some cases, the size of the entire image or the spacing between specific points in the image may need to be displayed as important information. As shown in FIG. 14, if the width measurement or the height measurement is simply selected, the length 244 of the image is automatically input along with the arrow which is the guide line 242. At this time, the guide line 242 can operate the position through a simple operation, the input metadata value is automatically updated and changed according to the change. This will be described later with reference to FIG. 17.

도 15에서도 도 12와 동일한 방법으로 파일명(244)을 자동으로 입력하는 과정을 보여준다. 15 also shows a process of automatically inputting the file name 244 in the same manner as in FIG.

도 16은 본 발명의 일 실시예에 따른 이미지 정보의 문서화를 한 모습을 보여주는 도면이다. FIG. 16 is a view showing documenting image information according to an embodiment of the present invention. FIG.

도 16에서는 전술한 바와 같이 하나의 이미지에 대하여 시작 좌표(244a), 특정 점의 컬러 값(244b), 이미지의 길이(244c), 특정 지점 사이의 길이(244d), 파일명(244e), 특정 영역을 확대한 모습(244f)의 이미지 정보를 자동으로 입력하여 문서화한 모습을 보여준다. In FIG. 16, as described above, the start coordinate 244a, the color value 244b of the specific point, the length 244c of the image, the length 244d between the specific points, the file name 244e, and the specific area for one image. The image information of the enlarged state (244f) is automatically input to show the documented state.

도 17은 이미지에 자동으로 입력된 값과 가이드부의 위치를 수정하는 모습을 보여주는 도면이다. FIG. 17 is a diagram illustrating a method of correcting a value automatically input to an image and a position of a guide unit.

도 17은 도 14와 같이 이미지의 폭을 가이드선과 함께 자동으로 입력한 모습을 보여준다. 이때 가이드선(242)은 화살표 객체로 표시되는데 간단한 조작을 통해 측정 지점과 폭 길이가 입력되는 위치를 변경할 수 있다. 자동으로 입력된 폭 길이 값을 선택하면 정보 표시 위치 조정점(252)가 나타나는 데 이를 마우스 등의 입력 수단을 이용해서 옮기면 폭 길이 값이 입력되는 위치를 변경할 수 있다. 또한, 화살표의 경계를 나타내는 선에 있는 측정위치 조정점(254)을 드래그해서 움직이면 화살표의 길이 자체를 조절할 수 있고, 측정된 길이는 실시간으로 변경되면서 입력 된다. 이 조정점(254)은 문서툴이나 이미지의 표시된 배율과 상관없이 항상 이미지 파일 자체의 픽셀 단위로 이동하므로 정확한 픽셀의 위치로 이동시키는 것이 용이하다. 또한, 가이드선 위치 조정점(256)을 움직여서 양쪽 가장자리의 화살표의 경계를 나타내는 선의 위치와 길이를 조정할 수 있다. 동일한 원리로 자동으로 입력된 다른 컬러 값, 파일명 등도 사용자의 조작을 통해 사용자가 원하는 위치와 방법으로 이미지 정보가 입력되도록 할 수 있다. FIG. 17 illustrates a state in which the width of an image is automatically input together with a guide line as shown in FIG. 14. At this time, the guide line 242 is displayed as an arrow object, and the position where the measurement point and the width length are input can be changed through a simple operation. An information display position adjustment point 252 appears when an automatically input width length value is selected, and when the width length value is input by using an input means such as a mouse, the information display position adjustment point 252 appears. In addition, by dragging the measurement position adjustment point 254 on the line indicating the boundary of the arrow can adjust the length of the arrow itself, the measured length is input while changing in real time. This adjustment point 254 is always moved in the pixel unit of the image file itself regardless of the displayed magnification of the document tool or image, so that it is easy to move to the correct pixel position. In addition, the position and length of the line representing the boundary of the arrow at both edges can be adjusted by moving the guide line position adjusting point 256. In the same principle, other color values, file names, and the like, which are automatically input, can be inputted by the user at the position and method desired by the user.

도 18은 본 발명의 일 실시예에 따른 이미지표를 만드는 이미지 정보의 문서화 장치의 블록도이고, 도 19는 본 발명의 일 실시예에 따른 이미지표를 보여주는 도면이다. FIG. 18 is a block diagram of an image information documenting apparatus for creating an image table according to an embodiment of the present invention, and FIG. 19 is a view showing an image table according to an embodiment of the present invention.

본 발명의 일 실시예에 따른 이미지 정보의 문서화 장치는 이미지표 로드부(300), 이미지 파일 로드부(310) 및 이미지 정보 입력부(320)를 포함하여 구성될 수 있다. An apparatus for documenting image information according to an embodiment of the present invention may include an image table loading unit 300, an image file loading unit 310, and an image information input unit 320.

이미지표 로드부(300)는 메타 데이터가 기록되는 이미지표를 문서에 불러들인다. 물론 이미지표의 각 셀은 어떠한 데이터도 입력되어 있지 않다. 이미지표는 메뉴나 아이콘 또는 셰이프(드래그 앤 드랍을 하면 기본적인 도면을 그리는 객체)를 이용해서 문서에 입력할 수가 있다. The image table loading unit 300 imports an image table in which meta data is recorded into a document. Of course, each cell of the image table has no data entered. Image tables can be entered into documents using menus, icons, or shapes (objects that you draw by dragging and dropping).

이미지 파일 로드부(310)는 이미지표에 메타 데이터 정보를 입력할 이미지 파일을 불러들인다. 문서에 이미지표를 생성하면 자동으로 이미지 파일을 로드하는 다이얼로그 박스가 생성되거나, 이미지표 내의 특정 셀을 선택하여 이미지 파일을 로드하는 다이얼로그 박스를 생성할 수 있다. 다이얼로그 박스에서 하나 이상의 이 미지 파일을 선택하여 이미지 파일을 이미지표에 로드시킨다. The image file loading unit 310 loads an image file for inputting meta data information into an image table. When you create an image table in a document, you can create a dialog box that automatically loads an image file, or you can create a dialog box that loads an image file by selecting specific cells in the image table. Select one or more image files in the dialog box to load the image files into the image table.

이미지 정보 입력부(320)는 이미지 파일 로드부에서 선택한 각 이미지 파일의 메타 데이터를 이미지표의 각 셀에 자동으로 입력한다. 이때 표의 특정 행 또는 열은 입력되는 메터 데이터가 미리 정의되어 있으며, 그 정의대로 메터 데이터 정보가 입력된다. 이때, 입력되는 메타 데이터는 전체 이미지를 기준으로 한 위치 정보, 이미지 폭, 이미지 높이, 파일 형식, 및 파일명 등이 될 수 있다. 또한, 불러들인 이미지 파일의 이미지를 표시할 수도 있다.The image information input unit 320 automatically inputs metadata of each image file selected by the image file load unit to each cell of the image table. In this case, a specific row or column of the table is previously defined meter data, the meter data information is input as defined. In this case, the input metadata may be location information based on the entire image, image width, image height, file format, and file name. You can also display an image of the imported image file.

도 19의 아래측에 있는 이미지표를 살펴보면, 1열에서부터 차례로 보면, 넘버링(No.), 파일 타입(Type), 이미지(Image), 시작 위치(Position), 크기(Size), 파일명(File Name)이 각 파일별로 기재되어 있음을 알 수 있다. 따라서, 종래에 각 셀에 일일이 타이핑해서 기입하였던 것에 반해서, 본 발명은 표를 이용하여 이미지에 대한 정보를 기록한 이미지표를 간단한 방법으로 만들 수 있다. Looking at the image table at the bottom of Fig. 19, from the first column, the numbering, the file type, the image, the position, the size, and the file name are shown. ) Is listed for each file. Accordingly, the present invention can make an image table in which the information on the image is recorded by using a table in a simple manner, whereas conventionally typed and written in each cell.

본 발명에 있어서 사용자가 지정한 기준 이미지를 기준으로 불러들인 이미지 파일의 이미지의 위치 및 크기를 그래픽으로 표시하는 이미지 영역 자동 표시부를 더 포함할 수 있다. 이미지 영역 자동 표시부는 표에 기입된 각 이미지가 차지하는 영역을 전체 이미지를 기준으로 그래픽 적으로 표시해 주는 것이다. 특히, 표 안의 이미지들이 하나의 공통된 이미지의 일부분들일 경우(즉, 전술한 바와 같이 이미지 내에서 잘려진 이미지들일 때)에 유용하다. 도 19의 좌상단에 있는 그림은 기준 이미지이다. 사용자가 이미지를 불러들여 기준 이미지로 설정을 하면 표에 있는 각 이미지들은 기준 이미지를 기준으로 도 19의 우측에 있는 그림과 같이 각 이미지의 영역과 위치를 그래픽으로 표시한다. 각 이미지의 영역들이 사각형으로 표시되고, 이미지표의 넘버링이 표시됨을 알 수 있다. The present invention may further include an image area automatic display unit for graphically displaying the position and size of an image of an image file loaded based on a reference image designated by a user. The image area automatic display unit graphically displays the area occupied by each image in the table based on the entire image. In particular, it is useful when the images in the table are portions of one common image (ie, the images cropped within the image as described above). The figure in the upper left of FIG. 19 is a reference image. When a user loads an image and sets it as the reference image, each image in the table graphically displays the area and position of each image as shown in the figure on the right side of FIG. It can be seen that the areas of each image are displayed in a rectangle and the numbering of the image table is displayed.

도 20은 본 발명의 일 실시예에 따른 애니메이션표와 플로우 다이어그램을 만드는 이미지 정보의 문서화 장치의 블록도이고, 도 21은 본 발명의 일 실시예에 따른 애니메이션표와 플로우 다이어그램을 보여주는 도면이다. 20 is a block diagram of an apparatus for documenting image information for creating an animation table and a flow diagram according to an embodiment of the present invention, and FIG. 21 is a diagram showing an animation table and a flow diagram according to an embodiment of the present invention.

본 발명의 일 실시예에 따른 이미지 정보의 문서화 장치는 애니메이션표 로드부(400), 이미지 파일 로드부(410), 이미지 정보 입력부(420), 애니메이션 플로우 다이어그램 작성부(430)를 포함하여 구성될 수 있다. An apparatus for documenting image information according to an embodiment of the present invention includes an animation table loading unit 400, an image file loading unit 410, an image information input unit 420, and an animation flow diagram preparation unit 430. Can be.

애니메이션표 로드부(400)는 이미지의 메타 데이터와 각 이미지의 표시 시간이 기록되는 애니메이션표를 문서에 불러들인다. 애니메이션표는 전술한 이미지표를 로드하는 방법과 동일한 방법으로 문서에 기입될 수 있다. The animation table loading unit 400 loads an animation table in which metadata of an image and a display time of each image are recorded in a document. The animation table can be written in the document in the same manner as the method of loading the above-described image table.

이미지 파일 로드부(410)는 애니메이션표에 애니메이션 작업을 할 이미지 파일을 불러들인다. 문서에 애니메이션표를 생성하면 자동으로 이미지 파일을 로드하는 다이얼로그 박스가 생성되거나, 애니메이션표 내의 특정 셀을 선택하여 이미지 파일을 로드하는 다이얼로그 박스를 생성할 수 있다. 다이얼로그 박스에서 하나 이상의 이미지 파일을 선택하여 이미지 파일을 애니메이션표에 로드시킨다. The image file loading unit 410 loads an image file to be animated in the animation table. When you create an animation table in a document, you can create a dialog box that automatically loads an image file, or you can create a dialog box that loads an image file by selecting specific cells in the animation table. Select one or more image files in the dialog box to load the image files into the animation table.

이미지 정보 입력부(420)는 이미지 파일 로드부(410)에서 선택한 각 이미지 파일의 메타 데이터를 애니메이션표의 각 셀에 자동으로 입력한다. 이때 표의 특정 행 또는 열은 입력되는 메터 데이터가 미리 정의되어 있으며, 그 정의대로 메터 데이터 정보가 입력된다. 이때, 입력되는 메타 데이터는 전체 이미지를 기준으로 한 위치 정보, 이미지 폭, 이미지 높이, 파일 형식, 및 파일명 등이 될 수 있다. 또한, 불러들인 이미지 파일의 이미지를 표시할 수도 있다. 그리고, 애니메이션을 할 때 각 이미지 파일의 표시 시간이 입력된다. 기본 값으로 특정 값이 입력되고 사용자는 이 값을 조정하여 애니메이션에 변화를 줄 수 있다. 21의 상단에 있는 애니메이션표는 도 19의 이미지표와 대비하여 표시 시간(Duration)을 기입하는 열이 있는 점이 특히 다르다. The image information input unit 420 automatically inputs metadata of each image file selected by the image file load unit 410 into each cell of the animation table. In this case, a specific row or column of the table is previously defined meter data, the meter data information is input as defined. In this case, the input metadata may be location information based on the entire image, image width, image height, file format, and file name. You can also display an image of the imported image file. Then, the display time of each image file is inputted during animation. By default, a specific value is entered and the user can adjust this value to change the animation. The animation table at the top of 21 is particularly different in that there is a column for writing the display time (Duration) in contrast to the image table of FIG.

애니메이션 플로우 다이어그램 작성부(430)는 애니메이션표를 이용해서 도 21의 하단과 같은 플로우 다이어 그램을 자동으로 그린다. 애니메이션 플로우 다이어그램은 애니메이션의 진행 순서를 표시하는 다이어그램이다. 각 프레임을 나타내는 이미지들(460)이 순서대로 배치되면, 그 사이를 화살표(462)로 연결하여 프레임의 표시 시간을 나타낸다. 물론, 화살표 위의 표시 시간은 사용자가 직접 수정할 수도 있다. 프레임을 나타내는 셰이프와 프레임을 연결하는 화살표 셰이프를 이용하여 애니메이션 플로우 다이어그램을 직접 그릴 수도 있다. 프레임을 나타내는 셰이프를 불러들인 다음 이미지를 불러들일 수 있다. 그리고 각 프레임은 화살표 셰이프로 연결하고 표시 시간을 입력하여 애니메이션 플로우 다이어그램을 그릴 수 있다. The animation flow diagram generator 430 automatically draws a flow diagram as shown in the lower part of FIG. 21 using the animation table. An animation flow diagram is a diagram that shows the order of progress of an animation. When the images 460 representing each frame are arranged in sequence, an arrow 462 is connected therebetween to indicate the display time of the frame. Of course, the display time on the arrow can be directly modified by the user. You can also draw animation flow diagrams directly using shapes that represent frames and arrow shapes that connect the frames. You can load shapes that represent frames and then import images. Each frame can then be connected with an arrow shape and enter the display time to draw the animation flow diagram.

본 발명은 애니메이션표 또는 애니메이션 플로우 다이어그램으로부터 실제 애니메이션이 움직이는 것을 보여주는 시뮬레이션부(440)를 더 포함할 수 있다. 도 22와 같이 좌측에 시뮬레이션되는 파일 리스트들이 순서대로 표시되고, 실행을 하면 우측의 창에서 실제로 애니메이션되는 모습을 시뮬레이션한다. The present invention may further include a simulation unit 440 that shows the actual animation moving from the animation table or the animation flow diagram. As shown in FIG. 22, the list of files simulated on the left is displayed in order, and when executed, the file list simulates the animation in the right window.

또한, 본 발명에 있어서는 애니메이션표로부터 애니메이션 플로우 다이어그램을 생성하는 것뿐만 아니라, 반대로 애니메이션 플로우 다이어그램으로부터 애니메이션표를 자동으로 생성할 수도 있다. In addition, in the present invention, not only an animation flow diagram is generated from the animation table, but also an animation table can be automatically generated from the animation flow diagram.

도 23은 본 발명의 일 실시예에 따른 동일 위치의 인디케이터를 정렬하여 보여주는 이미지 정보의 문서화 장치의 블록도이고, 도 24는 본 발명의 일 실시예에 따른 동일 위치의 인디케이커가 정렬된 모습을 보여주는 도면이다. FIG. 23 is a block diagram of an apparatus for documenting image information showing alignment of indicators in the same position according to an embodiment of the present invention, and FIG. 24 illustrates an arrangement of indicators in the same position according to an embodiment of the present invention. Figure showing.

본 발명의 일 실시예에 따른 이미지 정보의 문서화 장치는 인디케이터표 로드부(500), 이미지 파일 로드부(510) 및 인디케이터 표시부(520)를 포함하여 구성될 수 있다. An apparatus for documenting image information according to an embodiment of the present invention may include an indicator table loading unit 500, an image file loading unit 510, and an indicator display unit 520.

인디케이터표 로드부(500)는 동일 위치에서 상황에 따라 바뀌어 표시되는 이미지를 정렬하여 나타낸는 인디케이터표를 문서에 불러들인다. 인디케이터표도 전술한 이미지표를 로드하는 방법과 동일한 방법(메뉴, 아이콘, 셰이프를 이용한 방법)으로 문서에 기입될 수 있다. The indicator table loading unit 500 loads the indicator table into the document, which is displayed by arranging the displayed images changed according to the situation at the same position. The indicator table can also be written in the document in the same manner as the above-described method of loading the image table (method using menus, icons, and shapes).

이미지 파일 로드부(510)는 인디케이터표에 정렬할 이미지 파일들을 불러들인다. 문서에 인디케이터표를 생성하면 자동으로 이미지 파일을 로드하는 다이얼로그 박스가 생성되거나, 인디케이터표 내의 특정 셀을 선택하여 이미지 파일을 로드하는 다이얼로그 박스를 생성할 수 있다. 다이얼로그 박스에서 하나 이상의 이미지 파일을 선택하여 이미지 파일을 인디케이터표에 로드시킨다. The image file loading unit 510 loads image files to be sorted in the indicator table. Creating an indicator table in a document creates a dialog box that automatically loads an image file, or creates a dialog box that loads an image file by selecting a specific cell in the indicator table. Select one or more image files in the dialog box to load the image files into the indicator table.

인디케이터 표시부(520)는 이미지 파일 로드부(510)에서 선택한 각 이미지 파일의 메타 데이터 중 이미지의 시작 위치와 크기(이미지 폭과 높이)를 비교하여 같은 값을 가지는 이미지들을 정렬하여 인디케이터표의 각 셀에 자동으로 입력한다. 이때 인디케이터 표시부(520)는 정렬된 이미지에 도 24와 같이 시작 좌표를 기입할 수 있다. 시작 좌표가 입력된 곳을 기준으로 아래로 정렬된 각 이미지들은 모두 동일한 시작 위치와 크기를 가지는 이미지들이다. The indicator display unit 520 compares the start position and the size (image width and height) of the image among the metadata of each image file selected by the image file load unit 510 and arranges the images having the same value in each cell of the indicator table. Enter automatically. In this case, the indicator display unit 520 may write the start coordinates in the aligned image as shown in FIG. 24. Each of the images arranged downward based on where the starting coordinates are entered are images having the same starting position and size.

본 발명이 속하는 기술분야의 통상의 지식을 가진 자는 본 발명이 그 기술적 사상이나 필수적인 특징을 변경하지 않고서 다른 구체적인 형태로 실시될 수 있다는 것을 이해할 수 있을 것이다. 그러므로 이상에서 기술한 실시예들은 모든 면에서 예시적인 것이며 한정적이 아닌 것으로 이해해야만 한다. 본 발명의 범위는 상기 상세한 설명보다는 후술하는 특허청구의 범위에 의하여 나타내어지며, 특허청구의 범위의 의미 및 범위 그리고 그 균등 개념으로부터 도출되는 모든 변경 또는 변형된 형태가 본 발명의 범위에 포함되는 것으로 해석되어야 한다.Those skilled in the art will appreciate that the present invention can be embodied in other specific forms without changing the technical spirit or essential features of the present invention. Therefore, it should be understood that the embodiments described above are exemplary in all respects and not restrictive. The scope of the present invention is indicated by the scope of the following claims rather than the detailed description, and all changes or modifications derived from the meaning and scope of the claims and the equivalent concept are included in the scope of the present invention. Should be interpreted.

도 1은 그래픽 유저 인터페이스(GUI; Graphic User Interface) 이미지를 제작한 후 이미지를 잘라내어 세분화하는 것을 보여주는 도면이다. FIG. 1 is a diagram illustrating cutting and subdividing an image after producing a Graphic User Interface (GUI) image.

도 3은 본 발명의 일 실시예에 따른 이미지 내 선택 영역을 일괄 저장하는 장치의 블록도이다. 3 is a block diagram of an apparatus for collectively storing a selection area in an image according to an embodiment of the present invention.

도 4는 본 발명의 일 실시예에 따른 이미지 내 선택 영역을 일괄 저장하는 장치의 유저 인터페이스를 보여주는 도면이다. 4 is a diagram illustrating a user interface of an apparatus for collectively storing a selection area in an image according to an exemplary embodiment.

도 5는 본 발명의 일 실시예에 따른 이미지 내 선택 영역을 일괄 저장하는 장치에 따라 이미지 편집부에서 선택된 영역들이 선택 이미지 관리부로 추출되어 일괄 저장되는 모습을 보여주는 도면이다. FIG. 5 is a diagram illustrating a state in which regions selected by an image editing unit are extracted to a selection image management unit and collectively stored according to an apparatus for collectively storing a selection region in an image according to an embodiment of the present invention.

도 6은 본 발명의 일 실시예에 따른 이미지 내 선택 영역을 일괄 저장하는 장치의 선택 이미지 관리부의 블록도이다. 6 is a block diagram of a selection image manager of an apparatus for collectively storing a selection area in an image according to an exemplary embodiment.

도 7은 본 발명의 일 실시예에 따른 이미지 내 선택 영역을 일괄 저장하는 장치의 레이어 관리부의 블록도이다. 7 is a block diagram of a layer manager of an apparatus for collectively storing a selection area in an image according to an exemplary embodiment.

도 8은 본 발명의 일 실시예에 따른 레이어 관리부 내의 배경색 지정부를 보여주는 도면이다. 8 is a diagram illustrating a background color designator in the layer manager according to an exemplary embodiment of the present invention.

도 9는 본 발명의 일 실시예에 따른 레이어 관리부 내의 레이어 플래그 선택부를 보여주는 도면이다. 9 is a diagram illustrating a layer flag selector within a layer manager according to an embodiment of the present invention.

도 10은 본 발명의 일 실시예에 따른 레이어 관리부 내의 레이어 상태 저장복귀부를 보여주는 도면이다. 10 is a diagram illustrating a layer state storage return unit in a layer manager according to an embodiment of the present invention.

도 12는 본 발명의 일 실시예에 따른 시작 좌표값을 자동으로 문서에 입력하는 과정을 보여주는 도면이다. 12 is a diagram illustrating a process of automatically inputting a start coordinate value into a document according to an embodiment of the present invention.

도 13은 본 발명의 일 실시예에 따른 컬러값을 자동으로 문서에 입력하는 과정을 보여주는 도면이다. FIG. 13 illustrates a process of automatically inputting a color value into a document according to an embodiment of the present invention. FIG.

도 14는 본 발명의 일 실시예에 따른 이미지의 높이와 폭을 자동으로 문서에 입력하는 과정을 보여주는 도면이다. 14 is a diagram illustrating a process of automatically inputting a height and a width of an image into a document according to an embodiment of the present invention.

도 15는 본 발명의 일 실시예에 따른 파일명을 자동으로 문서에 입력하는 과정을 보여주는 도면이다.15 is a diagram illustrating a process of automatically inputting a file name into a document according to an embodiment of the present invention.

도 18은 본 발명의 일 실시예에 따른 이미지표를 만드는 이미지 정보의 문서화 장치의 블록도이다. 18 is a block diagram of an apparatus for documenting image information for creating an image table according to an embodiment of the present invention.

도 19는 본 발명의 일 실시예에 따른 이미지표를 보여주는 도면이다. 19 is a view showing an image table according to an embodiment of the present invention.

도 20은 본 발명의 일 실시예에 따른 애니메이션표와 플로우 다이어그램을 만드는 이미지 정보의 문서화 장치의 블록도이다.20 is a block diagram of an apparatus for documenting image information for creating an animation table and a flow diagram according to an embodiment of the present invention.

도 21은 본 발명의 일 실시예에 따른 애니메이션표와 플로우 다이어그램을 보여주는 도면이다. 21 is a diagram illustrating an animation table and a flow diagram according to an embodiment of the present invention.

도 22는 본 발명의 일 실시예에 따른 애니메이션부를 보여주는 도면이다. 22 is a diagram illustrating an animation unit according to an embodiment of the present invention.

도 23은 본 발명의 일 실시예에 따른 동일 위치의 인디케이터를 정렬하여 보여주는 이미지 정보의 문서화 장치의 블록도이다. FIG. 23 is a block diagram of an apparatus for documenting image information showing alignment of indicators in the same position according to an embodiment of the present invention.

도 24는 본 발명의 일 실시예에 따른 동일 위치의 인디케이커가 정렬된 모습을 보여주는 도면이다. 24 is a view illustrating a state in which indicators of the same position are aligned according to an embodiment of the present invention.

<도면의 주요 부분에 대한 부호의 설명><Explanation of symbols for main parts of the drawings>

100: 이미지 편집부 110: 부분 확대부100: image editing unit 110: partial enlargement unit

120: 선택 이미지 관리부 130: 레이어 관리부120: selection image management unit 130: layer management unit

200: 이미지 로드부 210: 이미지 정보 선택부200: image loading unit 210: image information selection unit

220: 이미지 정보 표시부 300: 이미지표 로드부220: image information display unit 300: image table loading unit

310: 이미지 파일 로드부 320: 이미지 정보 입력부310: image file loading unit 320: image information input unit

Claims

An image loading unit which displays an image by reading an image file input with meta data;

An image information selection unit that selects a type of metadata relating to attributes of the image to be displayed on the image; And

And an image information display unit for automatically displaying the information of the selected metadata on the image.

The method of claim 1,

And the metadata includes at least one of location information, color information, image width length, image height length, and file name based on the entire image.

The method of claim 1,

And the information of the meta data displayed on the image is displayed using guide lines.

An image table loading unit for importing an image table for recording the meta data of the image;

An image file loading unit for importing one or more image files into which meta data is input; And

And an image information input unit for inputting metadata of the image file into each cell of the image table.

The method of claim 4, wherein

And the metadata includes at least one of location information, image width length, image height length, file format, and file name based on the entire image.

The method of claim 4, wherein

And the image table further comprises displaying an image of the imported image file.

The method of claim 4, wherein

And an image area automatic display unit for selecting one of the image files as a reference image and graphically displaying the position and size of the image of the loaded image file based on the reference image.

An animation table loading unit for importing an animation table in which the meta data of the image and the display time are recorded;

The method of claim 8,

And an animation flow diagram preparation unit for automatically drawing an animation flow diagram using the animation table.

The method of claim 8,

And the animation table further comprises displaying an image of the imported image file.

The method of claim 9,

And the animation flow diagram arranges the images to be connected in order, connects each image with an arrow, and displays and displays the display time of the image on the arrow.

The method of claim 9,

And an animation table preparation unit for automatically creating the animation table from the animation flow diagram.

The method of claim 9,

Apparatus for documenting image information, further comprising a simulation unit showing the actual animation from the animation table or the animation flow diagram.

An indicator table loading unit for importing an indicator table for explaining an image displayed according to a situation at the same location;

And an indicator display unit for automatically aligning and displaying images displayed at the same position from the metadata of the image file.

The method of claim 15,

And the metadata includes location information, an image width length, and an image height length based on the entire image.

The method of claim 15,

And said indicator display further comprises displaying location information in an aligned image.