JP5889135B2 - User interface design device - Google Patents

Description

  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.

  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, Patent Document 1 discloses that hierarchical componentization is realized by creating a composite display component by combining basic display components. In this way, the design method in which UI parts that have been made into parts are further combined into parts, that is, the composite display parts are designed hierarchically, has the advantage of being intuitive and easy to edit at the time of design.

  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.

Japanese Patent No. 3881179

  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.

  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.

  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.

  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.

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 is a block diagram illustrating a configuration of a user interface design device according to a first embodiment. It is a figure which shows the structure of a composite display component. It is a figure which shows an example of the hardware constitutions which implement | achieve a user interface apparatus. It is a figure which shows an example of the procedure which produces a composite display component. 3 is a diagram illustrating an example of a hierarchical structure of a composite display component according to Embodiment 1. FIG. 4 is a flowchart illustrating processing of an image composite display component generation unit according to Embodiment 1. 3 is a diagram illustrating an example of a hierarchical structure of an image composite display component according to Embodiment 1. FIG. 4 is a diagram illustrating an example of a composite display component and an image composite display component according to Embodiment 1. FIG. 10 is a flowchart showing processing of an image composite display component generation unit according to Embodiment 2. It is a figure which shows an example of the composite display component which concerns on Embodiment 2, and an image composite display component. FIG. 10 is a block diagram illustrating a configuration of a user interface design device according to a third embodiment. FIG. 10 is a diagram illustrating an example of a composite display component and an image composite display component according to Embodiment 3. FIG. 10 is a diagram illustrating another example of the composite display component and the image composite display component according to the third embodiment. 10 is a flowchart showing processing of an image composite display component generation unit according to Embodiment 3. 10 is a flowchart showing processing of an image composite display component generation unit according to Embodiment 3. 10 is a flowchart illustrating processing of a dynamic part determination unit according to Embodiment 3. 10 is a flowchart illustrating processing of a dynamic part determination unit according to Embodiment 3. 10 is a flowchart illustrating processing of a dynamic part determination unit according to Embodiment 3. FIG. 10 is a diagram illustrating an example of a hierarchical structure of an image composite display component according to Embodiment 3. FIG. 10 is a block diagram illustrating a configuration of a user interface design device according to a fourth embodiment.

<Embodiment 1>
FIG. 1 is a block diagram showing a configuration of a user interface design apparatus according to Embodiment 1 of the present invention. This user interface design apparatus is a design apparatus that designs a user interface of a design target apparatus using UI parts for image display. The user interface design apparatus shown in FIG. 1 includes a UI component storage unit 103 including a basic display component storage unit 101 and a composite display component storage unit 102, a composite display component editing unit 104 including a display attribute setting unit 104a, and an image composite display. A component generation unit 105 is provided.

  The basic display component storage unit 101 stores basic display components designed in advance as UI components constituting the user interface of the design target device.

  The composite display component storage unit 102 stores composite display components as shown in FIG. In FIG. 2, a composite display component is constituted by two-stage componentization. Specifically, as a result of componentization in the first stage, the composite display component in the second hierarchy is configured to include the basic display component in the third hierarchy lower than that. As a result of the second-stage componentization, the first-level composite display component is configured to include the second-level lower-level composite display component and the third-level basic display component. Thus, the composite display component is a UI component combining a single or a plurality of basic display components, or a UI component combining a composite display component and a basic display component.

  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.

  The UI component storage unit 103 stores UI components (that is, basic display components and composite display components).

  The composite display component editing unit 104 creates and edits a composite display component. For example, the composite display component editing unit 104 edits the attribute value of the composite display component. In this embodiment, when the composite display component editing unit 104 designates an arbitrary composite display component and instructs the start of a predetermined operation, the composite display component editing unit 104 designates the image composite display component generation unit 105. A composite display part is input.

  Based on the composite display component specified by the composite display component editing unit 104, the image composite display component generation unit 105 performs image composite display of a new composite display component in which UI components included in the composite display component are imaged in a predetermined group unit. Generate as a part. The generation process of the image composite display component generation unit 105 will be described in detail later. The image composite display component generation unit 105 starts this generation processing (image composite display component generation processing) when a composite display component is input.

  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 component storage unit 101 and the composite display component storage unit 102) is realized as a functional block of a storage device 403 such as a RAM or a hard disk. The composite display component editing unit 104 and the image composite display component generation unit 105 are realized by executing a program in a processing device 402 such as a CPU.

  Creation and editing operations in the user interface design apparatus (composite display component editing unit 104) are performed by input devices such as a mouse 405 and a keyboard 406. A display device (for example, an editing window described later) is output by a display device such as the monitor 404. The input device and the display device may be a touch panel that can perform both input and display.

  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 component editing unit 104. The composite display component editing unit 104 displays the outer frame of the arranged UI component on the edit window. The user operates the display attribute setting unit 104a to set display attributes such as color and size for the displayed UI component. Since the set attribute value is reflected in the display on the display device such as the monitor 404, the developer can edit while viewing the display of the UI component corresponding to the set attribute value. In this way, arrangement of single or plural UI parts and setting of attribute values are performed, and a composite display part is created.

  The created composite display component is stored in the composite display component storage unit 102. That is, the above-described componentization is performed by this series of creation processes. Thereafter, the developer can use the composite display component as a component for creating a composite display component at a higher level, and both the basic display component and the composite display component (that is, the composite display component on the composite display component editing unit 104). By arranging (UI parts), a composite display part of a higher hierarchy is created. By creating a composite display component through such hierarchical componentization, a user interface of one screen is finally created. The image of hierarchical componentization is as shown in FIG.

  In the present embodiment, similarly to the composite display component disclosed in Patent Document 1, a plurality of internal states of the design target device are assigned to the composite display component. It is configured to include UI parts arranged with respect to the state. The composite display component is created as a UI component with a state transition (that is, a transition from a UI component to another UI component in the same hierarchy).

  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 component editing unit 104 arranges the internal state of the design target device (FIG. 4A), and arranges UI components for each internal state (FIG. 4B). State transitions are described (FIG. 4C). In FIG. 4C, the composite display component indicating “stopped” and the composite display component indicating “reproducing” can be shifted in both directions. Then, the composite display component editing unit 104 stores the composite display component created through the above steps in the composite display component storage unit 102 (FIG. 4D).

  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.

  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.

  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.

  FIG. 6 is a flowchart showing image composite display component generation processing of the image composite display component generation unit 105 according to the present embodiment. In this image composite display component generation process, the composite image display component generation unit 105 displays a composite display component (hereinafter referred to as “designated composite display component”) designated by the composite display component editing unit 104 as a composite display. The process is started when received from the component editing unit 104. Hereinafter, the image composite display component generation process of the image composite display component generation unit 105 will be described in detail with reference to FIG.

  First, in step S1, the image composite display component generation unit 105 creates a new composite display component based on the designated composite display component. The new image composite display component has the initial attribute value and the like, and does not have an internal state or a child component. Hereinafter, such a new image composite display component is referred to as a “new composite display component”.

  The image composite display component generation unit 105 performs the processes of steps S2 to S11 by the number of internal states assigned to the designated composite display component. Each time step S2 is performed, the image composite display component generation unit 105 selects one internal state that has not been processed in step S2 and subsequent steps from the internal state of the designated composite display component.

  In step S3, the image composite display component generation unit 105 duplicates one internal state selected in step S2 (however, the child component is not duplicated here), and the duplicated internal state is displayed as a new composite display component. Add to. Hereinafter, one internal state selected in step S2 may be referred to as “original state”, and one internal state added to the new composite display component in step S3 may be referred to as “new state”.

  In step S <b> 4, the image composite display component generation unit 105 secures a drawing buffer on the storage device 403. The drawing buffer is a storage area that stores an image (display content) obtained by drawing in step S8 as data. Here, based on the display size (width and height) of the original state indicated by the attribute value of the original state, a drawable area having the same size as this size is secured.

  In step S5, the image composite display component generation unit 105 initializes the secured drawing buffer area. For example, the secured drawing buffer area is filled with 0 data.

  The image composite display component generation unit 105 performs the processing of steps S6 to S9 by the number of child components arranged in the original state. Every time step S6 is performed, the image composite display component generation unit 105 selects one child component that has not been processed in step S6 and subsequent steps from among the child components that are arranged in the original state.

  In step S7, the image composite display component generation unit 105 determines whether one child component selected in step S6 is a composite display component. When it is determined that it is not a composite display component (here, when it is determined that it is a basic display component), the process proceeds to step S8, and when it is determined that it is a composite display component, the process proceeds to step S9.

  In step S8, the image composite display component generation unit 105 draws (stores) the basic display component determined in step S7 in the secured drawing buffer. For example, if the determined basic display component is a quadrangular component, the quadrilateral is determined based on the attributes of the component, such as coordinate values, size (width and height), color, line thickness, etc. Draw in the drawing buffer. For example, when the determined basic display component is a character string component, the character is drawn in the drawing buffer based on the coordinate value, size, character string, and the like, which are attributes of the component. Thereafter, the process proceeds to step S9.

  In step S <b> 9, the image composite display component generation unit 105 determines whether there is a child component that has not been subjected to the processing in step S <b> 6 or later among the child components arranged in the original state. If it is determined that there is an unimplemented child part, the process returns to step S6. If it is determined that there is no child part not implemented, the process proceeds to step S10. As a result of the above processing, an image obtained by combining the images of the basic display components (UI components) for each internal state included in the designated composite display component is generated in the drawing buffer.

  In step S10, the image composite display component generation unit 105 adds an image component that is one of the basic components as a child component to the new state of the new composite display component. This image component has a pointer that can point to an arbitrary drawing buffer as an attribute value, and has a function of displaying the contents of the drawing buffer pointed to by the pointer as an image. Here, the setting value (pointer pointed by the pointer) of the image component added to the new state is set in the drawing buffer in which the image is generated.

  In step S <b> 11, the image composite display component generation unit 105 determines whether there is an internal state in which the processes subsequent to step S <b> 2 are not performed among the internal states assigned to the designated composite display component. If it is determined that there is an internal state that is not implemented, the process returns to step S2, and if it is determined that there is no internal state that is not implemented, the process proceeds to step S12.

  In this way, the image composite display component generation unit 105 generates, as an image composite display component, a new composite display component in which basic display components included in the designated composite display component are imaged for each internal state. In the present embodiment, the image composite display component generated by the image composite display component generation unit 105 is a UI component arranged for each internal state of the designated composite display component. It is a composite display component that is replaced by an image component that displays an image.

  In step S <b> 12, the image composite display component generation unit 105 stores the generated image composite display component in the composite display component storage unit 102. Then, the image composite display component generation process shown in FIG. 6 ends.

  FIG. 7 illustrates an image generated by the image composite display component generation unit 105 and stored in the composite display component storage unit 102 when the composite display component X illustrated in FIG. 5 is input to the image composite display component generation unit 105. It is a figure which shows an example of the hierarchical structure of a composite display component. As shown in FIG. 7, a new composite display component obtained by imaging the basic display component included in the designated composite display component for each internal state is generated as an image composite display component. In the example shown in FIG. 7, the image composite display component has fewer layers than the composite display component and includes only the image component as a child component.

  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.

  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).

  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.

<Embodiment 2>
FIG. 9 is a flowchart showing image composite display component generation processing of the image composite display component generation unit 105 according to Embodiment 2 of the present invention. In the user interface design apparatus according to the present embodiment, the same or similar components as those described in the first embodiment are denoted by the same reference numerals, and different points will be mainly described.

  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 component generation unit 105 can recursively perform the above imaging on the composite display components in the lower hierarchy included in the designated composite display component.

  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.

  In step S7a, the image composite display component generation unit 105 determines whether one child component selected in step S6 is a composite display component. When it is determined that it is not a composite display component (here, when it is determined that it is a basic display component), the process proceeds to step S8, and when it is determined that it is a composite display component, the process proceeds to step S21.

  In step S21, the image composite display component generation unit 105 performs the same processing as step S10 described in the first embodiment when there is a drawing buffer that is not set as an image component at the time of performing step S21. . That is, the image composite display component generation unit 105 adds an image component to the new state of the new composite display component, and sets the setting value (pointer pointed to by the pointer) of the image component in the drawing buffer.

  Thereafter, in step S22, the image composite display component generation unit 105 receives the composite display component being processed (the composite display component determined in step S7a) as an input, and performs the image composite display component creation process (shown in FIG. 9). Steps S1 to S12) are performed recursively to generate an image composite display component.

  Thereafter, in step S23, the image composite display component generation unit 105 adds the image composite display component generated in step S21 to the new state of the new composite display component created in step S1. At the time of this addition, the coordinate value and size value of the composite display component currently being processed (composite display component determined in step S7a) are set as the coordinate value and size value. Thereafter, the process proceeds to step S9.

  After that, in step S10a after step S9, the image composite display component generation unit 105 performs step S10 described in the first embodiment when there is a drawing buffer that is not set as an image component at the time of performing step S10a. Similar processing is performed. That is, the image composite display component generation unit 105 adds an image component to the new state of the new composite display component, and sets the setting value (pointer pointed to by the pointer) of the image component in the drawing buffer.

  10 is generated by the image composite display component generation unit 105 according to the present embodiment when the composite display component X shown in FIG. 5 is input to the image composite display component generation unit 105. 2 is a diagram illustrating an example of the structure of an image composite display component stored in 102. FIG.

  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 component generation unit 105 can be brought close to the configuration of the input composite display component. . That is, it is possible to generate an image composite display component that directly reflects the hierarchical structure of the composite display component. Therefore, since the imaging is performed to the minimum, the work of returning the imaging to the original can be facilitated as compared with the first embodiment, and the intuitive editing can be performed even after the imaging is performed. It can be carried out.

<Embodiment 3>
FIG. 11 is a block diagram showing a configuration of a user interface design apparatus according to Embodiment 3 of the present invention. In the user interface design apparatus according to the present embodiment, the same or similar components as those described in the first embodiment are denoted by the same reference numerals, and different points will be mainly described.

  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 component generation unit 105 removes the UI components that are determined to be dynamic UI components by the dynamic component determination unit 106 from the UI components included in the designated composite display component. Is generated.

  In other words, the image composite display component generation unit 105 is configured not to image the component if the dynamic component determination unit 106 determines that the component is a dynamic component in the process of generating the image composite display component. ing. Thereby, an image composite display component that performs the same operation as before imaging at the time of execution can be obtained.

  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.

  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.

  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.

  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.

  FIG. 14 is a flowchart showing image composite display component generation processing of the image composite display component generation unit 105 according to the present embodiment. In the flowchart shown in FIG. 14, steps S7 and S10 are changed to steps S7b and S10b in the flowchart shown in FIG. 6 of the first embodiment, and steps S31 to S38 are added. Therefore, only steps SS7b, S10b, and S31 to S38 will be described below.

  After step S2, in step S31, the image composite display component generation unit 105 creates a list in which the child components arranged in the original state are arranged in ascending order of the Z index value as a child component list. . The Z index is an attribute indicating the degree of depth of the child component, and indicates that a child component having a large value is drawn above a small child component.

  In step S32, the image composite display component generation unit 105 receives the child component list and causes the dynamic component determination unit 106 to execute a dynamic component determination process. This dynamic part determination process will be described in detail later using another flowchart. The image composite display component generation unit 105 returns a static component list storing static child components (static components) returned from the dynamic component determination unit 106 as a result of the dynamic component determination process, A dynamic part list in which the child parts (dynamic parts) are stored is acquired and stored. Thereafter, the processes of steps S3 to S5 are performed.

  Then, the image composite display component generation unit 105 performs the processing of steps S33 to S35 by the number of static components stored in the static component list. Every time step S33 is performed, the image composite display component generation unit 105 selects one static component that has not been processed in step S33 and subsequent steps from among the static components stored in the static component list.

  After step S33, in step S7b, the image composite display component generation unit 105 determines whether one static component selected in step S33 is a composite display component. When it is determined that it is not a composite display component (here, when it is determined that it is a basic display component), the process proceeds to step S8, and when it is determined that it is a composite display component, the process proceeds to step S34.

  In step S34, the image composite display component generation unit 105 receives the single static component selected in step S33 and executes a static composite display component drawing process. The static composite display component drawing process will be described in detail later using another flowchart.

  After step S8 or S34, in step S35, the image composite display component generation unit 105 selects a static component that has not been processed in step S33 and subsequent steps from among the static components stored in the static component list. It is determined whether or not there is. If it is determined that there is a static part that is not implemented, the process returns to step S33. If it is determined that there is no static part that is not implemented, the process proceeds to step S10b.

  In step S10b, the image composite display component generation unit 105 performs the same processing as step S10 described in the first embodiment when there is a drawing buffer that is not set as an image component. That is, the image composite display component generation unit 105 adds an image component to the new state of the new composite display component created in step S1, and sets the setting value (pointer pointed to by the pointer) of the image component in the drawing buffer. To do.

  Thereafter, the image composite display component generation unit 105 performs the processing of steps S36 to S38 by the number of dynamic components stored in the dynamic component list. Every time step S36 is performed, the image composite display component generation unit 105 selects one dynamic component that has not been processed in step S36 and subsequent steps from the dynamic components stored in the dynamic component list.

  After step S36, in step S37, the image composite display component generation unit 105 adds one dynamic component selected in step S36 to the new state of the new composite display component created in step S1.

  In step S38, the image composite display component generation unit 105 determines whether there is a dynamic component that has not been subjected to the process of step S37 among the dynamic components stored in the dynamic component list. If it is determined that there is a dynamic part that is not implemented, the process returns to step S36, and if it is determined that there is no dynamic part that is not implemented, the process proceeds to step S11. After step S11, the process of step S12 is performed, and the image composite display component generation process shown in FIG. 14 ends.

  FIG. 15 is a flowchart illustrating the static composite display component drawing process performed by the image composite display component generation unit 105 in step S34. Hereinafter, the static composite display component drawing process will be described in detail with reference to FIG.

  First, in step S41, the image composite display component generation unit 105 extracts an initial state (default internal state) from the static components determined to be composite display components in step S7b.

  The image composite display component generation unit 105 performs the processing of steps S42 to S43 by the number of child components arranged in the initial state. Every time step S42 is performed, the image composite display component generation unit 105 selects one child component that has not been subjected to the processing from step S42 onward, from among the child components arranged in the initial state.

  After step S42, in step S7c, the image composite display component generation unit 105 determines whether one child component selected in step S42 is a composite display component. When it is determined that it is not a composite display component (here, when it is determined that it is a basic display component), the process proceeds to step S8a, and when it is determined that it is a composite display part, the process proceeds to step S34a.

  In step S8a, the image composite display component generation unit 105 draws (stores) the basic display component determined in step S7c in the secured drawing buffer. Thereafter, the process proceeds to step S43.

  In step S34a, the image composite display component generation unit 105 receives the child component being processed (the composite display component determined in step S7c) as an input, and performs the static composite display component drawing process (step S41) shown in FIG. To S43) are recursively performed to generate a static image composite display component. Thereafter, the process proceeds to step S43.

  In step S43, the image composite display component generation unit 105 determines whether there is a child component that has not been subjected to the processing in step S42 and subsequent steps among the child components arranged in the initial state. If it is determined that there is an unimplemented child component, the process returns to step S42. If it is determined that there is no child component not implemented, the static composite display component drawing process shown in FIG. .

  FIG. 16 is a flowchart showing the dynamic component determination process performed by the dynamic component determination unit 106 in step S32. Hereinafter, the dynamic component determination process will be described in detail with reference to FIG. First, before performing step S51, the dynamic component determination unit 106 stores a child component list given as an input.

  In step S51, the dynamic component determination unit 106 creates a dynamic component list to be returned to the image composite display component generation unit 105 as a final result of this process. At this stage, the contents of the list are empty.

  In step S52, the dynamic component determination unit 106 creates a static component list to be returned to the image composite display component generation unit 105 as a final result of this process. At this stage, the contents of the list are empty.

  The dynamic component determination unit 106 performs the processes of steps S53 to S60 by the number of child components stored in the child component list. Each time step S53 is performed, the dynamic component determination unit 106 selects one child component that has not been processed in step S53 and subsequent steps from among the child components stored in the child component list.

  After step S53, in step S54, the dynamic component determination unit 106 starts the component determination process with the one child component selected in step S53 as an input. In this part determination process, TRUE is returned when the child part is a dynamic part, and FALSE is returned when the child part is a static part, and the dynamic part determination unit 106 stores the return value of the part determination process. The component determination process will be described in detail later using another flowchart.

  In step S55, the dynamic part determination unit 106 determines whether or not the return value of the part determination process in step S54 is TRUE. When it determines with TRUE, it progresses to step S56, and when it does not determine with TRUE (it determines with FALSE), it progresses to step S57.

  In step S56, the dynamic component determination unit 106 adds the child component currently being processed (the child component determined as the dynamic component in the component determination process in step S54) to the dynamic component list. Thereafter, the process proceeds to step S60.

  In step S57, the dynamic component determination unit 106 moves the dynamic component list in which the child component currently being processed (the child component determined as the static component in the component determination process in step S54) is stored. Whether or not the target part is overlaid is determined based on the coordinate time and size. If it is determined that they overlap, the process proceeds to step S58, and if it is determined that they do not overlap, the process proceeds to step S59.

  In step S58, the dynamic component determination unit 106 adds the child component currently being processed (the child component determined as the static component in the component determination process in step S54) to the dynamic component list. Thereafter, the process proceeds to step S60.

  In step S59, the dynamic component determination unit 106 adds the child component currently being processed (the child component determined as the static component in the component determination process in step S54) to the static component list. Thereafter, the process proceeds to step S60.

  In step S60, the dynamic component determination unit 106 determines whether there is a child component that has not been processed in step S53 and subsequent steps among the child components stored in the child component list. If it is determined that there is a child part that is not implemented, the process returns to step S53. If it is determined that there is no child part that is not implemented, the dynamic part list and the static part list are returned, and FIG. The dynamic component determination process shown in FIG.

  FIG. 17 is a flowchart showing the component determination process performed by the dynamic component determination unit 106 in step S54 and the like. Hereinafter, the component determination process will be described in detail with reference to FIG. First, before performing step S61, the dynamic component determination unit 106 stores a child component given as an input.

  In step S61, the dynamic component determination unit 106 determines whether the child component given as an input is a composite display component. When it is determined that it is a composite display component, the process proceeds to step S62, and when it is determined that it is not a composite display component, the process proceeds to step S65.

  In step S62, the dynamic component determination unit 106 starts the composite display component dynamic determination process with the child component being processed (the child component determined to be a composite display component in step S61) as an input. In this composite display component dynamic determination process, TRUE is returned when the child component is a dynamic component, and FALSE is returned when the child component is a static component. The composite display component dynamic determination process will be described later in detail using another flowchart.

  In step S63, the dynamic part determination unit 106 determines whether or not the return value of the composite display part dynamic determination process in step S62 is TRUE. When it determines with TRUE, it progresses to step S64, and when it does not determine with TRUE (it determines with FALSE), it progresses to step S65.

  In step S64, the dynamic part determination unit 106 returns TRUE as the return value of this process, and the part determination process illustrated in FIG. 17 ends.

  In step S65, the dynamic component determination unit 106 determines whether or not the property value of the currently processed child component (the child component determined in step S61) may be changed at the time of execution. To do. Specifically, in the event handler, it is checked whether or not the setting process is performed for the property of the child part. If it is determined that there is a possibility of being changed, the process proceeds to step S66, and if it is determined that there is no possibility of being changed, the process proceeds to step S67.

  In step S66, the dynamic part determination unit 106 returns TRUE as the return value of this process, and the part determination process illustrated in FIG. 17 ends.

  In step S67, the dynamic part determination unit 106 returns FALSE as a return value of this process, and the part determination process illustrated in FIG. 17 ends.

  FIG. 18 is a flowchart showing the composite display component dynamic determination process performed by the dynamic component determination unit 106 in step S62. Hereinafter, the composite display component dynamic determination process will be described in detail with reference to FIG. First, before performing step S71, the dynamic component determination unit 106 stores the child component given as an input.

  In step S71, the dynamic component determination unit 106 assigns a plurality of internal states to the child component (composite display component) given as an input, and whether transitions are defined between the internal states. Determine whether or not. If it is determined that it is defined, there is a possibility of a state transition. Therefore, the determined child component is interpreted as a component whose expression dynamically changes, that is, a dynamic component, and the process proceeds to step S72. If it is not determined that it is defined, the process proceeds to step S73.

  In step S72, the dynamic part determination unit 106 returns TRUE as a return value of this process, and the composite display part dynamic determination process illustrated in FIG. 18 ends.

  In step S73, the dynamic component determination unit 106 extracts the initial state from the child component given as input, and creates a list of child components arranged in the initial state as a lower child component list.

  The dynamic component determination unit 106 performs the processing of steps S74 to S78 as many as the number of child components stored in the lower child component list unless the process proceeds from step S76 to step S77. Each time step S74 is performed, the dynamic component determination unit 106 selects one child component that has not been processed in step S74 and subsequent steps from the child components stored in the lower child component list.

  After step S74, in step S75, the dynamic part determination unit 106 receives the child part currently being processed (one child part selected in step S74) and performs the part determination process described with reference to FIG. Do it recursively.

  In step S76, the dynamic part determination unit 106 determines whether the return value of the part determination process in step S75 is TRUE. When it determines with TRUE, it progresses to step S77, and when it does not determine with TRUE (it determines with FALSE), it progresses to step S78.

  In step S77, the dynamic part determination unit 106 returns TRUE as a return value of this process, and the composite display part dynamic determination process illustrated in FIG. 18 ends.

  In step S78, the dynamic component determination unit 106 determines whether there is a child component that has not been subjected to the processing in step S74 and subsequent steps among the child components stored in the lower child component list. If it is determined that there is an unimplemented child part, the process returns to step S74, and if it is determined that there is no child part not implemented, the process proceeds to step S79.

  In step S79, the dynamic part determination unit 106 returns FALSE as a return value of this process, and the composite display part dynamic determination process illustrated in FIG. 18 ends.

  19 shows a case where the composite display component X shown in FIG. 5 is input to the image composite display component generation unit 105, and is generated by the image composite display component generation unit 105 according to the present embodiment. 2 is a diagram illustrating an example of the structure of an image composite display component stored in 102. FIG. In FIG. 19, the basic display component J is a dynamic UI component, and UI components other than the basic display component J are imaged.

  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.

<Embodiment 4>
FIG. 20 is a block diagram showing a configuration of a user interface design apparatus according to Embodiment 4 of the present invention. In the user interface design apparatus according to the present embodiment, the same or similar components as those described in the first embodiment are denoted by the same reference numerals, and different points will be mainly described.

  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.

  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 component generation unit 105 and shorten the image composite display. Since parts can be generated, it is considered more appropriate. Therefore, in the user interface design apparatus according to the present embodiment, it is possible to impose restrictions on the imaging process.

  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 portion 107 is added. Then, the image composite display component generation unit 105 determines whether to image each UI component constituting the designated composite display component based on a predetermined determination condition, and determines the UI component (predetermined to be imaged). An image composite display component is generated using a UI component according to the determination condition. In the present embodiment, as in the third embodiment, a static component that is superimposed on a dynamic component is also handled as a dynamic component.

  The determination condition definition storage unit 107 is realized as a functional block of the storage device 403 (FIG. 3), for example. The predetermined determination condition stored in the determination condition definition storage unit 107 is stored as a text file, for example, and can be edited by an input device such as the keyboard 406 and the mouse 405 (FIG. 3). It has become. The predetermined determination condition stored in the determination condition definition storage unit 107 may be a rule-based definition. For example, the following definition is possible.

  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.

  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.

  When an execution is instructed from the composite display component editing unit 104, the image composite display component generation unit 105 first reads the predetermined determination condition as described above from the determination condition definition storage unit 107. Then, the image composite display component generation unit 105 determines whether to image each UI component constituting the designated composite display component based on the read predetermined determination condition, and the UI component based on the predetermined determination condition Is used to generate an image composite display component.

  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 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)

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. 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 . 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. 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. 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 . A user interface design device according to any one of claims 1, 3, 4, and 5,
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. A user interface design device according to any one of claims 1, 2, 4, and 5,
A dynamic component determination unit that determines a dynamic UI component;
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. A user interface design device according to any one of claims 1, 2, 3, and 5,
A judgment condition definition storage unit for storing predetermined judgment conditions;
The image composite display component generation unit
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.

Images