KR20050014366A - Edit of user definition graphic interface - Google Patents

Edit of user definition graphic interface

Info

Publication number
KR20050014366A
KR20050014366A KR1020030052968A KR20030052968A KR20050014366A KR 20050014366 A KR20050014366 A KR 20050014366A KR 1020030052968 A KR1020030052968 A KR 1020030052968A KR 20030052968 A KR20030052968 A KR 20030052968A KR 20050014366 A KR20050014366 A KR 20050014366A
Authority
KR
South Korea
Prior art keywords
menu
interface
image
area
software
Prior art date
Application number
KR1020030052968A
Other languages
Korean (ko)
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 KR1020030052968A priority Critical patent/KR20050014366A/en
Publication of KR20050014366A publication Critical patent/KR20050014366A/en

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0481—Interaction techniques based on graphical user interfaces [GUI] based on specific properties of the displayed interaction object or a metaphor-based environment, e.g. interaction with desktop elements like windows or icons, or assisted by a cursor's changing behaviour or appearance
    • G06F3/0482—Interaction with lists of selectable items, e.g. menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Abstract

PURPOSE: A method for enabling a user to edit a graphic interface of software is provided to help the user easily analyze a menu of a complex structure by enabling the user to freely design a figure/size/position of the actually needed menu and offer a more intuitive menu than a user defined menu of an image combination typed used in the FA(Factory Automation) software. CONSTITUTION: A group of the menu is selected and images of each group menu are made. The designed image is visualized on a screen by an image file selection menu(11) of the editing software. A menu region is fixed based on a visualized interface image. The region is made by drawing respective menus with a figure making tool menu(13). An execution program of the corresponding menu is connected to the made figure. A semi-transparent color according to a menu operation is fixed to the made figure. The interface image file, a shape/position/semi-transparent color of the figure representing the area, and the information for connected menu program are stored in an interface information database(16).

Description

사용자 정의 그래픽 인터페이스의 편집 방법{Edit of user definition graphic interface}Edit of user definition graphic interface

본 발명은 소프트웨어 환경에서 사용되는 GUI(그래픽 사용자 인터페이스)의편집에 관한 것으로 종래에 사용된 가장 근접한 기술에는 사용자 정의 메뉴와 스킨 등의 기술이 있다.The present invention relates to the editing of a graphical user interface (GUI) used in a software environment, and the closest techniques conventionally used include custom menus and skins.

근래에 사용중인 가장 근접한 기술 중 하나인 사용자 정의 메뉴의 편집 방법은 간단하고 편리한 반면에 모양과 크기 그리고 위치가 고정적으로 표현되어 디자인적인 측면과 사용자의 인식 측면에서 인터페이스의 효율이 떨어진다. 또 근접한 두 번째 기술인 스킨 방식의 경우 편집 자유도가 높아 디자인 적인 측면과 사용자의 인식 측면에서 인터페이스 효율은 높지만, 편집이 일반 사용자가 사용하기에는 복잡하고 난해하다. 스킨방식은 소프트웨어마다 서로 다른 방법을 제시하는데, 어떤 방법은 메뉴별 상태에 따른 조각 이미지를 저장하여 사용하거나, SDK(Software Development Kit)를 이용하고 컴파일 과정을 거쳐 제작하는 등, 일반 사용자가 제작하기에는 힘든 방식이다. 본 발명은 상기에서 설명한 기존 기술들의 문제점을 해결하고, 보다 쉽고 편리한 편집 환경 제공을 그 목적으로 한다.Editing a custom menu, one of the closest technologies used in recent years, is simple and convenient, while the shape, size, and position are fixedly expressed, which reduces the efficiency of the interface in terms of design and user recognition. In addition, the second method, skin method, which has high degree of freedom of editing, has high interface efficiency in terms of design and user recognition, but editing is complicated and difficult for general users to use. The skin method suggests different methods for each software, and some methods are not suitable for general users, such as storing and using fragment images according to the state of each menu, or using the SDK (Software Development Kit). It's a tough way. The present invention aims to solve the problems of the existing techniques described above and to provide an easier and more convenient editing environment.

도 1은 본 발명에 의한 편집기의 구성을 도시한 순서도 이다.1 is a flow chart showing the configuration of an editor according to the present invention.

도 2a는 그래픽 인터페이스에 사용될 이미지의 예이다.2A is an example of an image to be used for the graphical interface.

도 2b는 본 발명의 편집기를 이용해 메뉴영역의 도형을 설정한 예이다.2B illustrates an example of setting a figure of a menu area using the editor of the present invention.

도 2c는 본 발명의 편집기를 이용해 완성된 인터페이스의 예이다.2C is an example of an interface completed using the editor of the present invention.

도 3은 본 발명의 이미지파일선택메뉴 화면이다.3 is an image file selection menu screen of the present invention.

도 4는 본 발명의 편집기에 인터페이스 이미지가 가시화된 화면이다.4 is a screen in which an interface image is visualized in the editor of the present invention.

도 5는 본 발명의 도형제작도구메뉴의 사용 화면이다.5 is a use screen of the figure production tool menu of the present invention.

도 6은 본 발명의 편집기의 반투명색상메뉴의 설정 화면이다.6 is a setting screen of the translucent color menu of the editor of the present invention.

도 7a는 보안관제 소프트웨어에 사용될 인터페이스의 디자인 예이다.7A is a design example of an interface to be used for security control software.

도 7b는 보안관제 소프트웨어에 본 발명을 적용한 인터페이스 예이다.7B is an example of an interface to which the present invention is applied to security control software.

상기의 목적을 달성하기 위하여, 본 발명에 의한 인터페이스의 바탕이 될 인터페이스 이미지들을 선택하는 이미지파일선택메뉴; 선택된 바탕 이미지에 메뉴로 사용될 영역을 설정하기 위한 도형제작도구메뉴; 제작된 메뉴 영역의 표현을 위해서 반투명 색상을 설정하는 반투명색상메뉴; 설정된 메뉴 영역의 표현을 위해서 외곽선 색상을 설정하는 외곽선색상메뉴; 이미지의 선택된 영역을 프로그램과 연결하기 위한 프로그램연결메뉴; 이미지파일의 위치와 영역의 모양, 크기, 색상, 연결구조를 기억하기 위한 인터페이스정보데이타베이스를 포함함을 특징으로 한다.In order to achieve the above object, an image file selection menu for selecting interface images to be the basis of an interface according to the present invention; A figure making tool menu for setting an area to be used as a menu for the selected background image; A translucent color menu for setting a translucent color for the representation of the produced menu area; An outline color menu for setting an outline color to represent a set menu area; A program connection menu for connecting a selected area of the image with a program; It includes an interface information database for storing the location, area, shape, size, color, and connection structure of the image file.

상기의 목적을 달성하기 위하여, 본 발명의 사용자 정의 그래픽 인터페이스 편집 방법은 (a)메뉴의 그룹을 선정하고, 그룹별 메뉴의 이미지들을 제작하는 단계; (b)디자인된 이미지를 편집 소프트웨어의 이미지파일선택메뉴에 의해서 화면에 가시화하는 단계; (c)가시화된 인터페이스 이미지를 기반으로 메뉴 영역의 설정하는 단계; (d)도형제작메뉴를 이용하여 각각의 메뉴들을 그려서 영역을 만드는 단계; (e)만들어진 도형에 해당메뉴의 실행 프로그램을 연결하는단계; (f)만들어진 도형에 메뉴 동작에 따른 반투명 색상을 설정하는 단계; (g)인터페이스 이미지 파일 및 영역을 표시하는 도형의 모양과, 위치, 반투명 색상과 연결된 메뉴 프로그램의 정보를 인터페이스정보데이타베이스에 저장하는 단계를 포함함을 특징으로 한다.In order to achieve the above object, the user-defined graphical interface editing method of the present invention comprises the steps of (a) selecting a group of menus, and producing images of the menu for each group; (b) visualizing the designed image on the screen by an image file selection menu of the editing software; (c) setting a menu area based on the visualized interface image; (d) drawing areas of each menu using a shape making menu to create an area; (e) connecting the execution program of the menu to the created figure; (f) setting a translucent color according to a menu operation on the created figure; (g) storing information of a menu program associated with the shape, position, and translucent color of the figure representing the interface image file and the area in the interface information database.

이하에서 첨부된 도면을 참조하여 본 발명을 상세히 설명한다.Hereinafter, the present invention will be described in detail with reference to the accompanying drawings.

도 1에 표현한 본 발명의 사용자 정의 그래픽 인터페이스 구조도는 인터페이스이미지(10), 이미지파일선택메뉴(11), 사용자정의그래픽인터페이스제작소프트웨어(12), 도형제작도구메뉴(13), 연결프로그램메뉴(14), 반투명색상선택메뉴(15), 인터페이스정보데이타베이스(16), 그래픽인터페이스사용소프트웨어(17)로 구성된다. 사용자정의그래픽인터페이스제작소프트웨어(12)는이미지파일선택메뉴(11), 도형제작도구메뉴(13), 연결프로그램메뉴(14), 반투명색상선택메뉴(15)의 기능을 이용하여, 인터페이스이미지(10)와 설정 영역의 도형 정보를 편집 제작하고, 인터페이스정보데이타베이스(16)에 저장한 후, 그래픽인터페이스사용소프트웨어(17)에서 사용할 수 있도록 하는 구조를 갖는다.The user-defined graphic interface structure diagram of the present invention shown in FIG. 1 includes an interface image 10, an image file selection menu 11, a user-defined graphic interface manufacturing software 12, a figure making tool menu 13, and a connection program menu 14 ), A semi-transparent color selection menu 15, an interface information database 16, and a graphic interface using software 17. The user-defined graphic interface creation software 12 utilizes the functions of the image file selection menu 11, the figure creation tool menu 13, the connection program menu 14, the translucent color selection menu 15, and the interface image 10. ), And the figure information of the setting area are edited and produced, stored in the interface information database 16, and then used by the graphic interface using software 17. FIG.

도 2a는 인터페이스이미지(10)에 해당하며, 음악 재생용 소프트웨어에서 사용될 인터페이스이미지(10)를 포토샵 또는 페인터와 같은 일반 그래픽 편집기를 이용하여 제작한 예이다. 도 2a는 도 3에서 보는 바와 같이 편집기의 이미지파일선택메뉴(11)에 의해서 선택되고, 도 4에서 보는 바와 같이 편집기 화면에 가시화 된다.FIG. 2A corresponds to the interface image 10. The interface image 10 to be used in the music reproducing software is an example of using an ordinary graphic editor such as Photoshop or Painter. FIG. 2A is selected by the image file selection menu 11 of the editor as shown in FIG. 3 and is visualized on the editor screen as shown in FIG.

도 2b는 도형제작도구메뉴(13)에 의해서 생성된 도형들을 보인 예이다. 이 파란색의 도형들은 사용자가 제작한 도 2a의 이미지에서 사용자의 의도에 따라 디자인된 메뉴의 위치와 모양 그리고 크기에 맞게 사용될 부분만을 도형제작도구메뉴(13)로 영역 설정한 예이다. 도 2b에서 보이는 파란색 도형들의 바탕 색상과 외곽선 색상은 반투명색상선택메뉴(15)를 통하여 사용자의 취향에 맞게 다른 색상으로 변형하거나, 투명 또는 역상으로 변경할 수 있다. 도형으로 설정된 이 영역들은 연결프로그램메뉴(14), 반투명색상선택메뉴(15)을 거쳐서 그래픽인터페이스사용소프트웨어(17)의 실제 메뉴로 사용된다. 도 5는 도형제작도구메뉴(13)의 사용 예이며, 도 6은 연결프로그램메뉴(14), 반투명색상선택메뉴(15)의 사용 예이다.2B shows an example of figures generated by the figure making tool menu 13. These blue figures are an example in which the portion of the image created by the user is used to match the position, shape, and size of the menu designed according to the user's intention in the figure creation tool menu 13. The background color and the outline color of the blue figures shown in FIG. 2B may be transformed into other colors or transparent or reversed according to the user's taste through the semi-transparent color selection menu 15. These areas set as figures are used as actual menus of the graphic interface using software 17 via the connection program menu 14 and the translucent color selection menu 15. 5 shows an example of using the figure making tool menu 13, and FIG. 6 shows an example of using the connection program menu 14 and the translucent color selection menu 15. As shown in FIG.

도 2c는 그래픽 인터페이스의 완성된 예를 보인다. 도 2c는 인터페이스이미지(11) 위에 메뉴로 사용될 위치를 영역으로 설정한 도 2b의 도형들을 올려 놓은 모습과 같다. 사용자는 인터페이스이미지(11)의 색상이 변경된 곳을 실제 메뉴와 연결하여 사용함으로써 완성된다.2C shows a complete example of a graphical interface. FIG. 2C is the same as the figure shown in FIG. 2B with the location used as a menu on the interface image 11 as an area. The user is completed by using the place where the color of the interface image 11 is changed in connection with the actual menu.

본 발명으로 생성된 영역들은 사용자로부터 명령을 입력받는 단순 메뉴 용도로 사용되며, 또는 소프트웨어로부터 사용자에게 어떠한 상태를 나타내기 위한 출력 용도로 이용될 수 있다. 도 7a는 건물의 보안관제용 소프트웨어에서 사용하기 위해 디자인된 이미지의 예이며, 7b는 각종 감지 센서의 감지 영역을 설정한 예이다. 이 예는 보안용 소프트웨어에 본 발명을 적용할 경우 설정된 영역을 메뉴용도가 아닌 경보상태 표시 용도로 사용될 수 있다는 것을 보여준다.Areas generated by the present invention may be used for a simple menu for receiving a command from a user, or may be used for an output for indicating a state to a user from software. 7A is an example of an image designed for use in security control software of a building, and 7B is an example of setting detection areas of various detection sensors. This example shows that when the present invention is applied to security software, the set area can be used for alarm status display and not for menu purposes.

본 발명은 메뉴의 편집에 따라서 복잡한 구조의 메뉴를 사용자가 쉽게 해석할 수 있도록 도와준다. 이는 실제 필요한 메뉴의 모양과 크기 그리고 위치를 자유롭게 디자인 함으로써 가능하다. 또 다른 효과로는 공장자동화 계통 소프트웨어에서 사용되는 이미지 조합 방식의 사용자 정의 메뉴 보다 더욱 직관적인 메뉴를 제공하면서, 개발 난이도는 월등히 쉽다는 것이다. 이는 관련 소프트웨어 개발에 있어서 인력과 기간, 비용을 축소시키는 이점을 기대할 수 있다.The present invention helps the user to easily interpret a menu having a complicated structure as the menu is edited. This can be done by freely designing the shape, size, and position of the actual menu. Another effect is that the difficulty of development is much easier, while providing a more intuitive menu than the custom image combination menu used in factory automation system software. This can be expected to reduce the manpower, length and cost of developing related software.

Claims (3)

사용자 정의 그래픽 인터페이스 편집기에 있어서,In the custom graphical interface editor, 인터페이스의 바탕이 될 인터페이스 이미지들을 선택하는 이미지파일선택메뉴;An image file selection menu for selecting interface images on which the interface is to be based; 선택된 바탕 이미지에 메뉴로 사용될 영역을 설정하기 위한 도형제작도구메뉴;A figure making tool menu for setting an area to be used as a menu for the selected background image; 제작된 메뉴 영역의 표현을 위해서 반투명 색상을 설정하는 반투명색상메뉴;A translucent color menu for setting a translucent color for the representation of the produced menu area; 설정된 메뉴 영역의 표현을 위해서 외곽선 색상을 설정하는 외곽선색상메뉴;An outline color menu for setting an outline color to represent a set menu area; 이미지의 선택된 영역을 프로그램과 연결하기 위한 프로그램연결메뉴;A program connection menu for connecting a selected area of the image with a program; 이미지파일의 위치와 영역의 모양, 크기, 색상, 연결 구조를 기억하기 위한 인터페이스정보데이타베이스를 포함함을 특징으로 하는 사용자 정의 그래픽 인터페이스 편집기.A user-defined graphical interface editor comprising an interface information database for storing the location, size, color, and connection structure of an image file. 사용자 정의 그래픽 인터페이스 편집기에 있어서In the custom graphical interface editor, (a)메뉴의 그룹을 선정하고, 그룹별 메뉴의 이미지들을 제작하는 단계; (b)디자인된 이미지를 편집 소프트웨어의 이미지파일선택메뉴에 의해서 화면에 가시화 하는 단계; (c)가시화된 인터페이스 이미지를 기반으로 메뉴 영역의 설정하는 단계; (d)도형제작메뉴를 이용하여 각각의 메뉴들을 그려서 영역을 만드는 단계; (e)만들어진 도형에 해당메뉴의 실행 프로그램을 연결하는단계; (f)만들어진 도형에 메뉴 동작에 따른 반투명 색상을 설정하는 단계; (g)인터페이스 이미지 파일 및 영역을 표시하는 도형의 모양과, 위치, 반투명 색상과 연결된 메뉴 프로그램의 정보를 인터페이스정보데이타베이스에 저장하는 단계를 포함함을 특징으로 하는 편집기.(a) selecting a group of menus and producing images of menus for each group; (b) visualizing the designed image on the screen by an image file selection menu of the editing software; (c) setting a menu area based on the visualized interface image; (d) drawing areas of each menu using a shape making menu to create an area; (e) connecting the execution program of the menu to the created figure; (f) setting a translucent color according to a menu operation on the created figure; and (g) storing in the interface information database information of a menu program associated with the shape, position, and translucent color of the figure representing the interface image file and the area. 청구항 2의 절차를 이용하여 생성된 자료를 인터페이스 용도로 사용하는 소프트웨어.Software that uses the data created using the procedure of claim 2 for interface purposes.
KR1020030052968A 2003-07-31 2003-07-31 Edit of user definition graphic interface KR20050014366A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
KR1020030052968A KR20050014366A (en) 2003-07-31 2003-07-31 Edit of user definition graphic interface

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
KR1020030052968A KR20050014366A (en) 2003-07-31 2003-07-31 Edit of user definition graphic interface

Publications (1)

Publication Number Publication Date
KR20050014366A true KR20050014366A (en) 2005-02-07

Family

ID=37225512

Family Applications (1)

Application Number Title Priority Date Filing Date
KR1020030052968A KR20050014366A (en) 2003-07-31 2003-07-31 Edit of user definition graphic interface

Country Status (1)

Country Link
KR (1) KR20050014366A (en)

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR100703758B1 (en) * 2005-05-04 2007-04-06 삼성전자주식회사 Method and apparatus for offering application remote controllable interface
WO2014145746A1 (en) * 2013-03-15 2014-09-18 Sonos, Inc. Media playback system controller having multiple graphical interfaces

Cited By (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
KR100703758B1 (en) * 2005-05-04 2007-04-06 삼성전자주식회사 Method and apparatus for offering application remote controllable interface
WO2014145746A1 (en) * 2013-03-15 2014-09-18 Sonos, Inc. Media playback system controller having multiple graphical interfaces
US9727219B2 (en) 2013-03-15 2017-08-08 Sonos, Inc. Media playback system controller having multiple graphical interfaces

Similar Documents

Publication Publication Date Title
Blenkhorn et al. Using speech and touch to enable blind people to access schematic diagrams
US20060010384A1 (en) Real-time multimedia visual programming system
JPH08287288A (en) Plurality of side annotations interactive three-dimensional graphics and hot link
KR20170078651A (en) Authoring tools for synthesizing hybrid slide-canvas presentations
JP2008541286A (en) Method and apparatus for generating a parametric model related to a three-dimensional shape
KR100860963B1 (en) Apparatus and method for developing software based on component
US5634024A (en) Definition execution system for operations and functions in computer system
US5812805A (en) Method and editing system for setting tool button
CN111368516A (en) Visualized large-screen intelligent editing system
JPH0573529A (en) Image simulation system
US20030201992A1 (en) Face modification tool
JPH11175757A (en) Processor and method for information processing and provided medium
KR20060042317A (en) Method for managing color and apparatus thereof
JPH11175761A (en) Processor and method for information processing and provided medium
KR20050014366A (en) Edit of user definition graphic interface
JP4813639B2 (en) Feature-type macro language for defining customized analysis and customized graphics functions
JPH06187396A (en) Network constitution design aid system
JPH09237181A (en) Application developing device and application developing method
Coomans et al. Mixed task domain representation in VR-DIS
CN115049804B (en) Editing method, device, equipment and medium for virtual scene
CN115545401B (en) Urban physical examination evaluation method, system and computer equipment based on visual index model configuration
JP2845875B2 (en) Defined object creation processing device
CN111489450B (en) Three-dimensional model sectioning processing method, device, computer equipment and storage medium
Perutka Tips and tricks for programming in Matlab
JPH10105389A (en) Method and device for supporting software designing

Legal Events

Date Code Title Description
A201 Request for examination
E902 Notification of reason for refusal
E601 Decision to refuse application
E601 Decision to refuse application