User interface generation method and device

Abstract

The present invention provides a user interface generation method. The method comprises: constructing a card base, wherein each card in the card base comprises a predefined data structure, and the data structure comprises a card type, a coordinate parameter, and a size parameter; detecting user input, wherein the user input comprises selection of the card type, selection of a card data source, and a dragging and / or zooming operation for a card; and in response to the detected dragging and / or zooming operation for the card, determining a coordinate parameter value and / or a size parameter value of the card, generating each card on the basis of the card type of the card, the card data source, the coordinate parameter value and / or the size parameter value, and generating a user interface on the basis of a plurality of cards.

Description

User interface generation method and device Technical Field

[0001] The present invention mainly relates to the field of computer software, and in particular to a method and device for generating a user interface. Background Art

[0002] The user interface is used to display important data, indicators, and parameters of products and services. Users can use the user interface to intuitively and quickly understand the current status of products and services.

[0003] During user interface development, product managers create prototypes, designers design the UI style based on the prototypes, and developers implement specific features through programming. This development process consumes significant manpower and time. If new requirements arise or the content layout needs to be adjusted, the entire process must be repeated, making it highly inefficient.

[0004] Summary of the Invention

[0005] In order to solve the above technical problems, the present invention provides a method and device for generating a user interface to improve the development efficiency of the user interface.

[0006] To achieve the above-mentioned objectives, the present invention proposes a user interface generation method, the method comprising: constructing a card library, wherein each card in the card library comprises a predefined data structure, wherein the data structure comprises a card type, coordinate parameters, and size parameters; detecting user input, wherein the user input comprises card type selection, card data source selection, and dragging and / or scaling operations on the card; in response to the detected dragging and / or scaling operations on the card, determining the coordinate parameter values ​​and / or size parameter values ​​of the card, and generating a card based on the card type, card data source, coordinate parameter values, and / or size parameter values ​​of the card, and generating a user interface based on the plurality of cards. To this end, by setting coordinate parameters and size parameters in the data structure of the cards in the card library, the user can drag and / or scale the card, allowing the user to flexibly adjust the position and size of the card, thereby improving the flexibility of the user layout. When the needs change, the dragging and / or scaling operations can be directly performed without the need for redevelopment, thereby improving the efficiency of user interface development.

[0007] In some embodiments, the method further includes detecting user input, the user input also including textual description information, and generating a card based on the card type, card data source, textual description information, coordinate parameter values, and / or size parameter values ​​of the card. To this end, including textual description information in the user input can indicate the data content of the card to the user, thereby improving the user experience.

[0008] In some embodiments, the method further includes automatically aligning two adjacent cards after generating the card based on the card type, card data source, coordinate parameter values, and / or size parameter values ​​of the card. To this end, automatically aligning two adjacent cards can optimize the card layout and further improve the efficiency of user interface development.

[0009] In some embodiments, the method further includes: the data structure further including a mode parameter, wherein the mode parameter is a locked mode and an unlocked mode, wherein the user cannot drag and / or zoom the card in the locked mode, and the user can drag and / or zoom the card in the unlocked mode. To this end, by defining the mode parameter in the data structure, the card can be switched between locked and unlocked, further improving the efficiency of user interface development.

[0010] In some embodiments, after generating the user interface based on the plurality of cards, the method further includes: saving the configurations of the plurality of cards in the user interface. To this end, by saving the configurations of the plurality of cards in the user interface, the user does not need to develop from scratch, further improving the efficiency of user interface development.

[0011] In some embodiments, the method further includes: detecting an update of a card data source, and in response to the detected update of the data source, updating the corresponding card using the WebSocket protocol. To this end, the card data update is implemented through the WebSocket protocol, thereby implementing the data update of the user interface.

[0012] The present invention also proposes a user interface generation device, which includes: a construction module, which constructs a card library, each card in the card library includes a predefined data structure, and the data structure includes a card type, coordinate parameters and size parameters; a detection module, which detects user input, and the user input includes card type selection, card data source selection, dragging and / or scaling operations on the card; a generation module, which determines the coordinate parameter value and / or size parameter value of the card in response to the detected dragging and / or scaling operations on the card, and generates a card according to the card type, card data source, coordinate parameter value and / or size parameter value of the card, and generates a user interface based on multiple cards.

[0013] The present invention also provides an electronic device, comprising a processor, a memory, and instructions stored in the memory, wherein the instructions implement the above-mentioned method when executed by the processor.

[0014] The present invention also provides a computer-readable storage medium having computer instructions stored thereon. When the computer instructions are executed, the method described above is executed.

[0015] The present invention also provides a computer program product, comprising a computer program, which implements the above method when executed by a processor. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] The following drawings are only intended to illustrate and explain the present invention, and do not limit the scope of the present invention.

[0017] FIG1 is a flow chart of a method for generating a user interface according to an embodiment of the present invention;

[0018] FIG2 is a schematic diagram of a user interface according to an embodiment of the present invention;

[0019] FIG3 is a schematic diagram of a user interface for creating a new card according to an embodiment of the present invention;

[0020] FIG4 is a schematic diagram of another user interface according to an embodiment of the present invention;

[0021] FIG5 is a schematic diagram of a user interface generating device according to an embodiment of the present invention;

[0022] FIG6 is a schematic diagram of an electronic device according to an embodiment of the present invention.

[0023] DESCRIPTION OF REFERENCE NUMERALS 100 User interface generation method 110 - 130 Step 500 User interface generation apparatus 510 Construction module 520 Detection module 530 Generation module 600 Electronic device 610 Processor 620 Memory DETAILED DESCRIPTION

[0024] In order to have a clearer understanding of the technical features, purposes and effects of the present invention, specific embodiments of the present invention are now described with reference to the accompanying drawings.

[0025] In the following description, many specific details are set forth to facilitate a full understanding of the present invention. However, the present invention may also be implemented in other ways different from those described herein. Therefore, the present invention is not limited to the specific embodiments disclosed below.

[0026] As used in this application and the claims, unless the context clearly indicates otherwise, the words "a," "an," "an," and / or "the" are not intended to refer to the singular but may include the plural. Generally speaking, the terms "comprises" and "include" only indicate the inclusion of the steps and elements specifically identified, and these steps and elements do not constitute an exclusive list. A method or apparatus may also include other steps or elements.

[0027] The present invention provides a method for generating a user interface. FIG1 is a flow chart of a method 100 for generating a user interface according to an embodiment of the present invention. As shown in FIG1 , the method 100 includes:

[0028] Step 110: construct a card library. Each card in the card library includes a predefined data structure. The data structure includes a card type, coordinate parameters, and size parameters.

[0029] The user interface displays important data, metrics, and parameters of products and services. It allows users to quickly and intuitively understand the current status of products and services. The user interface is composed of multiple card layouts. Cards can be called from a card library. By calling and configuring cards, and laying out multiple cards, a user interface is formed.

[0030] From the application layer, each card in the card library can have a common function menu, such as the card title, card type, card data source, etc. From the data layer, each card in the card library includes a predefined data structure, which includes card type, coordinate parameters, and size parameters. Card types can be text, numbers, time, curve charts, pie charts, bar charts, scatter plots, heat maps, radar charts, etc. The coordinate parameters are used to indicate the position of the card, and the size parameters are used to indicate the size of the card. For example, a card can be a rectangle or a rounded rectangle. The coordinate parameters of the card can be the coordinates of the upper left corner of the rectangle or rounded rectangle, and the size parameters of the card can be the length and height of the card.

[0031] Step 120 : detecting user input, where the user input includes card type selection, card data source selection, and card dragging and / or zooming operations.

[0032] For touch devices, users can input through touch operations, and for non-touch devices, users can input through mouse, keyboard, voice, etc. The system can detect user input by detecting touch operations or mouse, keyboard, voice, etc. User input may include card type selection, card data source selection, dragging and / or zooming operations on cards. Card type selection may be selecting a card type from text, numbers, time, curve charts, pie charts, bar charts, scatter plots, heat maps, radar charts, etc. Card data source selection may be selecting one or more data sources from multiple data sources, such as the time series of power generation of a power plant within one month. The user's dragging and / or zooming operations on the card allow the user to flexibly adjust the position and size of the card, thereby improving the flexibility of the card.

[0033] Step 130, in response to the detected drag and / or zoom operation on the card, determine the coordinate parameter value and / or size parameter value of the card, and generate a card according to the card type, card data source, coordinate parameter value and / or size parameter value of the card, and generate a user interface based on multiple cards.

[0034] When the front end detects the user's dragging and / or scaling operations on the card, it determines the coordinate parameter values ​​and / or size parameter values ​​of the card. Based on the coordinate parameter values ​​and / or size parameter values ​​of the card, the position and size of the card can be determined. Based on the card type and the card data source, the content to be displayed on the card can be determined. At this point, a single card can be generated. The same multiple operations are performed on other cards to generate multiple cards, and multiple cards form the user interface. To this end, the user's dragging and / or scaling operations on the card allow the user to flexibly adjust the position and size of the card, thereby improving the flexibility of the user layout. When the needs change, the dragging and / or scaling operations can be directly performed without the need for redevelopment, thereby improving the efficiency of user interface development.

[0035] Figure 2 is a schematic diagram of a user interface according to an embodiment of the present invention. As shown in Figure 2, the user interface includes two cards arranged vertically on the left side and a single card on the right side. The card on the upper left side is the cost contrast (cc), whose card type is digital, and the displayed data includes the initial cost C1 as A, the optimized cost C2 as B, and the cost savings ΔC as AB. The card on the lower left side is the carbon emission contrast (cec), whose card type is digital, and the displayed data includes the initial emission E1 as X, the optimized emission E2 as Y, and the emission savings as XY. The card on the right is the optimization start time, whose card type is time, and the displayed data is the specific time when the optimization started.

[0036] Figure 3 is a schematic diagram of a user interface for creating a new card according to one embodiment of the present invention. This new card can respond to user input. As shown in Figure 3, a new card can include a title and a type. The title indicates the card's meaning. The user can enter text in the Title box and select the desired card type in the Type box. Alternatively, the user can choose not to specify a title and edit it after the card is created.

[0037] Figure 4 is a schematic diagram of another user interface according to an embodiment of the present invention. Compared with Figure 3, Figure 4 adds a new card to the left of the cost comparison card. The card has no title and data source defined, and the card type is digital.

[0038] In some embodiments, the method further includes: detecting user input, the user input also including textual description information, and generating a card based on the card type, card data source, textual description information, coordinate parameter values, and / or size parameter values ​​of the card. As shown in FIG3 , the textual description information may include a card title, which may be displayed in the upper left corner of the card to indicate to the user the data content of the card. To this end, by including textual description information in the user input, the user can be informed of the data content of the card, thereby improving the user experience.

[0039] In some embodiments, the method further includes automatically aligning two adjacent cards after generating the card based on the card type, card data source, coordinate parameter values, and / or size parameter values. As shown in Figure 4, the top of the newly added card is aligned with the same-cost comparison card in the lower volume, and the left side of the newly added card is aligned with the left side of the carbon emission comparison card. Therefore, by automatically aligning two adjacent cards, the card layout can be optimized, further improving the efficiency of user interface development.

[0040] In some embodiments, the method further includes: the data structure further includes mode parameters, the mode parameters are locked mode and unlocked mode, in which the user cannot drag and / or scale the card in locked mode, and in unlocked mode the user can drag and / or scale the card. As shown in Figure 4, the cost comparison card can be in unlocked mode, and the user can drag the cost comparison card in unlocked mode to add a new card to its left. The carbon emission comparison card can be in locked mode, and the user cannot drag and scale the cost comparison card in locked mode. To this end, by defining the mode parameters in the data structure, the card can be switched between locked and unlocked, further improving the efficiency of user interface development.

[0041] In some embodiments, after generating a user interface based on multiple cards, the process further includes saving the configurations of the multiple cards in the user interface. Specifically, the position, size, card type, data source, etc. of each card are saved and can be named. The user can then directly open the user interface to display the saved configurations. Therefore, by saving the configurations of multiple cards in the user interface, the user does not need to redevelop from scratch, further improving the efficiency of user interface development.

[0042] In some embodiments, the method further includes: detecting an update of a card data source, and in response to the detected update of the data source, updating the corresponding card using the WebSocket protocol. To this end, the card data update is implemented through the WebSocket protocol, thereby implementing the data update of the user interface.

[0043] An embodiment of the present invention provides a user interface generation method. By setting coordinate parameters and size parameters in the data structure of cards in a card library, users can drag and / or scale the cards, allowing users to flexibly adjust the position and size of the cards, thereby improving the flexibility of user layout. When needs change, users can directly perform drag and / or scale operations without the need for redevelopment, thereby improving the efficiency of user interface development.

[0044] The present invention further provides a user interface generation device. FIG5 is a schematic diagram of a user interface generation device 500 according to an embodiment of the present invention. As shown in FIG5 , the device 500 includes:

[0045] A construction module 510 constructs a card library, wherein each card in the card library includes a predefined data structure, and the data structure includes a card type, coordinate parameters, and size parameters;

[0046] Detection module 520 detects user input, including card type selection, card data source selection, and card dragging and / or zooming operations;

[0047] The generation module 530 determines the coordinate parameter value and / or size parameter value of the card in response to the detected drag and / or zoom operation on the card, generates a card according to the card type, card data source, coordinate parameter value and / or size parameter value of the card, and generates a user interface based on multiple cards.

[0048] The present invention further provides an electronic device 600. FIG6 is a schematic diagram of an electronic device 600 according to an embodiment of the present invention. As shown in FIG6 , the electronic device 600 includes a processor 610 and a memory 620. The memory 620 stores instructions, wherein the instructions, when executed by the processor 610, implement the method 100 described above.

[0049] The present invention further provides a computer-readable storage medium having computer instructions stored thereon. When the computer instructions are executed, the method 100 described above is executed.

[0050] The present invention further provides a computer program product, comprising a computer program, which implements the method 100 described above when the computer program is executed by a processor.

[0051] Some aspects of the methods and apparatus of the present invention may be performed entirely by hardware, entirely by software (including firmware, resident software, microcode, etc.), or by a combination of hardware and software. The above hardware or software may be referred to as "data blocks," "modules," "engines," "units," "components," or "systems." The processor may be one or more application-specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DAPDs), programmable logic devices (PLCs), field programmable gate arrays (FPGAs), processors, controllers, microcontrollers, microprocessors, or combinations thereof. In addition, various aspects of the present invention may be embodied as computer products in one or more computer-readable media, the product including computer-readable program code. For example, computer-readable media may include, but are not limited to, magnetic storage devices (e.g., hard disks, floppy disks, tapes, etc.), optical disks (e.g., compact disks (CDs), digital versatile disks (DVDs), etc.), smart cards, and flash memory devices (e.g., cards, sticks, key drives, etc.).

[0052] Flowcharts are used herein to illustrate the operations performed by the methods according to the embodiments of the present application. It should be understood that the preceding operations are not necessarily performed in exact order. Instead, the various steps may be performed in reverse order or simultaneously. Furthermore, other operations may be added to these processes, or one or more operations may be removed from these processes.

[0053] It should be understood that although this specification is described according to various embodiments, not every embodiment contains only one independent technical solution. This narrative method of the specification is only for the sake of clarity. Those skilled in the art should regard the specification as a whole. The technical solutions in each embodiment can also be appropriately combined to form other implementation methods that can be understood by those skilled in the art.

[0054] The above description is only an illustrative embodiment of the present invention and is not intended to limit the scope of the present invention. Any equivalent changes, modifications and combinations made by those skilled in the art without departing from the concept and principle of the present invention shall fall within the scope of protection of the present invention.

[0055] Nouns and pronouns referring to persons in this patent application are not limited to a specific gender.

Claims

1. A method (100) for generating a user interface, characterized in that: The method (100) comprises: Constructing a card library, each card of the card library includes a predefined data structure, and the data structure includes a card type, coordinate parameters and size parameters; Detecting user input, where the user input includes card type selection, card data source selection, and dragging and / or scaling operations on a card; In response to a detected drag and / or zoom operation on a card, the coordinate parameter value and / or size parameter value of the card is determined, and a card is generated according to the card type, card data source, coordinate parameter value and / or size parameter value of the card, and a user interface is generated based on multiple cards.

2. The user interface generation method (100) according to claim 1, characterized in that: The method (100) further comprises: detecting user input, wherein the user input further comprises text description information, and generating a card according to the card type, card data source, text description information, coordinate parameter value and / or size parameter value of the card.

3. The user interface generation method (100) according to claim 1 or 2, characterized in that: The method (100) further comprises: after generating the card according to the card type, card data source, coordinate parameter value and / or size parameter value of the card, automatically aligning two adjacent cards.

4. The user interface generation method (100) according to claim 1, characterized in that: The method (100) further includes: the data structure further includes a mode parameter, the mode parameter being a lock mode and an unlock mode, wherein the user cannot drag and / or scale the card in the lock mode, and the user can drag and / or scale the card in the unlock mode.

5. The user interface generation method (100) according to claim 1, characterized in that: After generating the user interface according to the plurality of cards, the method further includes: saving the configuration of the plurality of cards of the user interface.

6. The user interface generation method (100) according to claim 1, characterized in that: The method (100) further comprises: detecting an update of a card data source, and in response to the detected update of the data source, updating the corresponding card using the WebSocket protocol.

7. A user interface generating device (500), characterized in that: The device (500) comprises: A construction module (510) is used to construct a card library, wherein each card in the card library includes a predefined data structure, and the data structure includes a card type, coordinate parameters, and size parameters; A detection module (520) detects user input, wherein the user input includes card type selection, card data source selection, dragging and / or zooming operations on the card; A generation module (530) determines the coordinates of the card in response to a detected drag and / or zoom operation on the card Parameter values ​​and / or size parameter values, and generate a card according to the card type, card data source, coordinate parameter values ​​and / or size parameter values ​​of the card, and generate a user interface according to multiple cards.

8. An electronic device (600), comprising a processor (610), a memory (620), and instructions stored in the memory (620), wherein the instructions, when executed by the processor (610), implement the method (100) according to any one of claims 1 to 6.

9. A computer-readable storage medium having computer instructions stored thereon, wherein the computer instructions, when executed, execute the method (100) according to any one of claims 1 to 6.

10. A computer program product, characterized in that The method comprises a computer program, which, when executed by a processor, implements the method (100) according to any one of claims 1 to 6.

Images