JP5889135B2 - User interface design device - Google Patents
User interface design device Download PDFInfo
- Publication number
- JP5889135B2 JP5889135B2 JP2012154574A JP2012154574A JP5889135B2 JP 5889135 B2 JP5889135 B2 JP 5889135B2 JP 2012154574 A JP2012154574 A JP 2012154574A JP 2012154574 A JP2012154574 A JP 2012154574A JP 5889135 B2 JP5889135 B2 JP 5889135B2
- Authority
- JP
- Japan
- Prior art keywords
- composite display
- display component
- component
- image
- user interface
- 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
Links
- 239000002131 composite material Substances 0.000 claims description 370
- 238000003384 imaging method Methods 0.000 claims description 23
- 238000000034 method Methods 0.000 description 110
- 230000008569 process Effects 0.000 description 101
- 230000003068 static effect Effects 0.000 description 39
- 238000010586 diagram Methods 0.000 description 17
- 230000007704 transition Effects 0.000 description 6
- 230000009467 reduction Effects 0.000 description 5
- 230000000694 effects Effects 0.000 description 4
- 230000008859 change Effects 0.000 description 2
- 239000000284 extract Substances 0.000 description 2
- 230000001174 ascending effect Effects 0.000 description 1
- 230000008901 benefit Effects 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 238000005259 measurement Methods 0.000 description 1
Images
Landscapes
- Stored Programmes (AREA)
- User Interface Of Digital Computer (AREA)
Description
本発明は、設計対象装置のユーザインタフェースを、画像表示用のUI部品を用いて設計するユーザインタフェース設計装置に関するものである。 The present invention relates to a user interface design apparatus for designing a user interface of a design target apparatus using a UI component for image display.
ユーザインタフェース設計装置においては、複数のUI部品を組み合わせて新たにUI部品を作成しながら(部品化しながら)、表示内容の一部を担う複合表示部品を構築することがある。例えば、特許文献1には、基本表示部品を組み合せて複合表示部品を作成することで、階層的な部品化を実現することが開示されている。このように、部品化したUI部品を組み合わせてさらに部品化する、すなわち階層的に複合表示部品を設計していく設計方法では、設計時に直感的で編集しやすいメリットがある。
In the user interface design apparatus, a composite display component that bears a part of display contents may be constructed while creating a new UI component by combining a plurality of UI components (converting them into components). For example,
その一方で、組み込み機器においては、メモリやCPUなどのリソース使用をできるだけ低く抑える必要があり、UI部品作成時にもできるだけ作成するUI部品のリソース使用量に気を配ることが重要である。しかしながら、上述の設計方法では、知らず知らずのうちにメモリを多く消費する複合表示部品を作成してしまうケースもある。例えばメモリ使用量の大きなUI部品を多数利用して新たなUI部品を作成していくと、階層を重ねるごとに、意図せずに膨大なメモリを消費する複合表示部品を構築してしまう可能性がある。 On the other hand, in an embedded device, it is necessary to keep the use of resources such as a memory and a CPU as low as possible, and it is important to pay attention to the resource usage of UI components created as much as possible when creating UI components. However, in the above design method, there is a case where a composite display component that consumes a large amount of memory is created without knowing it. For example, if a new UI component is created by using a large number of UI components that use a large amount of memory, there is a possibility that a composite display component that consumes a huge amount of memory unintentionally will be constructed each time the layers are stacked. There is.
以上のような問題の対策として、画面内のUI部品の画像(表示内容)を描画した画像データを予め用意しておき、画面内のUI部品を、この画像データを表示する画像部品に置き換えること(以下この作業を「画像化」と呼ぶ)が提案されている。このような技術によれば、画面内のUI部品や部品の階層を減らしたりすることができ、結果的にメモリ消費を減らすことができる。しかしながら、UI部品を画像化するとUI部品の構造が失われるため、無秩序に画像化した場合には、UI部品の構造が大きく失われてしまうことがあり、後々直感的な編集ができなくなるというデメリットがある。 As a countermeasure against the above problems, image data in which an image (display content) of a UI part in the screen is drawn is prepared in advance, and the UI part in the screen is replaced with an image part for displaying the image data. (Hereinafter, this operation is referred to as “imaging”). According to such a technique, it is possible to reduce the UI components and the hierarchy of components in the screen, and as a result, it is possible to reduce memory consumption. However, since the UI component structure is lost when the UI component is imaged, the UI component structure may be largely lost when the image is disorderly imaged, and the intuitive editing cannot be performed later. There is.
また、画像化の作業は煩雑であり、多くの工数を必要とするため、その作業を容易化することが求められている。さらに、一度画像化したものの、思ったようにメモリ削減効果が得られなかった場合には、上記のデメリットのために画像化を元に戻す(画像部品を元のUI部品に置き換える)ことになるが、無秩序に画像化した場合にはさらに工数がかかるという問題がある。 In addition, since the imaging work is complicated and requires a lot of man-hours, it is required to facilitate the work. Furthermore, if the memory reduction effect is not obtained as expected, although the image has been imaged once, the imaging is restored (replaces the image component with the original UI component) due to the above disadvantages. However, there is a problem that more man-hours are required when images are generated randomly.
また、現状においては、どのUI部品を画像化すればメモリ削減効果が大きいのかが容易に推定することができない。このため、最適なメモリ削減効果を達成しようとする場合には、様々なUI部品、あるいは、各UI部品における様々な階層において画像化した後にメモリ使用量計測したり、画像化する範囲を変更してメモリ使用量を計測したり、さらには画像化を元に戻すとともに別の部品を画像化して計測したりする必要がある。この結果、長いターンアラウンドタイムを費やしながら試行錯誤を行う必要があり、さらなる設計工数の増大の原因となっていた。 In addition, at present, it cannot be easily estimated which UI parts are imaged to have a large memory reduction effect. For this reason, in order to achieve the optimum memory reduction effect, the memory usage is measured after changing the image at various UI components or at various layers in each UI component, and the range to be imaged is changed. Thus, it is necessary to measure the amount of memory used, or to restore the imaging and to image another component and measure it. As a result, it is necessary to perform trial and error while spending a long turnaround time, which causes a further increase in design man-hours.
そこで、本発明は、上記のような問題点を鑑みてなされたものであり、容易にUI部品を画像化することが可能な技術を提供することを目的とする。 Therefore, the present invention has been made in view of the above-described problems, and an object thereof is to provide a technique capable of easily imaging a UI component.
本発明に係るユーザインタフェース設計装置は、設計対象装置のユーザインタフェースを、画像表示用のUI部品を用いて設計するユーザインタフェース設計装置であって、前記UI部品として予め設計された基本表示部品を格納する基本表示部品格納部と、前記設計対象装置の複数の内部状態が割り当てられ、各前記内部状態に対して配置された前記UI部品を含んで構成される複合表示部品を格納する複合表示部品格納部とを備える。そして、前記ユーザインタフェース設計装置は、前記複合表示部品を作成及び編集する複合表示部品編集部と、前記複合表示部品編集部により指定された前記複合表示部品に基づいて、それに含まれる下位の階層の前記UI部品が前記内部状態ごとに画像化された新たな前記複合表示部品を画像複合表示部品として生成する画像複合表示部品生成部とを備える。 A user interface design device according to the present invention is a user interface design device for designing a user interface of a design target device using a UI component for image display, and stores a basic display component designed in advance as the UI component. A basic display component storage unit, and a composite display component storage for storing a composite display component including a plurality of internal states assigned to the design target device and arranged for each of the internal states A part. Then, the user interface design device includes a composite display component editing unit that creates and edits the composite display component, and the composite display component specified by the composite display component editing unit . The UI component includes an image composite display component generation unit that generates the new composite display component imaged for each internal state as an image composite display component.
本発明によれば、任意の複合表示部品の中から複合表示部品編集部により指定された複合表示部品を、画像化することができる。これにより、任意の複合表示部品を画像複合表示部品に置き換える作業を容易化することができる。 According to the present invention, a composite display component designated by a composite display component editing unit from any composite display component can be imaged. Thereby, the operation | work which replaces arbitrary composite display components with an image composite display component can be made easy.
<実施の形態1>
図1は本発明の実施の形態1に係るユーザインタフェース設計装置の構成を示すブロック図である。このユーザインタフェース設計装置は、設計対象装置のユーザインタフェースを、画像表示用のUI部品を用いて設計する設計装置である。図1に示すユーザインタフェース設計装置は、基本表示部品格納部101及び複合表示部品格納部102を含むUI部品格納部103と、表示属性設定部104aを含む複合表示部品編集部104と、画像複合表示部品生成部105とを備えて構成されている。
<
FIG. 1 is a block diagram showing a configuration of a user interface design apparatus according to
基本表示部品格納部101は、設計対象装置のユーザインタフェースを構成するUI部品として予め設計された基本表示部品を格納している。
The basic display
複合表示部品格納部102は、図2に示されるような複合表示部品を格納している。この図2においては、2段階の部品化により複合表示部品が構成されている。具体的には、1段階目の部品化により、第2階層の複合表示部品が、それより下位の第3階層の基本表示部品を含んで構成されている。そして、2段階目の部品化により、第1階層の複合表示部品が、それより下位の第2階層の複合表示部品及び第3階層の基本表示部品を含んで構成されている。このように、複合表示部品は、単一または複数の基本表示部品を組み合せたUI部品、あるいは、複合表示部品と基本表示部品とを組み合せたUI部品である。
The composite display
以上のような基本表示部品及び複合表示部品は、いずれも上述のUI部品に相当している。そこで、以下の説明において基本表示部品及び複合表示部品を区別しない場合には、その総称としてUI部品と呼ぶ。 Both the basic display component and the composite display component as described above correspond to the UI component described above. Therefore, in the following description, when the basic display component and the composite display component are not distinguished, they are collectively referred to as UI components.
UI部品格納部103は、UI部品(すなわち基本表示部品及び複合表示部品)を格納している。
The UI
複合表示部品編集部104は、複合表示部品を作成及び編集する。例えば、複合表示部品編集部104は、複合表示部品の属性値を編集する。本実施の形態では、複合表示部品編集部104が任意の複合表示部品を指定して所定の動作の開始を指示すると、画像複合表示部品生成部105には、複合表示部品編集部104が指定した複合表示部品が入力される。
The composite display
画像複合表示部品生成部105は、複合表示部品編集部104により指定された複合表示部品に基づいて、それに含まれるUI部品が所定のグループ単位で画像化された新たな複合表示部品を画像複合表示部品として生成する。なお、この画像複合表示部品生成部105の生成処理については後で詳細に説明する。画像複合表示部品生成部105は、この生成処理(画像複合表示部品生成処理)を、複合表示部品が入力されたときに開始する。
Based on the composite display component specified by the composite display
図3は、このユーザインタフェース装置を実現するハードウェア構成の一例を示す図であり、パーソナルコンピュータ(PC)401を用いた構成例である。UI部品格納部103(基本表示部品格納部101及び複合表示部品格納部102)は、RAMやハードディスクなどの記憶装置403の機能ブロックとして実現されている。複合表示部品編集部104、及び、画像複合表示部品生成部105は、CPUなどの処理装置402にてプログラムを実行することで実現される。
FIG. 3 is a diagram illustrating an example of a hardware configuration for realizing the user interface device, and is a configuration example using a personal computer (PC) 401. The UI component storage unit 103 (the basic display
マウス405及びキーボード406といった入力装置によって、本ユーザインタフェース設計装置(複合表示部品編集部104)での作成及び編集作業が行われる。モニタ404といった表示装置によって、編集作業を行う画面(例えば後述の編集ウィンドウなど)が出力される。なお、入力装置及び表示装置としては、入力/表示のどちらも行えるタッチパネルなどであってもよい。
Creation and editing operations in the user interface design apparatus (composite display component editing unit 104) are performed by input devices such as a
次に、図1に示したユーザインタフェース設計装置が複合表示部品を作成する流れについて詳細に説明する。まず、本設計装置の利用者である開発者は、基本表示部品を複合表示部品編集部104上に配置する。複合表示部品編集部104は、配置されたUI部品の外枠を編集ウィンドウ上に表示する。ユーザは、ユーザが表示属性設定部104aを操作することによって、表示されているUI部品に対してその色やサイズといった表示属性を設定する。設定した属性値はモニタ404などの表示装置上での表示に反映されるため、開発者は、設定した属性値に対応したUI部品の表示を見ながら編集することなどが可能である。このようにして単一または複数のUI部品の配置及び属性値の設定が行われ、複合表示部品が作成される。
Next, a flow in which the user interface design apparatus shown in FIG. 1 creates a composite display component will be described in detail. First, a developer who is a user of the design apparatus places a basic display component on the composite display
作成された複合表示部品は複合表示部品格納部102に格納される。すなわち、この一連の作成処理により、上述の部品化が行われる。以降、開発者は、部品化した複合表示部品を、上位の複合表示部品の作成に利用することが可能となり、複合表示部品編集部104上にて、基本表示部品及び複合表示部品の両方(すなわちUI部品)を配置することにより、上位の階層の複合表示部品を作成する。このような階層的な部品化によって複合表示部品を作成していくことで、最終的に1画面のユーザインタフェースを作成する。なお、階層的な部品化のイメージは図2に示した通りである。
The created composite display component is stored in the composite display
また、本実施の形態では、特許文献1に開示されている複合表示部品と同様に、複合表示部品には、設計対象装置の複数の内部状態が割り当てられており、複合表示部品は、各内部状態に対して配置されたUI部品を含んで構成されている。そして、複合表示部品は、状態遷移(すなわちUI部品から同階層の別のUI部品への遷移)を伴うUI部品として作成されている。
In the present embodiment, similarly to the composite display component disclosed in
図4は、内部状態が割り当てられた複合表示部品を作成する手順の一例を示す図である。図4に示すように、複合表示部品編集部104は、設計対象装置の内部状態を配置し(図4(a))、各内部状態に対してUI部品を配置し(図4(b))、状態遷移を記述する(図4(c))。なお、図4(c)には、「停止中」を示す複合表示部品と、「再生中」を示す複合表示部品とが双方向に遷移可能となっている。そして、複合表示部品編集部104は、以上の工程を経て作成した複合表示部品を、複合表示部品格納部102に格納する(図4(d))。
FIG. 4 is a diagram illustrating an example of a procedure for creating a composite display component to which an internal state is assigned. As shown in FIG. 4, the composite display
以上のように作成された複合表示部品において状態遷移が行われると、「停止中」という表示と「再生中」という表示との切り替えが行われる。なお、複合表示部品によって内部状態に配置されるUI部品が異なるため、内部状態ごとにリソースの消費量も異なる。 When the state transition is performed in the composite display component created as described above, the display of “stopped” and the display of “reproducing” are performed. In addition, since UI components arranged in the internal state are different depending on the composite display component, the resource consumption is also different for each internal state.
図5は、複合表示部品Xの階層構造の一例を示す図である。複合表示部品に割り当てられた各内部状態に、基本表示部品、または、基本表示部品及び複合表示部品が配置されている。具体的には、複合表示部品Xは、複数の内部状態(ここではL個の状態1−1〜状態1−L)が割り当てられている。状態1−1には、基本表示部品Aと複合表示部品Yとが子部品(下位の階層のUI部品)として配置されている。状態1−2には、基本表示部品Bと基本表示部品Cとが子部品として配置されている。状態1−Lには、基本表示部品Dと複合表示部品Zとを子部品として配置されている。 FIG. 5 is a diagram illustrating an example of a hierarchical structure of the composite display component X. A basic display component, or a basic display component and a composite display component are arranged in each internal state assigned to the composite display component. Specifically, the composite display component X is assigned a plurality of internal states (here, L states 1-1 to 1-L). In the state 1-1, the basic display component A and the composite display component Y are arranged as child components (lower-level UI components). In the state 1-2, the basic display component B and the basic display component C are arranged as child components. In the state 1-L, the basic display component D and the composite display component Z are arranged as child components.
また、複合表示部品Yは、複数の内部状態(ここではM個の状態2−1〜状態2−M)が割り当てられている。状態2−1には基本表示部品Eが、状態2−2には基本表示部品Fが、状態2−Mには複合表示部品Zと基本表示部品Gとが子部品として配置されている。また、複合表示部品Zは、複数の内部状態(ここではN個の状態3−1〜状態3−N)が割り当てられている。状態3−1には基本表示部品Hが、状態3−2には基本表示部品Iが、状態3−Nには基本表示部品Jと基本表示部品Kとが子部品として配置されている。このように、複合表示部品の中に複合表示部品を含めることで、階層的に定義された複合表示部品が実現されている。 The composite display component Y is assigned a plurality of internal states (here, M states 2-1 to 2-M). The basic display component E is arranged as a child component in the state 2-1, the basic display component F is arranged in the state 2-2, and the composite display component Z and the basic display component G are arranged as the child components in the state 2-M. The composite display component Z is assigned a plurality of internal states (here, N states 3-1 to 3-N). The basic display component H is arranged as a child component in the state 3-1, the basic display component I is arranged in the state 3-2, and the basic display component J and the basic display component K are arranged in the state 3-N. In this way, by including the composite display component in the composite display component, a hierarchically defined composite display component is realized.
図6は、本実施の形態に係る画像複合表示部品生成部105の画像複合表示部品生成処理を示すフローチャートである。この画像複合表示部品生成処理は、画像複合表示部品生成部105が、複合表示部品編集部104により指定された処理対象となる複合表示部品(以下「指定複合表示部品」と呼ぶ)を、複合表示部品編集部104から受け取った場合に開始される。以下、図6を用いて、画像複合表示部品生成部105の画像複合表示部品生成処理を詳細に説明する。
FIG. 6 is a flowchart showing image composite display component generation processing of the image composite display
まず、ステップS1にて、画像複合表示部品生成部105は、指定複合表示部品に基づいて新たな複合表示部品を作成する。新たな画像複合表示部品は、属性値などは初期値のままであり、内部状態や子部品等を有していない。以下、このような新たな画像複合表示部品を、「新複合表示部品」と呼ぶ。
First, in step S1, the image composite display
画像複合表示部品生成部105は、ステップS2〜S11の処理を、指定複合表示部品に割り当てられている内部状態の数だけ行う。画像複合表示部品生成部105は、ステップS2を行うごとに、指定複合表示部品の内部状態の中から、ステップS2以降の処理を行っていない一つの内部状態を選択する。
The image composite display
ステップS3にて、画像複合表示部品生成部105は、ステップS2で選択した一つの内部状態を複製し(ただし、ここでは子部品は複製しない)、当該複製した一つの内部状態を新複合表示部品に追加する。以下、ステップS2で選択した一つの内部状態を「原状態」と呼ぶこともあり、ステップS3で新複合表示部品に追加される一つの内部状態を「新状態」と呼ぶこともある。
In step S3, the image composite display
ステップS4にて、画像複合表示部品生成部105は、描画バッファを記憶装置403上に確保する。描画バッファとは、ステップS8にて描画を行うことにより得られる画像(表示内容)をデータとして保存する記憶領域である。ここでは、原状態の属性値が示す当該原状態の表示上の大きさ(幅及び高さ)に基づき、この大きさと同じ大きさの描画可能な領域が確保される。
In step S <b> 4, the image composite display
ステップS5にて、画像複合表示部品生成部105は、確保した描画バッファの領域を初期化する。例えば、確保した描画バッファの領域を0のデータで埋め尽くす。
In step S5, the image composite display
画像複合表示部品生成部105は、ステップS6〜S9の処理を、原状態に配置されている子部品の数だけ行う。画像複合表示部品生成部105は、ステップS6を行うごとに、原状態に配置されている子部品の中から、ステップS6以降の処理を行っていない一つの子部品を選択する。
The image composite display
ステップS7にて、画像複合表示部品生成部105は、ステップS6で選択した一つの子部品が複合表示部品か否かを判定する。複合表示部品でないと判定した場合(ここでは基本表示部品であると判定した場合)にはステップS8に進み、複合表示部品であると判定した場合にはステップS9に進む。
In step S7, the image composite display
ステップS8にて、画像複合表示部品生成部105は、ステップS7で判定した基本表示部品を、上述の確保した描画バッファに描画(記憶)する。例えば、判定した基本表示部品が四角形の部品であった場合には、その部品が有する属性である、座標値、大きさ(幅及び高さ)、色、線の太さなどに基づいて、四角形を描画バッファに描画する。また、例えば、判定した基本表示部品が文字列部品であった場合には、その部品が有する属性である、座標値、大きさ、文字列などに基づいて、文字を描画バッファに描画する。その後ステップS9に進む。
In step S8, the image composite display
ステップS9にて、画像複合表示部品生成部105は、原状態に配置されている子部品のうち、ステップS6以降の処理を実施していない子部品があるか否かを判定する。実施していない子部品があると判定した場合にはステップS6に戻り、実施していない子部品がないと判定した場合にはステップS10に進む。以上の処理の結果、指定複合表示部品に含まれる、内部状態ごとの基本表示部品(UI部品)の画像を複合した画像が、描画バッファに生成される。
In step S <b> 9, the image composite display
ステップS10にて、画像複合表示部品生成部105は、新複合表示部品の新状態に、その子部品として基本部品の一つである画像部品を追加する。この画像部品は、任意の描画バッファを指すことが可能なポインタを属性値として有しており、当該ポインタが指す描画バッファの内容を画像として表示する機能を有する。ここでは、新状態に追加した画像部品の設定値(ポインタが指す先)を、上述の画像が生成された描画バッファに設定する。
In step S10, the image composite display
ステップS11にて、画像複合表示部品生成部105は、指定複合表示部品に割り当てられている内部状態のうち、ステップS2以降の処理を実施していない内部状態があるか否かを判定する。実施していない内部状態があると判定した場合にはステップS2に戻り、実施していない内部状態がないと判定した場合にはステップS12に進む。
In step S <b> 11, the image composite display
こうして、画像複合表示部品生成部105は、指定複合表示部品に基づいて、それに含まれる基本表示部品が内部状態ごとに画像化された新たな複合表示部品を画像複合表示部品として生成する。そして、本実施の形態では、画像複合表示部品生成部105により生成される画像複合表示部品は、指定複合表示部品の各内部状態に対して配置されたUI部品が、当該UI部品の複合的な画像を表示する画像部品に置き換えられた複合表示部品となっている。
In this way, the image composite display
ステップS12にて、画像複合表示部品生成部105は、生成した画像複合表示部品を複合表示部品格納部102に格納する。そして、図6に示した画像複合表示部品生成処理が終了する。
In step S <b> 12, the image composite display
図7は、図5に示した複合表示部品Xが画像複合表示部品生成部105に入力された場合に、画像複合表示部品生成部105により生成され、複合表示部品格納部102に格納される画像複合表示部品の階層構造の一例を示す図である。図7に示すように、指定複合表示部品に含まれる基本表示部品を内部状態ごとに画像化した新たな複合表示部品が、画像複合表示部品として生成されている。図7に示す例では、画像複合表示部品は、その階層が複合表示部品よりも少なく、かつ、画像部品だけを子部品として含むものとなっている。
FIG. 7 illustrates an image generated by the image composite display
図8は、複合表示部品の1つの内部状態の表示(図8(a))と、それに基づいて生成された画像複合表示部品の1つの内部状態の表示(図8(b))とについて、好適な例を示している。図8に示される太枠実線は、内部状態の境界を示している。また、図8においては、基本表示部品のままか、画像化されているかを見分け易くするために、基本表示部品は破線で示している。図8(a)に示される複合表示部品の1つの内部状態には、丸部品及び四角部品の二つの基本表示部品が配置されているが、図8(b)に示される画像複合表示部品の1つの内部状態には、丸部品と四角形部品が複合的に描画されて得られた一つの画像(画像部品)だけが配置されている。 FIG. 8 shows a display of one internal state of the composite display component (FIG. 8A) and a display of one internal state of the image composite display component generated based on the display (FIG. 8B). A preferred example is shown. The thick solid line shown in FIG. 8 indicates the boundary of the internal state. Further, in FIG. 8, the basic display component is indicated by a broken line in order to easily distinguish whether the basic display component remains or is imaged. Two basic display parts, a round part and a square part, are arranged in one internal state of the composite display part shown in FIG. 8A, but the image composite display part shown in FIG. In one internal state, only one image (image part) obtained by combining a round part and a square part is arranged.
以上のような本実施の形態に係るユーザインタフェース設計装置によれば、任意の複合表示部品の中から複合表示部品編集部により指定された複合表示部品を、画像化することができる。これにより、任意の複合表示部品を画像複合表示部品に置き換える作業を容易化することができることから、メモリ消費量の比較、すなわちメモリ消費量削減の試行錯誤を、容易に実施できるようになる。なお、メモリ消費量の測定は、既存の手法(例えば、特開2009−152847号公報に開示の手法)を用いて実現することが可能である。 According to the user interface design apparatus according to the present embodiment as described above, a composite display component designated by a composite display component editing unit from any composite display component can be imaged. As a result, the operation of replacing an arbitrary composite display component with an image composite display component can be facilitated, so that comparison of memory consumption, that is, trial and error of memory consumption reduction can be easily performed. Note that the measurement of the memory consumption can be realized by using an existing method (for example, a method disclosed in Japanese Patent Laid-Open No. 2009-152847).
また、本実施の形態によれば、指定複合表示部品に含まれるUI部品が内部状態ごとに画像化された新たな複合表示部品を画像複合表示部品として生成することができる。このようにして生成される画像複合表示部品では、内部状態(階層)が完全に失われておらず、画像化が必要最小限に行われていることから、画像化を元に戻す作業を容易化することができるとともに、画像化を行った後でも直感的な編集を行うことができる。 Further, according to the present embodiment, a new composite display component in which a UI component included in the designated composite display component is imaged for each internal state can be generated as an image composite display component. In the composite image display component generated in this way, the internal state (hierarchy) is not completely lost, and the imaging is performed to the minimum necessary, so it is easy to restore the imaging. And intuitive editing can be performed even after imaging.
<実施の形態2>
図9は、本発明の実施の形態2に係る画像複合表示部品生成部105の画像複合表示部品生成処理を示すフローチャートである。なお、本実施の形態に係るユーザインタフェース設計装置において、実施の形態1で説明した構成要素と同一または類似するものについては同じ符号を付し、異なる点を中心に説明する。
<
FIG. 9 is a flowchart showing image composite display component generation processing of the image composite display
本実施の形態では、以下で詳細に説明するように、図9に示す画像複合表示部品生成処理を再帰的に行うことが可能となっている。すなわち画像複合表示部品生成部105は、指定複合表示部品に含まれる下位の階層の複合表示部品について、上述の画像化を再帰的に行うことが可能となっている。
In the present embodiment, as will be described in detail below, the composite image display component generation process shown in FIG. 9 can be recursively performed. That is, the image composite display
なお、図9に示されるフローチャートでは、実施の形態1の図6に示したフローチャートにおいてステップS7及びS10がステップS7a及びS10aに変更されているとともに、ステップS21〜S23が追加されている。そこで、以下においては、ステップSS7a、S10a及びS21〜S23についてのみ説明する。 In the flowchart shown in FIG. 9, steps S7 and S10 are changed to steps S7a and S10a in the flowchart shown in FIG. 6 of the first embodiment, and steps S21 to S23 are added. Therefore, only steps SS7a, S10a, and S21 to S23 will be described below.
ステップS7aにて、画像複合表示部品生成部105は、ステップS6で選択した一つの子部品が複合表示部品か否かを判定する。複合表示部品でないと判定した場合(ここでは基本表示部品であると判定した場合)にはステップS8に進み、複合表示部品であると判定した場合にはステップS21に進む。
In step S7a, the image composite display
ステップS21にて、画像複合表示部品生成部105は、本ステップS21を行う時点で画像部品に設定されていない描画バッファがある場合に、実施の形態1で説明したステップS10と同様の処理を行う。すなわち、画像複合表示部品生成部105は、新複合表示部品の新状態に画像部品を追加し、当該画像部品の設定値(ポインタが指す先)を、上述の描画バッファに設定する。
In step S21, the image composite display
その後、ステップS22にて、画像複合表示部品生成部105は、現在処理中の複合表示部品(ステップS7aで判定された複合表示部品)を入力として、本図9に示す画像複合表示部品作成処理(ステップS1〜S12)を再帰的に行い、画像複合表示部品を生成する。
Thereafter, in step S22, the image composite display
その後、ステップS23にて、画像複合表示部品生成部105は、ステップS1で作成した新複合表示部品の新状態に、ステップS21で生成された画像複合表示部品を追加する。この追加の際に、その座標値と大きさの値とに、現在処理中の複合表示部品(ステップS7aで判定された複合表示部品)の座標値と大きさの値とを設定する。その後、ステップS9に進む。
Thereafter, in step S23, the image composite display
その後ステップS9を経たステップS10aにて、画像複合表示部品生成部105は、本ステップS10aを行う時点で画像部品に設定されていない描画バッファがある場合に、実施の形態1で説明したステップS10と同様の処理を行う。すなわち、画像複合表示部品生成部105は、新複合表示部品の新状態に画像部品を追加し、当該画像部品の設定値(ポインタが指す先)を、上述の描画バッファに設定する。
After that, in step S10a after step S9, the image composite display
図10は、図5に示した複合表示部品Xが画像複合表示部品生成部105に入力された場合に、本実施の形態に係る画像複合表示部品生成部105により生成され、複合表示部品格納部102に格納される画像複合表示部品の構造の一例を示す図である。
10 is generated by the image composite display
以上のように、本実施の形態に係るユーザインタフェース設計装置によれば、画像複合表示部品生成部105が生成する画像複合表示部品の構成を、入力された複合表示部品の構成に近づけることができる。すなわち、複合表示部品の階層構造がそのまま反映される画像複合表示部品を生成することができる。したがって、画像化が最小限に行われていることから、実施の形態1よりも、画像化を元に戻す作業を容易化することができるとともに、画像化を行った後でも直感的な編集を行うことができる。
As described above, according to the user interface design device according to the present embodiment, the configuration of the image composite display component generated by the image composite display
<実施の形態3>
図11は、本発明の実施の形態3に係るユーザインタフェース設計装置の構成を示すブロック図である。なお、本実施の形態に係るユーザインタフェース設計装置において、実施の形態1で説明した構成要素と同一または類似するものについては同じ符号を付し、異なる点を中心に説明する。
<
FIG. 11 is a block diagram showing a configuration of a user interface design apparatus according to
図11に示されるように、本実施の形態に係るユーザインタフェース設計装置は、実施の形態1に係るユーザインタフェース設計装置に、動的なUI部品であるか否かを判定する動的部品判定部106が追加されたものとなっている。そして、画像複合表示部品生成部105は、指定複合表示部品に含まれるUI部品のうち、動的部品判定部106により動的なUI部品であると判定されたUI部品を除いて画像複合表示部品を生成する。
As shown in FIG. 11, the user interface design device according to the present embodiment is a dynamic component determination unit that determines whether or not the user interface design device according to the first embodiment is a dynamic UI component. 106 is added. Then, the image composite display
つまり、画像複合表示部品生成部105は、画像複合表示部品を生成する過程で、動的部品判定部106により動的な部品であると判定されれば、その部品は画像化しないように構成されている。これにより、実行時に画像化前と同じ動作をする画像複合表示部品を得ることができる。
In other words, the image composite display
図12は、実行時に内容が変更されうる動的な基本表示部品(文字列部品)と、静的な基本表示部品(三角部品及び丸部品)とを含む複合表示部品の1つの内部状態の表示(図12(a))と、それに基づいて生成された画像複合表示部品の1つの内部状態の表示(図12(b))とについて、好適な例を示している。なお、この図12においては、丸部品の上に文字列部品が重ねられている。 FIG. 12 shows one internal state display of a composite display component including a dynamic basic display component (character string component) whose contents can be changed at the time of execution and a static basic display component (triangular component and round component). A preferred example is shown for (FIG. 12A) and the display of one internal state of the image composite display component generated based on it (FIG. 12B). In FIG. 12, the character string component is superimposed on the round component.
図12(b)に示す画像複合表示部品の1つの内部状態の表示においては、静的な基本表示部品(ここでは三角部品及び丸部品)は画像化されているが、動的な基本表示部品(ここでは文字列部品)は画像化の対象とならず、そのまま残されている。これは、実行時に内容が変更されうる動的なUI部品は、実行するまでは正しい描画結果を得られないからである。 In the display of one internal state of the image composite display component shown in FIG. 12B, static basic display components (in this case, triangular components and round components) are imaged, but dynamic basic display components. (Here, the character string component) is not subject to imaging and is left as it is. This is because a dynamic UI component whose contents can be changed at the time of execution cannot obtain a correct drawing result until it is executed.
図13は、実行時に内容が変更されうる動的な基本表示部品(文字列部品)と、静的な基本表示部品(三角部品及び丸部品)とを含む複合表示部品の1つの内部状態の表示(図13(a))と、それに基づいて生成された画像複合表示部品の1つの内部状態の表示(図13(b))とについて、別の好適な例を示している。なお、この図13においては、三角部品の上に文字列部品が重ねられ、かつ、文字列部品の上に丸部品が重ねられている。 FIG. 13 shows one internal state display of a composite display component including a dynamic basic display component (character string component) whose contents can be changed at the time of execution and a static basic display component (triangular component and round component). Another preferred example is shown for (FIG. 13A) and the display of one internal state of the image composite display component generated based on it (FIG. 13B). In FIG. 13, a character string component is superimposed on a triangular component, and a round component is superimposed on the character string component.
図13(b)に示す画像複合表示部品の1つの内部状態の表示においては、動的な基本表示部品(ここでは文字列部品)だけでなく、動的な基本表示部品の上に重なっている静的な基本表示部品も画像化の対象とならず、そのまま残されている。これは、画面の奥の方から手前方向に向けてUI部品を描画していく方式(いわゆるペインター方式)で描画を行う場合には、動的なUI部品の上に重なる静的なUI部品は、下側の動的なUI部品の内容が更新されるごとに上側の静的なUI部品も描画しなおさなければならないため、これらUI部品は、実行するまでは正しい描画結果を得られないからである。そこで、本実施の形態では、動的なUI部品の上に重なる静的なUI部品も、動的な部品と同様に取り扱う。 In the display of one internal state of the image composite display component shown in FIG. 13B, not only the dynamic basic display component (here, the character string component) but also the dynamic basic display component is overlaid. Static basic display components are not subject to imaging and are left as they are. This is because when a UI component is drawn from the back of the screen toward the front (so-called painter method), the static UI component that is superimposed on the dynamic UI component is Each time the contents of the lower dynamic UI component are updated, the upper static UI component must be redrawn, and these UI components cannot obtain a correct drawing result until they are executed. It is. Therefore, in the present embodiment, a static UI component that is superimposed on a dynamic UI component is handled in the same manner as the dynamic component.
図14は、本実施の形態に係る画像複合表示部品生成部105の画像複合表示部品生成処理を示すフローチャートである。図14に示されるフローチャートでは、実施の形態1の図6に示したフローチャートにおいてステップS7及びS10がステップS7b及びS10bに変更されているとともに、ステップS31〜S38が追加されている。そこで、以下においては、ステップSS7b、S10b及びS31〜S38についてのみ説明する。
FIG. 14 is a flowchart showing image composite display component generation processing of the image composite display
ステップS2の後、ステップS31にて、画像複合表示部品生成部105は、原状態に配置された子部品について、Zインデックスの値が小さい順になるように並べたリストを、子部品リストとして作成する。Zインデックスとは、子部品の奥行きの度合いを示す属性であり、この値が大きい子部品は、小さい子部品よりも上に描画されることを示す。
After step S2, in step S31, the image composite display
ステップS32にて、画像複合表示部品生成部105は、子部品リストを入力として、動的部品判定部106に動的部品判定処理を実行させる。この動的部品判定処理については、後で別のフローチャートを用いて詳細に説明する。画像複合表示部品生成部105は、動的部品判定処理の結果として動的部品判定部106から返却される、静的な子部品(静的部品)が格納された静的部品リストと、動的な子部品(動的部品)が格納された動的部品リストとを取得し、これらを記憶する。その後、ステップS3〜S5の処理が行われる。
In step S32, the image composite display
それから、画像複合表示部品生成部105は、ステップS33〜S35の処理を、静的部品リストに格納された静的部品の数だけ行う。画像複合表示部品生成部105は、ステップS33を行うごとに、静的部品リストに格納されている静的部品の中から、ステップS33以降の処理を行っていない一つの静的部品を選択する。
Then, the image composite display
ステップS33の後、ステップS7bにて、画像複合表示部品生成部105は、ステップS33で選択した一つの静的部品が複合表示部品か否かを判定する。複合表示部品でないと判定した場合(ここでは基本表示部品であると判定した場合)にはステップS8に進み、複合表示部品であると判定した場合にはステップS34に進む。
After step S33, in step S7b, the image composite display
ステップS34にて、画像複合表示部品生成部105は、ステップS33で選択した一つの静的部品を入力として、静的複合表示部品描画処理を実行する。この静的複合表示部品描画処理については、後で別のフローチャートを用いて詳細に説明する。
In step S34, the image composite display
ステップS8またはS34の後、ステップS35にて、画像複合表示部品生成部105は、静的部品リストに格納されている静的部品のうち、ステップS33以降の処理を実施していない静的部品があるか否かを判定する。実施していない静的部品があると判定した場合にはステップS33に戻り、実施していない静的部品がないと判定した場合にはステップS10bに進む。
After step S8 or S34, in step S35, the image composite display
ステップS10bにて、画像複合表示部品生成部105は、画像部品に設定されていない描画バッファがある場合に、実施の形態1で説明したステップS10と同様の処理を行う。すなわち、画像複合表示部品生成部105は、ステップS1で作成した新複合表示部品の新状態に画像部品を追加し、当該画像部品の設定値(ポインタが指す先)を、上述の描画バッファに設定する。
In step S10b, the image composite display
その後、画像複合表示部品生成部105は、ステップS36〜S38の処理を、動的部品リストに格納された動的部品の数だけ行う。画像複合表示部品生成部105は、ステップS36を行うごとに、動的部品リストに格納されている動的部品の中から、ステップS36以降の処理を行っていない一つの動的部品を選択する。
Thereafter, the image composite display
ステップS36の後、ステップS37にて、画像複合表示部品生成部105は、ステップS1で作成した新複合表示部品の新状態に、ステップS36で選択した一つの動的部品を追加する。
After step S36, in step S37, the image composite display
ステップS38にて、画像複合表示部品生成部105は、動的部品リストに格納されている動的部品のうち、ステップS37の処理を実施していない動的部品があるか否かを判定する。実施していない動的部品があると判定した場合にはステップS36に戻り、実施していない動的部品がないと判定した場合にはステップS11に進む。ステップS11の後、ステップS12の処理が行われ、図14に示した画像複合表示部品生成処理が終了する。
In step S38, the image composite display
図15は、ステップS34にて画像複合表示部品生成部105により行われる静的複合表示部品描画処理を示すフローチャートである。以下、図15を用いて、静的複合表示部品描画処理について詳細に説明する。
FIG. 15 is a flowchart illustrating the static composite display component drawing process performed by the image composite display
まず、ステップS41にて、画像複合表示部品生成部105は、ステップS7bで複合表示部品であると判定された静的部品から、初期状態(デフォルトの内部状態)を取り出す。
First, in step S41, the image composite display
画像複合表示部品生成部105は、ステップS42〜S43の処理を、初期状態に配置されている子部品の数だけ行う。画像複合表示部品生成部105は、ステップS42を行うごとに、初期状態に配置されている子部品の中から、ステップS42以降の処理を行っていない一つの子部品を選択する。
The image composite display
ステップS42の後、ステップS7cにて、画像複合表示部品生成部105は、ステップS42で選択した一つの子部品が複合表示部品か否かを判定する。複合表示部品でないと判定した場合(ここでは基本表示部品であると判定した場合)にはステップS8aに進み、複合表示部品であると判定した場合にはステップS34aに進む。
After step S42, in step S7c, the image composite display
ステップS8aにて、画像複合表示部品生成部105は、ステップS7cで判定した基本表示部品を、上述の確保した描画バッファに描画(記憶)する。その後、ステップS43に進む。
In step S8a, the image composite display
ステップS34aにて、画像複合表示部品生成部105は、現在処理中の子部品(ステップS7cで判定された複合表示部品)を入力として、本図15に示す静的複合表示部品描画処理(ステップS41〜S43)を再帰的に行い、静的な画像複合表示部品を生成する。その後、ステップS43に進む。
In step S34a, the image composite display
ステップS43にて、画像複合表示部品生成部105は、初期状態に配置されている子部品のうち、ステップS42以降の処理を実施していない子部品があるか否かを判定する。実施していない子部品があると判定した場合にはステップS42に戻り、実施していない子部品がないと判定した場合には、図15に示した示す静的複合表示部品描画処理が終了する。
In step S43, the image composite display
図16は、ステップS32にて動的部品判定部106により行われる動的部品判定処理を示すフローチャートである。以下、図16を用いて、動的部品判定処理について詳細に説明する。まず、ステップS51を行う前に、動的部品判定部106は、入力として与えられた子部品リストを記憶する。
FIG. 16 is a flowchart showing the dynamic component determination process performed by the dynamic
そして、ステップS51にて、動的部品判定部106は、本処理の最終結果として画像複合表示部品生成部105に返却する動的部品リストを作成する。この段階では、リストの内容は空である。
In step S51, the dynamic
ステップS52にて、動的部品判定部106は、本処理の最終結果として画像複合表示部品生成部105に返却する静的部品リストを作成する。この段階では、リストの内容は空である。
In step S52, the dynamic
動的部品判定部106は、ステップS53〜S60の処理を、子部品リストに格納された子部品の数だけ行う。動的部品判定部106は、ステップS53を行うごとに、子部品リストに格納されている子部品の中から、ステップS53以降の処理を行っていない一つの子部品を選択する。
The dynamic
ステップS53の後、ステップS54にて、動的部品判定部106は、ステップS53で選択した一つの子部品を入力として部品判定処理を起動する。この部品判定処理では、当該子部品が動的部品である場合にTRUEが、静的部品である場合にFALSEが返却され、動的部品判定部106はその部品判定処理の返却値を記憶する。なお、この部品判定処理については、後で別のフローチャートを用いて詳細に説明する。
After step S53, in step S54, the dynamic
ステップS55にて、動的部品判定部106は、ステップS54での部品判定処理の返却値がTRUEであるか否かを判定する。TRUEと判定した場合にはステップS56に進み、TRUEと判定しなかった(FALSEと判定した)場合にはステップS57に進む。
In step S55, the dynamic
ステップS56にて、動的部品判定部106は、現在処理中の子部品(ステップS54の部品判定処理にて動的部品と判定された子部品)を、動的部品リストに追加する。その後、ステップS60に進む。
In step S56, the dynamic
ステップS57にて、動的部品判定部106は、現在処理中の子部品(ステップS54の部品判定処理にて静的部品と判定された子部品)が、動的部品リストに格納されている動的部品の上に重なっているか否かを、互いの座標時・大きさに基づいて判定する。重なっていると判定した場合にはステップS58に進み、重なっていないと判定した場合にはステップS59に進む。
In step S57, the dynamic
ステップS58にて、動的部品判定部106は、現在処理中の子部品(ステップS54の部品判定処理にて静的部品と判定された子部品)を、動的部品リストに追加する。その後、ステップS60に進む。
In step S58, the dynamic
ステップS59にて、動的部品判定部106は、現在処理中の子部品(ステップS54の部品判定処理にて静的部品と判定された子部品)を、静的部品リストに追加する。その後、ステップS60に進む。
In step S59, the dynamic
ステップS60にて、動的部品判定部106は、子部品リストに格納されている子部品のうち、ステップS53以降の処理を実施していない子部品があるか否かを判定する。実施していない子部品があると判定した場合にはステップS53に戻り、実施していない子部品がないと判定した場合には、動的部品リスト及び静的部品リストを返却して、図16に示した動的部品判定処理が終了する。
In step S60, the dynamic
図17は、ステップS54等にて動的部品判定部106により行われる部品判定処理を示すフローチャートである。以下、図17を用いて、部品判定処理について詳細に説明する。まず、ステップS61を行う前に、動的部品判定部106は、入力として与えられた子部品を記憶する。
FIG. 17 is a flowchart showing the component determination process performed by the dynamic
そして、ステップS61にて、動的部品判定部106は、入力として与えられた子部品が複合表示部品であるか否かを判定する。複合表示部品であると判定した場合にはステップS62に進み、複合表示部品でないと判定した場合にはステップS65に進む。
In step S61, the dynamic
ステップS62にて、動的部品判定部106は、処理中の子部品(ステップS61で複合表示部品であると判定された子部品)を入力として複合表示部品動的判定処理を起動する。この複合表示部品動的判定処理では、当該子部品が動的部品である場合にTRUEが、静的部品である場合にFALSEが返却される。なお、この複合表示部品動的判定処理については、後で別のフローチャートを用いて詳細に説明する。
In step S62, the dynamic
ステップS63にて、動的部品判定部106は、ステップS62での複合表示部品動的判定処理の返却値がTRUEであるか否かを判定する。TRUEと判定した場合にはステップS64に進み、TRUEと判定しなかった(FALSEと判定した)場合にはステップS65に進む。
In step S63, the dynamic
ステップS64にて、動的部品判定部106は、本処理の返却値としてTRUEを返却して、図17に示した部品判定処理が終了する。
In step S64, the dynamic
ステップS65にて、動的部品判定部106は、現在処理中の子部品(ステップS61の判定が行われた子部品)のプロパティの値が実行時に変更される可能性があるか否かを判定する。具体的には、イベントハンドラの中で、この子部品のプロパティに対して設定処理が行われているか否かを検査する。変更される可能性があると判定した場合にはステップS66に進み、変更される可能性がないと判定した場合にはステップS67に進む。
In step S65, the dynamic
ステップS66にて、動的部品判定部106は、本処理の返却値としてTRUEを返却して、図17に示した部品判定処理が終了する。
In step S66, the dynamic
ステップS67にて、動的部品判定部106は、本処理の返却値としてFALSEを返却して、図17に示した部品判定処理が終了する。
In step S67, the dynamic
図18は、ステップS62にて動的部品判定部106により行われる複合表示部品動的判定処理を示すフローチャートである。以下、図18を用いて、複合表示部品動的判定処理について詳細に説明する。まず、ステップS71を行う前に、動的部品判定部106は、入力として与えられた子部品を記憶する。
FIG. 18 is a flowchart showing the composite display component dynamic determination process performed by the dynamic
そして、ステップS71にて、動的部品判定部106は、入力として与えられた子部品(複合表示部品)に、複数の内部状態が割り当てられ、且つ、その内部状態間に遷移が定義されているか否かを判定する。定義されていると判定した場合には、状態遷移する可能性があるため、判定した子部品は動的に表現が変化する部品、すなわち動的部品であると解釈し、ステップS72に進む。定義されていると判定しなかった場合にはステップS73に進む。
In step S71, the dynamic
ステップS72にて、動的部品判定部106は、本処理の返却値としてTRUEを返却して、図18に示した複合表示部品動的判定処理が終了する。
In step S72, the dynamic
ステップS73にて、動的部品判定部106は、入力として与えられた子部品から初期状態を取り出し、その初期状態に配置された子部品のリストを、下位子部品リストとして作成する。
In step S73, the dynamic
動的部品判定部106は、ステップS74〜S78の処理を、ステップS76からステップS77に進まない限り、下位子部品リストに格納された子部品の数だけ行う。動的部品判定部106は、ステップS74を行うごとに、下位子部品リストに格納されている子部品の中から、ステップS74以降の処理を行っていない一つの子部品を選択する。
The dynamic
ステップS74の後、ステップS75にて、動的部品判定部106は、現在処理中の子部品(ステップS74で選択した一つの子部品)を入力として、図17を用いて説明した部品判定処理を再帰的に行う。
After step S74, in step S75, the dynamic
ステップS76にて、動的部品判定部106は、動的部品判定部106は、ステップS75での部品判定処理の返却値がTRUEであるか否かを判定する。TRUEと判定した場合にはステップS77に進み、TRUEと判定しなかった(FALSEと判定した)場合にはステップS78に進む。
In step S76, the dynamic
ステップS77にて、動的部品判定部106は、本処理の返却値としてTRUEを返却して、図18に示した複合表示部品動的判定処理が終了する。
In step S77, the dynamic
ステップS78にて、動的部品判定部106は、下位子部品リストに格納されている子部品のうち、ステップS74以降の処理を実施していない子部品があるか否かを判定する。実施していない子部品があると判定した場合にはステップS74に戻り、実施していない子部品がないと判定した場合にはステップS79に進む。
In step S78, the dynamic
ステップS79にて、動的部品判定部106は、本処理の返却値としてFALSEを返却して、図18に示した複合表示部品動的判定処理が終了する。
In step S79, the dynamic
図19は、図5に示した複合表示部品Xが画像複合表示部品生成部105に入力された場合に、本実施の形態に係る画像複合表示部品生成部105により生成され、複合表示部品格納部102に格納される画像複合表示部品の構造の一例を示す図である。この図19において、基本表示部品Jは動的なUI部品であり、この基本表示部品J以外はUI部品が画像化されている。
19 shows a case where the composite display component X shown in FIG. 5 is input to the image composite display
以上のような本実施の形態に係るユーザインタフェース設計装置によれば、実行時に、指定複合表示部品と同様の動的な変更が可能な画像複合表示部品を得ることができる。したがって、生成した画像複合表示部品を実行時にそのまま使用して動的させながら、メモリ使用量の測定が可能になる。よって、メモリ削減効果の確認をさらに容易に実施することができる。 According to the user interface design apparatus according to the present embodiment as described above, it is possible to obtain an image composite display component that can be dynamically changed in the same manner as the designated composite display component at the time of execution. Therefore, it is possible to measure the memory usage while using the generated image composite display component as it is at the time of execution to make it dynamic. Therefore, the memory reduction effect can be confirmed more easily.
<実施の形態4>
図20は、本発明の実施の形態4に係るユーザインタフェース設計装置の構成を示すブロック図である。なお、本実施の形態に係るユーザインタフェース設計装置において、実施の形態1で説明した構成要素と同一または類似するものについては同じ符号を付し、異なる点を中心に説明する。
<
FIG. 20 is a block diagram showing a configuration of a user interface design apparatus according to
さて、ユーザインタフェース設計装置で設計したユーザインタフェースを実行する装置の事情や、ユーザインタフェースの仕様によっては、画像化の処理に制約を課すことが適切な場合がある。 Depending on the circumstances of the device that executes the user interface designed by the user interface design device and the specifications of the user interface, it may be appropriate to impose restrictions on the imaging process.
例えば、アニメーションGIFデータを表示するUI部品は、時間とともにその表示内容が変わる可能性がある。このようなUI部品は、動的部品として取り扱った方が適切である。また、例えば、属性値によらず表示内容が変わらない特定のUI部品があれば、画像化を強制した方が、画像複合表示部品生成部105での処理が短縮されて短時間で画像複合表示部品を生成できるため、より適切であると考えられる。そこで、本実施の形態に係るユーザインタフェース設計装置では、画像化の処理に制約を課すことが可能となっている。
For example, a UI component that displays animation GIF data may change its display content with time. Such UI parts are more appropriately handled as dynamic parts. Also, for example, if there is a specific UI component whose display content does not change regardless of the attribute value, forcing the imaging will shorten the process in the image composite display
このような動作が可能な本実施の形態に係るユーザインタフェース設計装置は、図20に示されるように、実施の形態3に係るユーザインタフェース設計装置に、所定の判定条件を記憶する判定条件定義格納部107が追加されたものとなっている。そして、画像複合表示部品生成部105は、所定の判定条件に基づいて、指定複合表示部品を構成する各UI部品について画像化するか否かを判定し、画像化すると判定したUI部品(所定の判定条件に応じたUI部品)を用いて画像複合表示部品を生成する。なお、本実施の形態においても、実施の形態3と同様に、動的部品の上に重なる静的部品も、動的部品として扱う。
As shown in FIG. 20, the user interface design apparatus according to the present embodiment capable of such an operation stores a determination condition definition storing a predetermined determination condition in the user interface design apparatus according to the third embodiment. A
判定条件定義格納部107は、例えば、記憶装置403(図3)の機能ブロックとして実現される。そして、判定条件定義格納部107に記憶されている所定の判定条件は、例えば、テキストファイルとして保存されており、キーボード406やマウス405(図3)などの入力装置により、編集することが可能となっている。判定条件定義格納部107に記憶される所定の判定条件は、ルールベースの定義でもよく、例えば、次のような定義が可能である。
The determination condition
各行左から、属性(FALSE,TRUE,DYNAMICなど)、部品の型、部品の名前の順に並んでいる。一段目の行の最初の項に記載されているFALSEは、画像化の対象としないことを示す。すなわち、一段目の行には、"Title"と名前がついたTextBox部品は、画像化の対象とすることが示されている。二段目の行の最初の項に記載されているTRUEは、画像化の対象とすることを示す。すなわち、二段目の行には、TextBox部品は、全て(どのような名前であっても)画像化の対象としないことが示されている。三段目の行の最初の項に記載されているDYNAMICは、動的部品として扱うことを示す。すなわち、三段目の行には、ImageBox部品は、全て動的部品として扱うことが示されている。 From the left of each line, the attributes (FALSE, TRUE, DYNAMIC, etc.), part type, and part name are listed in this order. FALSE described in the first item in the first row indicates that the image is not to be imaged. That is, the first row indicates that the TextBox component named “Title” is to be imaged. TRUE described in the first item in the second row indicates that the image is to be imaged. That is, the second row indicates that all TextBox components (any name) are not subject to imaging. DYNAMIC described in the first section of the third row indicates that it is treated as a dynamic part. That is, the third row shows that all ImageBox components are handled as dynamic components.
上述の例の複数のルールは、行の段数が小さいほど優先的に適用される。したがって、上述の例では、"Title"と名前がついたTextBox部品は画像化の対象とするが、それ以外のTextBox部品は画像化の対象としない、ということが示されている。 The plurality of rules in the above example are preferentially applied as the number of rows is smaller. Therefore, in the above-described example, it is indicated that the TextBox component named “Title” is to be imaged, but the other TextBox components are not to be imaged.
画像複合表示部品生成部105は、複合表示部品編集部104から実行が指示されると、まず判定条件定義格納部107から上述のような所定の判定条件を読み込む。そして、画像複合表示部品生成部105は、読み込んだ所定の判定条件に基づいて、指定複合表示部品を構成する各UI部品について画像化するか否かを判定し、所定の判定条件に基づきUI部品を用いて画像複合表示部品を生成する。
When an execution is instructed from the composite display
以上のような本実施の形態に係るユーザインタフェース設計装置によれば、ユーザインタフェース設計装置で設計したユーザインタフェースを実行する装置の事情や、ユーザインタフェースの仕様に応じた画像化の制御ができるようになり、より実態に近いメモリ使用量測定が可能になる。 According to the user interface design device according to the present embodiment as described above, it is possible to control imaging according to the circumstances of the device that executes the user interface designed by the user interface design device and the specifications of the user interface. Thus, it becomes possible to measure the memory usage closer to the actual situation.
なお、本発明は、その発明の範囲内において、各実施の形態を自由に組み合わせたり、各実施の形態を適宜、変形、省略したりすることが可能である。 It should be noted that the present invention can be freely combined with each other within the scope of the invention, and each embodiment can be appropriately modified or omitted.
101 基本表示部品格納部、102 複合表示部品格納部、104 複合表示部品編集部、105 画像複合表示部品生成部、106 動的部品判定部、107 判定条件定義格納部。 101 basic display component storage unit, 102 composite display component storage unit, 104 composite display component editing unit, 105 image composite display component generation unit, 106 dynamic component determination unit, 107 determination condition definition storage unit
Claims (8)
前記UI部品として予め設計された基本表示部品を格納する基本表示部品格納部と、
前記設計対象装置の複数の内部状態が割り当てられ、各前記内部状態に対して配置された前記UI部品を含んで構成される複合表示部品を格納する複合表示部品格納部と、
前記複合表示部品を作成及び編集する複合表示部品編集部と、
前記複合表示部品編集部により指定された前記複合表示部品に基づいて、それに含まれる下位の階層の前記UI部品が前記内部状態ごとに画像化された新たな前記複合表示部品を画像複合表示部品として生成する画像複合表示部品生成部と
を備える、ユーザインタフェース設計装置。 A user interface design device for designing a user interface of a design target device using a UI component for image display,
A basic display component storage unit for storing a basic display component designed in advance as the UI component;
A plurality of internal states of the device to be designed, a composite display component storage unit that stores composite display components configured to include the UI components arranged for the internal states;
A composite display component editing unit for creating and editing the composite display component;
Based on the composite display component specified by the composite display component editing unit, the new composite display component in which the UI components in the lower layers included therein are imaged for each internal state is used as an image composite display component. A user interface design device comprising: an image composite display component generation unit to generate.
前記UI部品として予め設計された基本表示部品を格納する基本表示部品格納部と、
前記設計対象装置の複数の内部状態が割り当てられ、各前記内部状態に対して配置された前記UI部品を含んで構成される複合表示部品を格納する複合表示部品格納部と、
前記複合表示部品を作成及び編集する複合表示部品編集部と、
前記複合表示部品編集部により指定された前記複合表示部品に基づいて、それに含まれる前記UI部品が前記内部状態ごとに画像化された新たな前記複合表示部品を画像複合表示部品として生成する画像複合表示部品生成部と
を備え、
前記複合表示部品は、
下位の階層の前記複合表示部品を含んで構成され、
前記画像複合表示部品生成部は、
前記指定された前記複合表示部品に含まれる前記下位の階層の複合表示部品について、前記画像化を再帰的に行う、ユーザインタフェース設計装置。 A user interface design device for designing a user interface of a design target device using a UI component for image display ,
A basic display component storage unit for storing a basic display component designed in advance as the UI component;
A plurality of internal states of the device to be designed, a composite display component storage unit that stores composite display components configured to include the UI components arranged for the internal states;
A composite display component editing unit for creating and editing the composite display component;
Based on the composite display component specified by the composite display component editing unit, an image composite that generates a new composite display component in which the UI component included in the composite display component is imaged for each internal state as an image composite display component Display component generator
With
The composite display component is
It is configured to include the composite display part in the lower hierarchy,
The image composite display component generation unit
A user interface design apparatus that recursively performs the imaging on a composite display component in the lower hierarchy included in the designated composite display component .
前記UI部品として予め設計された基本表示部品を格納する基本表示部品格納部と、
前記設計対象装置の複数の内部状態が割り当てられ、各前記内部状態に対して配置された前記UI部品を含んで構成される複合表示部品を格納する複合表示部品格納部と、
前記複合表示部品を作成及び編集する複合表示部品編集部と、
前記複合表示部品編集部により指定された前記複合表示部品に基づいて、それに含まれる前記UI部品が前記内部状態ごとに画像化された新たな前記複合表示部品を画像複合表示部品として生成する画像複合表示部品生成部と、
動的なUI部品を判定する動的部品判定部と
を備え、
前記画像複合表示部品生成部は、
前記指定された前記複合表示部品に含まれる前記UI部品のうち、前記動的部品判定部により前記動的なUI部品であると判定されたUI部品を除いて前記画像複合表示部品を生成する、ユーザインタフェース設計装置。 A user interface design device for designing a user interface of a design target device using a UI component for image display ,
A basic display component storage unit for storing a basic display component designed in advance as the UI component;
A plurality of internal states of the device to be designed, a composite display component storage unit that stores composite display components configured to include the UI components arranged for the internal states;
A composite display component editing unit for creating and editing the composite display component;
Based on the composite display component specified by the composite display component editing unit, an image composite that generates a new composite display component in which the UI component included in the composite display component is imaged for each internal state as an image composite display component A display component generation unit;
A dynamic part determination unit for determining a dynamic UI part;
With
The image composite display component generation unit
The image composite display component is generated by removing the UI components that are determined to be the dynamic UI components by the dynamic component determination unit from among the UI components included in the specified composite display component . User interface design device.
前記UI部品として予め設計された基本表示部品を格納する基本表示部品格納部と、
前記設計対象装置の複数の内部状態が割り当てられ、各前記内部状態に対して配置された前記UI部品を含んで構成される複合表示部品を格納する複合表示部品格納部と、
前記複合表示部品を作成及び編集する複合表示部品編集部と、
前記複合表示部品編集部により指定された前記複合表示部品に基づいて、それに含まれる前記UI部品が前記内部状態ごとに画像化された新たな前記複合表示部品を画像複合表示部品として生成する画像複合表示部品生成部と、
所定の判定条件を記憶する判定条件定義格納部と
を備え、
前記画像複合表示部品生成部は、
前記指定された前記複合表示部品を構成する前記UI部品のうち、前記所定の判定条件に応じたUI部品を用いて前記画像複合表示部品を生成する、ユーザインタフェース設計装置。 A user interface design device for designing a user interface of a design target device using a UI component for image display ,
A basic display component storage unit for storing a basic display component designed in advance as the UI component;
A plurality of internal states of the device to be designed, a composite display component storage unit that stores composite display components configured to include the UI components arranged for the internal states;
A composite display component editing unit for creating and editing the composite display component;
Based on the composite display component specified by the composite display component editing unit, an image composite that generates a new composite display component in which the UI component included in the composite display component is imaged for each internal state as an image composite display component A display component generation unit;
A determination condition definition storage unit for storing predetermined determination conditions;
With
The image composite display component generation unit
Among the UI parts constituting the composite display component the specified to generate the image combined display parts have use a UI component according to the predetermined judgment condition, the user interface design apparatus.
前記画像複合表示部品生成部により生成される前記画像複合表示部品は、
前記指定された前記複合表示部品の各前記内部状態に対して配置された前記UI部品が、当該UI部品の画像を表示する画像部品に置き換えられた前記複合表示部品である、ユーザインタフェース設計装置。 A user interface design apparatus according to any one of claims 1 to 4,
The image composite display component generated by the image composite display component generator is
Wherein the UI components disposed for each said internal state of said designated composite display part, Ru said combined display component der which is replaced by the image part to display an image of the UI parts, the user interface design apparatus .
前記複合表示部品は、The composite display component is
下位の階層の前記複合表示部品を含んで構成され、It is configured to include the composite display part in the lower hierarchy,
前記画像複合表示部品生成部は、The image composite display component generation unit
前記指定された前記複合表示部品に含まれる前記下位の階層の複合表示部品について、前記画像化を再帰的に行う、ユーザインタフェース設計装置。A user interface design apparatus that recursively performs the imaging on a composite display component in the lower hierarchy included in the designated composite display component.
動的なUI部品を判定する動的部品判定部をさらに備え、A dynamic component determination unit that determines a dynamic UI component;
前記画像複合表示部品生成部は、The image composite display component generation unit
前記指定された前記複合表示部品に含まれる前記UI部品のうち、前記動的部品判定部により前記動的なUI部品であると判定されたUI部品を除いて前記画像複合表示部品を生成する、ユーザインタフェース設計装置。The image composite display component is generated by removing the UI components that are determined to be the dynamic UI components by the dynamic component determination unit from among the UI components included in the specified composite display component. User interface design device.
所定の判定条件を記憶する判定条件定義格納部をさらに備え、A judgment condition definition storage unit for storing predetermined judgment conditions;
前記画像複合表示部品生成部は、The image composite display component generation unit
前記指定された前記複合表示部品を構成する前記UI部品のうち、前記所定の判定条件に応じたUI部品を用いて前記画像複合表示部品を生成する、ユーザインタフェース設計装置。A user interface design device that generates the image composite display part using a UI part corresponding to the predetermined determination condition among the UI parts constituting the designated composite display part.
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
JP2012154574A JP5889135B2 (en) | 2012-07-10 | 2012-07-10 | User interface design device |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
JP2012154574A JP5889135B2 (en) | 2012-07-10 | 2012-07-10 | User interface design device |
Publications (2)
Publication Number | Publication Date |
---|---|
JP2014016869A JP2014016869A (en) | 2014-01-30 |
JP5889135B2 true JP5889135B2 (en) | 2016-03-22 |
Family
ID=50111472
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
JP2012154574A Active JP5889135B2 (en) | 2012-07-10 | 2012-07-10 | User interface design device |
Country Status (1)
Country | Link |
---|---|
JP (1) | JP5889135B2 (en) |
Families Citing this family (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JP6889361B2 (en) * | 2015-09-17 | 2021-06-18 | キヤノンマーケティングジャパン株式会社 | Information processing device and its processing method and program |
Family Cites Families (9)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
JP4045468B2 (en) * | 1996-05-30 | 2008-02-13 | 三菱電機株式会社 | Graphical user interface controller |
JP3138430B2 (en) * | 1996-12-20 | 2001-02-26 | 株式会社日立製作所 | User interface screen creation support device |
JP2002073004A (en) * | 2000-08-24 | 2002-03-12 | Nec Software Hokuriku Ltd | Screen layout system and screen layout method |
CN1867892B (en) * | 2003-10-16 | 2010-04-21 | 三菱电机株式会社 | User interface software design system |
US20050198610A1 (en) * | 2004-03-03 | 2005-09-08 | Ulf Fildebrandt | Providing and using design time support |
JP4912766B2 (en) * | 2006-06-27 | 2012-04-11 | 株式会社ウィン・システム | Screen creation method |
JP4783235B2 (en) * | 2006-08-09 | 2011-09-28 | 株式会社日立製作所 | HMI development support device, HMI development support method and program |
JP2009182933A (en) * | 2008-02-01 | 2009-08-13 | Ricoh Co Ltd | Image processing system and image processing method |
JP2010049158A (en) * | 2008-08-25 | 2010-03-04 | Ricoh Co Ltd | Image processing device |
-
2012
- 2012-07-10 JP JP2012154574A patent/JP5889135B2/en active Active
Also Published As
Publication number | Publication date |
---|---|
JP2014016869A (en) | 2014-01-30 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
TWI613553B (en) | Method and system for editing a circuit design layout and non-transitory computer-readable medium thereof | |
US20080250314A1 (en) | Visual command history | |
US9128733B2 (en) | Display and resolution of incompatible layout constraints | |
KR101794373B1 (en) | Temporary formatting and charting of selected data | |
MX2010012822A (en) | Copying of animation effects from a source object to at least one target object. | |
US20130191714A1 (en) | Fill by example animation and visuals | |
WO2021073076A1 (en) | Method, apparatus and device for visualizing spreadsheet, and storage medium | |
US9501462B2 (en) | Form object having form representation and grid representation of form | |
Vehlow et al. | Visualizing dynamic hierarchies in graph sequences | |
CN113010612A (en) | Visual construction method, query method and device for graph data | |
US20160253828A1 (en) | Display control system, and graph display method | |
JP5889135B2 (en) | User interface design device | |
Insfran et al. | Evaluating the usability of mashups applications | |
US8024158B2 (en) | Management system and management method of CAD data used for a structural analysis | |
CN106066966B (en) | Frozen application display method, frozen application display device and terminal | |
JP5077011B2 (en) | Display control apparatus, display control method, and display control program | |
US8640055B1 (en) | Condensing hierarchies in user interfaces | |
CN104360851A (en) | Composite control method of demand preview business | |
JP2008083780A (en) | Timing diagram edit program, recording medium, timing diagram edit device and timing diagram edit method | |
KR20180047200A (en) | Apparatus for producting sprite graphic and method for using the same | |
JP5801682B2 (en) | Setting information generating program, setting information generating apparatus, and setting information generating method | |
JP2012094091A (en) | Display control device, display control method and program therefor | |
CN109471991A (en) | A kind of product BOM multiple view tissue and methods of exhibiting | |
JP7392476B2 (en) | Information processing device and computer program | |
JP5595329B2 (en) | User interface design device |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
A621 | Written request for application examination |
Free format text: JAPANESE INTERMEDIATE CODE: A621 Effective date: 20141009 |
|
A977 | Report on retrieval |
Free format text: JAPANESE INTERMEDIATE CODE: A971007 Effective date: 20150812 |
|
A131 | Notification of reasons for refusal |
Free format text: JAPANESE INTERMEDIATE CODE: A131 Effective date: 20150818 |
|
A521 | Request for written amendment filed |
Free format text: JAPANESE INTERMEDIATE CODE: A523 Effective date: 20151015 |
|
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: 20160119 |
|
A61 | First payment of annual fees (during grant procedure) |
Free format text: JAPANESE INTERMEDIATE CODE: A61 Effective date: 20160216 |
|
R150 | Certificate of patent or registration of utility model |
Ref document number: 5889135 Country of ref document: JP Free format text: JAPANESE INTERMEDIATE CODE: R150 |
|
R250 | Receipt of annual fees |
Free format text: JAPANESE INTERMEDIATE CODE: R250 |
|
R250 | Receipt of annual fees |
Free format text: JAPANESE INTERMEDIATE CODE: R250 |
|
R250 | Receipt of annual fees |
Free format text: JAPANESE INTERMEDIATE CODE: R250 |
|
R250 | Receipt of annual fees |
Free format text: JAPANESE INTERMEDIATE CODE: R250 |
|
R250 | Receipt of annual fees |
Free format text: JAPANESE INTERMEDIATE CODE: R250 |
|
R250 | Receipt of annual fees |
Free format text: JAPANESE INTERMEDIATE CODE: R250 |