JP7467103B2 - Display control method for application creation screen, program and information processing device - Google Patents

Description

Article 30, paragraph 2 of the Patent Act applies. Date of website posting: July 25, 2019 Website address: https://www.canon-elec.co.jp/solution/mobile/handyterminal/#about

The present invention relates to a display control method, program, and information processing device for an application creation screen in a tool for creating applications to be executed on a device.

When creating a desired application that runs on a device (e.g., a handheld terminal for reading barcodes), the user must write the application in a predetermined language such as XML (eXtensible Markup Language) or HTML (HyperText Markup Language). Writing requires a high level of proficiency in the language. This makes it difficult for users to create applications themselves. Users outsource the creation of applications to other companies, but the outsourcing costs are not a problem for users who use many devices. However, for users who use a small number of devices, the outsourcing costs are a problem, reducing their desire to purchase devices. On the other hand, according to Patent Document 1, a tool is provided as an image editing tool that can perform desired processing on displayed images.

JP 2017-62797 A

If users can easily create applications for devices, outsourcing costs can be reduced and they will be more willing to purchase the devices. Furthermore, even for users who are proficient in programming languages, it is preferable for program development work to be made easier. In particular, it is convenient for users if they can easily create applications while visually recognizing the operation, including screen transitions, of applications running on a device. Therefore, the object of the present invention is to enable users to easily create applications while visually recognizing the operation, including screen transitions, of applications running on a device.

In view of the above problems, a display control method for an application creation screen according to the present invention includes:
1. A display control method for an application creation screen that assists in creating an application that runs on a specific device, comprising:
placing a first icon to be displayed on the device based on a drag operation by a user in a creation area within the application creation screen;
placing a second icon, which transitions from the first icon, in the creation area based on a drag operation by a user on the device;
a step of arranging an operation area corresponding to an operation unit, the operation area being set as a condition for a transition from the first icon to the second icon in the device in response to a specific user operation on the operation unit, together with the first icon in the creation area;
placing, in the creation area, a transition display line connecting the first icon and the second icon in response to a drag operation from the operation area to the second icon ;
a step of arranging a processing icon that designates a process to be executed when transitioning from the first icon to the second icon on the device based on a drag operation by a user;
displaying the process icon on the transition display line;
The present invention is characterized by having the following.

According to the present invention, users can create applications while easily understanding the screen transitions of the application.

FIG. 1 is a diagram showing a system according to an embodiment. FIG. 1 illustrates an information processing device. FIG. 13 is a diagram illustrating an application creation screen. 1A and 1B are diagrams illustrating examples of how a page is displayed on a device. A diagram explaining a page. FIG. 13 is a diagram illustrating a page addition menu. A diagram explaining detailed settings. FIG. FIG. 13 is a diagram for explaining a layout menu. A diagram explaining the placement of labels and text boxes. FIG. 13 is a diagram illustrating a check menu. FIG. FIG. 13 is a diagram for explaining a data menu. A diagram explaining file operations. FIG. FIG. FIG. 1 is a diagram for explaining an autoregressive transition. FIG. 1 is a diagram for explaining data transfer settings. 11A and 11B are diagrams for explaining the relationship between the color of a transition display line and the color of an operation object. 11 is a flowchart showing a process of creating project data. 11 is a flowchart for explaining a conversion process into an XML file. A section explaining the device. FIG. 2 is a diagram illustrating the surface of the device. A diagram illustrating the back of the device.

The embodiments are described in detail below with reference to the attached drawings. Note that the following embodiments do not limit the invention according to the claims, and not all combinations of features described in the embodiments are necessarily essential to the invention. Two or more of the features described in the embodiments may be combined in any desired manner. In addition, the same reference numbers are used for the same or similar configurations, and duplicate descriptions are omitted.

The first embodiment of the present invention will be described in detail below with reference to the drawings. FIG. 1 shows an example of an information processing system configured with an information processing device 500 in which an application creation tool in this embodiment is installed, and a device 400 (e.g., an information reading device, etc.) that installs and executes the created application. In this way, the information processing device 500 outputs an application created by the application creation tool operating on the information processing device 500 in a format such as XML, and transmits it to the device 400 via the server S or directly. The device 400 runs the application by executing the XML file of the application.

<Description of Information Processing Device for Running Application Creation Tool>
As shown in FIG. 2, an information processing apparatus 500 executes an application creation tool 506, which enables a user to create an application with the assistance of the application creation tool 506.

The CPU (Central Processing Unit) 501 executes an application creation tool 506 stored in a storage device 505. The storage device 505 may include a RAM, a ROM, a hard disk drive (HDD), a flash memory, etc. The storage device 505 stores the application creation tool 506, application project data 507, and an application XML file 508. The project data 507 is data for managing the creation of an application. The XML file 508 is the application itself, which is transferred to the device 400 and executed on the device 400.

The input device 502 is a device that accepts user operations, such as a keyboard, mouse, or touch panel. The display device 503 is a liquid crystal display device, for example. The communication device 504 has a communication circuit that performs wired LAN (Local Area Network) communication, wireless LAN communication, and short-distance wireless communication to communicate with the server S and the device 400.

<Application creation screen>
3 shows an example of an application creation screen 1 of the application creation tool 506 in this embodiment. As described above, the application creation tool 506 in this embodiment is installed in the information processing device 500 for use. However, the information processing device 500 connected to a cloud server via a network may be configured to display and control the application creation tool operating on the cloud server via a web browser or the like. In either case, the application creation screen of the application creation tool is displayed on the display device 503 of the information processing device 500.

Figure 3 shows creation screen 1 during the creation of an application, which CPU 501 displays on display device 503 in accordance with application creation tool 506. CPU 501 places various screen objects on creation screen 1 in accordance with user operations input from input device 502. CPU 501 stores control information such as the positions of the placed screen objects and transition conditions in project data 507. When project data 507 is completed and a conversion instruction to XML file 508 is input by the user, CPU 501 converts project data 507 into XML file 508.

Pages 10, 11, 12, and 13 are arranged on the creation screen 1 shown in FIG. 3 based on user operations. Pages 10, 11, 12, and 13 are display screens displayed on the display device of device 400 as shown in FIG. 4. Pages 10, 11, 12, and 13 may also be called icons, page icons, or page objects.

In FIG. 3, the transition display line 20 is a line object that visually allows the user to understand that the page displayed on the display device of the device 400 is transitioning from page 11 to page 12.

The branch icon 30 is an object that is set so that page 10 branches into pages 12 and 13, and that allows the user to visually understand this. When page 10 is displayed on the device 400, if a first condition is met, the page transitions to page 12, and if a second condition is met, the page transitions to page 13. The first and second conditions are stored in association with the branch icon 30.

The branch display line 31a is a line object that connects the branch icon 30 and page 13. The file operation icon 40 is an icon that indicates that a file operation should be performed when transitioning from page 11 to page 12, and that allows the user to understand this.

At the bottom of the creation screen 1, a command selection section 100 is displayed in an area surrounded by a dotted line. At the right of the creation screen 1, an option selection section 200 is displayed in an area surrounded by a dotted line.

FIG. 5 shows details of page 10. Page 10 has a placement area 19 in which labels LB, text boxes TB, etc., described later, are placed. In addition, operation area 21 has four operation objects provided corresponding to the L key, F1 key, F2 key, and R key provided on device 400. The colors of the L key, F1 key, F2 key, and R key provided as hard keys on device 400 correspond to the colors of the four operation objects, respectively. For example, the L key and the operation object corresponding to the L key may be the same or similar colors. The arrangement of each object in operation area 21 and the arrangement of each key on device 400 may be similar. In other words, an image that directly copies the shape and arrangement of multiple hard keys on device 400 may be displayed in operation area 21.

The number, color, and layout of hard keys may differ depending on the device model. The CPU 501 may accept the designation of identification information indicating the device model from a menu selectable from the option selection unit 200 or other portion, and display the operation area 21 having the number, color, and layout of hard keys corresponding to the identification information.

Now, the meaning of each part displayed in Figure 3 will be explained in more detail. First, on page 10, a layout area 19 is displayed at the top, which is the display screen portion that is actually displayed on the display screen of the device on which the application runs, and below that, an operation area 21 is displayed that corresponds to the operation portion of device 400. The operation portion displayed in this operation area 21 corresponds to hard keys such as tactile keys provided on device 400 or its peripheral devices, and may also be soft keys displayed on the display screen.

Page 11 shows that a page number PG is displayed at the top, a page title PT below that, and a text input section TB and corresponding label LB below that. The CPU 501 automatically assigns a page number when the user places the page on the creation screen 1. In other words, the page numbers may be consecutive numbers. The page title PT, label LB, and text input section TB are assigned to page 11 using commands prepared in the command selection section 100, in a manner described below.

In the creation screen 1, a transition display line 20 extends from page 11 to page 12. This transition display line 20 is drawn from the edge of page 11 to the edge of page 12, starting from the R button 11a arranged in page 11 to the center of page 12, and is given a figure such as an arrow so that it can be visually understood that the transition from the R button 11a provided on page 11 to page 12 is made. The operation area 21 including this R button 11a is displayed below the display screen part that displays on the display screen of the device 400 a display corresponding to a colored hard key provided on the device 400. The transition display line 20 may be drawn as a line of the same color as the color of the R button 11a. This allows the user to intuitively understand which screen will be transitioned to by pressing which button on the device 400.

In this embodiment, in addition to the R button 11a, the page 11 is also provided with an F2 button 11b, an F1 button 11c, and an L button 11d. These buttons correspond to the hard keys provided on the device 400, and are displayed in color as colored buttons displayed in the same color as the hard keys.

In this embodiment, the R button 11a is set to yellow, the F2 button 11b to green, the F1 button 11c to blue, and the L button 11d to red. This is displayed with reference to the hard keys of the device 400 that is set in advance on the application creation tool as the device on which the application runs. That is, the CPU 501 accepts input of the type and model name of the device 400 in the option setting function of the application creation tool 506, and places the operation object corresponding to the input type and model name of the device 400 in the operation area 21. Therefore, the number and color of the operation objects may differ depending on the type and model name of the device 400. The application creation tool 506 has information on the number and color of the operation objects in association with the type and model name of the device 400. Note that information on the operation objects associated with the type and model name of the device 400 may be acquired from an external device.

The CPU 501 displays the transition display line 20 in the same color as the associated hard key. In the example of FIG. 3, the transition display line 20 extending from the yellow R button 11a to the page 12 is displayed in yellow.

A branch icon 30 is displayed along the transition display line 20, indicating that the transition destination will differ depending on the set branching condition. In FIG. 3, the text input section TB of page 11 is set so that if the user has input text, it transitions to page 12, and if no text has been input, it transitions to page 13, and the branch icon 30 indicates that some branching condition has been set. When the user selects the branch icon 30, the CPU 501 may display a pop-up showing the contents of the conditional branch and accept changes to the contents. This allows the user to confirm and change the branching condition.

In addition, a file operation icon 40 is displayed beyond the branch icon 30 on the transition display line 20. This file operation icon 40 indicates that a specific file is currently set to be operated. For example, by specifying a specific file path and the data to be written, it is possible to specify writing specific data to a specified file. The data to be written can be, for example, the results of reading with a barcode reader on the device 400.

The file operation icon 40 may be set to execute data transfer. For example, when the F1 key is pressed, the device 400 may be set to scan an image or code and transfer the scan result directly to a specified path, and return to the same screen or transition to another screen.

A command selection section 100 is also displayed at the bottom of the creation screen 1. Figure 3 shows one example. When the cursor (mouse pointer) is placed (e.g., mouse over) on a circled icon or specified, the CPU 501 displays a menu included in the respective icon. The user further selects one of these to select a command. An option selection section 200 is also displayed on the right side of the creation screen 1. Figure 3 shows one example, and is assigned control instructions for the LED built into the device body, operation settings for the barcode reader, and device body setting functions, and optional operations can be specified by selecting one of these. More specific details will be explained in the following explanation.

<New page placement>
When the cursor is placed on "page" at the left end of the command selection section 100 in Fig. 3, the CPU 501 may display a menu 111 included in the "page" icon 110 so as to surround the "page" icon 110, as shown in Fig. 6. Here, the menu 111 has only a "layout page function" indicated by "L". Note that Fig. 6 shows a state in which the cursor is placed on the layout page icon indicating the "layout page function" in the menu 111 and selected. At this time, the CPU 501 may switch the text "page" displayed on the "page" icon 110 to an explanation of the selected command, i.e., "layout page".

When the layout page icon "L" indicating this "layout page function" is selected and dragged to the creation area 300 at the top, and it is detected that the page has been dropped, the CPU 501 arranges and displays page 10 as a new page. The new page may be arranged where it is dropped, or, as shown in FIG. 6, may be automatically aligned with the top left corner of the screen as a reference. FIG. 3 shows the state where this operation has been performed multiple times on the creation area 300, and in addition to page 10, pages 11, 12, and 13 have been arranged.

<How to connect pages>
Next, how to connect pages together will be described. Fig. 7 shows a state in which the R button 11a of the page 11 arranged in the creation area 300 has been selected. When the R button 11a is selected by the user, the CPU 501 displays operation parameters 11b. The operation parameters 11b define the content that the device 400 should execute when the R button 11a is pressed while the page 11 is being displayed on the device 400.

Figure 8 shows the state where drag and drop is performed from the R button 11a to the page 12 in this state. In Figure 8, the CPU 501 displays a transition display line 20 from the center coordinates of the R button 11a to the center coordinates of the page 12. In this way, when drag and drop is detected from any operation object (button) in the operation area 21 displayed at the bottom of the page 11 to any page, the CPU 501 recognizes that the page to be transitioned to when the hard key corresponding to that button is pressed (instructed) is specified, and stores this transition condition in the project data. In other words, the user can specify the page transition by drag and drop. Note that the start point and end point of the transition display line 20 are the center coordinates of the R button 11a and the center coordinates of the page 12 as described above. However, only the portion of the transition display line 20 from the end (edge) of the page 11 to the end of the page 12 may actually be drawn. Alternatively, the transition display line 20 may be drawn from the center coordinates of the R button 11a to the center coordinates of the page 12, and the R button 11a and the page 12 may be displayed superimposed on the transition display line 20. They all look the same.

The transition display line 20 may display multiple arrows at a predetermined interval from the R button 11a to the page 12. This has the effect of making the direction of the screen transition easier to understand. In particular, when a branch icon 30 or a file operation icon 40 is displayed on the transition display line 20 as shown in FIG. 3, the visibility of the transition direction is improved. Also, in this embodiment, as an example of arranging the transition display line 20, drag and drop from the R button 11a to the page 12 with the above-mentioned operation parameter 11b displayed has been described, but the transition display line 20 may be arranged even if the same operation is performed with the operation parameter 11b hidden.

<How to select the display layout for each page>
Next, a method for selecting the display layout of each page will be described. As shown in FIG. 9, when the cursor is placed on the "layout" icon 120 included in the command selection unit 100, the CPU 501 displays a menu including "L: label" 121, "T: text box" 122, and "C: caption" 123 included in the "layout" icon 120. A display layout can be selected by selecting a desired function from the menu and dropping it on a page to be set. Note that L is a command for arranging the label LB. T is a command for arranging the text box TB. C is a command for arranging the page title PT. Any text can be set in the label LB and the page title PT.

Figure 10 shows the state in which the label icon 121 indicating "L: label" and the text box icon 122 indicating "T: text box" shown in Figure 9 have been dropped onto page 11. In response to this user operation, the CPU 501 adds and displays the label LB and text box TB on page 11. This makes it possible, for example, to set a branching condition corresponding to the input state in the text box when the R button 11a on page 11 is pressed, and to set a screen transition according to the result. The CPU 501 stores the position and text content (character string) of the label LB on page 11, and the position of the text box TB in the project data 507.

<How to set up the check (branch) function>
Next, a method of setting the check (branch) function will be described. As shown in FIG. 11, when the cursor is placed on "check" 130 included in the command selection section 100, the CPU 501 displays the "check" menu. The "check" menu includes "I: Input check" 131, "D: Data search" 132, and "T: Text size check" 133. "I: Input check" 131 is a command for determining whether text is input in the text box TB. "D: Data search" 132 is a command for checking the presence of text input in the text box TB by searching for and acquiring the text in another text box TB. Alternatively, "D: Data search" 132 may check whether a specified data exists in a specified file. "T: Text size check" 133 is a command for checking whether the size (number of characters) of the text input in the text box TB is within a specified size. A check function can be set by selecting a desired function from the list and dropping it on the desired location (text box TB). For example, the CPU 501 associates the selected check function with the text TB and stores it in the project data 507. The drop position of the check function may be an operation object that serves as a trigger for the check function.

As an example of setting a conditional branch, assume that in FIG. 11, the data search icon 132 indicating "D: Data Search" is selected and dropped onto the R button 11a on page 11. When the CPU 501 detects this user operation, it places a branch icon 30 on the transition display line 20 extending from the R button 11a, as shown in FIG. 12.

When this branch icon 30 is clicked and selected, the CPU 501 accepts user input for setting conditions for conditional branching. In this case, because "D: Data search" is specified, the condition is set to be that specific data exists in a specific file. In other words, when the R button 11a is pressed on the device 400, if the condition set in the branch icon 30 is met, the device 400 is set to transition to page 12. If the condition is not met, there is no transition from page 11.

As shown in FIG. 3, the transition destination when the conditions of the branch icon 30 are not met can also be set to a page other than 11. By adding a new page 13 in the state of FIG. 12 and dragging and dropping from the branch icon 30 to the page 13, the branch display line 31a shown in FIG. 3 is displayed. By setting in this way, it is possible to set a transition to page 13 when the conditions of the branch icon 30 are not met. The CPU 501 stores in the project data 507 that a transition to page 13 will occur when the conditions of the branch icon 30 are not met.

When setting a check function, the location where the icon indicating the desired function is dropped is not limited to the R button 11a described above, but it may be possible to register it by dropping it on the transition display line 20. It is also possible to register it on the branch display line 31a, etc., and it is easy to set it so that when the conditions are not met with the branch icon 30, a different condition judgment is made and the transition screen changes depending on the result.

<How to set file operations>
Next, a method for setting a file operation will be described. When the cursor is placed on "data" 140 included in the command selection section 100, the CPU 501 displays a data save icon 141 corresponding to the "S: Save Data" command included in the "data" menu, as shown in Fig. 13. By dropping the data save icon 141 at a location where the user wishes to set "S: Save Data", the device 400 can be set to save data at the dropped location. This "Save Data" menu is an example of a file operation, and the device may be configured to be able to set other file operations.

In FIG. 13, when it is detected that the data save icon 141 has been dropped onto the R button 11a, the CPU 501 places the file operation icon 40 on the transition display line 20 extending from the R button 11a, as shown in FIG. 14.

When this file operation icon 40 is clicked and selected, the CPU 501 accepts user input regarding the settings of the file operation contents. In this case, since "S: Save data" is specified, it may be set to save the specified data in a specified file path. The specified file path may be, for example, a file path in the storage device of the device 400, a file path on a network drive, or a transmission address for the file.

When setting a file operation function, the location where the icon representing the desired function is dropped is not limited to the R button 11a described above, but may be on the transition display line 20.

<How to set optional features>
Next, a method for setting optional functions will be described. As described above, the option selection section 200 is displayed on the right side of the screen of the creation screen 1. This includes menus such as "Main body settings", "External printer printing", "LED control", and "Barcode reading settings". "Main body settings" refers to the operation settings of the device 400. "External printer printing" refers to the print settings (e.g., print layout settings, etc.) of the external printer connected to the device 400. "LED control" refers to the settings for controlling the lighting of the light-emitting diode provided in the device 400. "Barcode reading settings" refers to the read settings (e.g., one-dimensional, two-dimensional, etc.) of the barcode reader provided in the device 400.

As one example of this, the "LED control" function will be described. As shown in FIG. 15, when an LED control menu 210 indicating the "LED control" function is selected from the option selection section 200 by hovering the mouse over it, the CPU 501 further displays an additional icon 211. When the additional icon 211 is clicked, the CPU 501 adds and displays an LED icon 212.

In the example of FIG. 15, when it is detected that the LED icon 212 has been dropped onto the R button 11a, the CPU 501 places a notification icon 51 on the transition display line 20 extending from the R button 11a, as shown in FIG. 16. This notification icon 51 is set to turn on an LED provided on the device 400 and provide various notifications to the user.

Immediately after the LED icon 212 is dropped, the default settings are used, but when the notification icon 51 is clicked and selected, the CPU 501 accepts a change to the default settings. This makes it possible to change the lighting conditions for lighting the LED provided on the device 400. Clicking the LED icon 212 may display a pop-up for making detailed settings regarding how the LED will operate.

Note that by dropping the LED icon 212 onto the R button 11a, the notification icon 51 is placed at the front of the transition display line 20 (towards the R button 11a), but this is merely one example. By dropping the notification icon 51 somewhere else on the transition display line 20, for example behind the file operation icon 40, the timing at which the LED operates can be changed. Also, when setting the notification setting function, the location at which the icon indicating the desired function is dropped is not limited to the R button 11a described above, but may be the transition display line 20. This allows notifications to be executed at the desired timing.

As explained above, various actions can be set by dropping each icon onto the R button 11a, but additional actions can also be set for other buttons. In this case, by showing the transition display lines indicating the screen transition with lines of the same color as each button as described above, the user can easily visually recognize the action based on the program. Note that although it is expressed as a "line," the transition display line does not necessarily have to be a line, but can be a collection of figures such as circles or other shapes connected together, and includes anything that displays a visual transition from page 11 to page 12.

As shown in FIG. 17, the transition display line 27 may be placed by dragging and dropping the R button 11a onto itself. In this example, this means that even if the hard key on the device 400 corresponding to the R button 11a is pressed, no page (screen) transition will occur. By dropping the above-mentioned file operation icon 40 or an icon related to option settings onto this transition display line 27 to add the desired function, it is possible to set the device 400 to execute only the desired function without transitioning screens.

18, by dragging and dropping the L button 10d onto the data transfer icon 52, the CPU 501 may place a transition display line 22 from the L button 11d to the data transfer icon 52. Note that this data transfer icon 52 has been selected in advance from the option selection unit 200 and added to the creation screen 1. The transition display line 22 and the data transfer icon 52 indicate that the device 400 will execute a data transfer when a hard key corresponding to the L button 11d provided on the device 400 is pressed. Note that in FIG. 18, a notification icon 51 is also placed to notify the user that the data transfer is successful (e.g., by turning on an LED). In this case, the transition display line 23 indicates that the transition to page 10 will occur when the data transfer is successful.

As shown in FIG. 19, by dragging and dropping the L button 10d onto the data transfer icon 52, the transition display line 22 is placed from the L button 10d towards the data transfer icon 52. It is preferable that the color of the L button 10d and the color of the transition display line 22 are the same color (e.g., red). By dragging and dropping the F1 button 10c onto the page 13, the transition display line 24 is placed from the F1 button 10c towards the page 13. It is preferable that the color of the F1 button 10c and the color of the transition display line 24 are the same color (e.g., blue). By dragging and dropping the F2 button 10b onto the page 12, the transition display line 25 is placed from the F2 button 10b towards the page 12. It is preferable that the color of the F2 button 10b and the color of the transition display line 25 are the same color (e.g., green). By dragging and dropping the R button 10a onto the page 11, the transition display line 26 is placed from the R button 10a towards the page 11. It is preferable that the color of the R button 10a and the color of the transition display line 26 are the same color (e.g., yellow). These colors may be the same as or similar to the colors of the hard keys provided on the device 400.

In this embodiment, the L button 10d displays the word "Send", which means data transfer, and the letter "L" is displayed above the L button 10d. The F1 button 10c displays the word "Inventory", which means inventory, and the letter "F1" is displayed above the F1 button 10c. The F2 button 10b displays the word "Return", which means return, and the letter "F2" is displayed above the F2 button 10b. The R button 10a displays the word "Lend", which means lending, and the letter "R" is displayed above the R button 10a. The label LB may also display the meaning of each button in larger letters. These letters can be edited in a dialogue that is displayed by selecting each button. The displays in this embodiment are merely examples, and are not limited to these.

<Application creation tool flow chart>
Creation of project data Fig. 20 shows the creation process of project data executed by the CPU 501 in accordance with the application creation tool 506. The order of each process can be freely changed as long as there is no contradiction and no technical contradiction occurs. When the application creation tool 506 is started, a creation screen 1 including a command selection section 100, an option selection section 200, and a creation area 300 is displayed on the display device 503.

In S1, the CPU 501 determines whether the user instruction input from the input device 502 is an instruction to add a page. When the "page" icon 110 is clicked or moused over and the "layout page function" in the menu 111 is selected, the CPU 501 determines that an instruction to add a page has been input and proceeds to S2. If the "layout page function" has not been selected, the CPU 501 proceeds to S3.

In S2, the CPU 501 adds a page in accordance with a user instruction input from the input device 502. Here, multiple pages may be added. The CPU 501 may move the position of the page in the creation area 300 in accordance with a user instruction input from the input device 502.

In S3, the CPU 501 determines whether the user instruction input from the input device 502 is a drag-and-drop of an operation button (operation object). For example, when any operation object (button) in the operation area 21 of a certain page is dragged and dropped onto another page, the CPU 501 proceeds to S4. As shown in FIG. 17, drag-and-drop within the same page is also possible. If it is not a drag-and-drop of an operation button (operation object), the CPU 501 proceeds to S5.

In S4, the CPU 501 places a transition display line 20 extending from an operation object on one page to another page in accordance with a user instruction input from the input device 502.

In S5, the CPU 501 determines whether the user instruction input from the input device 502 is a drag and drop of any command in the command selection unit 100. The command may be, for example, the "L: label" 121, "T: text box" 122, or "C: caption" 123, which are commands in the "layout" icon 120. Or, it may be the "I: input presence check" 131, "D: data search" 132, or "T: text size check" 133, which are commands in the "check" 130. Or, it may be the data save icon 141, which is a command in the "data" 140. Or, it may be any command in the option selection unit 200. If the user instruction is a drag and drop of any command in the command selection unit 100, the CPU 501 proceeds to S6. The same applies to any command in the option selection unit 200. If it is not a drag and drop of a command, the CPU 501 proceeds to S7.

In S6, the CPU 501 places the icon of the command selected by the user at the position where the command was dropped. For example, a branch icon 30, a file operation icon 40, a notification icon 51, etc. may be placed on the transition display line 20.

In S7, the CPU 501 determines whether the user instruction input from the input device 502 is an instruction for detailed settings. Detailed settings include setting characters for labels, setting branching conditions, and detailed conditions for notification settings. If the instruction is for detailed settings, the CPU 501 proceeds to S8. If the instruction is not for detailed settings, the CPU 501 proceeds to S9.

At S8, the CPU 501 accepts detailed settings according to user instructions input from the input device 502.

At S9, the CPU 501 determines whether the user instruction input from the input device 502 is to save project data 507. If the instruction is not to save project data 507, the CPU 501 returns to S1. If the instruction is to save project data 507, the CPU 501 creates project data 507 including the setting contents of each page arranged in the creation area 300 and the transition contents of each operation button, and saves the project data 507 in the storage device 505. Note that the saving of the project data 507 may be performed at any timing. The setting contents of a page include the position of the label on the page, the label characters, the label color, the position and size of the text box, the condition of the conditional branch, the transition page for each operation object, and the like. In any case, all of the information necessary to describe each page in XML format is stored in the project data 507.

Conversion to XML File FIG. 21 shows the process of converting project data 507 into an XML file 508, which is executed by the CPU 501 in accordance with the application creation tool 506.

At S11, the CPU 501 converts the project data 507 into an XML file 508.

In S12, the CPU 501 tests whether the XML file 508 can be executed normally on the device 400. For example, the CPU 501 detects whether there is an inappropriate page transition or command execution that cannot be executed normally on the device 400. In addition, it is verified whether transitions between all pages and options can be executed correctly.

In S13, the CPU 501 determines whether the XML file 508 is executable based on the test results. If the XML file 508 is executable, the CPU 501 proceeds to S14. In S14, the CPU 501 may save the XML file 508 in a pre-specified folder and transfer the XML file 508 to the device 400. If the XML file 508 is not executable, the CPU 501 proceeds to S15. In S15, the CPU 501 notifies the user of the error. The CPU 501 may display a notification on the display device 503 indicating which page the error is on or which command setting the error is on.

＜Other＞
In the embodiment described above, the operation area is displayed below each page in the application creation tool. However, this is merely an example. When each button is assigned to a hard key of the device 400, an XML file 508 may be generated that is configured so that the operation area is not displayed on the display screen of the device 400.

In this way, the user can set up a series of screen transitions using visual icons, etc. This allows the user to set up applications that run on the device without the need for programming by text input as in the past. This can improve the convenience of users in creating programs.

Although all pages and icons are arranged in the creation area 300, a layer function may be employed. By employing the layer function, the user can arrange pages and icons on each layer. The CPU 501 activates a layer designated by the user, and arranges pages and icons on the active layer. For example, names and attributes may be set for layers, and only pages and icons included in each designated name and attribute may be activated and displayed. In this case, the CPU 501 may display objects arranged on inactive layers, but prohibit the user from arranging those objects.

<Description of the device on which the application runs>
A device 400 on which an application created by an application creation tool runs will be described with reference to Figures 22, 23, and 24. The device 400 will be described as an information reading device that reads codes such as one-dimensional or two-dimensional codes, for example. The device 400 is, for example, a barcode reader, a mobile phone (smartphone), a tablet terminal, a handheld terminal, etc., and the target information terminal is one that can read codes.

As shown in FIG. 22, a CPU (Central Processing Unit) 401 executes a code reading program 411 and an application program (XML file 508) stored in a storage device 405. In addition to RAM, the storage device 405 may also include non-volatile storage media such as a hard disk drive (HDD) or flash ROM.

The input device 402 includes hard keys corresponding to operation objects arranged in the operation area 21. As shown in FIG. 23, the input device 402 includes an R key 480a, an F2 key 480b, an F1 key 480c, an L key 480d, etc.

The display device 403 is a liquid crystal display device or the like. The CPU 401 executes the XML file 508 to display various pages on the display device 403. In addition, when any key on the input device 402 is pressed, the CPU 501 displays the page to which the user is to transition that is associated with that key on the display device 403.

The notification device 409 is a light-emitting element such as an LED, a speaker that outputs sound, etc. When the lighting conditions according to the notification icon 51 are satisfied, the CPU 501 lights up the LED shown in FIG. 23, which is an example of the notification device 409.

The communication device 404 includes a communication circuit that enables the device 400 to communicate with the server S and the information processing device 500. The communication device 404 has, for example, a WLAN (Wireless Local Area Network) controller, a short-range wireless communication circuit, a modem that connects to a public line, and a wireless communication circuit for 5G or IoT.

The scanner device 410 is equipped with a marker light irradiation means and an illumination means using an LED or the like (not shown), and optically reads the code using an imaging element such as a CCD. As shown in FIG. 24, the reading window of the scanner device 410 may be provided on the back side of the device 400.

<Summary>
[Point 1]
According to the above-described embodiment, a display control method for an application creation screen (e.g., creation screen 1) that assists a user in creating an application that runs on a specific device 400 is provided. The CPU 501 places a first icon (e.g., page 11, etc.) including a placement area 19 that will be displayed on the device 400 based on a user operation in a creation area 300 in the application creation screen. The CPU 501 places a second icon (e.g., page 12, etc.) that transitions from the first icon in the device 400 in the creation area 300 based on a user operation. The CPU 501 displays an operation area including an operation object corresponding to the operation unit of the device 400 together with the first icon. Here, a specific user operation on the operation unit is set as a condition for transitioning from the first icon to the second icon. The CPU 501 displays a line (e.g., transition display line 20) connecting the first icon and the second icon in response to a drag operation (e.g., drag and drop) from the operation object to the second icon. This allows the user to easily create an application while visually recognizing the operation including the screen transition of the application that runs on the device 400.

[Points 2 and 3]
The line (e.g., the transition display line 20) may be displayed in a manner that allows the user to recognize the transition from the first icon to the second icon. For example, the line may include an arrow pointing from the first icon to the second icon. This will make it easier for the user to visually understand the relationship between the transition source icon and the transition destination icon.

[Points 4 to 6]
The start point of the line may be the operation object in the creation area 300. The start point of the line may be the central coordinates of the operation object in the creation area 300. The end point of the line may be the central coordinates of the second icon in the creation area. The part of the line that overlaps with the operation object may not be displayed, and the part that overlaps with the second icon may not be displayed. This makes it easier for the user to visually understand the operation object that triggers the transition. In addition, the icon to which the transition is to be made is also easier for the user to visually understand. Furthermore, since the line does not overlap with the icon or the operation object, the icon and the operation object can be easily viewed by the user.

[Point 7]
The color of the line and the color of the operation part may be the same, which allows the user to visually easily understand the operation object that triggers the transition and the relationship between the transition destination and the transition source.

[Point 8]
The color of the operation buttons provided on the device and the color of the operation unit may be the same or similar, which allows the user to easily visually understand the relationship between objects in a GUI (Graphical User Interface) and the actual operation buttons on the device 400.

[Point 9]
The CPU 501 may place a third icon (e.g., page 13) in the creation area 300, which is to be displayed on the device based on a user operation. The CPU 501 may place a branch icon (e.g., branch icon 30) in the middle of the line, which indicates a conditional branch of whether to transition from the first icon to the second icon or to the third icon. In this case, the CPU 501 may display a second line (e.g., branch display line 31a) connecting the branch icon and the third icon. This allows the user to visually understand at what transition timing the conditional branch occurs.

[Point 10]
The CPU 501 may place, in the middle of the line, a file operation icon (e.g., file operation icon 40) that instructs the device to execute a file operation when the device transitions from a first icon to a second icon based on a user operation. This allows the user to easily visually understand at what transition timing a file operation will occur.

[Point 11]
The CPU 501 may place a notification icon (e.g., notification icon 51) in the middle of the line based on a user operation, which indicates that a notification is to be displayed when the device transitions from a first icon to a second icon. This allows the user to easily visually understand at what transition timing a notification will occur.

[Point 12]
The CPU 501 may place a data transfer icon (e.g., data transfer icon 52) in the middle of the line based on a user operation, which instructs the execution of data transfer when the device transitions from the first icon to the second icon. This allows the user to easily visually understand at what transition timing the data transfer will occur.

The invention is not limited to the above-described embodiment, and various modifications and variations are possible within the scope of the invention.

10: Page, 20: Transition display line, 30: Branch display icon, 40: File operation icon, 100: Command selection section, 200: Option selection section

Claims (14)

1. A display control method for an application creation screen that assists in creating an application that runs on a specific device, comprising:
placing a first icon to be displayed on the device based on a drag operation by a user in a creation area within the application creation screen;
placing a second icon, which transitions from the first icon, in the creation area based on a drag operation by a user on the device;
a step of arranging an operation area corresponding to an operation unit, the operation area being set as a condition for a transition from the first icon to the second icon in the device when a specific user operation on the operation unit is performed, in the creation area together with the first icon;
placing, in the creation area, a transition display line connecting the first icon and the second icon in response to a drag operation from the operation area to the second icon ;
a step of arranging a processing icon that designates a process to be executed when transitioning from the first icon to the second icon on the device based on a drag operation by a user;
displaying the process icon on the transition display line;
11. A display control method for an application creation screen comprising: The display control method for an application creation screen according to claim 1 , wherein the processing icon can be arranged in the operation area. 2. The display control method for an application creation screen according to claim 1, wherein when a plurality of the processing icons are arranged relative to the transition display line, the display position of the processing icons can be changed by a drag operation. 3. The display control method for an application creation screen according to claim 2,
A display control method for an application creation screen, wherein a start point of the transition display line is an operation object included in the operation area in the creation area. 5. The display control method for an application creation screen according to claim 4,
a start point of the transition display line is a center coordinate of the operation object in the creation area;
An application creation screen display control method, characterized in that an end point of the transition display line is the central coordinates of the second icon in the creation area. 6. The display control method for an application creation screen according to claim 5,
a portion of the transition display line that overlaps with the operation area is not displayed, and a portion of the transition display line that overlaps with the second icon is not displayed, 7. A display control method for an application creation screen according to claim 4, further comprising the steps of:
A display control method for an application creation screen, wherein the transition display line and the operation object are the same color. The display control method for an application creation screen according to claim 7,
the operation area is displayed adjacent to the first icon displayed on the device, but is not displayed on a display screen of the device, and the operation unit is a hard key provided on the device;
A display control method for an application creation screen, wherein a color of an operation section provided on the device and a color of the operation object are the same or similar to each other. 9. A display control method for an application creation screen according to claim 1, comprising:
placing a third icon in the creation area to be displayed on the device based on a drag operation by a user;
placing a branch icon in the middle of the transition display line, the branch icon indicating a conditional branch of whether to transition from the first icon to the second icon or to the third icon;
a step of displaying a second transition display line connecting said branch icon and said third icon. A display control method for an application creation screen according to any one of claims 1 to 9, comprising:
2. The display control method for an application creation screen , wherein the processing icon is a file operation icon for instructing execution of a file operation. A display control method for an application creation screen according to any one of claims 1 to 10, comprising:
The display control method for an application creation screen , wherein the processing icon is a notification icon for instructing to display a notification. A display control method for an application creation screen according to any one of claims 1 to 9, comprising:
2. The display control method for an application creation screen , wherein the processing icon is a data transfer icon for instructing execution of data transfer. A program for causing an information processing device to execute the display control method for an application creation screen according to any one of claims 1 to 12. An information processing device that displays an application creation screen that assists in creating an application that runs on a predetermined device,
a means for arranging a first icon to be displayed on the device based on a drag operation by a user in a creation area within the application creation screen;
a means for arranging a second icon, which is a transition from the first icon, in the creation area based on a drag operation by a user in the device;
an operation unit provided in the device, the operation unit being set as a condition for a specific user operation on the operation unit to transition from the first icon to the second icon in the device, and an operation area corresponding to the operation unit being arranged in the creation area together with the first icon;
a means for arranging, in the creation area, a transition display line connecting the first icon and the second icon in response to a drag operation from the operation area to the second icon ;
a means for arranging a processing icon that specifies a process to be executed when transitioning from the first icon to the second icon in the device based on a drag operation by a user;
a means for displaying the process icon on the transition display line;
13. An information processing device comprising: