Defining an interactive user interface
Abstract
This record has no abstract on file.
Term
Projected expiry 22 August 2028.
- Priority
- Filed
- Granted
- Today
- Projected expiry
17 claims: 12 independent, 5 dependent
- 1インタラクティブなユーザーインターフェースを定義するシステムであって、 複数 の状態を有するインタラクティブなユーザーインターフェース に対応する複数 の全画面グラフィックを入力するグラフィカルユーザーインターフェースであって、 前記 複数 の全画面グラフィック の各々 は、 前記インタラクティブなユーザーインターフェースで使用される1若しくはそれ以上のインタラクティブな要素のために定義される領域を含み、 前記インタラクティブなユーザーインターフェースの 複数の状態のうちの 1 つに 関連付けられているものであ り 、 前記1若しくはそれ以上のインタラクティブな要素は前記インタラクティブなユーザーインターフェースの複数の状態に対応する複数の状態を有するものである 前記グラフィカルユーザーインターフェースと、 前記 複数 の全画面グラフィック の各々の中 で表示される 前記 1若しくはそれ以上のインタラクティブな要素の各々 のための 領域 の当該全画面グラフィックに対する幾何学的特性および位置情報を定義 するインタラクティブなグラフィックツールと、 前記1若しくはそれ以上のインタラクティブな要素 の各々のために 定義された領域の 前記 幾何学的特性および 前記 位置情報を格納するデータ記憶装置と、 コンピュータ可読コード および各状態にある前記1若しくはそれ以上のインタラクティブな要素の各々のために定義された前記領域の グラフィックを自動的に生成 する 出力生成器 であって 、 当該領域のグラフィックは、前記インタラクティブなユーザーインターフェースの各状態に関連付けられた前記各全画面グラフィックと、前記データ記憶装置に格納された当該領域の前記幾何学的特性および前記位置情報に基づいて生成されるものである、 前記 出力生成器と を有するシステム。
- 2請求項1記載のシステムにおいて、 前記各状態にある 1若しくはそれ以上 のイ ンタラクティブな要素の 各々のために定義された前記領域 のグラフィックは、 前記インタラクティブなユーザーインターフェースの各状態に関連付けられた 前記 各 全画面グラフィックの一部に対応しており、当該 各 全画面グラフィックの一部は、 前記データ記憶装置に 格納された 当該領域の 前記幾何学的特性および 前記 位置情報により画成されるものである システム 。
- 3請求項1記載のシステムにおいて、前記出力生成器により生成された前記コンピュータ可読コードにより、コンピュータは、前記 インタラクティブなユーザーインターフェースの各状態お よ び前 記 1若しくはそれ以上の インタラクティブな要素 の各々 に関す る入 力に応答して、 各状態にある前記 1若しくはそれ以上のインタラクティブな要 素の各々を 、前記インタラクティブなユーザーインターフェース内で 当該各 インタラクティブな要素 のために 定義された前記領域に表示するものである システム 。
- 4請求項1記載のシステムにおいて、前記インタラクティブなユーザーインターフェースは、ウェブブラウザにおいて表示されるものである システム 。
- 5請求項1記載のシステムにおいて 、さ らに、 前記 複数 の全画面グラフィックの 各々 と、前記インタラクティブなユーザーインターフェースの 複数の状態うちの 1 つと の関連付けを定義する第2のグラフィックツールを有するものである システム 。
- 6請求項1記載のシステムにおいて 、さ らに、 前記各状態にある 前記 1若しくはそれ以上の インタラクティブな要素の 各々に 機能を割り当てる第3のグラフィックツールを有するものである システム 。
- 7機械により インタラクティブなユーザーインターフェースを定義す る方 法であって、 前記機械が、複数の状態を有するインタラクティブなユーザーインターフェースの各状態に対応する複数の全画面グラフィックの各々を入力する工程であって、 前記全画面グラフィックの各々は、前記インタラクティブなユーザーインターフェースで使用される1若しくはそれ以上のインタラクティブな要素のために定義される領域を含み、前記インタラクティブなユーザーインターフェースの複数の状態のうちの1つに関連付けられているものであり、 前記1若しくはそれ以上のインタラクティブな要素は前記インタラクティブなユーザーインターフェースの複数の状態に対応する複数の状態を有するものである、 前記 入力する工程と、 前記機械が、前記全画面グラフィックの各々の中で表示される前記1若しくはそれ以上のインタラクティブな要素の各々ための領域を定義する工程であって、当該領域の当該全画面グラフィックに対する幾何学的特性および位置情報を定義する工程を含むものである、前記定義する工程と、 前記機械が、前記1若しくはそれ以上のインタラクティブな要素の各々のために定義された前記領域の前記幾何学的特性および前記位置情報を格納する工程と、 前記機械が、コンピュータ可読コードおよび各状態にある前記1若しくはそれ以上のインタラクティブな要素の各々のために定義された前記領域のグラフィックを自動的に生成する工程であって、 当該領域のグラフィックは、前記インタラクティブなユーザーインターフェースの各状態に関連付けられた前記各全画面グラフィックと、前記格納された当該領域の前記幾何学的特性および前記位置情報に基づいて生成されるものである、 前記生成する工程と を有する方法。
- 8請求項 7 記載の方法において、さらに、 前記機械が、 前記インタラクティブなユーザーインターフェースの 追加状態または改訂状態に対応する1つの全画面グラフィックを 入力する工程と、 前記機械が、前記1若しくはそれ以上のインタラクティブな要素の各々のために定義された領域の 幾何学的特性 および 位置情報を読み出す工程と、 前記機械が、 コンピュータ可読コード および前記追加状態または改訂状態の各状態にある前記1若しくはそれ以上のインタラクティブな要素の各々のために定義された前記領域のグラフィックを自動的に生成する工程と を有するものである 方法 。
- 9請求項 7 記載の方法において、 前記各状態にある 1若しくはそれ以上 のイ ンタラクティブな要素の 各々のために定義された前記領域 のグラフィックは、 前記インタラクティブなユーザーインターフェースの各状態に関連付けられた 前記 各 全画面グラフィックの一部に対応しており、当該 各 全画面グラフィックの一部は、 前記 格納された 当該領域の 前記幾何学的特性および 前記 位置情報により画成されるものである 方法 。
- 10請求項 7 記載の方法において、前記生成された前記コンピュータ可読コードにより、コンピュータは、前記 インタラクティブなユーザーインターフェースの各状態お よ び前 記 1若しくはそれ以上の インタラクティブな要素 の各々 に関す る入 力に応答して、 各状態にある前記 1若しくはそれ以上のインタラクティブな要 素の各々を 、前記インタラクティブなユーザーインターフェース内で 当該各 インタラクティブな要素 のために 定義された前記領域に表示するものである 方法 。
- 11請求項 7 記載の方法において、前記インタラクティブなユーザーインターフェースは、ウェブブラウザにおいて表示されるものである 方法 。
- 12請求項 7 記載の方法において、さらに、 前記機械が、コンピュータ可読コードおよび前記インタラクティブなユーザーインターフェースの各状態にある前記追加または改訂された1若しくはそれ以上のインタラクティブな要素の各々のために定義された領域のグラフィックを自動的に生成する工程であって、前記領域は、前記全画面グラフィック内の前記追加または改訂された1若しくはそれ以上のインタラクティブな要素の各々のために定義されるものである、前記生成する工程 を有するものである 方法 。
- 13機械により複数の状態を有する インタラクティブなユーザーインターフェースを定義す る方 法であって、 当該インタラクティブなユーザーインターフェースは1若しくはそれ以上のインタラクティブな要素を有し、当該インタラクティブな要素は前記インタラクティブなユーザーインターフェースの複数の状態に対応する複数の状態を有するものであり、 前記機械が、前記インタラクティブなユーザーインターフェースの各状態に対応する複数の全画面グラフィックの各々を入力する工程と、 前記機械が、各状態にある前記1若しくはそれ以上の インタラクティブな要素 を示す 個々のグラフィックを自動的に生成する工程で あって、 前記個々のグラフィックは、前記インタラクティブなユーザーインターフェースの各状態に関連付けられた前記各全画面グラフィックおよび当該各全画面グラフィック内に定義された前記1若しくはそれ以上のインタラクティブな要素のための領域に基づいて生成されるものである、 前記生成する工程と を有する方法。
- 14請求項 13 記載の方法において、 前記 各 状態にある前記1若しくはそれ以上の インタラクティブな要素の 各々を示す 前記個々のグラフィックは、 前記インタラクティブなユーザーインターフェースの各状態に関連付けられた前記各全画面グラフィックの一部であり、 当該 各 全画面グラフィックの一部は、 前記1若しくはそれ以上のインタラクティブな要素のために定義された領域 により画成されるものである 方法
- 15請求項 13 記載の方法において、この方法は、さらに、 前記機械が、 前記1若しくはそれ以上のインタラクティブな要素 の各々のために定義された前記全画面グラフィック内の領域の 幾何学的特性および位置情報を格納する工程を有するものである 方法 。
- 16請求項 13 記載の方法において 、さ らに、 前記機械が、前記インタラクティブなユーザーインターフェースの各状 態に関するユーザーの入力に応答し て、コンピュータに、前記個々のグラフィックを 前記 全画面グラフィック 内 の前記1若しくはそれ以上の インタラクティブな要素 の各々のために 定義された前記領域に表示させる 前記インタラクティブなユーザーインターフェースに関するコンピュータ可読コードを作成する工程 を有するものである 方法 。
- 17機械により複数の状態を有するインタラクティブなユーザーインターフェースを定義する方法であって、当該インタラクティブなユーザーインターフェースは1若しくはそれ以上のインタラクティブな要素を有し、当該インタラクティブな要素は前記インタラクティブなユーザーインターフェースの複数の状態に対応する複数の状態を有するものであり、 前記機械が、前記インタラクティブなユーザーインターフェースのための第1の全画面グラフィックを入力する工程であって、当該第1の全画面グラフィックは、第1の状態にある前記1若しくはそれ以上のインタラクティブな要素を示すものである、前記入力する工程と、 前記機械が、前記インタラクティブなユーザーインターフェースのための前記第2の全画面グラフィックを入力する工程であって、当該第2の全画面グラフィックは、第2の状態にある前記1若しくはそれ以上のインタラクティブな要素を示すものである、前記入力する工程と、 前記機械が、前記第1および第2の全画面グラフィックの中で表示される前記1若しくはそれ以上のインタラクティブな要素の各々のための領域を定義する工程であって、当該領域の当該第1および第2の全画面グラフィックに対する幾何学的特性および位置情報を定義する工程を含むものである、前記定義する工程と、 前記機械が、前記1若しくはそれ以上のインタラクティブな要素の各々のために定義された前記第1または第2の全画面グラフィック内の領域の幾何学的特性および位置情報を格納する工程と、 前記機械が、コンピュータ可読コードおよび各状態にある前記1若しくはそれ以上のインタラクティブな要素の各々のために定義された前記領域のグラフィックを自動的に生成する工程であって、 前記第1の状態にある前記1若しくはそれ以上のインタラクティブな要素の各々のためのグラフィックは前記第1の全画面グラフィックから生成されるものであり、 前記第2の状態にある前記1若しくはそれ以上のインタラクティブな要素の各々のためのグラフィックは前記第2の全画面グラフィックから生成されるものである、 前記生成する工程と を有する方法。
Independent claims17
36 paragraphs, as filed
This application, filed August 22, 2007, claims US Provisional Patent Application No. 60 / 957,354, "Defining an Interactive User Interface. Is incorporated herein).
The present invention relates to methods and systems for defining interactive computer user interfaces.
Interactive applications generally have a user interface composed of interactive elements (such as buttons). The interactive element usually has multiple states that respond to a user's action. The user uses a pointing device, which is usually a computer mouse, to position the pointer at various positions within the interface. When a user action occurs, such as hovering the mouse pointer over the interactive element (rollover), the various graphics of the interactive element underneath the mouse pointer are displayed in response to that user action. It is possible to show different states of the interactive element.
By convention, an interactive element in an interactive interface is something like a simple one with one state (normal) or two states (normal and rollover), or four states (usually rollover, click). , And invalid). The creator of an interactive interface can associate various predetermined functions with any predefined element.
Today, interactive applications are generally constructed by a method known as "cutting and placing". First, Microsoft® Paint and Adobe Use graphic creation and editing software such as Photoshop® to create the overall look and interface layout. A graphic of each state of an individual interactive element is usually created by defining those elements, cutting them from the overall layout, and then saving the individual files. Elements such as buttons that have two states are generally displayed in the normal state, but are also displayed in the rollover state in response to mouse position. The creator manually creates and saves at least one image for the rollover state of the button and a background image that contains the normal image of the button in the correct position. This method requires cutting and tracing of a large number of graphic files when the interactive interface is complex, such as when it is desirable to have multiple interactive elements. In a particular case, such as an interface containing multiple elements with multiple states, the number of images "I" that needs to be created is at least I = (E × (S-1)) + 1. Where E is the number of interactive elements in the interface and S is the number of states (assuming all elements have the same number of states). In other cases, you need to create a graphic for each state of each individual interactive element. In these other cases, the number of graphics that the creator must create and manage increases to I = (E × S) +1.
[0006] In the second stage of the configuration process, each created image needs to be placed at an appropriate position in the interface. When creating the final interface, authors typically use Adobe® Flash® or Microsoft® Visual. Requires a second software application, such as Studio®. The author uses these tools to place an individual image of each state of each interactive element against the background graphic, and the image of each state of the interactive element is the original image of that element throughout the layout. Attempts to place it exactly in place. At the time of creating and saving each graphic file for each element in the cutting stage, the files hold only their size information and their respective location information with respect to the entire interface from which the element was cut (cut). Does not hold. Due to the lack of location information specific to the file in the file, the author intended to manually arrange each of the completed individual graphics, usually through a number of tedious trials and errors. The appearance must be realized. Finally, in order to assign a given function in response to user input to each state of each element, a graphic of each state of each interactive element must be constructed and the function defined. This definition may be made during the rebuilding of element layers throughout the interface or at a separate stage, depending on the output platform. Since the above process is time-consuming and error-prone as a whole, the "cutting and tracing" and definition / reconstruction are inefficient and require a great deal of labor. Then, when the creator modifies the image for one or more states of one or more elements, or attempts to add states, the "cutting and tracing" and definition / reconstruction steps of each of the above elements. You'll have to redo the whole thing.<u style="single">Prior art document information related to the invention of this application includes the following (including documents cited at the international stage after the international filing date and documents cited when domestically transferred to another country).</u>[Prior Art Document] [Patent Document]
[0007] [Patent Document 1] U.S. Patent Application Publication No. 2004/0243931 [Patent Document 2] US Patent Application Publication No. 2002/0023111 [Patent Document 3] US Patent Application Publication No. 2003/0025730<u style="single">[Summary of Invention]</u><u style="single">[Means for solving problems]</u>
<p> The present invention provides a system for defining an interactive (interactive) user interface, including a graphical user interface for inputting at least one full-screen graphic of an interactive user interface having one or more states. Each said at least one full-screen graphic can be associated with one of the states of the interactive user interface. Interactive graphics tools can be included to define areas within the interactive user interface that correspond to each of one or more interactive elements displayed within each said at least one full-screen graphic. .. A data storage device can also be included, which can store the geometric properties and location information of the defined area corresponding to each of the one or more interactive elements of the interactive user interface. In addition, an output generator can also be included, which can automatically generate computer-readable code or graphics to display each state of each of the above-mentioned one or more defined interactive elements.</p><p> In one aspect of the invention, the code or graphic for each state of each of the one or more defined interactive elements is the full-screen graphic entered for each of the states and each of the interactive Generated from said geometric properties and location information defined and stored for the element. In another embodiment, the graphic for each state of each said one or more defined interactive elements corresponds to a portion of the full screen graphic entered for each said state, said full screen. A portion of the graphic is defined by the geometric properties and location information defined and stored for each of the interactive elements.</p><p> In yet another aspect, the computer-readable code generated by the output generator allows the computer to respond to each user's input for each of the states and the user's input for each of the interactive elements. Each state of the one or more interactive elements can be displayed in the area defined for each interactive element within the interactive user interface. In certain embodiments, the interactive user interface is displayed in a web browser.</p><p> The system of the present invention may also have a second graphic tool that defines the association between each of the at least one full-screen graphic and one state of the interactive user interface. It can also include a third graphic tool that assigns functionality to each state of each said interactive element.</p><p> The present invention also provides a method that is at least partially implemented by a machine that defines an interactive user interface. This method involves entering one or more full-screen graphics of an interactive user interface with one or more states and one or more interactive elements into each state of the interactive user interface, one for each. Automatically generate computer-readable code or graphics that enable the process of defining areas within the interactive user interface and the graphic display of each state of each interactive element for one or more of the interactive elements. The process to be performed can be included.</p><p> In one embodiment of the method, yet another step stores the geometric properties and location information of the defined region corresponding to each of the one or more interactive elements of the interactive user interface. be able to. In another embodiment, the code or graphic for each state of each of the one or more defined interactive elements is the full-screen graphic entered for each of the states and each of the interactive elements. Generated from said geometric properties and location information defined and stored for use. In yet another embodiment, the graphic for each state of each said one or more defined interactive elements corresponds to a portion of the full screen graphic entered for each said state. A portion of the full-screen graphic is defined by the geometric properties and location information defined and stored for each said interactive element.</p><p> In one aspect of the invention, the generated computer-readable code allows the computer to respond to the user's input for each of the states and the user's input for each of the interactive elements, each of the above one or more interactive. Each state of the element can be displayed in the area defined for each interactive element within the interactive user interface. In another aspect, the interactive user interface is displayed in a web browser.</p><p> In one embodiment of the invention, there is further a step of defining areas within the interactive user interface for each interactive element to be added or revised to the editing of the interactive user interface, and the additions and revisions. Includes the process of automatically generating computer-readable code that enables the graphic display of each state of each interactive element, including the interactive element. In another embodiment, the editing of the interactive user interface is further populated with one full-screen graphic of the interactive user interface for each state of the interactive user interface to be added or revised. , Each state of each interactive element, based on the process of reading the position information corresponding to each of the above one or more interactive elements from the stored geometric properties and the added or revised full-screen graphic. Includes the process of automatically generating computer-readable code that enables the graphic display of.</p><p> The present invention further provides a second method that is at least partially implemented by a machine that defines an interactive user interface. The method comprises the step of inputting one or more full-screen graphics of an interactive user interface having one or more states and one or more interactive elements into each state of the interactive user interface, and each of the above. It involves defining an area within the interactive user interface for one or more interactive elements and automatically generating individual graphics for each state of each interactive element.</p><p> In one aspect of the second method of the invention, the individual graphic for each state of each interactive element is defined for the full screen graphic for each state and for each interactive element. Generated from the area. In another embodiment, the individual graphic for each state of each interactive element is a portion of the full screen graphic for each state defined by the area defined for each interactive element. It is a graphic.</p><p> One embodiment of this second method further stores the geometric properties and location information of the defined region corresponding to each of the one or more interactive elements of the interactive user interface. Accompanied by. In another embodiment, the method further creates computer-readable code for the interactive user interface to respond to user input for each of the states and for each of the interactive elements within the interactive user interface. A step of displaying each graphic in the area defined for is displayed on a computer.</p>
The present invention will be better understood by reference to the following description in conjunction with the accompanying drawings.<figref num="1">FIG. 1 is a diagram illustrating an exemplary computer environment in which the present invention can be implemented (implemented).</figref><figref num="2">FIG. 2 is a diagram showing an example of a component of the present invention in the system memory according to the embodiment of the present invention.</figref><figref num="3">FIG. 3 is a diagram showing an example of a component of the present invention stored in a non-volatile computer-readable medium according to an embodiment of the present invention.</figref><figref num="4">FIG. 4 is a flowchart illustrating an aspect of the process of the method of the present invention.</figref><figref num="5A">5A and 5B show examples of the "cutting and tracing" method.</figref><figref num="5B">5A and 5B show examples of the "cutting and tracing" method.</figref><figref num="6A">6A and 6B show two exemplary full-screen graphics used as inputs to generate the same interactive elements as those shown in FIGS. 5A and 5B, based on one aspect of the invention. It is a thing.</figref><figref num="6B">6A and 6B show two exemplary full-screen graphics used as inputs to generate the same interactive elements as those shown in FIGS. 5A and 5B, based on one aspect of the invention. It is a thing.</figref><figref num="7">FIG. 7 is a diagram showing an exemplary graphic interface of an embodiment of the present invention in Design mode.</figref><figref num="8A">8A and 8B are diagrams showing an exemplary graphic interface of an embodiment of the present invention in Preview mode.</figref><figref num="8B">8A and 8B are diagrams showing an exemplary graphic interface of an embodiment of the present invention in Preview mode.</figref>
<u style="single">Examples of computer environment</u> FIG. 1 and the following description are intended to give a general overview of suitable computer environments in which an example embodiment of the present invention can be implemented. Needless to say, however, it is conceivable to use handheld, portable and all other computer devices in connection with the present invention. The general-purpose computer is described below, but this is just an example. The present invention can also operate on a thin client having network server interoperability and interaction capabilities. Thus, an embodiment of the invention is a networked host with little or minimal client resources required, such as a network environment in which the client device functions solely as an interface to a browser or the World Wide Web. Can be implemented (implemented) in a type service environment.
Although not required, the invention is an application programming interface used by developers or testers and / or included within network browsing software (browser). Can be implemented (implemented) via interface: API). This is described below in the general context of computer-executable instructions, such as program modules executed by one or more computers (such as client workstations, servers, or other devices). In general, a program module includes routines, programs, objects, components, data structures, etc. that perform a particular task or introduce a particular abstract data type. Generally, the functions of the program modules can be combined or distributed as needed in various embodiments. Further, those skilled in the art will appreciate that the present invention can be implemented (implemented) with other computer system configurations. Other well-known computer systems, environments, and / or configurations that may be suitable for use with the present invention include personal computers. computers: PCs), server computers, handheld or laptop devices, multiprocessor systems, microprocessor-based systems, programmable home appliances, network PCs, minicomputers, mainframe computers, etc. Although not limited to). In addition, one embodiment of the present invention can also be implemented (implemented) in a distributed computer environment in which tasks are executed by remote (remote) processing devices linked via a communication network or other data transmission medium. In a distributed computer environment, program modules can be located on both local and remote computer storage media, including memory storage.
As described above, FIG. 1 shows an example of an appropriate computer system environment 100 in which the present invention can be implemented (implemented), but as specified above, the present computer system environment 100 is merely an appropriate computer environment. It is an example and does not imply a limitation of the scope of use or the scope of function of the present invention. Nor should this computer environment 100 be construed as having any dependency or requirement with respect to any one or combination of the components shown in this exemplary operating environment 100.
Referring to FIG. 1, an example of a system in which the present invention is implemented (implemented) includes a general-purpose computer device in the form of a computer 110. The components of the computer 110 can include (and are limited to) a processing unit 120, a system memory 130, and a system bus 121 that connects various system components including the system memory to the processing unit 120. Not a thing). The system bus 121 may be any of several types of bus structures, including a memory bus or memory controller using any type of bus architecture, a peripheral bus, and a local bus. Examples (but not limited to) such architectures include Industry Standard Architecture (ISA) buses, Micro Channel Architecture (MCA) buses, and Extended ISA (Extended) buses. ISA: EISA) Bus, Video Electronics Standards Association: VESA (commonly known as Besa) local bus, peripheral component interconnect (PCI) bus (also known as mezzanine bus), and PCI Express bus.
The computer 110 typically includes various computer-readable media. Computer-readable media may be any available media accessible from computer 110, including volatile and non-volatile removable media (removable media) and non-removable media (non-removable media). Is done. As an example (but not limited to), computer-readable media can include computer storage media and communication media. Computer storage media include volatile and non-volatile removable and non-removable media implemented (implemented) by any method or technique that stores information such as computer-readable instructions, data structures, program modules, or other data. and so on. Computer storage media include random access memory (RAM), read-only memory (ROM), and electrically erasable and programmable read-only flash memory (Electrically-Erasable Programmable Read-Only). Memory: EEPROM), flash memory and other memory technologies, compact disc read-only memory (CD-ROM), digital versatile disc (Digital Versatile) Disc: DVD) There are other optical disc storage devices, magnetic cassettes, magnetic tapes, magnetic disk storage devices and other magnetic storage devices, or any other medium that can be used to store desirable information and is accessible from the computer 110. (Although not limited to this). Communication media typically embody (embody) computer-readable instructions, data structures, program modules, or other data with modulated data signals such as carrier waves or other transport mechanisms, and deliver arbitrary information. The medium is included in this. The term "modulated data signal" means a signal in which one or more of its characteristics are set or modified in a manner that encodes the information in the signal. As an example (but not limited to), communication media include, but are not limited to, wired media such as wired networks and directly wired connections, and acoustic, radio frequency (RF), infrared and other wireless media. There are wireless media and so on. Any combination of the above should also be included within the scope of computer readable media.
The system memory 130 includes a computer storage medium in the form of volatile and / or non-volatile memory such as ROM 131 and RAM 132. The basic input / output system (BIOS) includes a basic routine that assists in the transfer of information between elements in the computer 110, such as during startup, and is usually stored in ROM 131. RAM 132 typically contains data and / or program modules that are immediately accessible and / or are currently being operated on by the processing unit 120. By way of example, but not limited to, FIG. 1 illustrates an operating system 134, an application program 135, other program modules 136, and program data 137. RAM 132 can also contain other data and / or program modules.
The computer 110 may also include other removable or non-removable volatile or non-volatile computer storage media. As a mere example, FIG. 1 shows a hard disk drive 141 that reads or writes to a non-removable non-volatile magnetic medium, a magnetic disk drive 151 that reads or writes to a removable non-volatile magnetic disk 152, and a CD. -The optical disk drive 155 that reads or writes to the removable non-volatile optical disk 156 such as ROM or other optical medium is illustrated. Other removable or non-removable volatile or non-volatile computer storage media that can be used in the above operating environment examples include magnetic tapes, cassettes, flash memory cards, digital versatile discs, digital videotapes, solid RAM, solids. There is ROM etc. (but not limited to this). The hard disk drive 141 is typically connected to the system bus 121 via a non-removable memory interface such as interface 140, and the magnetic disk drive 151 and optical disk drive 155 are typically said by a removable memory interface such as interface 150. Connected to system bus 121.
The drives illustrated above and illustrated in FIG. 1 and the computer storage media associated with each of them provide computer readable instructions, data structures, program modules, and other data storage devices for the computer 110. In FIG. 1, for example, the hard disk drive 141 is illustrated as storing an operating system 144, an application program 145, another program module 146, and program data 147. It should be noted that these components may be the same as or different from the operating system 134, the application program 135, the other program modules 136, and the program data 137. Here, the operating system 144, the application program 145, the other program modules 146, and the program data 147 are given different numbers, but these are separate even with the minimum settings. This is to illustrate that there is. The user can enter commands and information into the computer 110 via an input device such as a keyboard 162 or a pointing device 161 (commonly referred to as a mouse, trackball, or touchpad). Other input devices (not shown) include microphones, joysticks, gamepads, satellite antennas, scanners, and the like. The input device and the like described above are often connected to the processing unit 120 via the user input interface 160 connected to the system bus 121, but are a parallel port, a game port, or a universal serial bus (USB). It may be connected by other interfaces or bus structures.
A monitor 191 or another type of display may also be connected to the system bus 121 via an interface such as the video interface 190. In addition to the monitor 191 the computer can also include other peripheral output devices, such as speakers and printers (not shown), that can be connected via the output peripheral interface 195.
The computer 110 can operate in a network environment using a logical connection to one or more remote computers such as the remote computer 180. The remote computer 180 may be a personal computer, server, router, network PC, peer device, or other common network node, and although only memory storage device 181 is illustrated in FIG. 1, this is usually the case. Includes many or all of the elements mentioned above for computer 110. The logical connections shown in Figure 1 include local area networks (LAN) 171 and wide area networks (WAN) 173, but may also include other networks. Such network environments are common in offices, enterprise-scale computer networks, intranets, and the Internet.
When used in a LAN network environment, the computer 110 is connected to the LAN 171 via a network interface or adapter 170. When used in a WAN network environment, the computer 110 typically includes means of establishing communication over the WAN 173 (such as the Internet). In a network environment, the program module shown for the computer 110, or a portion thereof, can be stored in a remote memory storage device. As an example (but not limited to), FIG. 1 illustrates a remote application program 185 as resident in memory device 181. The remote application program 185 includes Microsoft® Internet Information Services® (IIS) and Apache HTTP that provide content that resides in remote storage 181 or other storage devices that have access to the Worldwide Web. Includes, but is not limited to, web server applications such as Server. It will be appreciated that the network connections presented here are exemplary and other means of establishing communication links between the computers can also be used.
Those skilled in the art will appreciate that the computer 110 or other client device can be deployed as part of a computer network. In this regard, the present invention relates to any computer system having an arbitrary number of memory units or storage units and an arbitrary number of applications and processes running over any quantity of storage units or capacities. One embodiment of the present invention can be applied to an environment in which a server computer and a client computer are deployed in a network environment having a remote or local storage device. The present invention is also applicable to stand-alone computer devices capable of functioning, interpreting, and executing programming languages.
The present invention The Interface Definition software of the present invention (Carving Station (meaning "counter for carving meat")) is a process of organizing information in a unique way and defining an interactive (interactive) user interface. By automating much, it introduces a novel approach to creating interactive applications. The automation process of the present invention can be customized for any platform. In a preferred embodiment, the Carving Station provides a Design mode for configuring an interactive interface and a Preview mode for visualizing and validating the constructed interactive interface.
FIG. 2 illustrates the components of the Carving Station in the system memory 130 according to the embodiment of the present invention. In this embodiment, the Carving Station 210 resides in the system memory 130 as one of the application programs 135. Graphical user interface component 211 is provided for inputting graphics, and graphic tool 212 is provided for defining interactive elements. Finally, code generator 213 is provided for generating output code and output graphics. Other program modules 136, such as the visualization program 220, are provided for configuration visualization and verification as needed. Program data 137 is selected from input graphic 230, defined interactive element dimension and position data (Carved Geometry) 240, and background graphic 250. Includes, but is not limited to, the output element graphic 260, if required by the output platform.
FIG. 3 illustrates an embodiment of a component of a Carving Station housed in a non-volatile computer readable medium device 141 such as a hard drive. The Carving Station program 310 and its components (graphical user interface 311 for input graphics, graphic tool 312 for defining interactive elements, and code generator 313 for output code or graphics) are on the computer-readable medium 141. It is stored as an application program 145 and can be read into the system memory 130 at runtime. Computer-readable media can also include other program modules 146, such as a copy of visualization program 320 that visualizes and validates the configuration. Program data 147 includes input graphic 330 and defined element dimension and position data (Carved). Includes (but is limited to) a Geometry (meaning "cut geometry") 340, a background graphic 350, and a graphic 360 for interactive elements, if required by the output platform. Not a thing).
FIG. 4 illustrates a flowchart of a process aspect of the method of the present invention. In a platform general purpose (platform independent) embodiment of the present invention, a computer-controlled (electronically controlled) method of defining an interactive user interface includes the full screen of the interactive user interface for each state of the interactive user interface. The process of entering one graphic at a time (410), the process of defining an area within the interactive user interface for each of the above one or more interactive elements (420), and each state of each interactive element. Includes the process (430) of automatically generating platform-specific computer-readable code that enables the graphic display of. In addition, editing an already defined interactive user interface includes a full-screen graphic of the interactive user interface for each state of the defined interactive user interface that should be revised (442) or added (444). Enables the process of entering one at a time, the process of defining areas within the interactive user interface (420) for each interactive element to be added or revised, and the graphical display of each state of each interactive element. It involves the process of automatically generating computer-readable code (430).
More specifically, the creator first determines the number of states of the interactive element and the like for the layout of the interactive user interface. Instead of customarily entering individual graphics for each state of each element, the author enters one full-screen graphic for each state, including all of the interactive elements displayed in that state (410). ). For example, for a rollover state, the author enters only one full-screen graphic with each interactive element shown in the rollover state. The full-screen graphic as used herein refers to a graphic that occupies the entire intended display area of the interactive interface, or a graphic of a portion of the interactive interface where the interactive element will reside.
Therefore, the number of images that the creator must create is equal to the number of states, that is, I = E. Therefore, the present invention significantly reduces the number of individual data points that the creator must supply and manage, such as graphics and location information. 5A and 5B show examples of prior art "cutting and tracing" methods. For an interface with 5 buttons with 2 states, a total of 11 graphics must be created individually (1 graphic for each of the 5 buttons 510 in normal state (Figure 5A), rollover state. One graphic for each of the five buttons 520 (Figure 1A), and one background graphic (Figure 5B, 530). 6A and 6B illustrate two images entered by the author to generate the same five-button two-state interface (shown in FIGS. 5A and 5B) in the present invention. Carving When using Station, the author enters only one full-screen graphic 620 in normal state, with all elements shown in normal state 610 (Figure 6A), and all elements in rollover state 630, shown in rollover state. Enter only one full-screen graphic 640 in (Figure 6B).
With reference to FIG. 7, Carving Station provides a graphical user interface 311 for the input graphic in Design mode 730. The creator inputs each created full-screen graphic into Carving Station and assigns the graphic to the corresponding state (410). FIG. 7 illustrates a screenshot of the graphical user interface of preferred embodiment 710 of the present invention in said design mode 730. In the embodiment shown in FIG. 7, the Carving Station 710 is a stand-alone Windows® application, but the present invention can be applied to other uses, or Adobe Photoshop®, Flash®. , Or Microsoft® Visual It can also be applied as a component of larger software packages such as Studio®. As illustrated, this interface provides the author with the option of choosing between the design mode 730 and the preview mode 830 (FIGS. 8A and 8B). The author can also specify the location of the Source Art 750 where the full-screen graphic (input graphic 330) can be placed. The filename of each full-screen graphic can be entered in the corresponding space for each layer 760 (each contained state represents one layer). Those full-screen graphics are displayed as layers within the display area 790. In one embodiment of the invention, the Carving Station 710 has four state layers (Normal) and Mouseover. Provides Over or Rollover, Pressed, and Disabled. In the example illustrated in FIG. 7, only two states (normal and mouseover) are used, leaving the unused state blank. In addition, the author has output file 760 such as Repository store (data store), file system (File System), Oracle (registered trademark) Database, SQL Server database, and Microsoft (registered trademark) Content Manager Server. You can also specify the location where they are stored together. These output files 760 are compatible with a variety of formats, including Adobe® Flash® Movie, PowerPoint® files, HTML Page, and Microsoft® Sharepoint® servers. Can have.
As the final creation process of the design process of the present invention, the author uses the tool 212 provided at Carving Station to graphically identify the area on the full-screen graphic corresponding to the desired individual interactive element (420). ). In the example of Figure 7, each element is defined by a rectangle 780. The area selected to define the interactive element (Hot Spot) is highlighted in a different color 770. Each hotspot is assigned a name and is displayed in Listing 740. All interactive elements are defined simultaneously for all their states (or all layers). The size and location information of each Carved Geometry 240 for the full-screen graphic is unique to the definition of the geometric area representing each interactive element and is recorded and stored as defined by the author. Will be done. Therefore, conventionally, it was necessary to retain the position information to the outside, but at the same time, the necessity of manually arranging (or replacing) the element by trial and error was eliminated.
During the process of defining the interactive interface above, the author defines the entire configuration, including all graphics of the interactive element and all position and size information, from time to time and stores it on a computer-readable medium 147 (426). be able to. The function of each state of each said interactive element can be assigned (424) as a separate step during or after the element definition. Then, if he wishes to change the appearance of the state, the author simply inputs (442) a full-screen graphic with the desired changes and replaces it with the original graphic associated with each state 760. The present invention then detects changes in the source graphic and automatically updates the configuration. The creator can then store the updated configuration. If you wish to add a state to an interface you have already defined, the author simply enters one full-screen graphic for each state you want to add (444) and associates each said full-screen graphic with the appropriate state 760. Just need it. If it is desired to add an interactive element, the author only needs to identify the area of the interactive element to be added on the full screen graphic (420). The newly added element 740 is assigned a name, and the size and location information of the added interactive element is automatically recorded and saved (426). As a result, there is no need to supply, manage, and arrange large numbers of graphics, nor to define and reconstruct each element layer within an interactive user interface. Since the design process of the present invention is platform independent, the author can concentrate on the aesthetics of the interface without worrying about platform-specific coding.
Preview mode 830 (Figures 8A and 8B) allows authors to visualize and validate (440) the designed interactive interface. In a preferred embodiment, the creator selects a particular platform at the beginning of the design process described above. When preview mode 830 is selected, Carving Station automatically uses the Carved Geometry 240 and the supplied source graphics 230 to provide graphics and code specific to the selected platform. Generate in (430). The interactive interface designed by the author is previewed as native code for the platform that creates the intended interactive interface. For example, if the author chooses to create the final interactive interface as a regular web page, Carving Station automatically generates graphics for individual interactive elements. Since the configuration retains information on both the position and size of the element graphic, Carving Station can automatically generate an HTML file that references the graphic containing the correct layout of each of the interactive elements. The creator does not need to manually enter or adjust the location information. In one embodiment, within the Preview window of Carving Station, an instance of the appropriate viewer is called for the selected platform. The HTML web page example uses the Internet Explorer® WebBrowser control. Carving Station provides an interactive interface that complies with other platforms such as Microsoft® .NET, PowerPoint®, and Adobe® Flash® without any changes to the design process. It can be easily output. When the designed interactive interface is satisfactory, the author may instruct Carving Station to "publish" the interactive interface (450). All corresponding graphics and code are automatically generated by Carving Station and stored in an author-defined destination, such as repository directory 720.
8A and 8B illustrate screenshots of the Preview mode 830 of the Carving Station 710. In FIGS. 8A and 8B, the interactive interface created and shown in FIG. 7 is displayed in preview area 870. The two views in preview mode 830 (Figures 8A and 8B, respectively) are shown to demonstrate the interactivity defined by the author. In FIG. 8A, the mouse pointer 850 is placed on the first element, and this first button is displayed in the rollover state 840, while the remaining elements are displayed in the normal state 860. In FIG. 8B, the mouse pointer 850 is placed on the second element, and the second element is displayed in the rollover state 840, while the first element, the third element, and the fourth element. And the fifth element are displayed in the normal state 860.
In a preferred embodiment, such a display is such a display after the creator has completed a two-step creation process (the creator creates a full-screen graphic of each desired state and the geometry of each interactive element. Generated by automated file creation operations (after identification). After the creator inputs the full-screen graphic for each state and defines (identifies) the location information for each interactive element, Carving Station automatically generates an image file for each state for each element. As a result, the Carving Station automatically generates a plurality of images that the user has taken time and effort to generate by the "cutting and tracing" process, and records each of the above-mentioned position information. For example, in the example of Figure 5A and Figure 5B, Carving for an interface with five buttons, each with two states. The Station will have 10 graphics individually after the creator has entered one full-screen graphic in the normal state and one full-screen graphic in the rollover state to identify the five interactive elements. (That is, one graphic for each of the five buttons 510 in the normal state and one graphic for each of the five buttons 520 in the rollover state). Therefore, as shown in FIG. 8B, when the mouse pointer 850 is placed on the second element, the present invention has a file automatically generated for the rollover state 840 of the second element. Is read out, and the image is appropriately displayed at the position of the second element in the preview area 870.
In another embodiment of the invention, such labeling occurs alternatives. For example, in the example of FIG. 8B, instead of automatically generating and then reading a specific image for the rollover state 840 of the second element, the present invention has the mouse pointer as in the example of FIG. 8B. When placed on the second element, the full screen graphic created and stored for the rollover state is referenced to the second element of the full screen graphic previously defined by the creator. The corresponding part can be presented. Yet another alternative embodiment of the invention has a normal state full screen graphic (eg, one that looks similar to FIG. 5B) displayed in the preview area 870, wherein the mouse pointer 850 is an example of FIG. 8B. A full-screen graphic for the rollover state that exists as a lower layer by effectively cutting out the second element previously defined by the creator when it is placed on the second element as in. Is shown. Since only the position of the second element is cut out, the only part of the full-screen graphic for the rollover state that is displayed to the user is the part of the second element.
In conclusion, Carving Station significantly reduces the number of individual data points and graphic files that the author must supply and manage to achieve the final interactive interface, thereby allowing the author to provide each element. Eliminates the need to manually define and rebuild layers. When modifying and adding elements using Carving Station, the author does not have to repeat the "cutting and tracing" process, nor does it have to repeat the definition and reconstruction of each element layer in the interface.
Those skilled in the art will clearly understand the advantages and the like of the present invention described above from the above description of the present specification. Therefore, those skilled in the art will appreciate that the above embodiments can be modified or modified without departing from the scope of the present invention. Therefore, it should be understood that the present invention is not limited to the specific embodiments described herein, but is intended to include all modified (modified) forms contained in the gist of the present invention.
Every citation, both ways
| Document | Relation | Office |
|---|---|---|
| WO2007028064A1 | Cites | World Intellectual Property Organization (WIPO) |
| GB02354922A | Cites | United Kingdom |
| US20040243931A1 | Cites | United States of America |
| JP2006092079A | Cites | Japan |
| JP2006024089A | Cites | Japan |
| JP2001067059A | Cites | Japan |
| JP2000048178A | Cites | Japan |
| JP11250276A | Cites | Japan |
| JP2008130083A | Cites | Japan |
19 members in 10 offices
Priority claims7
| Document | Office | Kind | Date |
|---|---|---|---|
| 60957354 | United States of America | – | |
| 95735407 | United States of America | P | |
| 2008074056 | United States of America | W | |
| 2007957354 | – | – | – |
| 2008074056 | – | – | – |
| US20070957354P | – | – | – |
| WO2008US74056 | – | – | – |
Members19
| Document | Office | Kind | |
|---|---|---|---|
| AU2008288768A1 | Australia | A1 | |
| CA2697347A1 | Canada | A1 | |
| WO2009026535A1 | World Intellectual Property Organization (WIPO) | A1 | |
| US2009187828A1 | United States of America | A1 | |
| EP2193451A1 | European Patent Office (EPO) | A1 | |
| KR20100082826A | Republic of Korea | A | |
| CN101821730A | China | A | |
| JP2010537325A | Japan | A | |
| HK1147581A | Hong Kong, China | A | |
| EP2193451A4 | European Patent Office (EPO) | A4 | |
| CN101821730B | China | B | |
| AU2008288768B2 | Australia | B2 | |
| JP5416112B2This record | Japan | B2 | |
| KR101567455B1 | Republic of Korea | B1 | |
| US9442703B2 | United States of America | B2 | |
| BRPI0815701A2 | Brazil | A2 | |
| US2017075546A1 | United States of America | A1 | |
| US9785326B2 | United States of America | B2 | |
| US2018032317A1 | United States of America | A1 |
15 legal events, as the office reported them to INPADOC
Over the term
Point at a mark for the eventEvents
| Event | Code | |
|---|---|---|
| Cancellation because of no payment of annual feesLAPS | LAPS | |
| Receipt of annual feesJAPANESE INTERMEDIATE CODE: R250R250 | R250 | |
| First payment of annual fees (during grant procedure)JAPANESE INTERMEDIATE CODE: A61A61 | A61 | |
| Written decision to grant a patent or to grant a registration (utility model)JAPANESE INTERMEDIATE CODE: A01A01 | A01 | |
| Written amendmentJAPANESE INTERMEDIATE CODE: A523A521 | A521 | |
| Written permission of extension of timeJAPANESE INTERMEDIATE CODE: A602A602 | A602 | |
| Written request for extension of timeJAPANESE INTERMEDIATE CODE: A601A601 | A601 | |
| Written permission of extension of timeJAPANESE INTERMEDIATE CODE: A602A602 | A602 | |
| Written request for extension of timeJAPANESE INTERMEDIATE CODE: A601A601 | A601 | |
| Written permission of extension of timeJAPANESE INTERMEDIATE CODE: A602A602 | A602 | |
| Written request for extension of timeJAPANESE INTERMEDIATE CODE: A601A601 | A601 | |
| Notification of reasons for refusalJAPANESE INTERMEDIATE CODE: A131A131 | A131 | |
| Report on retrievalJAPANESE INTERMEDIATE CODE: A971007A977 | A977 | |
| Written amendmentJAPANESE INTERMEDIATE CODE: A523A521 | A521 | |
| Written request for application examinationJAPANESE INTERMEDIATE CODE: A621A621 | A621 |
Numbers
- Publication
- 5416112
- Publication, DOCDB
- 5416112
- Publication, EPODOC
- JP5416112B
- Application
- 2010522071
- Application, DOCDB
- 2010522071
- Application, EPODOC
- JP20100522071
Titles2
- Japanese
- インタラクティブなユーザーインターフェースの定義
- English
- Defining an interactive user interface
Classification
- CPC, 1
- G06F8/38
- IPC, 2
- G06F9 44
- G06F3 048