JP6647701B1 - Electronic device comprising graphical user interface using virtual container and method of operating the same - Google Patents

Electronic device comprising graphical user interface using virtual container and method of operating the same Download PDF

Info

Publication number
JP6647701B1
JP6647701B1 JP2019153456A JP2019153456A JP6647701B1 JP 6647701 B1 JP6647701 B1 JP 6647701B1 JP 2019153456 A JP2019153456 A JP 2019153456A JP 2019153456 A JP2019153456 A JP 2019153456A JP 6647701 B1 JP6647701 B1 JP 6647701B1
Authority
JP
Japan
Prior art keywords
distance information
component
window
electronic device
containers
Prior art date
Legal status (The legal status 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 status listed.)
Active
Application number
JP2019153456A
Other languages
Japanese (ja)
Other versions
JP2020077366A (en
Inventor
ハ イ、ジュン
ハ イ、ジュン
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tobesoft Co Ltd
Original Assignee
Tobesoft Co Ltd
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 Tobesoft Co Ltd filed Critical Tobesoft Co Ltd
Application granted granted Critical
Publication of JP6647701B1 publication Critical patent/JP6647701B1/en
Publication of JP2020077366A publication Critical patent/JP2020077366A/en
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

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
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range

Landscapes

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

Abstract

【課題】仮想コンテナを用いてグラフィカルユーザインタフェースを構成する電子装置およびその動作方法を提供すること。【解決手段】仮想コンテナを用いてグラフィカルユーザインタフェースを構成する電子装置は、電子装置において実行中のプログラムと対応するウィンドウを表示するように設定された表示部、外部から受信された第１命令に基づいて、前記ウィンドウ内に一つ以上のコンテナを生成し、前記生成された一つ以上のコンテナの内部に少なくとも一つのコンポーネントを挿入するコンポーネント管理部、前記ウィンドウの枠線のうち少なくとも一つの枠線から前記一つ以上のコンテナの枠線のうち少なくとも一つの枠線までの距離に対する第１距離情報を取得し、前記一つ以上のコンテナの枠線のうち少なくとも一つの枠線から前記少なくとも一つのコンポーネントまでの距離に対する第２距離情報を取得し、前記第１距離情報および第２距離情報を用いて前記ウィンドウの枠線のうち少なくとも一つの枠線から前記少なくとも一つのコンポーネントまでの距離に対する第３距離情報を取得する位置情報管理部、および外部から受信された第２命令に基づいて、前記ウィンドウ内に生成された前記一つ以上のコンテナを前記ウィンドウから削除し、前記取得された第３距離情報を用いて前記少なくとも一つのコンポーネントの前記ウィンドウ内での位置を計算し、前記計算結果に基づいて前記少なくとも一つのコンポーネントを含む前記ウィンドウを生成するグラフィカルユーザインタフェース生成部を含む。【選択図】図１Provided is an electronic device that configures a graphical user interface using a virtual container, and an operation method thereof. An electronic device that configures a graphical user interface using a virtual container includes a display unit configured to display a window corresponding to a program being executed in the electronic device, and a first command received from the outside. A component management unit that generates at least one container in the window based on the generated one or more containers, and inserts at least one component into the generated one or more containers; Acquiring first distance information for a distance from a line to at least one of the frame lines of the one or more containers; Obtaining second distance information for a distance to one of the components, the first distance information and the second distance information; A position information management unit that obtains third distance information for a distance from at least one of the frame lines of the window to the at least one component using information, and a second command externally received. Removing the one or more containers created in the window from the window, calculating a position of the at least one component in the window using the obtained third distance information, A graphical user interface generator for generating the window including the at least one component based on the result. [Selection diagram] Fig. 1

Description

本発明は、仮想コンテナを用いてグラフィカルユーザインタフェースを構成する電子装置およびその動作方法に関する。   The present invention relates to an electronic device that configures a graphical user interface using a virtual container and a method of operating the electronic device.

最近、コンピュータ、スマートフォンまたはタブレットＰＣなどのような電子装置が広く普及されるにつれて、このような電子装置を用いてデータを処理する様々な方式が紹介されている。例えば、様々なセンサが備えられた電子装置は、センサを介して電子装置の周辺環境に関する情報または電子装置を用いるユーザに関する情報などを取得し、取得された情報に基づいてデータを処理することができる。   Recently, as electronic devices such as computers, smart phones, and tablet PCs have become widely used, various methods of processing data using such electronic devices have been introduced. For example, an electronic device equipped with various sensors may acquire information on the surrounding environment of the electronic device or information on a user who uses the electronic device via the sensors, and process data based on the acquired information. it can.

電子装置内で処理されたデータは、予め設定されたものに従い、様々な形態のグラフィカルユーザインタフェース（ｇｒａｐｈｉｃａｌ ｕｓｅｒ ｉｎｔｅｒｆａｃｅ、以下、ＧＵＩ）を介して提供されることができる。データが提供される方式を定義するＧＵＩは、ＧＵＩの製作を担当する開発者により予め生成されて電子装置の格納部に格納されることができ、電子装置は、予め生成されて格納されたＧＵＩを用いてデータを出力することができる。   The data processed in the electronic device may be provided through various forms of graphical user interface (hereinafter, GUI) according to a preset one. The GUI that defines the manner in which the data is provided can be generated in advance by a developer in charge of creating the GUI and stored in a storage unit of the electronic device. Can be used to output data.

プログラム開発者は、電子装置の表示部を介して出力されるＧＵＩなど、様々な画面を構成するにおいて、コンポーネントおよびコンテナを用いることができる。コンポーネントは、様々なデータが出力される形態を定義したＵＩ（ｕｓｅｒ ｉｎｔｅｒｆａｃｅ）およびＵＸ（ｕｓｅｒ ｅｘｐｅｒｉｅｎｃｅ）の構成要素を意味するものであって、グリッド、テーブル、ラジオボタンおよびリストボックスなどのように用途に応じて様々な形態を有することができる。コンテナは、一つ以上のコンポーネントを含むように設定された構成単位または環境であって、含まれた一つ以上のコンポーネントの位置または大きさなどを決定する時に利用できる情報を含むように設定されることができる。   A program developer can use components and containers in configuring various screens such as a GUI output via a display unit of an electronic device. A component is a component of a UI (user interface) and a UX (user experience) that define a format in which various data is output, and is used as a grid, a table, a radio button, a list box, and the like. It can have various forms according to. A container is a unit or environment configured to include one or more components, and is configured to include information that can be used when determining a position or a size of one or more included components. Can be

コンテナは一つ以上のコンポーネントを含む形態で構成され、コンテナに含まれたコンポーネントはコンテナの子コンポーネントと命名できる。一方、電子装置は、実行中のプログラムと対応するＧＵＩを電子装置の表示部を介して出力する時、前記ＧＵＩを構成するコンポーネントの位置および大きさを決定するために前記コンポーネントが属したコンテナの位置および大きさを優先的に確認することができる。電子装置は、コンテナの位置および大きさが確認される場合、確認されたコンテナの位置および大きさに基づいてコンテナ内の子コンポーネントの位置および大きさを確認することができる。最後に、電子装置は、確認された子コンポーネントの位置および大きさに基づいて電子装置の表示部を介して出力されるＧＵＩを構成することができる。   The container is configured to include one or more components, and the components included in the container can be named child components of the container. On the other hand, when outputting the GUI corresponding to the program being executed through the display unit of the electronic device, the electronic device determines a position and a size of the component constituting the GUI by determining the position and size of the container to which the component belongs. The position and size can be checked with priority. When the position and the size of the container are confirmed, the electronic device can confirm the position and the size of the child component in the container based on the confirmed position and the size of the container. Finally, the electronic device can configure a GUI that is output via the display of the electronic device based on the identified position and size of the child component.

このように、電子装置は、表示部を介して出力されるＧＵＩを構成する時、様々なコンポーネントの位置を決定するために、前記コンポーネントが属したコンテナの位置を確認する過程を経ることになる。前記過程は、ＧＵＩを構成するコンポーネントおよびコンテナの数が多くないかまたは重複配置されたコンテナの数が多くない時には、プログラムの性能に大きな影響は及ぼさないが、コンポーネントおよびコンテナの数が多いかまたは重複配置されたコンテナの数が多い時には、プログラムの性能を低下させる主な原因になる。特に、コンテナは、電子装置の表示部を介して最終的に出力されるＧＵＩには視覚的に露出されないにもかかわらず、子コンポーネントの位置および大きさなどを定義する特性上、ＧＵＩを構成または出力するごとにその位置などが識別されなければならず、これはリソース占有をもたらすこととなる。   As described above, when configuring the GUI output through the display unit, the electronic device goes through a process of determining the positions of the containers to which the components belong in order to determine the positions of various components. . The above process has no significant effect on the performance of the program when the number of components and containers constituting the GUI is not large or the number of overlapping containers is not large, but the number of components and containers is large or When the number of overlapping containers is large, it is the main cause of deteriorating the performance of the program. In particular, although the container is not visually exposed to the GUI that is finally output through the display unit of the electronic device, the container is configured or configured to have a characteristic in defining the position and size of the child component. For each output, its location etc. must be identified, which results in resource occupation.

本文書に開示された様々な実施形態は、電子装置において表示部を介して出力されるＧＵＩを構成または出力するにおいて、コンテナと関連したデータを呼び出すことがなくても子コンポーネントの位置などを確認し決定できる方法を提案するために導き出されたものである。例えば、一実施形態による電子装置は、ＧＵＩを構成する時、ＧＵＩに含まれたコンポーネントが属したコンテナを全て削除する代わりに仮想コンテナを生成して最上位タグまたはフォーム（ｆｏｒｍ）オブジェクトを基準に子コンポーネントの位置情報を変更することによって、既存のコンテナと関連したデータを呼び出すことがなくても子コンポーネントの位置を識別し決定できる方法を提供することができる。   Various embodiments disclosed in this document can check a position of a child component without constructing or outputting a GUI output via a display unit in an electronic device without calling data related to a container. It has been derived in order to propose a way to make decisions. For example, when configuring the GUI, instead of deleting all the containers to which the components included in the GUI belong, the electronic device according to an embodiment generates a virtual container and generates a virtual container based on a top-level tag or a form object. By changing the position information of the child component, it is possible to provide a method for identifying and determining the position of the child component without calling data related to the existing container.

本文書に開示された様々な実施形態により、仮想コンテナを用いてグラフィカルユーザインタフェースを構成する電子装置は、電子装置において実行中のプログラムと対応するウィンドウを表示するように設定された表示部、外部から受信された第１命令に基づいて、前記ウィンドウ内に一つ以上のコンテナを生成し、前記生成された一つ以上のコンテナの内部に少なくとも一つのコンポーネントを挿入するコンポーネント管理部、前記ウィンドウの枠線のうち少なくとも一つの枠線から前記一つ以上のコンテナの枠線のうち少なくとも一つの枠線までの距離に対する第１距離情報を取得し、前記一つ以上のコンテナの枠線のうち少なくとも一つの枠線から前記少なくとも一つのコンポーネントまでの距離に対する第２距離情報を取得し、前記第１距離情報および第２距離情報を用いて前記ウィンドウの枠線のうち少なくとも一つの枠線から前記少なくとも一つのコンポーネントまでの距離に対する第３距離情報を取得する位置情報管理部、および外部から受信された第２命令に基づいて、前記ウィンドウ内に生成された前記一つ以上のコンテナを前記ウィンドウから削除し、前記取得された第３距離情報を用いて前記少なくとも一つのコンポーネントの前記ウィンドウ内での位置を計算し、前記計算結果に基づいて前記少なくとも一つのコンポーネントを含む前記ウィンドウを生成するグラフィカルユーザインタフェース生成部を含む。   According to various embodiments disclosed in this document, an electronic device that configures a graphical user interface using a virtual container includes a display unit configured to display a window corresponding to a program running on the electronic device, an external unit. A component management unit that generates one or more containers in the window based on the first command received from the server, and inserts at least one component inside the generated one or more containers; Acquiring first distance information for a distance from at least one of the frame lines to at least one of the one or more container frame lines, at least one of the one or more container frame lines; Obtaining second distance information for a distance from one frame line to the at least one component; A position information management unit that obtains third distance information for a distance from at least one of the window frame lines to the at least one component using the first distance information and the second distance information; Removing the one or more containers created in the window from the window based on the second instruction, and using the obtained third distance information in the window of the at least one component. And a graphical user interface generation unit that calculates the position of the window and generates the window including the at least one component based on the calculation result.

また、本文書に開示された様々な実施形態により、仮想コンテナを用いてグラフィカルユーザインタフェースを構成する電子装置の動作方法は、電子装置において実行中のプログラムと対応するウィンドウを表示するステップ、外部から受信された第１命令に基づいて、前記ウィンドウ内に一つ以上のコンテナを生成し、前記生成された一つ以上のコンテナの内部に少なくとも一つのコンポーネントを挿入するステップ、前記ウィンドウの枠線のうち少なくとも一つの枠線から前記一つ以上のコンテナの枠線のうち少なくとも一つの枠線までの距離に対する第１距離情報を取得し、前記一つ以上のコンテナの枠線のうち少なくとも一つの枠線から前記少なくとも一つのコンポーネントまでの距離に対する第２距離情報を取得し、前記第１距離情報および第２距離情報を用いて前記ウィンドウの枠線のうち少なくとも一つの枠線から前記少なくとも一つのコンポーネントまでの距離に対する第３距離情報を取得するステップ、外部から受信された第２命令に基づいて、前記ウィンドウ内に生成された前記一つ以上のコンテナを前記ウィンドウから削除し、前記取得された第３距離情報を用いて前記少なくとも一つのコンポーネントの前記ウィンドウ内での位置を計算するステップ、および前記計算結果に基づいて前記少なくとも一つのコンポーネントを含む前記ウィンドウを生成するステップを含む。   Also, according to various embodiments disclosed in this document, a method of operating an electronic device that configures a graphical user interface using a virtual container includes the steps of displaying a window corresponding to a program running on the electronic device, Generating one or more containers in the window based on the received first command, and inserting at least one component inside the generated one or more containers; Acquiring first distance information for a distance from at least one frame line to at least one of the one or more container frame lines, and obtaining at least one of the one or more container frame lines; Obtaining second distance information for a distance from a line to the at least one component; Obtaining third distance information for a distance from at least one of the window frame lines to the at least one component using the information and the second distance information, based on a second command received from the outside Removing the one or more containers generated in the window from the window, and calculating a position of the at least one component in the window using the obtained third distance information; And generating the window including the at least one component based on the calculation result.

本文書に開示された様々な実施形態によれば、電子装置は、ＧＵＩを構成するコンポーネントの位置などを設定するために無分別に用いられるコンテナの数を減らすことによってプログラムの性能低下問題を改善することができる。それにより、電子装置を用いるユーザの便宜性が増大できる。また、電子装置のユーザは、電子装置を用いることによって数多くのデータを効率的に処理し管理することができる。   According to various embodiments disclosed in this document, an electronic device improves a program performance degradation problem by reducing the number of containers used indiscriminately for setting the position of components constituting a GUI and the like. can do. Thereby, the convenience of the user using the electronic device can be increased. Further, the user of the electronic device can efficiently process and manage a large amount of data by using the electronic device.

本発明の一実施形態による電子装置の構成を示す説明図Explanatory drawing showing the configuration of an electronic device according to an embodiment of the present invention. 本発明の一実施形態による電子装置においてグラフィカルユーザインタフェースを生成しそれを出力する過程の説明図FIG. 5 is an explanatory diagram of a process of generating and outputting a graphical user interface in an electronic device according to an embodiment of the present invention. 本発明の一実施形態による電子装置においてグラフィカルユーザインタフェースを生成しそれを出力する方法を示すフローチャート5 is a flowchart illustrating a method for generating and outputting a graphical user interface in an electronic device according to an embodiment of the present invention.

本文書に開示された様々な実施形態は本発明を特定の実施形態に限定するために提示されたものではなく、様々な実施形態を通じて紹介された構成要素は本発明の思想および技術範囲に含まれる全ての変更可能な均等物乃至代替物を含む意味として提示されたものであることを当業者であれば容易に理解することができるであろう。また、各図面を説明するにおいて、特に定義されない限り、技術的または科学的な用語を含めて本明細書上で用いられる全ての用語は、本発明が属する技術分野で通常の知識を有した者が一般に理解しているのと同じ意味を有していると解釈できる。また、本発明の目的および効果、そしてそれらを達成するための技術的構成は、添付図面と共に詳細に説明される実施形態を参照すればより明らかになるものである。本発明を説明するにおいて、公知機能または構成に関する具体的な説明が本発明の要旨を不要に濁す恐れがあると判断される場合には、それと関連した詳細な説明は省略する。そして後ほど説明される用語は本発明における構造、役割および機能などを考慮して定義された用語であって、これは使用者および運用者の意図または慣例などに応じて既存に用いられていた意味とは異なって解釈されてもよい。   The various embodiments disclosed in this document are not presented to limit the present invention to a specific embodiment, and components introduced through the various embodiments are included in the spirit and scope of the present invention. Those skilled in the art will readily understand that the present invention is provided in a meaning including all changeable equivalents and alternatives. In the description of the drawings, unless otherwise specified, all terms used in this specification, including technical or scientific terms, shall be those having ordinary knowledge in the technical field to which the present invention belongs. Has the same meaning as commonly understood. Further, the objects and effects of the present invention, and technical configurations for achieving the same will become more apparent by referring to the embodiments described in detail with reference to the accompanying drawings. In describing the present invention, when it is determined that a detailed description of a known function or configuration may unnecessarily obscure the gist of the present invention, a detailed description thereof will be omitted. The terms described later are terms defined in consideration of the structure, role, function, and the like in the present invention, and have the meanings that have been used according to the intentions or customs of the user and the operator. May be interpreted differently.

本発明は、以下にて開示される実施形態に限定されるものではなく互いに異なる様々な形態で実現できることを明らかにしておく。本文書に開示された様々な実施形態は、本発明の開示が完全になるようにし、本発明が属する技術分野で通常の知識を有する者に発明の範疇を完全に知らせるために提供されるものであって、本発明は、特許請求の範囲に記載された請求項の範疇によって定義されるのみである。   It is clear that the present invention is not limited to the embodiments disclosed below, but can be implemented in various forms different from each other. The various embodiments disclosed in this document are provided in order to make the disclosure of the present invention complete and to make those skilled in the art to which the present invention belongs completely known in the scope of the invention. Thus, the present invention is only defined by the scope of the appended claims.

本文書において、ある部分がある構成要素を「含む」とする時、これは、特に反する記載がない限り、他の構成要素を除くものではなく、他の構成要素をさらに含んでもよいことを意味する。また、本発明の様々な実施形態において、各構成要素、機能ブロックまたは手段は一つまたはそれ以上の下部構成要素で構成されてもよく、各構成要素が実行する電気、電子、機械的な機能は電子回路、集積回路、ＡＳＩＣ（Ａｐｐｌｉｃａｔｉｏｎ Ｓｐｅｃｉｆｉｃ Ｉｎｔｅｇｒａｔｅｄ Ｃｉｒｃｕｉｔ）などのような公知の様々な素子または機械的要素で実現されてもよく、各々別個に実現されるかまたは２以上が一つに統合されて実現されてもよい。   In this document, when a part is referred to as "including" a component, this does not exclude the other component and may further include the other component, unless otherwise indicated. I do. Also, in various embodiments of the present invention, each component, functional block or means may be comprised of one or more lower components, and each component performs an electrical, electronic, or mechanical function. May be realized by various known elements or mechanical elements such as an electronic circuit, an integrated circuit, an ASIC (Application Specific Integrated Circuit), etc., each of which is realized separately or two or more are integrated into one. May be realized.

一方、添付されたブロック図のブロックやフローチャートのステップは、汎用コンピュータ、特殊用コンピュータ、携帯用ノートブックコンピュータ、ネットワークコンピュータなどのようなデータ処理が可能な装置のプロセッサやメモリに搭載されて指定された機能を実行するコンピュータプログラムインストラクションを意味すると解釈できる。これらのコンピュータプログラムインストラクションはコンピュータ装置に備えられたメモリまたはコンピュータ読み取り可能なメモリに格納されることができるため、ブロック図のブロックまたはフローチャートのステップで説明された機能はそれを実行するインストラクション手段を含む製造物として生産されてもよい。さらに、各ブロックまたは各ステップは、特定された論理的機能を実行するための一つ以上の実行可能なインストラクションを含むモジュール、セグメントまたはコードの一部を示すことができる。また、幾つかの代替可能な実施形態においては、ブロックまたはステップで言及された機能が定められた順とは異なって実行されるのも可能であることを注目しなければならない。例えば、次いで図示されている二つのブロックまたはステップは、実質的に同時に実行されるか、または逆順に実行されてもよく、場合によっては一部のブロックまたはステップが省略された状態で実行されてもよい。   On the other hand, the blocks in the attached block diagrams and the steps in the flowcharts are designated by being mounted on a processor or a memory of a device capable of processing data, such as a general-purpose computer, a special-purpose computer, a portable notebook computer, and a network computer. Can be interpreted as meaning computer program instructions that perform the functions described. Since these computer program instructions can be stored in a memory provided in the computer device or in a computer readable memory, the functions described in the blocks of the block diagram or the steps of the flowchart include instruction means for executing the functions. It may be produced as a product. Further, each block or step may represent a module, segment, or portion of code that includes one or more executable instructions for performing the specified logical function. It should also be noted that, in some alternative embodiments, the functions noted in the block or step may be performed out of the stated order. For example, the two blocks or steps illustrated below may then be performed substantially simultaneously or in reverse order, and in some cases performed with some blocks or steps omitted. Is also good.

図１は、本発明の一実施形態による電子装置の構成を示す図である。様々な実施形態によれば、電子装置１００は、コンポーネント管理部１１０、位置情報管理部１２０、グラフィカルユーザインタフェース（以下、ＧＵＩ）生成部１３０、表示部１４０、格納部１５０および入力部１６０のうち少なくとも一つを含むことができる。ここで、コンポーネント管理部１１０、位置情報管理部１２０およびＧＵＩ生成部１３０は特定のインストラクションを実行するモジュールを意味するために用いられ、前記モジュールを介して実行されるインストラクションは電子装置のプロセッサ（図示せず）により実行されると理解できることを明らかにしておく。   FIG. 1 is a diagram illustrating a configuration of an electronic device according to an embodiment of the present invention. According to various embodiments, the electronic device 100 includes at least one of the component management unit 110, the location information management unit 120, the graphical user interface (hereinafter, GUI) generation unit 130, the display unit 140, the storage unit 150, and the input unit 160. One can be included. Here, the component management unit 110, the position information management unit 120, and the GUI generation unit 130 are used to mean a module that executes a specific instruction, and the instruction executed through the module is a processor (FIG. (Not shown).

電子装置１００のコンポーネント管理部１１０は、外部から受信された命令に基づいて、電子装置において実行中のプログラムと対応するウィンドウ内に一つ以上のコンテナを生成し、前記生成された一つ以上のコンテナの内部に少なくとも一つのコンポーネントを挿入することができる。例えば、外部から特定のプログラムの実行に必要なウィンドウの生成を指示する命令が受信される場合、コンポーネント管理部１１０は、ウィンドウを生成するのに必要なプログラムを実行することができる。コンポーネント管理部１１０は、実行されたプログラムを介してウィンドウを生成し、生成されたウィンドウに少なくとも一つのコンテナと少なくとも一つのコンポーネントを挿入することができる。一つの実施形態によれば、コンポーネント管理部１１０は、電子装置１００の入力部１６０を介して受信されるキーボード入力またはマウス入力に基づいて、少なくとも一つのコンテナおよび少なくとも一つのコンポーネントを挿入し、挿入された少なくとも一つのコンテナおよび少なくとも一つのコンポーネントの位置を変更することができる。   The component management unit 110 of the electronic device 100 generates one or more containers in a window corresponding to the program being executed in the electronic device based on an instruction received from the outside, and generates the one or more containers. At least one component can be inserted inside the container. For example, when a command instructing generation of a window necessary for execution of a specific program is received from the outside, the component management unit 110 can execute a program necessary for generating a window. The component management unit 110 may generate a window through the executed program, and insert at least one container and at least one component into the generated window. According to one embodiment, the component management unit 110 inserts at least one container and at least one component based on a keyboard input or a mouse input received via the input unit 160 of the electronic device 100, and inserts the component. At least one container and at least one component can be repositioned.

電子装置１００の位置情報管理部１２０は、ウィンドウの枠線のうち少なくとも一つの枠線から一つ以上のコンテナの枠線のうち少なくとも一つの枠線までの距離に対する第１距離情報を取得することができる。また、位置情報管理部１２０は、一つ以上のコンテナの枠線のうち少なくとも一つの枠線から少なくとも一つのコンポーネントまでの距離に対する第２距離情報を取得することができる。また、位置情報管理部１２０は、第１距離情報および第２距離情報を用いてウィンドウの枠線のうち少なくとも一つの枠線から少なくとも一つのコンポーネントまでの距離に対する第３距離情報を取得することができる。   The position information management unit 120 of the electronic device 100 acquires first distance information for a distance from at least one of the window frame lines to at least one of the container frame lines. Can be. In addition, the position information management unit 120 can acquire second distance information for a distance from at least one frame line to at least one component among frame lines of one or more containers. Further, the position information management unit 120 may acquire third distance information for a distance from at least one of the window frame lines to at least one component using the first distance information and the second distance information. it can.

例えば、位置情報管理部１２０は、ウィンドウを構成する長方形状の枠線のうち左側に位置した枠線から一つ以上のコンテナを構成する長方形状の枠線のうち左側に位置した枠線までの距離を計算することができる。それと同様に、位置情報管理部１２０は、ウィンドウを構成する長方形状の枠線のうち右側に位置した枠線から一つ以上のコンテナを構成する長方形状の枠線のうち右側に位置した枠線までの距離を計算することができる。このようにして、位置情報管理部１２０は、ウィンドウ内の一つ以上のコンテナの位置を決定することができる。このように、位置情報管理部１２０は、ウィンドウおよび一つ以上のコンテナの間の距離に対する一つ以上の情報である第１距離情報を取得することができる。   For example, the position information management unit 120 may select from a frame line located on the left side of the rectangular frame lines constituting the window to a frame line located on the left side of the rectangular frame lines constituting one or more containers. Distance can be calculated. Similarly, the position information management unit 120 determines the right one of the rectangular frame lines forming one or more containers from the right one of the rectangular frame lines forming the window. The distance to can be calculated. In this way, the position information management unit 120 can determine the positions of one or more containers in the window. As described above, the location information management unit 120 can acquire the first distance information that is one or more pieces of information on the distance between the window and one or more containers.

一つの実施形態によれば、位置情報管理部１２０は、一つ以上のコンテナを構成する長方形状の枠線のうち少なくとも一つの枠線から少なくとも一つのコンポーネントまでの距離を計算することができる。この時、位置情報管理部１２０は、少なくとも一つのコンポーネントの重心と対応する点を距離計算の基準点として用いることができる。これとは異なり、少なくとも一つのコンポーネントの形状が長方形であれば、少なくとも一つのコンポーネントを構成する長方形状の枠線のうち少なくとも一つの枠線が距離計算の基準点として用いられてもよい。このようにして、位置情報管理部１２０は、一つ以上のコンテナ内の少なくとも一つのコンポーネントの位置を決定することができる。このように、位置情報管理部１２０は、一つ以上のコンテナおよび少なくとも一つのコンポーネントの間の距離に対する一つ以上の情報である第２距離情報を取得することができる。   According to one embodiment, the location information management unit 120 can calculate a distance from at least one of the rectangular frames constituting one or more containers to at least one component. At this time, the position information management unit 120 can use a point corresponding to the center of gravity of at least one component as a reference point for distance calculation. Alternatively, if the shape of at least one component is a rectangle, at least one of the rectangular frame lines constituting the at least one component may be used as a reference point for distance calculation. In this way, the location information management unit 120 can determine the location of at least one component in one or more containers. As described above, the location information management unit 120 can acquire the second distance information that is one or more pieces of information on the distance between one or more containers and at least one component.

一方、位置情報管理部１２０は、取得された第１距離情報および第２距離情報を用いて、ウィンドウおよび少なくとも一つのコンポーネントの間の距離に対する一つ以上の情報である第３距離情報を抽出することもできる。   On the other hand, the position information management unit 120 extracts third distance information, which is one or more pieces of information on the distance between the window and at least one component, using the obtained first distance information and second distance information. You can also.

電子装置１００のＧＵＩ生成部１３０は、外部から受信された命令に基づいて、前記ウィンドウ内に生成された前記一つ以上のコンテナを前記ウィンドウから削除することができる。それと同時に、ＧＵＩ生成部１３０は、前記取得された第３距離情報を用いて前記少なくとも一つのコンポーネントの前記ウィンドウ内での位置を計算し、前記計算結果に基づいて前記少なくとも一つのコンポーネントを含む前記ウィンドウを生成することができる。すなわち、ＧＵＩ生成部１３０は、ウィンドウを生成する時、少なくとも一つのコンポーネントの位置を決定するために用いられた一つ以上のコンテナを削除し、それと同時に削除される一つ以上のコンテナに含まれていた少なくとも一つのコンポーネントの位置を決定するために少なくとも一つのコンポーネントの位置を新たに計算し、計算結果に基づいて少なくとも一つのコンポーネントをウィンドウ内で予め決定された位置に挿入することができる。   The GUI generation unit 130 of the electronic device 100 may delete the one or more containers generated in the window from the window based on a command received from the outside. At the same time, the GUI generating unit 130 calculates a position of the at least one component in the window using the obtained third distance information, and includes the at least one component based on the calculation result. Windows can be created. That is, when generating the window, the GUI generation unit 130 deletes one or more containers used to determine the position of at least one component, and includes the one or more containers that are deleted at the same time. The position of the at least one component may be newly calculated to determine the position of the at least one component, and the at least one component may be inserted at a predetermined position in the window based on the calculation result.

電子装置１００の表示部１４０は、電子装置１００から生成された情報を視覚的な形態で電子装置１００の外部（例えば、ユーザ）に提供する機能をすることができる。一つの実施形態によれば、表示部１４０は、タッチを検知するように設定されたタッチ回路または前記タッチにより発生する力の強さを測定するように設定されたセンサ回路を含むことができる。表示部１４０は、電子装置１００のハウジングに含まれた形態のディスプレイを意味するか、または電子装置１００と有線または無線で接続される独立的な形態のディスプレイを意味する。   The display unit 140 of the electronic device 100 may have a function of providing information generated from the electronic device 100 to the outside (for example, a user) of the electronic device 100 in a visual form. According to an exemplary embodiment, the display unit 140 may include a touch circuit configured to detect a touch or a sensor circuit configured to measure a strength of a force generated by the touch. The display unit 140 may be a display included in a housing of the electronic device 100 or an independent display connected to the electronic device 100 by wire or wirelessly.

電子装置１００の格納部１５０は、電子装置１００の少なくとも一つの構成要素により用いられる様々なデータを格納することができる。ここで、データは、ソフトウェアおよびそれと関連した命令に対する入力データまたは出力データを含むことができる。また、格納部１５０は、揮発性メモリまたは不揮発性メモリを含むことができる。一つの実施形態によれば、格納部１５０は、プログラムおよび前記プログラムを介して提供可能な複数のユーザインターフェースを格納することができる。   The storage unit 150 of the electronic device 100 can store various data used by at least one component of the electronic device 100. Here, the data may include input data or output data for software and instructions associated therewith. In addition, the storage unit 150 may include a volatile memory or a nonvolatile memory. According to an embodiment, the storage unit 150 may store a program and a plurality of user interfaces that can be provided through the program.

電子装置１００の入力部１６０は、電子装置１００の構成要素に用いられる命令またはデータを電子装置１００の外部（例えば、ユーザ）から受信することができる。入力部１６０は、マウス、キーボードおよびタッチパッドを含むことができる。一つの実施形態によれば、入力部１６０（例えば、キーボード）を介してユーザから受信される第１入力は、表示部１４０を介して表示されているユーザインターフェースに少なくとも一つのコンテンツを挿入するのに用いられることができる。また、入力部１６０（例えば、マウス）を介してユーザから受信される第２入力は、格納部１５０に格納されたデータのいずれか一つを選択するのに用いられることができる。   The input unit 160 of the electronic device 100 can receive an instruction or data used for a component of the electronic device 100 from outside the electronic device 100 (for example, a user). The input unit 160 may include a mouse, a keyboard, and a touchpad. According to one embodiment, a first input received from a user via input unit 160 (eg, a keyboard) inserts at least one content into a user interface being displayed via display unit 140. Can be used for In addition, the second input received from the user via the input unit 160 (for example, a mouse) may be used to select any one of the data stored in the storage unit 150.

一つの実施形態によれば、コンポーネント管理部１１０は、外部から受信された命令に基づいて、既に生成されたウィンドウの構成を編集するのに用いられるプログラムを実行し、前記第１距離情報を用いて前記ウィンドウ内に前記一つ以上のコンテナを挿入し、前記第２距離情報を用いて前記少なくとも一つのコンポーネントを前記挿入された一つ以上のコンテナに挿入し、前記挿入された一つ以上のコンテナおよび前記少なくとも一つのコンポーネントのうち少なくとも一つの設定が変更されることに応答して前記第１距離情報および前記第２距離情報のうち少なくとも一つを変更することができる。   According to one embodiment, the component management unit 110 executes a program used to edit the configuration of the already generated window based on an instruction received from the outside, and uses the first distance information. Inserting the one or more containers into the window, inserting the at least one component into the one or more inserted containers using the second distance information, At least one of the first distance information and the second distance information may be changed in response to a change in a setting of at least one of a container and the at least one component.

図２は、本発明の一実施形態による電子装置においてグラフィカルユーザインタフェースを生成し、それを出力する過程を説明するための図である。図２を参照すれば、電子装置において実行中のプログラムと対応するウィンドウを構成するのに用いられる第１画面２０１、第２画面２０２および第３画面２０３を確認することができる。   FIG. 2 is a diagram illustrating a process of generating and outputting a graphical user interface in an electronic device according to an exemplary embodiment of the present invention. Referring to FIG. 2, a first screen 201, a second screen 202, and a third screen 203 used to configure a window corresponding to a program being executed in the electronic device can be confirmed.

一つの実施形態によれば、電子装置１００は、一つ以上のコンテナ２２０および少なくとも一つのコンポーネント２３０、２３５の位置および大きさなどを決定するのに用いられるレイヤ２１０を生成することができる。レイヤ２１０上には、一つ以上のコンテナ２２０が配置されることができる。電子装置１００は、マウスまたはキーボードなどのような入力部１６０を介して受信されたユーザ命令に基づいて一つ以上のコンテナ２２０の位置および大きさを決定することができる。次に、電子装置１００は、レイヤ２１０上に配置された一つ以上のコンテナ２２０内に少なくとも一つのコンポーネント２３０、２３５を挿入することができる。ここで、少なくとも一つのコンポーネント２３０、２３５は、グリッド、テーブル、ラジオボタンおよびリストボックスなどのように用途に応じて様々な形態に区分されてもよく、最小単位のブロックに分離されて格納部１５０に予め格納されていてもよい。   According to one embodiment, the electronic device 100 can generate a layer 210 that is used to determine the location and size of one or more containers 220 and at least one component 230, 235, and the like. One or more containers 220 can be disposed on the layer 210. The electronic device 100 may determine the position and size of one or more containers 220 based on a user command received via the input unit 160 such as a mouse or a keyboard. Next, electronic device 100 can insert at least one component 230, 235 into one or more containers 220 located on layer 210. Here, the at least one component 230, 235 may be divided into various forms according to applications, such as a grid, a table, a radio button, and a list box. May be stored in advance.

一つの実施形態によれば、電子装置１００は、レイヤ２１０を構成する枠線のうち少なくとも一つの枠線から一つ以上のコンテナ２２０を構成する枠線のうち少なくとも一つの枠線までの距離を計算することができる。例えば、電子装置１００は、レイヤ２１０を構成する枠線のうち上端枠線から一つ以上のコンテナ２２０を構成する枠線のうち上端枠線までの距離である１９を計算することができる。また、電子装置１００は、レイヤ２１０を構成する枠線のうち左側枠線から一つ以上のコンテナ２２０を構成する枠線のうち左側枠線までの距離である１９を計算することができる。   According to one embodiment, the electronic device 100 determines a distance from at least one of the frame lines forming the layer 210 to at least one of the frame lines forming the one or more containers 220. Can be calculated. For example, the electronic device 100 can calculate 19, which is the distance from the top frame of the layers 210 to the top frame of the one or more containers 220. In addition, the electronic device 100 can calculate 19, which is the distance from the left side frame line of the frame lines forming the layer 210 to the left side frame line of the frame lines forming one or more containers 220.

一つの実施形態によれば、電子装置１００は、一つ以上のコンテナ２２０を構成する枠線のうち少なくとも一つの枠線から少なくとも一つのコンポーネント２３０を構成する枠線のうち少なくとも一つの枠線までの距離を計算することができる。例えば、電子装置１００は、一つ以上のコンテナ２２０を構成する枠線のうち上端枠線から少なくとも一つのコンポーネント２３０を構成する枠線のうち上端枠線までの距離である２０を計算することができる。また、電子装置１００は、一つ以上のコンテナ２２０を構成する枠線のうち左側枠線から少なくとも一つのコンポーネント２３０を構成する枠線のうち左側枠線までの距離である１４を計算することができる。   According to one embodiment, the electronic device 100 includes at least one of the borders of the one or more containers 220 to at least one of the borders of the at least one component 230. Distance can be calculated. For example, the electronic device 100 may calculate the distance 20, which is the distance from the uppermost frame of the one or more containers 220 to the uppermost frame of the at least one component 230. it can. In addition, the electronic device 100 may calculate the distance 14, which is the distance from the left side frame line of the one or more container 220 to the left side frame line of the at least one component 230. it can.

一つの実施形態によれば、電子装置１００は、少なくとも一つのコンポーネント２３０を構成する枠線のうち少なくとも一つの枠線から少なくとも一つのコンポーネント２３５を構成する枠線のうち少なくとも一つの枠線までの距離を計算することができる。例えば、電子装置１００は、少なくとも一つのコンポーネント２３０を構成する枠線のうち右側枠線から少なくとも一つのコンポーネント２３５を構成する枠線のうち左側枠線までの距離である１２を計算することができる。   According to one embodiment, the electronic device 100 includes at least one of the borders of the at least one component 230 and at least one of the borders of the at least one component 235. Distance can be calculated. For example, the electronic device 100 can calculate the distance 12, which is the distance from the right side frame of the at least one component 230 to the left side frame of the at least one component 235. .

第２画面２０２を参照すれば、電子装置１００は、一つ以上のコンテナ２２０および少なくとも一つのコンポーネント２３０、２３５を含むレイヤ２１０を特定のプログラムと対応するウィンドウ２１１内に挿入することができる。この場合、レイヤ２１０の枠線のうち少なくとも一部とウィンドウ２１１の枠線のうち少なくとも一部は対応するように設定できる。   Referring to the second screen 202, the electronic device 100 may insert a layer 210 including one or more containers 220 and at least one component 230, 235 into a window 211 corresponding to a specific program. In this case, at least a part of the frame lines of the layer 210 and at least a part of the frame lines of the window 211 can be set to correspond to each other.

次に、第３画面２０３を参照すれば、電子装置１００は、グラフィカルユーザインタフェースとしてウィンドウ２１１を生成して出力する時、既に挿入された一つ以上のコンテナ２２０を削除することができる。それと同時に、電子装置１００は、一つ以上のコンテナ２２０に挿入されていた少なくとも一つのコンポーネント２３０、２３５の位置をウィンドウ２１１を基準に再び計算し決定することができる。例えば、電子装置１００は、先に計算された結果を参照して、ウィンドウ２１１を構成する枠線のうち上端枠線から少なくとも一つのコンポーネント２３０を構成する枠線のうち上端枠線までの距離を３９に決定することができる。また、電子装置１００は、先に計算された結果を参照して、ウィンドウ２１１を構成する枠線のうち左側枠線から少なくとも一つのコンポーネント２３０を構成する枠線のうち左側枠線までの距離を３３に決定することができる。
図３は、本発明の一実施形態による電子装置においてグラフィカルユーザインタフェースを生成し、それを出力する方法を示すフローチャートである。
ステップ３００では、電子装置において実行中のプログラムと対応するウィンドウを表示することができる。 Next, referring to the third screen 203, when the electronic device 100 generates and outputs the window 211 as a graphical user interface, the electronic device 100 can delete one or more containers 220 already inserted. At the same time, the electronic device 100 may calculate and determine the position of the at least one component 230 or 235 inserted in the one or more containers 220 again based on the window 211. For example, the electronic device 100 refers to the previously calculated result, and determines a distance from an upper end frame line of the frame lines forming the window 211 to an upper end frame line of the at least one component 230. 39 can be determined. Further, the electronic device 100 refers to the previously calculated result, and calculates the distance from the left side frame line of the frame lines forming the window 211 to the left side frame line of the frame lines forming the at least one component 230. 33 can be determined.
FIG. 3 is a flowchart illustrating a method for generating and outputting a graphical user interface in an electronic device according to an embodiment of the present invention.
In step 300, a window corresponding to the program running on the electronic device may be displayed.

ステップ３１０では、外部から受信された第１命令に基づいて、前記ウィンドウ内に一つ以上のコンテナを生成し、前記生成された一つ以上のコンテナの内部に少なくとも一つのコンポーネントを挿入することができる。   In step 310, one or more containers are created in the window based on the first command received from the outside, and at least one component is inserted into the created one or more containers. it can.

ステップ３２０では、前記ウィンドウの枠線のうち少なくとも一つの枠線から前記一つ以上のコンテナの枠線のうち少なくとも一つの枠線までの距離に対する第１距離情報を取得し、前記一つ以上のコンテナの枠線のうち少なくとも一つの枠線から前記少なくとも一つのコンポーネントまでの距離に対する第２距離情報を取得し、前記第１距離情報および第２距離情報を用いて前記ウィンドウの枠線のうち少なくとも一つの枠線から前記少なくとも一つのコンポーネントまでの距離に対する第３距離情報を取得することができる。   In step 320, first distance information for a distance from at least one of the window frame lines to at least one of the one or more container frame lines is obtained, and the one or more of the one or more container frame lines are obtained. Acquiring second distance information with respect to a distance from at least one frame line among the container frame lines to the at least one component, and using the first distance information and the second distance information to obtain at least one of the window frame lines; Third distance information on a distance from one frame line to the at least one component can be obtained.

ステップ３３０では、外部から受信された第２命令に基づいて、前記ウィンドウ内に生成された前記一つ以上のコンテナを前記ウィンドウから削除し、前記取得された第３距離情報を用いて前記少なくとも一つのコンポーネントの前記ウィンドウ内での位置を計算することができる。
ステップ３４０では、前記計算結果に基づいて前記少なくとも一つのコンポーネントを含む前記ウィンドウを生成することができる。 In step 330, the one or more containers created in the window are deleted from the window based on a second command received from the outside, and the at least one container is removed using the obtained third distance information. The position of one of the components within the window can be calculated.
In operation 340, the window including the at least one component may be generated based on the calculation result.

様々な実施形態によれば、図３に開示された動作のうちの一部は省略されるかまたは複数回繰り返し実行されてもよい。また、図３に開示された動作の各々は一つの実施形態に見るのが妥当であり、いずれか一つの動作が他の一つの動作に従属するものに制限して解釈してはならない。   According to various embodiments, some of the operations disclosed in FIG. 3 may be omitted or repeated multiple times. Also, each of the operations disclosed in FIG. 3 is appropriate to be viewed in one embodiment, and any one operation should not be interpreted as being limited to a subordinate operation to another one.

本文書に開示された様々な実施形態により、仮想コンテナを用いてグラフィカルユーザインタフェースを構成する電子装置は、電子装置において実行中のプログラムと対応するウィンドウを表示するように設定された表示部、外部から受信された第１命令に基づいて、前記ウィンドウ内に一つ以上のコンテナを生成し、前記生成された一つ以上のコンテナの内部に少なくとも一つのコンポーネントを挿入するコンポーネント管理部、前記ウィンドウの枠線のうち少なくとも一つの枠線から前記一つ以上のコンテナの枠線のうち少なくとも一つの枠線までの距離に対する第１距離情報を取得し、前記一つ以上のコンテナの枠線のうち少なくとも一つの枠線から前記少なくとも一つのコンポーネントまでの距離に対する第２距離情報を取得し、前記第１距離情報および第２距離情報を用いて前記ウィンドウの枠線のうち少なくとも一つの枠線から前記少なくとも一つのコンポーネントまでの距離に対する第３距離情報を取得する位置情報管理部、および外部から受信された第２命令に基づいて、前記ウィンドウ内に生成された前記一つ以上のコンテナを前記ウィンドウから削除し、前記取得された第３距離情報を用いて前記少なくとも一つのコンポーネントの前記ウィンドウ内での位置を計算し、前記計算結果に基づいて前記少なくとも一つのコンポーネントを含む前記ウィンドウを生成するグラフィカルユーザインタフェース生成部を含むことができる。   According to various embodiments disclosed in this document, an electronic device that configures a graphical user interface using a virtual container includes a display unit configured to display a window corresponding to a program running on the electronic device, an external unit. A component management unit that generates one or more containers in the window based on the first command received from the server, and inserts at least one component inside the generated one or more containers; Acquiring first distance information for a distance from at least one of the frame lines to at least one of the one or more container frame lines, at least one of the one or more container frame lines; Obtaining second distance information for a distance from one frame line to the at least one component; A position information management unit that obtains third distance information for a distance from at least one of the frame lines of the window to the at least one component using the first distance information and the second distance information; Removing the one or more containers created in the window from the window based on the second instruction, and using the obtained third distance information in the window of the at least one component. A graphical user interface generating unit that calculates the position of the at least one component and generates the window including the at least one component based on the calculation result.

本文書に開示された様々な実施形態により、仮想コンテナを用いてグラフィカルユーザインタフェースを構成する電子装置は、前記第１距離情報、前記第２距離情報および前記第３距離情報を含む格納部をさらに含むことができる。   According to various embodiments disclosed in this document, an electronic device that configures a graphical user interface using a virtual container further includes a storage unit that includes the first distance information, the second distance information, and the third distance information. Can be included.

本文書に開示された様々な実施形態により、仮想コンテナを用いてグラフィカルユーザインタフェースを構成する電子装置において、前記コンポーネント管理部は、外部から受信された第３命令に基づいて、前記生成されたウィンドウの構成を編集するのに用いられるプログラムを実行し、前記第１距離情報を用いて前記ウィンドウ内に前記一つ以上のコンテナを挿入し、前記第２距離情報を用いて前記少なくとも一つのコンポーネントを前記挿入された一つ以上のコンテナに挿入し、前記挿入された一つ以上のコンテナおよび前記少なくとも一つのコンポーネントのうち少なくとも一つの設定が変更されることに応答して前記第１距離情報および前記第２距離情報のうち少なくとも一つを変更することを特徴とする。   According to various embodiments disclosed in this document, in an electronic device that configures a graphical user interface using a virtual container, the component management unit may execute the generated window based on a third command received from outside. Executing a program used to edit the configuration of the above, insert the one or more containers into the window using the first distance information, and use the second distance information to replace the at least one component. Inserting the first distance information and the first distance information in response to a change in at least one of the inserted one or more containers and the at least one component being inserted into the one or more inserted containers. At least one of the second distance information is changed.

本文書に開示された様々な実施形態により、仮想コンテナを用いてグラフィカルユーザインタフェースを構成する電子装置において、前記位置情報管理部は、前記一つ以上のコンテナに前記少なくとも一つのコンポーネントが複数存在することに応答して、前記少なくとも一つのコンポーネント間の距離に対する第４距離情報を取得し、前記格納部は、前記第４距離情報を格納することを特徴とする。   According to various embodiments disclosed in this document, in an electronic device that configures a graphical user interface using a virtual container, the location information management unit may include a plurality of the at least one component in the one or more containers. In response to this, fourth distance information for the distance between the at least one component is obtained, and the storage unit stores the fourth distance information.

本文書に開示された様々な実施形態により、仮想コンテナを用いてグラフィカルユーザインタフェースを構成する電子装置の動作方法は、電子装置において実行中のプログラムと対応するウィンドウを表示するステップ、外部から受信された第１命令に基づいて、前記ウィンドウ内に一つ以上のコンテナを生成し、前記生成された一つ以上のコンテナの内部に少なくとも一つのコンポーネントを挿入するステップ、前記ウィンドウの枠線のうち少なくとも一つの枠線から前記一つ以上のコンテナの枠線のうち少なくとも一つの枠線までの距離に対する第１距離情報を取得し、前記一つ以上のコンテナの枠線のうち少なくとも一つの枠線から前記少なくとも一つのコンポーネントまでの距離に対する第２距離情報を取得し、前記第１距離情報および第２距離情報を用いて前記ウィンドウの枠線のうち少なくとも一つの枠線から前記少なくとも一つのコンポーネントまでの距離に対する第３距離情報を取得するステップ、外部から受信された第２命令に基づいて、前記ウィンドウ内に生成された前記一つ以上のコンテナを前記ウィンドウから削除し、前記取得された第３距離情報を用いて前記少なくとも一つのコンポーネントの前記ウィンドウ内での位置を計算するステップ、および前記計算結果に基づいて前記少なくとも一つのコンポーネントを含む前記ウィンドウを生成するステップを含むことができる。   According to various embodiments disclosed in this document, a method of operating an electronic device using a virtual container to configure a graphical user interface includes the steps of displaying a window corresponding to a program running on the electronic device; Generating at least one container in the window based on the first instruction, and inserting at least one component inside the generated one or more containers; The first distance information for the distance from one frame line to at least one of the one or more container frame lines is obtained, and the first distance information is obtained from at least one of the one or more container frame lines. Obtaining second distance information corresponding to the distance to the at least one component; Obtaining third distance information corresponding to a distance from at least one of the frame lines of the window to the at least one component using the second distance information and the second distance information, based on a second command received from the outside Removing the one or more containers created in the window from the window, and calculating a position of the at least one component in the window using the obtained third distance information; and The method may include generating the window including the at least one component based on the calculation result.

本文書に開示された様々な実施形態により、仮想コンテナを用いてグラフィカルユーザインタフェースを構成する電子装置の動作方法は、前記第１距離情報、前記第２距離情報および前記第３距離情報を前記電子装置の格納部に格納するステップをさらに含むことができる。   According to various embodiments disclosed in the present document, a method of operating an electronic device that configures a graphical user interface using a virtual container includes the steps of: transmitting the first distance information, the second distance information, and the third distance information to the electronic device; The method may further include storing the information in a storage unit of the device.

本文書に開示された様々な実施形態により、仮想コンテナを用いてグラフィカルユーザインタフェースを構成する電子装置の動作方法において、前記取得するステップは、外部から受信された第３命令に基づいて、前記生成されたウィンドウの構成を編集するのに用いられるプログラムを実行し、前記第１距離情報を用いて前記ウィンドウ内に前記一つ以上のコンテナを挿入し、前記第２距離情報を用いて前記少なくとも一つのコンポーネントを前記挿入された一つ以上のコンテナに挿入し、前記挿入された一つ以上のコンテナおよび前記少なくとも一つのコンポーネントのうち少なくとも一つの設定が変更されることに応答して前記第１距離情報および前記第２距離情報のうち少なくとも一つを変更するステップをさらに含むことができる。   According to various embodiments disclosed in the present document, in an operation method of an electronic device configured to configure a graphical user interface using a virtual container, the obtaining step includes the step of generating the virtual user interface based on a third command received from outside. Executing a program used to edit the composition of the created window, inserting the one or more containers into the window using the first distance information, and inserting the at least one container using the second distance information. One component into the inserted one or more containers, and the first distance in response to a change in at least one of the inserted one or more containers and the at least one component. The method may further include changing at least one of information and the second distance information.

本文書に開示された様々な実施形態により、仮想コンテナを用いてグラフィカルユーザインタフェースを構成する電子装置の動作方法において、前記取得するステップは、前記一つ以上のコンテナに前記少なくとも一つのコンポーネントが複数存在することに応答して、前記少なくとも一つのコンポーネント間の距離に対する第４距離情報を取得するステップをさらに含み、前記格納するステップは、前記第４距離情報を前記電子装置の格納部に格納するステップをさらに含むことができる。   According to various embodiments disclosed in this document, in a method of operating an electronic device that configures a graphical user interface using a virtual container, the step of obtaining includes providing the one or more containers with a plurality of the at least one component. Responsive to the presence, obtaining fourth distance information for the distance between the at least one component, wherein the storing stores the fourth distance information in a storage of the electronic device. The method may further include a step.

本発明の一実施形態により、仮想コンテナを用いてグラフィカルユーザインタフェースを構成する電子装置の動作方法は、コンピュータとの結合によって実行させるための格納媒体に格納されたコンピュータプログラムで実現されてもよい。   According to an embodiment of the present invention, a method of operating an electronic device that configures a graphical user interface using a virtual container may be implemented by a computer program stored in a storage medium to be executed by coupling with a computer.

また、本発明の一実施形態により、仮想コンテナを用いてグラフィカルユーザインタフェースを構成する電子装置の動作方法は、様々なコンピュータ手段を介して実行できるプログラム命令形態で実現されてコンピュータ読み取り可能な媒体に記録されてもよい。前記コンピュータ読み取り可能な媒体は、プログラム命令、データファイル、データ構造などを単独でまたは組み合わせて含むことができる。前記媒体に記録されるプログラム命令は、本発明のために特別に設計されて構成されたものであるか、またはコンピュータソフトウェア当業者に公知されて使用可能なものであってもよい。コンピュータ読み取り可能な記録媒体の例には、ハードディスク、フロッピーディスクおよび磁気テープのような磁気媒体（ｍａｇｎｅｔｉｃ ｍｅｄｉａ）、ＣＤ−ＲＯＭ、ＤＶＤのような光気録媒体（ｏｐｔｉｃａｌ ｍｅｄｉａ）、フロプティカルディスク（ｆｌｏｐｔｉｃａｌ ｄｉｓｋ）のような磁気−光媒体（ｍａｇｎｅｔｏ−ｏｐｔｉｃａｌ ｍｅｄｉａ）、およびＲＯＭ、ＲＡＭ、フラッシュメモリなどのようなプログラム命令を格納し実行するように特別に構成されたハードウェア装置が含まれる。プログラム命令の例には、コンパイラによって作られるもののような機械語コードだけでなく、インタープリタなどを用いてコンピュータにより実行できる高級言語コードを含む。   In addition, according to an embodiment of the present invention, a method of operating an electronic device that configures a graphical user interface using a virtual container is realized in a computer readable medium that is implemented in a form of program instructions that can be executed through various computer means. It may be recorded. The computer readable medium may include program instructions, data files, data structures, etc., alone or in combination. The program instructions recorded on the medium may be specially designed and configured for the present invention, or may be known and usable by those skilled in computer software. Examples of computer-readable recording media include magnetic media such as hard disks, floppy disks, and magnetic tapes, optical media such as CD-ROMs and DVDs, and optical disks (optical media). Magneto-optical media, such as a floppy disk, and hardware devices specially configured to store and execute program instructions, such as ROM, RAM, flash memory, etc., are included. Examples of program instructions include machine language code such as that produced by a compiler, as well as high-level language code that can be executed by a computer using an interpreter or the like.

以上のように、本発明を具体的な構成要素などのような特定事項と限定された実施形態および図面によって説明したが、これは本発明のより全般的な理解を助けるために提供されたものに過ぎず、本発明は前記実施形態に限定されるものではなく、本発明が属する分野で通常の知識を有した者であれば、このような記載から様々な修正および変形が可能である。
したがって、本発明の思想は説明された実施形態に限定して定められず、特許請求の範囲だけでなく、該特許請求の範囲と均等または等価的な変形がある全てのものは本発明思想の範疇に属する。 As described above, the present invention has been described with reference to the specific embodiments such as specific components and the limited embodiments and the drawings, which are provided to help a more general understanding of the present invention. However, the present invention is not limited to the above-described embodiment, and various modifications and variations can be made from such descriptions by those having ordinary knowledge in the field to which the present invention pertains.
Accordingly, the spirit of the present invention is not limited to the described embodiments, and is not limited to the appended claims, but any equivalent or equivalent modification to the scope of the claims is defined by the scope of the present invention. Belongs to the category.

Claims (10)

電子装置において実行中のプログラムと対応するウィンドウを表示するように設定された表示部、
外部から受信された第１命令に基づいて、前記ウィンドウ内に一つ以上のコンテナを生成し、前記生成された一つ以上のコンテナの内部に少なくとも一つのコンポーネントを挿入するコンポーネント管理部、
前記ウィンドウの枠線のうち少なくとも一つの枠線から前記一つ以上のコンテナの枠線のうち少なくとも一つの枠線までの距離に対する第１距離情報を取得し、前記一つ以上のコンテナの枠線のうち少なくとも一つの枠線から前記少なくとも一つのコンポーネントまでの距離に対する第２距離情報を取得し、前記第１距離情報および第２距離情報を用いて前記ウィンドウの枠線のうち少なくとも一つの枠線から前記少なくとも一つのコンポーネントまでの距離に対する第３距離情報を取得する位置情報管理部、および
外部から受信された第２命令に基づいて、前記ウィンドウ内に生成された前記一つ以上のコンテナを前記ウィンドウから削除し、前記取得された第３距離情報を用いて前記少なくとも一つのコンポーネントの前記ウィンドウ内での位置を計算し、前記計算結果に基づいて前記少なくとも一つのコンポーネントを含む前記ウィンドウを生成するグラフィカルユーザインタフェース生成部を含む
ことを特徴とする仮想コンテナを用いてグラフィカルユーザインタフェースを構成する電子装置。 A display unit set to display a window corresponding to the program being executed in the electronic device,
A component management unit that generates one or more containers in the window based on the first command received from the outside and inserts at least one component into the one or more generated containers;
Acquiring first distance information for a distance from at least one of the window frame lines to at least one of the one or more container frame lines, and acquiring the one or more container frame lines; Obtaining second distance information for a distance from at least one frame line to the at least one component, and using at least one of the window frame lines using the first distance information and the second distance information. A position information management unit that obtains third distance information for a distance from the at least one component to the at least one component, and the one or more containers generated in the window based on a second command received from the outside. Removing from the window and using the obtained third distance information in the window of the at least one component An electronic device that configures a graphical user interface using a virtual container, comprising: a graphical user interface generating unit that calculates a position in the virtual container and generates the window including the at least one component based on the calculation result. . 前記第１距離情報、前記第２距離情報および前記第３距離情報を含む格納部をさらに含む
請求項１に記載の仮想コンテナを用いてグラフィカルユーザインタフェースを構成する電子装置。 An electronic device comprising a virtual container according to claim 1, further comprising a storage unit including the first distance information, the second distance information, and the third distance information. 前記コンポーネント管理部は、
外部から受信された第３命令に基づいて、前記生成されたウィンドウの構成を編集するのに用いられるプログラムを実行し、前記第１距離情報を用いて前記ウィンドウ内に前記一つ以上のコンテナを挿入し、前記第２距離情報を用いて前記少なくとも一つのコンポーネントを前記挿入された一つ以上のコンテナに挿入し、前記挿入された一つ以上のコンテナおよび前記少なくとも一つのコンポーネントのうち少なくとも一つの設定が変更されることに応答して前記第１距離情報および前記第２距離情報のうち少なくとも一つを変更する
請求項２に記載の仮想コンテナを用いてグラフィカルユーザインタフェースを構成する電子装置。 The component management unit includes:
Based on a third command received from the outside, execute a program used to edit the configuration of the generated window, and store the one or more containers in the window using the first distance information. Inserting, using the second distance information, inserting the at least one component into the inserted one or more containers, at least one of the inserted one or more containers and the at least one component An electronic device comprising a virtual container according to claim 2, wherein at least one of the first distance information and the second distance information is changed in response to a setting change. 前記位置情報管理部は、前記一つ以上のコンテナに前記少なくとも一つのコンポーネントが複数存在することに応答して、前記少なくとも一つのコンポーネント間の距離に対する第４距離情報を取得し、
前記格納部は、前記第４距離情報を格納する
請求項２に記載の仮想コンテナを用いてグラフィカルユーザインタフェースを構成する電子装置。 The location information management unit, in response to a plurality of the at least one component in the one or more containers, to obtain fourth distance information for the distance between the at least one component,
An electronic device that configures a graphical user interface using the virtual container according to claim 2, wherein the storage unit stores the fourth distance information. 電子装置において実行中のプログラムと対応するウィンドウを表示するステップ、
外部から受信された第１命令に基づいて、前記ウィンドウ内に一つ以上のコンテナを生成し、前記生成された一つ以上のコンテナの内部に少なくとも一つのコンポーネントを挿入するステップ、
前記ウィンドウの枠線のうち少なくとも一つの枠線から前記一つ以上のコンテナの枠線のうち少なくとも一つの枠線までの距離に対する第１距離情報を取得し、前記一つ以上のコンテナの枠線のうち少なくとも一つの枠線から前記少なくとも一つのコンポーネントまでの距離に対する第２距離情報を取得し、前記第１距離情報および第２距離情報を用いて前記ウィンドウの枠線のうち少なくとも一つの枠線から前記少なくとも一つのコンポーネントまでの距離に対する第３距離情報を取得するステップ、
外部から受信された第２命令に基づいて、前記ウィンドウ内に生成された前記一つ以上のコンテナを前記ウィンドウから削除し、前記取得された第３距離情報を用いて前記少なくとも一つのコンポーネントの前記ウィンドウ内での位置を計算するステップ、および
前記計算結果に基づいて前記少なくとも一つのコンポーネントを含む前記ウィンドウを生成するステップを含む
ことを特徴とする仮想コンテナを用いてグラフィカルユーザインタフェースを構成する電子装置の動作方法。 Displaying a window corresponding to the program running on the electronic device;
Generating one or more containers in the window based on the first command received from outside, and inserting at least one component inside the generated one or more containers;
Acquiring first distance information for a distance from at least one of the window frame lines to at least one of the one or more container frame lines, and acquiring the one or more container frame lines; Obtaining second distance information for a distance from at least one frame line to the at least one component, and using at least one of the window frame lines using the first distance information and the second distance information. Obtaining third distance information for a distance from to the at least one component;
Removing the one or more containers generated in the window from the window based on a second command received from the outside, and using the obtained third distance information, Calculating a position in a window; and generating the window including the at least one component based on the calculation result. An electronic device configuring a graphical user interface using a virtual container. How it works. 前記第１距離情報、前記第２距離情報および前記第３距離情報を前記電子装置の格納部に格納するステップをさらに含む
請求項５に記載の仮想コンテナを用いてグラフィカルユーザインタフェースを構成する電子装置の動作方法。 An electronic device that configures a graphical user interface using the virtual container according to claim 5, further comprising: storing the first distance information, the second distance information, and the third distance information in a storage unit of the electronic device. How it works. 前記取得するステップは、
外部から受信された第３命令に基づいて、前記生成されたウィンドウの構成を編集するのに用いられるプログラムを実行し、前記第１距離情報を用いて前記ウィンドウ内に前記一つ以上のコンテナを挿入し、前記第２距離情報を用いて前記少なくとも一つのコンポーネントを前記挿入された一つ以上のコンテナに挿入し、前記挿入された一つ以上のコンテナおよび前記少なくとも一つのコンポーネントのうち少なくとも一つの設定が変更されることに応答して前記第１距離情報および前記第２距離情報のうち少なくとも一つを変更するステップをさらに含む
請求項６に記載の仮想コンテナを用いてグラフィカルユーザインタフェースを構成する電子装置の動作方法。 The obtaining step includes:
Based on a third command received from the outside, execute a program used to edit the configuration of the generated window, and store the one or more containers in the window using the first distance information. Inserting, using the second distance information, inserting the at least one component into the inserted one or more containers, at least one of the inserted one or more containers and the at least one component 7. A graphical user interface using the virtual container according to claim 6, further comprising a step of changing at least one of the first distance information and the second distance information in response to the setting being changed. An operation method of an electronic device. 前記取得するステップは、前記一つ以上のコンテナに前記少なくとも一つのコンポーネントが複数存在することに応答して、前記少なくとも一つのコンポーネント間の距離に対する第４距離情報を取得するステップをさらに含み、
前記格納するステップは、前記第４距離情報を前記電子装置の格納部に格納するステップをさらに含む
請求項６に記載の仮想コンテナを用いてグラフィカルユーザインタフェースを構成する電子装置の動作方法。 The obtaining step further includes obtaining fourth distance information on a distance between the at least one component in response to the plurality of the at least one component being present in the one or more containers,
The method according to claim 6, wherein the storing further includes storing the fourth distance information in a storage unit of the electronic device. 請求項５ないし８のいずれかに記載の方法をコンピュータが実行するようにするプログラムを記録した
ことを特徴とするコンピュータ読み取り可能な記録媒体。 A computer-readable recording medium on which a program for causing a computer to execute the method according to claim 5 is recorded. 請求項５ないし８のいずれかに記載の方法をコンピュータとの結合によって実行させるための格納媒体に格納された
ことを特徴とするコンピュータプログラム。 A computer program stored in a storage medium for executing the method according to any one of claims 5 to 8 in combination with a computer.
JP2019153456A 2018-09-17 2019-08-26 Electronic device comprising graphical user interface using virtual container and method of operating the same Active JP6647701B1 (en)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
KR1020180110686A KR101916338B1 (en) 2018-09-17 2018-09-17 Electronic device for constituting gui using virtual container component and operating method thereof
KR10-2018-0110686 2018-09-17

Publications (2)

Publication Number Publication Date
JP6647701B1 true JP6647701B1 (en) 2020-02-14
JP2020077366A JP2020077366A (en) 2020-05-21

Family

ID=64329864

Family Applications (1)

Application Number Title Priority Date Filing Date
JP2019153456A Active JP6647701B1 (en) 2018-09-17 2019-08-26 Electronic device comprising graphical user interface using virtual container and method of operating the same

Country Status (2)

Country Link
JP (1) JP6647701B1 (en)
KR (1) KR101916338B1 (en)

Family Cites Families (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP2007094756A (en) 2005-09-29 2007-04-12 Canon Inc Information processor, layout processing method, storage medium and program
JP2010113479A (en) 2008-11-05 2010-05-20 Canon Inc Information processing apparatus and information processing method
US20100235769A1 (en) * 2009-03-16 2010-09-16 Microsoft Corporation Smooth layout animation of continuous and non-continuous properties
US9026928B2 (en) 2012-06-06 2015-05-05 Apple Inc. Graphical user interface layout
US9817804B2 (en) * 2013-09-12 2017-11-14 Wix.Com Ltd. System for comparison and merging of versions in edited websites and interactive applications
US20170185567A1 (en) 2015-12-28 2017-06-29 Le Holdings (Beijing) Co., Ltd. User interface control layout method and electronic device

Also Published As

Publication number Publication date
KR101916338B1 (en) 2018-11-08
JP2020077366A (en) 2020-05-21

Similar Documents

Publication Publication Date Title
KR101842106B1 (en) Generating augmented reality content for unknown objects
US10048824B2 (en) User terminal device and display method thereof
US9324305B2 (en) Method of synthesizing images photographed by portable terminal, machine-readable storage medium, and portable terminal
CN105229678B (en) Process modeling and interface
US9787752B2 (en) Hotspot editor for a user interface
US10901612B2 (en) Alternate video summarization
TW201445421A (en) Automatically manipulating visualized data based on interactivity
US10169493B2 (en) Method for manipulating a computer aided design (CAD) model, computer program product and server therefore
US20140232723A1 (en) Moving visualizations between displays and contexts
KR102205283B1 (en) Electro device executing at least one application and method for controlling thereof
CN106027785A (en) Voice processing method and terminal
KR20120082777A (en) Content management method and apparatus for applying the same
KR20150012067A (en) Method for processing message and an electronic device thereof
JP6627592B2 (en) Information processing apparatus and information processing program
JP6647701B1 (en) Electronic device comprising graphical user interface using virtual container and method of operating the same
CN107615229B (en) User interface device and screen display method of user interface device
JP6995208B2 (en) Image panning method
EP2849058A1 (en) Method and device for displaying a message associated with an application
CN112748917B (en) Graph display method and device
US10528215B2 (en) Arrangement of graphic elements based on shape locations
CN110888787A (en) Data monitoring method, device and system
CN111124393A (en) Editing method and platform of algorithm logic, electronic equipment and storage medium
US9372669B2 (en) Multiple architecture viewpoints in single unified modeling language (UML) model
JP2014048693A (en) Hierarchical grouping device
US11604557B2 (en) 3D interface with an improved object selection

Legal Events

Date Code Title Description
A621 Written request for application examination

Free format text: JAPANESE INTERMEDIATE CODE: A621

Effective date: 20190826

A871 Explanation of circumstances concerning accelerated examination

Free format text: JAPANESE INTERMEDIATE CODE: A871

Effective date: 20190826

A975 Report on accelerated examination

Free format text: JAPANESE INTERMEDIATE CODE: A971005

Effective date: 20191002

TRDD Decision of grant or rejection written
A01 Written decision to grant a patent or to grant a registration (utility model)

Free format text: JAPANESE INTERMEDIATE CODE: A01

Effective date: 20191210

A61 First payment of annual fees (during grant procedure)

Free format text: JAPANESE INTERMEDIATE CODE: A61

Effective date: 20200106

R150 Certificate of patent or registration of utility model

Ref document number: 6647701

Country of ref document: JP

Free format text: JAPANESE INTERMEDIATE CODE: R150

R250 Receipt of annual fees

Free format text: JAPANESE INTERMEDIATE CODE: R250