JP2009026239A - Device, and method for editing graphical user interface, and program - Google Patents

Abstract

<P>PROBLEM TO BE SOLVED: To provide a graphical user interface (GUI) edit device capable of providing an operating environment suitable for GUI editing operations. <P>SOLUTION: A GUI edit device 100, for editing a GUI to be executed via a GUI corresponding application, comprises: an arrangement design unit 122 for arranging screen composition parts for composing a GUI screen and process defining parts having a first connection tag provided to visually indicate the relevance to the screen composition parts and for defining executions regarding the GUI, in the same work area; and a linking unit 124 for linking the screen composition parts with the process defining parts in the same work area by connecting a first connection tag to the screen composition parts to define the execution process of the screen composition. <P>COPYRIGHT: (C)2009,JPO&INPIT

Description

  The present invention relates to a GUI editing device, a GUI editing method, and a program.

  In a GUI (Graphic User Interface) compatible application, a computer displays an object such as a graphic symbol on a display, and the user operates the object to interactively input and output various information between the computer and the user. Done. In developing a GUI application, a software tool called a general-purpose GUI builder is generally used. In the general-purpose GUI builder, the GUI portion of the GUI application is edited and created through a visual operation using the GUI, and an implementation language source code or an executable object is generated.

  In recent years, with the improvement of customer requirements for operation performance and display performance of GUI-compatible applications, for example, GUIs having complicated functions such as animation and interaction (dialogue between a user and a computer through user operation) have been developed. Has been created. A software tool such as a general-purpose GUI builder is also used when creating a GUI, but it does not sufficiently provide an operation environment suitable for creating a GUI having a complicated function.

  For example, the following non-patent document 1 describes a software tool that provides an operation environment in which a GUI can be created using a visual flow. Non-Patent Document 2 below describes a software tool that provides an operating environment in which a three-dimensional model can be created using a visual flow.

“Working with Quartz Composer”, Apple Developer Connection, Apple Inc. [Search June 6, 2007], [online], Internet <URL: http://developer.apple.com/graphicsimaging/quartz/quartzcomposer.html> “Blender Manual”, Blender Foundation, [Search June 6, 2007], [online], Internet <URL: http://wiki.blender.org/index.php/Manual>

  In the software tool described in Non-Patent Document 1, it is referred to as a “patch” for defining execution processing or defining an interaction with respect to objects such as graphic symbols and animation constituting the GUI. The module to be prepared is prepared. Then, the GUI creator creates the GUI by visually associating the patches with each other on the editor work area and editing the GUI execution flow. However, on the work area, the patches are only visually associated with each other, and the patches and the objects are not visually associated with each other. Therefore, the GUI creator needs to edit the execution flow of the GUI while considering the relationship between the patch and the object one by one, and it is difficult to intuitively perform the editing work.

  Further, in the software tool described in Non-Patent Document 2, a module block called “logic brick” for defining execution processing such as animation and interaction for a three-dimensional object is prepared. Yes. Then, the model creator creates a three-dimensional model by connecting a logical brick to the three-dimensional object on the work area of the editor and editing the execution flow of the three-dimensional model. However, on the work area, the three-dimensional object and the logical brick are edited separately on different work areas. Therefore, it is necessary for the model creator to edit the execution flow of the three-dimensional model while considering the relationship between the three-dimensional object and the logical brick, and it is difficult to intuitively perform the editing work.

  Therefore, since an operation environment suitable for creating a GUI having a complicated function is not sufficiently provided, it is difficult for a GUI creator to intuitively perform GUI editing work. Moreover, it is difficult for a person other than the GUI creator to understand or change the GUI execution flow based on the GUI editing result.

  The present invention has been made in view of the above problems, and an object thereof is to provide a new and improved GUI editing apparatus, GUI editing method, and program capable of providing an operation environment suitable for GUI editing work. There is.

  In order to solve the above-described problem, according to a first aspect of the present invention, there is provided a GUI editing apparatus for editing a GUI executed and processed via a GUI-compatible application. This GUI editing apparatus has a first connection tag for visually expressing the association between a screen configuration part that configures a GUI screen and the screen configuration part, and a process definition part that defines an execution process related to the GUI In order to define the execution process for the screen design part and the layout design unit for designing the layout on the same work area, the screen configuration is configured by connecting the first connection tag to the screen configuration part. An association unit for associating the process definition part with the part on the same work area.

  According to such a configuration, the screen configuration part and the process definition part are arranged and designed on the same work area, and the execution process related to the GUI is defined for the screen structure part by associating them on the same work area. Then, by visually connecting the first connection tag of the process definition part to the screen configuration part, the process definition part is associated with the screen configuration part. As a result, the GUI creator can edit the execution process related to the GUI intuitively in association with the screen component via the connection operation of the first connection tag.

  The process definition part has a second connection tag for visually expressing an association with another process definition part, and the association unit connects the second connection tag to the other process definition part. Thus, another process definition part may be associated with the process definition part on the same work area. According to this configuration, by visually connecting the second connection tag of the process definition part to another process definition part, the other process definition part is associated with the process definition part on the same work area. Thereby, the GUI creator can intuitively associate and edit execution processes related to the GUI through the connection operation of the second connection tag.

  Further, the screen component part and the process definition part may be displayed so as to be visually recognized and recognized on the same work area. According to such a configuration, the screen component parts and the process definition parts are displayed so as to be visually recognized and recognized on the same work area. Thereby, the GUI creator can easily distinguish and edit the screen configuration part and the process definition part on the same work area.

  Further, a playback processing unit for playing back the edited GUI may be further provided. According to such a configuration, the edited GUI is reproduced, so that the GUI creator can visually confirm execution processing related to the GUI including complicated functions such as animation and interaction.

  In order to solve the above problems, according to a second aspect of the present invention, a GUI editing method for editing a GUI executed and processed via a GUI-compatible application is provided. This GUI editing method has a first connection tag for visually expressing the association between a screen configuration part constituting the screen of the GUI and the screen configuration part, and a process definition part for defining execution processing related to the GUI In order to define an execution process for the screen configuration part, the layout design step for designing the layout on the same work area and the screen connection part by connecting the first connection tag to the screen configuration part. Associating process definition parts on the same work area.

  According to such a method, the screen processing part and the process definition part are arranged and designed on the same work area, and the execution process related to the GUI is defined for the screen structure part by associating them on the same work area. Then, by visually connecting the first connection tag of the process definition part to the screen configuration part, the process definition part is associated with the screen configuration part. As a result, the GUI creator can edit the execution process related to the GUI intuitively in association with the screen component via the connection operation of the first connection tag.

  In order to solve the above problems, according to a third aspect of the present invention, there is provided a program for causing a computer to function as the GUI editing apparatus according to the first aspect of the present invention described above. Thereby, the GUI creator can edit the GUI-related execution process intuitively in association with the screen component via the connection of the first connection tag.

  According to the present invention, it is possible to provide a GUI editing apparatus, a GUI editing method, and a program capable of providing an operation environment suitable for GUI editing work.

  Hereinafter, preferred embodiments of the present invention will be described in detail with reference to the accompanying drawings. In the present specification and drawings, components having substantially the same functional configuration are denoted by the same reference numerals, and redundant description is omitted.

(GUI creation / use environment)
FIG. 1 is an explanatory diagram showing a general GUI creation environment and use environment.

  In the GUI creation environment, the GUI editing (creation) device 100 performs GUI editing and playback processing, and GUI data such as UI (User Interface) definition data and resource data is created. In the GUI usage environment, the created GUI data is read on the target platform, and is executed by the runtime library of the GUI-compatible application to display the GUI.

(Configuration of GUI editing device)
FIG. 2 is an explanatory diagram showing a GUI editing apparatus according to an embodiment of the present invention.

  The GUI editing apparatus 100 is configured as an information processing apparatus such as a PC (Personal Computer), for example, and includes a storage unit 110, a processing control unit 120, an input unit 130, an output unit 140, and optionally a conversion unit 150. Is done.

  The storage unit 110 is configured as, for example, a RAM, a ROM, and an HDD, and is a functional configuration unit that stores various types of information. The storage unit 110 includes an editing information storage unit 112 and an execution information storage unit 114. Here, although detailed description will be given later in the editing information storage unit 112, for each part constituting the GUI layer, such as setting information, gadgets, balloons, custom parts, and resources included in the scene constituting the GUI. In addition, information such as image data and setting properties is stored. The execution information storage unit 114 stores, for example, information related to editing results for each scene such as layers and parts, and information related to scenes constituting the GUI such as transition between scenes.

  The processing control unit 120 is configured as a processor, for example, and includes a layout design unit 122, an association unit 124, a list display processing unit 128, and a reproduction processing unit 126. The processing control unit 120 reads and processes various data in accordance with user operations and instructions via the input unit 130, various data parameters, and predetermined procedures, and displays information to be displayed to the user via the output unit 140. It is a functional component to be generated. When the conversion unit 150 is provided, the processing control unit 120, for example, the data processing result, the user operation result, the GUI editing result, etc. according to the user operation and instruction, for example, the drawing, the source Generate information for output as code, object code, etc.

  The arrangement design unit 122 and the associating unit 124 particularly function in a scene editing process to be described later. The layout design unit 122 is a functional configuration unit for designing the layout of the screen configuration parts that configure the GUI screen and the process definition parts that define the execution processing related to the GUI on the same work area. The association unit 124 is a functional configuration unit for associating process definition parts with screen configuration parts on the same work area. The list display processing unit 128 is a functional configuration unit that functions in particular in a scene list process to be described later and processes a list display of edited scenes. The reproduction processing unit 126 is a functional configuration unit that functions in scene reproduction processing, which will be described later, and processes scene reproduction and the like.

  The input unit 130 is configured as, for example, a keyboard or a mouse, and is a functional configuration unit for inputting information such as numerical values, character strings, and operation commands by a user operation. The output unit 140 is configured as a display, for example, and is a functional configuration unit that displays, for example, data processing results, user operation results, GUI editing results, and the like to the user.

  The conversion unit 150 is a functional configuration unit that is selectively provided in the GUI editing apparatus 100 and converts information generated by the processing control unit 120 into, for example, drawing information, source code, and object code. Here, when the conversion unit 150 is provided, the GUI editing apparatus 100 also functions as a GUI creation apparatus.

  In the GUI editing apparatus 100, the processing control unit 120 including the layout design unit 122, the association unit 124, the list display processing unit 128, and the reproduction processing unit 126 may be configured to include a dedicated control processing circuit, for example. . Alternatively, a processor that executes a computer program, a RAM that stores the program and data, a storage unit such as a ROM, and the like may be included.

  Further, although each of the functional components included in the GUI editing device 100 has been described individually in the above description, in practice, each of the functional components is clearly divided and may not be provided independently.

  Note that some of the functional components included in the GUI editing device 100 may be connected to each other via a communication network, and some of the functional components arranged outside may be shared by a plurality of GUI editing devices 100. May be used.

(Overall flow of GUI editing process)
FIG. 3 is a flowchart showing the overall work flow of the GUI editing method according to an embodiment of the present invention.

  As shown in FIG. 3, the GUI editing method (processing) according to this embodiment is divided into processing modes of scene editing (S100), scene list (S200), and scene playback (S300). In the scene editing process (S100), part layout design, part association, and the like are performed for each scene constituting the GUI. In the scene list process (S200), a list of edited scenes, confirmation of transition between scenes, editing, and the like are performed. In the scene reproduction process (S300), the execution process related to the GUI composed of the edited scene is confirmed.

(Scene editing process)
FIG. 4 is a flowchart showing an example of the work flow of the scene editing process.

  As shown in FIG. 4, in the scene editing mode, for example, gadgets, balloons, custom parts, layers, resources, and the like are edited on the work area of the editor through user operations. Here, the screen constituent parts include gadgets and custom parts, and the process definition parts include balloons. However, the parts included in the screen configuration part and the process definition part are not limited to this case.

  In gadget editing (S110), gadget placement, property setting, layout adjustment, and the like are performed. In balloon editing (S120), balloon arrangement, property setting, layout adjustment, connection with gadgets, connection with other balloons, and the like are performed. In the custom part editing (S130), a new custom part is created or changed. In the layer editing (S140), new layer creation, change, property setting, and the like are performed. In resource editing (S150), new resource creation, file association, and the like are performed.

  The main processing operation of the GUI editing apparatus 100 in the scene editing process (S100) will be described. In the scene editing process (S100), first, a work area is provided in the output unit 140 of the GUI editing apparatus 100.

  First, by a user operation via the input unit 130, a screen configuration part that configures a GUI screen and a process definition part that defines an execution process related to the GUI are arranged and designed on the same work area. At the time of layout design, the layout design unit 122 reads information such as image data and setting properties of screen configuration parts and process definition parts from the edit information storage unit 112, processes them, and displays them on the output unit 140. The Information regarding the result of the layout design is stored in the execution information storage unit 114 via the layout design unit 122.

  Second, a process definition part is associated with a screen component part on the same work area by a user operation. When associating, information relating to the result of the layout design is read from the execution information storage unit 114 by the associating unit 124, processed, and displayed on the output unit 140. Information regarding the result of the association is stored in the execution information storage unit 114 via the association unit 124.

  The gadget is a part constituting a GUI screen, and includes, for example, a button, texture, text, frame, list, circular list, 3D model, and the like. For the gadget, for example, various properties such as a display position, a display size, a display color, and display contents can be set.

  The button gadget displays a pressing animation through a user operation. The texture gadget displays, for example, a rectangular polygon that can be pasted with resource-defined image data. The text gadget displays a character string. The frame gadget displays a fixed-size frame that is not affected by scaling. The list gadget displays a list including arbitrary gadgets as items. The circulation list gadget is a list gadget with a function of displaying only a predetermined number of items. The 3D model gadget displays a 3D model.

  The balloon is a part that defines execution processing related to GUI such as animation and interaction. Balloons are, for example, movement, scaling, fade-in, fade-out, scene transition, layer transition, left click, "if touched", "if released", "key input", "wait n seconds", cursor, stop position, Includes message communication, “if you come to the nth line”, etc. Various properties such as details of execution processing related to GUI such as animation and interaction can be set for the balloon.

  The moving balloon defines a moving animation execution process related to the GUI. The scale balloon defines a scale animation. The fade-in balloon defines a fade-in animation. The fade-out balloon defines a fade-out animation. A scene transition balloon defines a transition to another scene. The layer transition balloon defines layer switching.

  The left click balloon defines detection of the left click operation of the mouse. The “If Touched” balloon defines the detection of movement of the mouse cursor over the gadget. The “when released” balloon defines the detection of the mouse cursor leaving the gadget. The “key input” balloon defines detection of a predetermined key input. The “wait for n seconds” balloon defines a delay in execution processing related to the GUI. The cursor balloon defines the cursor operation of the gadget along with the stop position balloon. The message communication balloon defines a callback that is called when the GUI is executed. A balloon “when it comes to line n” is used with a list gadget or circular list gadget and is defined as a trigger that fires through selection of an item in line n included in the list.

  The custom part is a part that is defined by the user and functions in the same manner as the gadget, and is defined by combining a plurality of existing parts.

  A layer is an element constituting a scene, and a scene is composed of one or more layers. A layer can be shared between scenes, and display / non-display, lock / unlock, and the like can be set.

  Resources are image data such as graphic symbols and images, and are pasted on texture gadgets.

  FIG. 5 is an explanatory diagram showing an example of an edit screen in the scene edit mode.

  In the scene editing mode, an editing screen as shown in FIG. 5 is displayed on the output unit 140 of the GUI editing apparatus 100. On the editing screen, GUI editing work is performed through the operation of the input unit 130 by the user.

  A work area (1) is provided at the center of the edit screen, and a mode change button (2), a resume / pause button (3), an alignment button (4), and a work area display reset are provided around the work area. A button (5), a scene name display field (6), a left balloon (7), and a right balloon (8) are provided.

  The work area (1) is an area for performing editing work such as part layout design and association. Note that a grid for facilitating the part layout design is displayed on the work area (1). In the work area (1), the display range is enlarged / reduced / moved through the user's operation, and returned to the initial display range via the work area display reset button (5).

  The mode change button (2) is a button for changing each processing mode of scene editing, scene list, and scene reproduction. The resume / pause button (3) is a button for selecting the pause / resume of the scene reproduction process in the scene reproduction mode. The alignment button (4) is a button for aligning a plurality of parts. The scene name display field (6) is a field for displaying the name of the scene being edited.

  The left balloon (7) is an area for storing and managing parts, and includes a gadget tab, a balloon tab, a custom part tab, and a resource tab, and stores and manages each part for each tab. The right balloon (8) is an area for setting properties and setting layers, and includes a property tab and a layer tab. Note that the left balloon (7) and the right balloon (8) can be pulled out / stored via a drag operation at the end.

  Here, in the editing screen shown in FIG. 5, the editing work for “Scene 1” is performed. In the left balloon, the gadget tab is selected, and a list of selectable gadgets is displayed. A texture gadget 51 including an image resource serving as a background display is arranged on the work area. On the texture gadget 51, a frame gadget 54 including a texture gadget 52 including an image resource and a text gadget 53, and a button gadget 55. And are arranged.

  The gadgets 51 to 55 are arranged on the work area from the left balloon gadget tab through the user's drag & drop operation, edited by appropriately performing property setting and layout adjustment, and the scene 1 is selected. Designed to be placed on a layer that has In the right balloon, the property tab is selected, and various properties of the button gadget 55 selected by the user are displayed.

  FIG. 6 is an explanatory diagram showing another example of the edit screen in the scene edit mode.

  In the edit screen shown in FIG. 6, in the left balloon, a balloon tab is selected, and selectable balloons are displayed in a list. A button gadget 61 and a texture gadget 62 are arranged on the work area through the same operation as described above. Also, a left click balloon 63 and a moving balloon 64 are arranged on the same work area as the work area where the gadget is arranged. The left click balloon 63 is connected to the button gadget 61 through the foot 63a (first connection tag), and the moving balloon 64 is connected to the texture gadget 62 through the foot 64a. The left click balloon 63 is connected to the moving balloon 64 via a chain arrow (second connection tag) 63b.

  Like the gadget, the balloons 63 and 64 are arranged on the work area from the balloon tab of the left balloon through a user drag-and-drop operation, edited by appropriately performing property setting and layout adjustment, and edited in the scene 1. Designed to be placed on the selected layer. Here, via the user's drag and drop operation, the foot of the balloon is connected to the gadget, and the chained arrow is connected to another balloon.

  As a result, the execution process related to the GUI can be intuitively associated with the gadget, for example, by connecting the balloon that defines the animation process to the gadget that is the object of the animation process via the connection operation of the foot of the balloon. In addition, it is possible to intuitively associate execution processes related to GUIs, for example, by connecting a balloon defining a user operation detection process to a balloon defining a gadget movement animation process via a chain arrow connection operation. it can.

  For example, depending on the type of balloon, such as a balloon that waits for 1 second, it may not be necessary to connect to a gadget. In addition, when balloons are connected via a chained arrow, after the execution process defined in the connection source balloon ends, the execution process defined in the connection destination balloon starts, A plurality of execution processes can be chained. On the other hand, when the balloon is not connected to another balloon via the chain arrow, the execution process defined by the balloon is started together with the execution of the scene where the balloon is arranged.

  In consideration of operability during editing work, it is desirable that the gadget and the balloon be displayed so as to be visually recognized and recognized on the same work area. For this purpose, for example, a visual effect such as adding a shadow display to the outline of the balloon or finely moving the balloon may be added.

  Here, when the scene being edited on the work area shown in FIG. 6 is executed, when the button is left-clicked by the user, a button pressing animation is displayed, and then the image is displayed to the left. A moving animation is displayed.

  FIG. 7 is an explanatory view partially showing another example of the edit screen in the scene edit mode.

  In the editing screen shown in FIG. 7, a button gadget 71 and two texture gadgets 72 and 73 including different image resources are arranged on the work area. In addition, a moving balloon 74, a fade-in balloon 75, and a fade-out balloon 76 are arranged on the same work area as the work area in which the gadgets 71 to 73 are arranged. The moving balloon 74 is connected to the button gadget 71 via its legs 74a, and the fade-in balloon 75 and the fade-out balloon 76 are connected to the upper and lower texture gadgets 72 and 73 via the legs 75a and 76a, respectively. It is connected to the. Here, the moving balloon 74 is connected to the fade-in balloon 75 and the fade-out balloon 76 via two chain arrows 74b and 74c, respectively.

  In addition, when balloons are connected via a chained arrow, after the execution process defined in the connection source balloon ends, the execution process defined in the connection destination balloon starts, A plurality of execution processes can be chained. On the other hand, when the balloon is not connected to another balloon via the chain arrow, the execution process defined by the balloon is started together with the execution of the arranged scene.

  Here, when the scene being edited on the work area shown in FIG. 7 is executed, the execution process defined by the moving balloon 74 is executed along with the execution of the scene, and an animation in which the button moves downward is performed. Is displayed. When the moving animation is completed, the execution process defined by the fade-in balloon 75 and the fade-out balloon 76 connected to the moving gadget 74 is started at the same time, and an animation in which the upper and lower images fade in and fade out respectively. Is displayed.

(Scene list mode)
The main processing operation of the GUI editing apparatus 100 in the scene list process (S200) will be described. In the scene list process (S200), first, a list screen is provided on the output unit 140 of the GUI editing apparatus 100. In the scene list process, the list display processing unit 128 reads information about the scenes constituting the GUI from the execution information storage unit 114 and displays the information on the output unit 140. Then, the list display processing unit 128 and the output unit 140 perform processing related to list display of edited scenes and confirmation / editing of transition between scenes by a user operation via the input unit 130.

  Hereinafter, the work flow in the scene list mode will be described with reference to FIGS. 8 and 9.

  FIG. 8 is an explanatory diagram showing an example of the editing screen in the scene editing mode.

  In FIG. 8, the editing work of the scene 1 is being performed, and a texture gadget 81 including an image resource serving as a background display and a list gadget 82 are arranged on the work area. Below the texture gadget 81, a resource 81a for displaying an operation description for prompting the user to operate is arranged. The list gadget 82 includes a texture gadget 83 including a resource of the graphic symbol “menu” and a text “menu”. A list of combinations with the text gadget 84 is displayed in a line format.

  In addition to these gadgets 81 to 84, a balloon 86, a key input balloon 87, and a scene transition balloon 88 are arranged on the work area, along with "when the nth line is reached". For example, the foot 86a of the balloon 86 is connected to the texture gadget 83 on the second line of the list gadget 82 "when it comes to the second line". The balloon 86 "when it comes to the second line" is connected to the "> key input" balloon 87 via the chain arrow 86b, and the "> key input" balloon 87 is connected to "scene 2" via the chain arrow 87a. Connected to "Transition" balloon.

  Therefore, when this scene is executed, for example, when an input operation of the “>” key is detected in a state where the list item in the second row is selected on the list, the scene 1 is changed to the scene 2. Transition is executed.

  FIG. 9 is an explanatory diagram illustrating an example of a list screen in the scene list mode.

  In the scene list mode, a list screen as shown in FIG. 9 is displayed on the output unit 140 of the GUI editing apparatus 100. In FIG. 9, the edited scenes 1 to 10 are displayed in a list together with an arrow 97 indicating the transition of the scene. In addition, an arrow 97 representing the transition of the scene is provided with an explanation column 98 that can display information on the transition condition and supplementary explanation of the transition, for example. Here, scene 1 (91) is a main menu scene, and scene 2 (92), scene 5 (93), and scene 8 (94) are respectively a first music submenu and a first video submenu. It is a scene of a menu and a 1st image submenu.

  The scene transition will be described using the music submenu as an example. The music submenu includes first to third submenus edited as scenes 2 to 4 (92, 95, 96). Display switching between the submenus is performed between the first submenu and the second submenu, and between the second submenu and the third submenu, for example, through a user operation. . In addition, display switching between the sub menu and the main menu is also performed between the first sub menu and the main menu and between the third sub menu and the main menu.

  Therefore, in the scene edit mode, between scene 1 (91) and scene 2 (92), between scene 2 (92) and scene 3 (95), scene 3 (95) and scene 4 (96) Between the scene 4 (96) and the scene 1 (91), the scene transition balloon is set so as to correspond to the switching of the display of the main menu / submenu. In the scene list mode, the scene transition can be set / changed by dragging and dropping the arrow 97 representing the scene transition.

(Scene playback mode)
The main processing operation of the GUI editing apparatus 100 in the scene reproduction process (S300) will be described. In the scene reproduction process (S300), first, a reproduction screen is provided on the output unit 140 of the GUI editing apparatus 100.

  FIG. 10 is a flowchart showing an example of a work flow of scene reproduction processing.

  In the scene playback mode, the GUI edited in the scene editing mode is played back (preview). In the scene playback process (S300), as shown in FIG. 10, after the initialization process (S310) is performed, the execution process defined by the balloon is performed until all the processes defined by the balloon are completed. Each frame is sequentially executed as a process for each frame (S320). That is, when the frame rate of the GUI animation is set to 60 frames per second, the process for each frame (S320) is repeated 60 times per second. It should be noted that in order to end the scene reproduction process (S300) even when the user performs a mode switching operation, the presence or absence of a mode switching interrupt operation is detected after the processing for each frame (S320). (S350).

  In the initialization process (S310), the reproduction processing unit 126 reads information on a predetermined process definition part from the execution information storage unit 114 and adds it to the execution list. In addition, information regarding a predetermined screen component is read from the execution information storage unit 114, and image data corresponding to the screen component is displayed on the output unit 140 based on the setting property.

  In the process for each frame (S320), the reproduction processing unit 126 and the output unit 140 perform the update process for each frame of the balloon (S324) on the process definition part included in the execution list, and display the result of the update process. Is done. Further, in the process for each frame (S320), the reproduction processing unit 126 and the execution information storage unit 114 exclude a predetermined process definition part from the execution list or add it to the execution list as necessary.

  FIG. 11 is a flowchart showing an example of the work flow of the initialization process.

  In the initialization process (S310), among the balloons included in the scene to be played back, there is a balloon that is not connected from other balloons via a chained arrow, that is, a balloon that starts the execution process defined along with the execution of the scene. It is added to the execution list (S312). On the playback screen, objects corresponding to gadgets included in the scene to be played back are arranged as edited in the scene edit mode (S314).

  FIG. 12 is a flowchart showing an example of a work flow of processing for each frame.

  In the frame-by-frame processing (S320), first, it is detected whether or not an interrupt operation has been performed by the user who selects the pause / resume of the scene reproduction processing (S300) (S322). Here, when pause is not selected, that is, when a scene is being played back, subsequent processing is executed, and when pause is selected, execution of the process for each frame (S320) is ended. (S324).

  If a scene is being played back, an update process for each frame defined for each balloon is executed for all balloons included in the execution list (S324). The details of the update processing for each frame of the balloon (S324) will be described later with reference to FIG. If there is a balloon that does not require execution of the update process due to the execution of the update process for each frame of the balloon (S324) (S326), the balloon is excluded from the execution list (S328), and the subsequent frame It is not executed in every process (S320). When the balloon excluded from the execution list is connected to another balloon via the chain arrow (S330), the other balloon connected is added to the execution list (S332). As a result, the execution of the frame-by-frame processing (S320) related to the frame ends.

  FIG. 13 is a flowchart illustrating an example of a work flow of update processing for each frame of a balloon.

  The update process for each frame of balloons (S324) will be described using a moving balloon as an example. First, it is confirmed whether the foot of the moving balloon is connected to the gadget, that is, whether it is associated with the gadget (S342). A moving balloon is a balloon that defines a moving animation for an associated gadget. For this reason, when it is not associated with the gadget, it is not necessary to execute the update process (S324) for each frame of the balloon, so the execution of the update process is terminated.

  If it is connected to the gadget, the set number of frames set as the property of the moving balloon is compared with the number of execution frames actually reproduced in the scene reproduction process for the moving animation (S344). Here, the set number of frames for the movement balloon is defined as the number of frames required for movement from the set movement start point to the movement end point.

  When comparing the number of set frames with the number of execution frames, if the number of execution frames is less than the set number of frames, the object corresponding to the gadget has not reached the movement end point, so the position corresponding to the number of execution frames The object is displayed (S346). On the other hand, if the number of execution frames is greater than or equal to the set number of frames, the object has reached the movement end point, and therefore the object is displayed at the movement end point (S348). When the number of execution frames is equal to or greater than the set number of frames, the mobile balloon is notified that the update process is no longer necessary (S350), and the update process for each frame of the balloon for the mobile balloon is performed. The execution of (S324) is terminated.

  As a result, the moving balloon that no longer needs to be updated is excluded from the execution list and is not executed in the subsequent frame-by-frame processing (S320). If the moving balloon A is connected to the moving balloon B, the moving balloon B is added to the execution list after the moving balloon A is excluded from the execution list, so that the subsequent frame-by-frame processing (S320). Then, the execution process defined by the moving balloon B is performed. Therefore, when the movement animation process defined by the movement balloon A is completed, the movement animation process defined by the movement balloon B is started.

  As described above, according to the GUI editing apparatus 100 according to the present embodiment, the gadget (screen configuration part) and the balloon (process definition part) are arranged and designed on the same work area, and on the same work area. By associating, execution processing related to the GUI is defined for the gadget. The balloon is associated with the gadget by visually connecting the balloon foot (first connection tag) to the gadget. Thereby, the GUI creator can edit the execution process related to the GUI intuitively in association with the gadget through the operation of connecting the feet of the balloon.

  As mentioned above, although preferred embodiment of this invention was described referring an accompanying drawing, this invention is not limited to the example which concerns. It is obvious for those skilled in the art that various changes or modifications can be conceived within the scope of the technical idea described in the claims. It is understood that it belongs to.

It is explanatory drawing which shows the general preparation environment and use environment of GUI. It is explanatory drawing which shows the GUI editing apparatus which concerns on one Embodiment of this invention. It is a flowchart which shows the whole work flow of the GUI editing method which concerns on one Embodiment of this invention. It is a flowchart which shows an example of the work flow of a scene edit process. It is explanatory drawing which shows an example of the edit screen in scene edit mode. It is explanatory drawing which shows the other example of the edit screen in scene edit mode. It is explanatory drawing which shows partially the other example of the edit screen in scene edit mode. It is explanatory drawing which shows an example of the edit screen of scene edit mode. It is explanatory drawing which shows an example of the list screen of scene list mode. It is a flowchart which shows an example of the work flow of a scene reproduction | regeneration process. It is a flowchart which shows an example of the work flow of an initialization process. It is a flowchart which shows an example of the work flow of a process for every flame | frame. It is a flowchart which shows an example of the work flow of the update process for every flame | frame of a balloon.

Explanation of symbols

DESCRIPTION OF SYMBOLS 100 GUI editing apparatus 110 Memory | storage part 112 Editing information memory | storage part 114 Execution information memory | storage part 120 Processing control part 122 Layout design part 124 Association part 126 Reproduction | regeneration processing part 128 List display process part 130 Input part 140 Output part 150 Conversion part

Claims (9)

A GUI editing apparatus for editing a GUI executed and processed via a GUI-compatible application,
The same screen configuration part that configures the GUI screen and the process definition part that has the first connection tag for visually expressing the association with the screen configuration part and defines the execution process related to the GUI An arrangement design unit for designing the arrangement on the work area of
In order to define the execution process for the screen component, the process definition part is associated with the screen component on the same work area by connecting the first connection tag to the screen component. An association for
A GUI editing apparatus comprising:   The process definition part has a second connection tag for visually expressing an association with another process definition part, and the association unit connects the second connection tag to the other process definition part. The GUI editing apparatus according to claim 1, wherein the other process definition part is associated with the process definition part on the same work area.   The GUI editing apparatus according to claim 1, wherein the screen configuration part and the process definition part are displayed so as to be visually recognized and recognized on the same work area.   The GUI editing apparatus according to claim 1, further comprising a reproduction processing unit for reproducing the edited GUI. A GUI editing method for editing a GUI executed and processed via a GUI-compatible application,
The same screen configuration part that configures the GUI screen and the process definition part that has the first connection tag for visually expressing the association with the screen configuration part and defines the execution process related to the GUI A layout design step for designing a layout on the work area of
In order to define the execution process for the screen component, the process definition part is associated with the screen component on the same work area by connecting the first connection tag to the screen component. An association step;
A GUI editing method, comprising:   In the associating step, a second connection tag provided in the process definition part for visually expressing an association with another process definition part is connected to the other process definition part, whereby the process is performed. 6. The GUI editing method according to claim 5, further comprising the step of associating the other process definition part with a definition part on the same work area.   6. The GUI editing method according to claim 5, further comprising a step of displaying the screen component part and the process definition part so as to be visually recognized and recognized on the same work area.   The GUI editing method according to claim 5, further comprising a reproduction processing step for reproducing the edited GUI. A screen configuration part that configures a GUI screen and a process definition part that has a first connection tag for visually expressing an association with the screen configuration part and defines an execution process related to the GUI are the same. Layout design means for layout design on the work area,
In order to define the execution process for the screen component, the process definition part is associated with the screen component on the same work area by connecting the first connection tag to the screen component. Association means,
As a program to make the computer function.

Images