Interactive display method, device and storage medium of interface link diagram

Abstract

The present application discloses an interactive display method, device and storage medium of an interface link diagram, which relates to the field of interface display technology, including: when a user hovers over a three-dimensional icon, determining a target function module corresponding to the three-dimensional icon; displaying an interactive animation of the target function module; and displaying a bubble floating layer pop-up window interface associated with the target function module, wherein the bubble floating layer pop-up window interface includes a function menu of the target function module. The purpose is to enhance user interaction feedback.

Description

Technical Field

[0001] The present application relates to the field of interface display technology, and in particular to an interactive display method, device and storage medium for an interface link diagram. Background Art

[0002] A link diagram is a graphical representation method used to show how different nodes are connected to each other through links. In a link diagram, nodes represent functional modules, while links represent the connection relationships or interaction paths between these functional modules.

[0003] The current link diagram interface is usually displayed directly in a text-tiled manner. Specifically, two-dimensional rectangular boxes are used to distinguish different functional modules, and two-dimensional arrows are used to indicate the link direction. At the same time, color blocks are used to classify functional modules. When the user hovers the mouse over a specific functional module, the color of the related text will change to indicate that the functional module can be clicked to enter.

[0004] However, in actual application, the link relationship of this display solution is often complicated and unintuitive, and the hierarchical structure is also chaotic and unclear. Under such display conditions, even if the text color changes when the mouse hovers, the interactive feedback is still not obvious due to the overly complex background.

[0005] The above contents are only used to assist in understanding the technical solution of the present application and do not constitute an admission that the above contents are prior art. Summary of the invention

[0006] The main purpose of the present application is to provide an interactive display method, device and storage medium for an interface link diagram, aiming to solve the technical problem that the interactive feedback of the interface link diagram is not obvious.

[0007] To achieve the above purpose, the present application proposes an interactive display method of an interface link diagram, the method comprising:

[0008] When a user's hovering operation on the three-dimensional icon is detected, determining a target functional module corresponding to the three-dimensional icon;

[0009] Display an interactive animation of the target functional module;

[0010] A bubble floating layer pop-up window interface associated with the target function module is displayed, and the bubble floating layer pop-up window interface includes a function menu of the target function module.

[0011] In one embodiment, the step of displaying the interactive animation of the target functional module includes:

[0012] Acquire all image frames of the three-dimensional icon, and display the image frames in sequence;

[0013] Determine the links between the target functional module and other functional modules, and highlight the links.

[0014] In one embodiment, the step of highlighting the link includes:

[0015] Determine corresponding highlight display parameters according to the importance of the link, wherein the highlight display parameters include color, style and width;

[0016] Based on the highlight display parameter, the link is highlighted.

[0017] In one embodiment, after the step of displaying a bubble pop-up window interface associated with the target function module, wherein the bubble pop-up window interface includes a function menu of the target function module, the step further includes:

[0018] When detecting a click operation of the user on the function menu, determining a target sub-function module corresponding to the click operation;

[0019] Jump to the function interface corresponding to the target sub-function module.

[0020] In one embodiment, after the step of displaying a bubble pop-up window interface associated with the target function module, wherein the bubble pop-up window interface includes a function menu of the target function module, the step further includes:

[0021] When detecting a hovering operation of the user on the function menu, determining a target sub-function module corresponding to the hovering operation;

[0022] Acquire link information of links between the target functional module and other functional modules;

[0023] If the target sub-function module matches the link information, the link corresponding to the link information is displayed in association.

[0024] In one embodiment, the step of displaying the links corresponding to the link information in an associated manner includes:

[0025] Determining a corresponding association display mode according to a matching coefficient between the target sub-function module and the link information;

[0026] Based on the association display mode, the links corresponding to the link information are displayed in an association manner.

[0027] In one embodiment, before the step of determining the target function module corresponding to the three-dimensional icon when the user's hovering operation on the three-dimensional icon is detected, the method further includes:

[0028] When an original link diagram input by a user is detected, determining a two-dimensional icon in the original link diagram;

[0029] Determine, according to the image database, a three-dimensional icon corresponding to the two-dimensional icon;

[0030] The two-dimensional icon in the original link map is replaced by the three-dimensional icon.

[0031] In one embodiment, the step of displaying a bubble pop-up window interface associated with the target function module, wherein the bubble pop-up window interface includes a function menu of the target function module, comprises:

[0032] Determine the function display areas of all function modules and the bubble floating layer pop-up window interface associated with the target function module;

[0033] Determine the area to be displayed of the bubble floating layer pop-up window interface according to the blank area outside the function display area;

[0034] The bubble floating layer pop-up window interface is displayed in the to-be-displayed area, and the bubble floating layer pop-up window interface includes a function menu of the target function module.

[0035] In addition, to achieve the above-mentioned purpose, the present application also proposes an interactive display device for an interface link diagram, the device comprising: a memory, a processor, and a computer program stored in the memory and executable on the processor, the computer program being configured to implement the steps of the interactive display method for the interface link diagram as described above.

[0036] In addition, to achieve the above-mentioned purpose, the present application also proposes a storage medium, which is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by the processor, the steps of the interactive display method of the interface link diagram as described above are implemented.

[0037] One or more technical solutions proposed in this application have at least the following technical effects:

[0038] The present application provides an interactive display method for an interface link diagram. When a user's hovering operation on a three-dimensional icon is detected, the present solution immediately focuses on the target function module corresponding to the three-dimensional icon. This method draws the user's attention away from the complex background and focuses it on the current function module of interest, thereby avoiding the interference of background complexity on interactive feedback. On the one hand, the interactive animation of the target function module is displayed. Through the animation effect, the user's immediate perception of the interactive operation is enhanced. This visual enhancement helps to improve the user experience and reduce the cost of learning. On the other hand, a bubble floating pop-up window interface associated with the target function module is displayed. This method directly and clearly presents the relevant information of the function module. The user does not need to find the required content in a complex hierarchical structure, which greatly improves the efficiency of information acquisition. BRIEF DESCRIPTION OF THE DRAWINGS

[0039] The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present application and, together with the description, serve to explain the principles of the present application.

[0040] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the description of the prior art will be briefly introduced below. Obviously, for ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0041] Figure 1 A flow chart of the interactive display method of the interface link diagram of the present application is provided in Example 1;

[0042] Figure 2 A schematic diagram of a three-dimensional icon provided in Embodiment 1 of the method for interactively displaying a link diagram of an interface of the present application;

[0043] Figure 3 A two-dimensional display schematic diagram provided for the first embodiment of the interactive display method of the interface link diagram of the present application;

[0044] Figure 4 A flow chart of the second embodiment of the method for interactively displaying a link diagram of an interface of the present application;

[0045] Figure 5 A flowchart diagram of the third embodiment of the method for interactively displaying a link diagram of an interface of the present application;

[0046] Figure 6 A flowchart diagram of the fourth embodiment of the method for interactively displaying a link diagram of an interface of the present application is provided;

[0047] Figure 7 A schematic diagram of a picture database provided for the fourth embodiment of the method for interactively displaying a link diagram of an interface of the present application;

[0048] Figure 8-Figure 13 A three-dimensional icon schematic diagram of the intelligent gateway system platform link diagram provided by the interactive display method of the interface link diagram of this application;

[0049] Fig.14 It is a schematic diagram of the device structure of the hardware operating environment involved in the interactive display method of the interface link diagram in the embodiment of the present application.

[0050] The purpose, features and advantages of this application will be further described in conjunction with the embodiments and with reference to the accompanying drawings. DETAILED DESCRIPTION

[0051] It should be understood that the specific embodiments described herein are only used to explain the technical solutions of the present application and are not used to limit the present application.

[0052] In order to better understand the technical solution of the present application, a detailed description will be given below in conjunction with the accompanying drawings and specific implementation methods.

[0053] The main solution of the embodiment of the present application is: when a user's hovering operation on a three-dimensional icon is detected, the target function module corresponding to the three-dimensional icon is determined; the interactive animation of the target function module is displayed; and the bubble floating pop-up window interface associated with the target function module is displayed, and the bubble floating pop-up window interface includes a function menu of the target function module.

[0054] The link relationships in current interface link diagrams are often complex and unintuitive, and the hierarchical structure is also confusing and unclear. Under such display conditions, even if the text color changes when the mouse is hovered, the interactive feedback is still unclear due to the overly complex background. Moreover, users need to spend a lot of time and energy to understand the interface, and the learning cost is high.

[0055] To solve the above problems, the present application provides a solution using a three-dimensional icon. When a user's hovering operation on the three-dimensional icon is detected, not only an interactive animation will be displayed, but also a bubble floating pop-up interface will be displayed, so that the user can get more obvious interactive feedback.

[0056] It should be noted that the execution subject of this solution can be a computing service device with data processing, network communication and program running functions, such as a tablet computer, a personal computer, a mobile phone, etc., or an interactive display device of an interface link diagram that can realize the above functions, etc. The following embodiments are described below by taking the interactive display device of the interface link diagram as an example.

[0057] Based on this, the embodiment of the present application provides an interactive display method of an interface link diagram, referring to Figure 1 , Figure 1 This is a flow chart of the first embodiment of the interactive display method of the interface link diagram of the present application.

[0058] In this embodiment, the interactive display method of the interface link diagram includes steps S10 to S30:

[0059] Step S10, when a user hovering operation on a three-dimensional icon is detected, determining a target function module corresponding to the three-dimensional icon;

[0060] It should be noted that 3D icons refer to graphical interface elements with 3D visual effects. These icons may enhance the three-dimensional sense through visual effects such as shadows, highlights, and perspective, making them more prominent and attractive on the interface; hover operation refers to the user placing the mouse pointer on an interface element, such as an icon or button, but not clicking it. This operation allows users to preview the relevant information or functions of the element without activating or selecting the element.

[0061] Optionally, bind a mouse event detector to the element where the three-dimensional icon is located. These events usually include the mouse moving the element; write an event handling function, which will be triggered when the mouse moving the element is detected, and is used to detect the two-dimensional coordinates of the mouse in real time; convert the two-dimensional coordinates into three-dimensional view coordinates, which usually involves the calculation of the projection matrix and the view matrix; use the converted three-dimensional coordinates to perform collision detection with the geometry of the three-dimensional icon, which can be achieved through techniques such as ray casting, to determine whether the "ray" of the mouse pointer intersects with any part of the three-dimensional icon; if intersecting, it is determined that the mouse is hovering over the three-dimensional icon, that is, it is confirmed that the user's hovering operation on the three-dimensional icon is detected.

[0062] It is known that there is a mapping relationship between each 3D icon and a specific function, which means that the system has predefined which icons represent which functions. For example, Figure 2 It is the initial interface of the intelligent gateway system platform link diagram, including 6 three-dimensional icons, corresponding to the service publishing function, service access function, service governance function, service monitoring function, operation center function, and open platform function.

[0063] Therefore, when the user hovers over a three-dimensional icon, the system can check the intersection of the light rays to determine the specific icon the user is hovering over. Then, based on the preset mapping relationship, the target functional module corresponding to the current icon is determined.

[0064] Step S20, displaying the interactive animation of the target functional module;

[0065] Optionally, real-time rendering is used, and the specific steps are as follows:

[0066] Prepare 3D models or scenes: Create 3D models of functional modules in 3D modeling software, and design scenes and elements required for interactive animation. Export the model to a format that can be used in real-time rendering engines.

[0067] Set up the rendering engine: Integrate a real-time rendering engine into the application. Load and import 3D models and scenes into the rendering engine.

[0068] Configure animation: Configure the interactive animation of the functional module in the rendering engine, which may include setting animation keyframes, animation curves, animation duration and other parameters. If the animation is related to user interaction, you also need to set the conditions that trigger the animation, such as mouse hover.

[0069] In this way, when the triggering conditions are met, each frame of the interactive animation can be dynamically generated and displayed based on the real-time rendering function of the rendering engine and the animation configuration.

[0070] Optionally, a pre-designed method is used, and the specific steps are as follows:

[0071] Design animation scenes: Design animation scenes related to each functional module according to its characteristics. The scenes can include element changes, dynamic effects, interface changes, etc. For example, change the shape, color, size of elements, add dynamic effects such as movement, rotation, scaling, pop-up windows, page jumps, etc.;

[0072] Configure animation: Use a suitable animation library or framework and integrate it into the development environment of the link diagram interface. In the animation library or framework, configure the animation parameters such as animation duration, delay time, animation curve, animation repetition times, etc. according to the designed animation scene.

[0073] Binding animations: Bind the configured animations to the user interface elements corresponding to the target functional modules. This usually involves setting specific class names, IDs (identity documents), or data attributes for these elements and referencing them through selectors in the animation library or framework.

[0074] In this way, when the triggering condition is met, the interactive animation bound to the target functional module can be triggered through the API (Application Programming Interface) of the animation library or framework, so that the interactive animation of the target functional module takes effect immediately.

[0075] Step S30, displaying a bubble floating layer pop-up window interface associated with the target function module, wherein the bubble floating layer pop-up window interface includes a function menu of the target function module.

[0076] It should be noted that the bubble pop-up interface is a user interface element, usually displayed in the form of a small floating layer with a rounded border and an arrow pointing to the trigger element, which contains a function menu related to the target function module.

[0077] During the design phase, perform the following steps:

[0078] Design the content of the bubble pop-up window: According to the functions and requirements of the target functional module, design the content of the bubble pop-up window, including function menus, prompt information or related operation options.

[0079] Create a bubble floating layer container: In the HTML document or front-end framework, create a container element such as , to hold the contents of the bubble float. This container should be invisible initially.

[0080] In this way, when the trigger condition is met, the corresponding function can be executed to display the bubble pop-up window interface. This function should modify the CSS properties of the bubble pop-up container to make it visible from invisible, and may also need to calculate and adjust the position of the bubble pop-up to ensure that it points correctly to the trigger element and does not block other important content.

[0081] When displaying the bubble pop-up window interface, it is also necessary to arrange the display position of the bubble pop-up window interface reasonably. Reasonable position selection avoids blocking important information or interfering with the user's current operation, reducing the possibility of interface confusion and misoperation.

[0082] Specifically, the function display area occupied by each function module in the user interface is clarified. The blank area outside the function display area is identified, and the system selects a position that will not interfere with the user's current operation but can attract the user's attention as the area to be displayed based on the size and shape of the bubble pop-up window interface, as well as the user's visual habits and operating habits. Then, the bubble pop-up window interface is displayed in the area to be displayed.

[0083] After that, the system will continue to detect the user's behavior on the interface. Once the user's click operation on the function menu is detected, the system will parse the specific menu item pointed to by this operation. The system maintains a mapping relationship between menu items and sub-function modules. Therefore, based on this mapping relationship, the target sub-function module corresponding to the menu item can be determined. Then, the system will execute the corresponding jump logic to switch the display content of the user interface to the function interface corresponding to the target sub-function module. In this way, users can quickly jump from the current interface to the sub-function module interface they want to access without going through tedious navigation or search processes, which helps to improve the overall response speed of the system.

[0084] Additionally, to improve the user experience, you can add logic to automatically hide the bubble overlay after a period of time, or hide it when the user moves the focus away from the triggering element. This can be achieved by setting a timer or detecting other events.

[0085] This embodiment provides an interactive display method of an interface link diagram, which is different from Figure 3 Compared with the two-dimensional display method in the previous solution, this solution fully adopts three-dimensional display, which enhances the visualization effect and improves the interactive experience. When the user's hovering operation on the three-dimensional icon is detected, this solution immediately focuses on the target functional module corresponding to the three-dimensional icon. This method draws the user's attention away from the complex background and focuses it on the current functional module, thereby avoiding the interference of background complexity on interactive feedback. On the one hand, the interactive animation of the target functional module is displayed. Through the animation effect, the user's immediate perception of the interactive operation is enhanced. This visual enhancement helps to improve the user experience and reduce the learning cost. On the other hand, the bubble floating pop-up window interface associated with the target functional module is displayed. This method directly and clearly presents the relevant information of the functional module. The user does not need to find the required content in a complex hierarchical structure, which greatly improves the efficiency of information acquisition.

[0086] Based on the first embodiment of the present application, in the second embodiment of the present application, the same or similar contents as those in the above-mentioned embodiment 1 can refer to the above introduction, and will not be repeated later. Figure 4 , step S20 includes steps A10 to A20:

[0087] Step A10, acquiring all image frames of the three-dimensional icon, and displaying the image frames in sequence;

[0088] Step A20, determining the links between the target functional module and other functional modules, and highlighting the links.

[0089] This embodiment involves two dimensions: nodes and links.

[0090] Node dimension, focuses on animation effects applied directly to three-dimensional icons.

[0091] When the trigger condition is met, all image frames of the three-dimensional icon where the target functional module is located are determined based on the pre-set binding relationship. Then, these image frames are smoothly displayed in a predetermined order to generate a dynamic icon effect to provide users with intuitive interactive feedback.

[0092] The link dimension focuses on the connection relationship between three-dimensional icons.

[0093] First, since the functional modules exchange data through API, the links between the target functional module and other functional modules can be clarified by analyzing the API calling relationship, and then determining which user interface elements correspond to the links.

[0094] Second, determine the style of the highlighted links, for example, changing the link color from gray to a bright color.

[0095] After determining the highlight styles and corresponding user interface elements, apply these styles to the elements. This is usually achieved by modifying the CSS (Cascading Style Sheets) style of the element and adding specific class names to ensure that the highlight effect can be reflected instantly when the user interacts.

[0096] For example, the highlighting degree of a link is determined according to its importance in the overall business process or data flow:

[0097] First, define importance evaluation indicators, including but not limited to functionality, user interaction frequency, etc.; collect relevant data from multiple channels such as system logs, monitoring tools, and user behavior analysis systems, and after data cleaning, integrate them to form a complete link importance evaluation data set; for each link, score it according to the collected indicators, and assign weights to reflect the importance of each indicator. According to the sum of the scores, the importance of the link is graded, such as high importance, medium importance, and low importance.

[0098] Secondly, based on the mapping relationship between the preset importance and the highlighting parameters, after the importance of the current link is calculated, the highlighting parameters applicable thereto can be determined, including color, style and width.

[0099] For example, high importance: red, solid line, 4mm thick line; medium importance: yellow, dotted line, 2mm medium line; low importance: blue, dotted line, 1mm thin line.

[0100] Finally, the actual visual processing of the link is performed according to the determined highlighting parameters. This usually involves modifying the rendering properties of the link so that it is displayed in a different color, line type, and width in the user interface. In this way, users can more easily identify and understand the function and relationship of the link, thereby improving the readability and usability of the interface.

[0101] This embodiment provides an interactive display method for an interface link diagram, which adopts a pre-designed approach and provides a clear structure to ensure that all feedback is consistent, so that users will have better expectations and understanding during use. The animation effect of the node dimension provides users with a rich visual experience by dynamically displaying the image frames of three-dimensional icons. This dynamic feedback can not only attract the user's attention, but also intuitively express the current operation results. The highlighting of the link dimension emphasizes the connection relationship between functional modules and provides users with a clear navigation path and visual guidance. Feedback in both node and link dimensions helps to reduce learning costs and improve user understanding.

[0102] Based on the first embodiment of the present application, in the third embodiment of the present application, the same or similar contents as those in the first embodiment can be referred to the above description, and will not be described in detail later. Figure 5 , after step S30, further comprising steps B10 to B30:

[0103] Step B10, when a hovering operation of the user on the function menu is detected, determining a target sub-function module corresponding to the hovering operation;

[0104] Step B20, obtaining link information of the link between the target functional module and other functional modules;

[0105] Step B30: If the target sub-function module matches the link information, the link corresponding to the link information is displayed in association.

[0106] This solution focuses on the linkage between local and global, where the local refers to the sub-function module under the function module, and the global refers to the link between the function module and other function modules.

[0107] The system will continue to detect the user's behavior on the interface. Once the system detects the user's hovering operation on the function menu, it will determine the corresponding target sub-function module. The specific steps are the same as the first embodiment and will not be repeated here.

[0108] Optionally, based on the API calling relationship between functional modules, the link between the target functional module and other functional modules is determined, and then the relevant information of the link, including but not limited to ID, function, attributes, etc., is retrieved by querying the database, reading the configuration file or accessing the data structure in the memory.

[0109] Furthermore, the target sub-function module is matched with the link information, which can be specifically considered from the dimensions of functional relevance, data flow continuity, business logic dependency, etc. Among them, functional relevance requires checking whether the links in the link information are directly related to the functions of the target sub-function module; data flow continuity requires analyzing the flow path of the data flow in the link to determine whether the target sub-function module is at the key node of the path; business logic dependency requires considering whether there is a clear dependency relationship in the business logic, so that a certain target sub-function module must rely on the output or input of the link.

[0110] Exemplarily, the target functional module is "operation center", and its menu functions include "monitoring center", "log center", and "message center", and its links include "rule configuration", "data collection", etc.

[0111] When you hover the mouse over "Log Center", the system will automatically match "Log Center" with "Rule Configuration" and "Data Collection":

[0112] Functional relevance check: traverse each link in the link information and check whether it is directly related to the function of the target sub-function module. For example, the "log center" and "log recording" links obviously have direct functional relevance.

[0113] Data flow continuity analysis: Analyze the flow path of data flow in the link to determine whether the "log center" is at the key node of the path. If the data flow flows to the "log center" for recording after "data collection", it can be considered that the "log center" and "data collection" have continuity in data flow.

[0114] Business logic dependency judgment: Consider whether there is a clear dependency relationship in the business logic. For example, if the business logic requires that all collected data must be recorded and reviewed by the "Log Center", then the "Log Center" link depends on "Data Collection".

[0115] Based on the above analysis, determine which link information matches the target sub-function module, and then associate and display the matching links. For example, if "Log Center" matches "Data Collection", the system will automatically highlight the interface element where "Data Collection" is located.

[0116] In addition, the matching degree between the target sub-function module and the link information can be quantified, and then different display methods can be adopted. The specific steps are as follows:

[0117] For each evaluation dimension, a scoring rule needs to be developed.

[0118] Functional relevance: If the link information directly describes the function of the target sub-functional module, a high score (such as 1.0) is given; if it is functionally relevant but not directly, a medium score (such as 0.5-0.8) is given; if it is completely irrelevant, a low score (such as 0.0) is given.

[0119] Data flow continuity: If the data flow in the link information is completely dependent on the output of the target sub-functional module, a high score is given; if it is partially dependent or only one of the input sources, a medium score is given; if there is no dependency, a low score is given.

[0120] Business logic dependency: Score based on the closeness of the connection or dependency level between the two in the business logic diagram.

[0121] Since different evaluation dimensions may have different effects on the degree of matching, a weight needs to be assigned to each dimension. Then, the score of each dimension is multiplied by its corresponding weight, and all products are added together to obtain the final matching coefficient.

[0122] Multiple matching coefficient intervals are predefined, and a correlation display method is specified for each interval. For example:

[0123] High match (0.8-1.0): Use significant highlight effects, dynamic elements, or pop-ups to emphasize importance.

[0124] Medium match (0.5-0.8): Use normal highlights, borders, or color changes for moderate hints.

[0125] Low match (0.0-0.5): Use faded effects or no special display to reduce visual noise.

[0126] Therefore, in practical applications, the corresponding association display mode can be determined according to the calculated matching coefficient, which can intuitively reflect the relationship and importance between the target sub-function module and the link information.

[0127] This embodiment provides an interactive display method of an interface link diagram, emphasizing the linkage between the local and the global. This linkage helps to build a hierarchical structure of information, so that when users perform local operations, they can clearly understand the impact or correlation of their operations on the overall system, thereby helping users make more informed decisions.

[0128] Based on the first embodiment of the present application, in the fourth embodiment of the present application, the same or similar contents as those in the first embodiment can refer to the above description, and will not be described in detail later. Figure 6 , before step S10, it also includes steps C10 to C30:

[0129] Step C10, when an original link diagram input by a user is detected, determining a two-dimensional icon in the original link diagram;

[0130] Step C20, determining the three-dimensional icon corresponding to the two-dimensional icon according to the image database;

[0131] Step C30: Replace the two-dimensional icon in the original link diagram with the three-dimensional icon.

[0132] The original link diagram input by the user may be a two-dimensional graphical interface, and the system needs to be able to recognize the two-dimensional icons in these elements.

[0133] The system needs to analyze the original link map to identify all the two-dimensional icons used in it. This process may involve image processing technology or icon library matching to ensure that the system can accurately identify which icons are in two-dimensional format.

[0134] Specifically, edge detection algorithms are used to extract edge information of icons, help identify the outlines of each icon, extract features, and obtain the geometric features of each icon. Shape matching technology is used to compare with the icon library to identify the two-dimensional icons in the original link diagram.

[0135] Reference Figure 7 ,The system has a pre-defined image database that is used to associate each 2D icon with its corresponding 3D icon. For example, a 2D icon representing "operation center" may correspond to a 3D icon with a similar appearance but with a 3D effect.

[0136] Based on the above picture database, the three-dimensional icon corresponding to the two-dimensional icon in the original link diagram can be determined.

[0137] Finally, all 2D icons in the original link diagram are replaced with their corresponding 3D icons. This usually involves redrawing the link diagram on the user interface, replacing the original 2D icons with 3D icons, and keeping the positions and properties of all other elements unchanged, and finally displaying them on the user interface layer.

[0138] In addition to the above methods, this application can also use vector software to design and produce three-dimensional icons to achieve the same interface optimization purpose.

[0139] This embodiment provides an interactive display method for an interface link diagram. A large amount of three-dimensional icon data can be pre-stored in the database. When a two-dimensional icon needs to be converted, it is only necessary to search for the corresponding three-dimensional icon in the database without re-creating or rendering. This significantly shortens the time of the conversion process and improves the overall efficiency.

[0140] For example, Figure 2 It is the initial interface of the intelligent gateway system platform link diagram, including 6 three-dimensional icons, corresponding to the service publishing function, service access function, service governance function, service monitoring function, operation center function, and open platform function.

[0141] Figure 8 When the mouse hovers over the "Service Release" icon area, the interactive animation of the "Service Release" icon is triggered, and the "Service Release" bubble pop-up window interface pops up at the same time. The "Service Release" bubble pop-up window contains more other functions under this function. Clicking it will jump to other pages.

[0142] Fig. 9 When the mouse hovers over the "Service Access" icon area, the interactive animation of the "Service Access" icon is triggered, and the "Service Access" bubble floating pop-up window interface pops up at the same time. The "Service Access" bubble floating pop-up window contains more other functions under this function. Clicking it will jump to other pages.

[0143] Fig.10 When the mouse hovers over the "Service Governance" icon area, the interactive animation of the "Service Governance" icon is triggered, and the "Service Governance" bubble pop-up window interface pops up at the same time. The "Service Governance" bubble pop-up window contains more other functions under this function. Clicking it will jump to other pages.

[0144] Fig.11 When the mouse hovers over the "Service Monitoring" icon area, the interactive animation of the "Service Monitoring" icon is triggered, and the "Service Monitoring" bubble pop-up window interface pops up. The "Service Monitoring" bubble pop-up window contains more other functions under this function. Clicking it will jump to other pages.

[0145] Fig.12 When the mouse hovers over the "Operation Center" icon area, the interactive animation of the "Operation Center" icon is triggered, and the "Operation Center" bubble pop-up window interface pops up. The "Operation Center" bubble pop-up window contains more other functions under this function. Clicking it will jump to other pages.

[0146] Fig.13 When the mouse hovers over the "Open Platform" icon area, the interactive animation of the "Open Platform" icon is triggered, and the "Open Platform" bubble floating pop-up window interface pops up at the same time. The "Open Platform" bubble floating pop-up window contains more other functions under this function. Clicking it will jump to other pages.

[0147] It should be noted that the icons will change in each frame of the interactive animation. When the mouse hovers over the "Open Platform" icon area, the spacing between the small squares in the "Open Platform" icon gradually increases. When the mouse hovers over the "Service Monitoring" icon area, the direction of the cylinder in the "Service Monitoring" icon deflects. When the mouse hovers over the "Service Release" icon area, the distance between the papers in the "Service Release" icon gradually increases. When the mouse hovers over the "Service Access" and "Service Governance" icon areas, the width of the "Service Access" and "Service Governance" icons gradually increases. When the mouse hovers over the "Operation Center" icon area, the position of the arrow in the "Operation Center" icon moves upward.

[0148] The interactive display method of the link diagram in the interface of this application outputs a three-dimensional dynamic icon of the link diagram through three-dimensional software design, performs three-dimensional design on the six major modules of the link diagram, and performs dynamic design on each three-dimensional icon. When the user hovers over the icon area with the mouse, the dynamic effect of the three-dimensional icon is triggered, and a dialog box pops up to provide more menu choices under this menu function. The three-dimensional link diagram facilitates users to quickly understand the interface functions and content, and facilitates users to quickly understand and make choices, thereby reducing users' learning costs and improving users' work efficiency.

[0149] It should be noted that the above examples are only used to understand the present application and do not constitute a limitation on the interactive display method of the interface link diagram of the present application. More simple transformations based on this technical concept are all within the scope of protection of the present application.

[0150] The present application provides an interactive display device for an interface link diagram, the interactive display device for an interface link diagram comprising: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor so that the at least one processor can execute the interactive display method for the interface link diagram in the above-mentioned embodiment one.

[0151] Reference below Fig.14 , which shows a schematic diagram of the structure of an interactive display device suitable for implementing an interface link diagram in an embodiment of the present application. The interactive display device of the interface link diagram in the embodiment of the present application may include but is not limited to mobile terminals such as mobile phones, laptops, digital broadcast receivers, PDAs (Personal Digital Assistants), PADs (Portable Application Descriptions), PMPs (Portable Media Players), vehicle-mounted terminals (such as vehicle-mounted navigation terminals), etc., and fixed terminals such as digital TVs, desktop computers, etc. Fig.14 The interactive display device of the interface link diagram shown is merely an example and should not bring any limitation to the functions and scope of use of the embodiments of the present application.

[0152] like Fig.14 As shown, the interactive display device of the interface link diagram may include a processing device 1001 (such as a central processing unit, a graphics processor, etc.), which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM: Read Only Memory) 1002 or a program loaded from a storage device 1003 to a random access memory (RAM: Random Access Memory) 1004. In RAM1004, various programs and data required for the operation of the interactive display device of the interface link diagram are also stored. The processing device 1001, ROM1002 and RAM1004 are connected to each other through a bus 1005. An input / output (I / O) interface 1006 is also connected to the bus. Typically, the following systems can be connected to the I / O interface 1006: input devices 1007 including, for example, a touch screen, a touchpad, a keyboard, a mouse, an image sensor, a microphone, an accelerometer, a gyroscope, etc.; output devices 1008 including, for example, a liquid crystal display (LCD), a speaker, a vibrator, etc.; storage devices 1003 including, for example, a magnetic tape, a hard disk, etc.; and communication devices 1009. The communication device 1009 can allow the interactive display device of the interface link diagram to communicate wirelessly or wired with other devices to exchange data. Although the figure shows an interactive display device of the interface link diagram with various systems, it should be understood that it is not required to implement or have all the systems shown. More or fewer systems may be implemented or have instead.

[0153] In particular, according to the embodiments disclosed in the present application, the process described above with reference to the flowchart can be implemented as a computer software program. For example, the embodiments disclosed in the present application include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication device, or installed from a storage device 1003, or installed from a ROM 1002. When the computer program is executed by the processing device 1001, the above-mentioned functions defined in the method of the embodiment disclosed in the present application are executed.

[0154] The interactive display device of the interface link diagram provided by the present application adopts the interactive display method of the interface link diagram in the above embodiment, which can solve the technical problem that the interactive feedback of the interface link diagram is not obvious. Compared with the prior art, the beneficial effects of the interactive display device of the interface link diagram provided by the present application are the same as the beneficial effects of the interactive display method of the interface link diagram provided by the above embodiment, and the other technical features in the interactive display device of the interface link diagram are the same as the features disclosed in the method of the previous embodiment, which will not be repeated here.

[0155] It should be understood that the various parts disclosed in this application can be implemented by hardware, software, firmware or a combination thereof. In the description of the above embodiments, specific features, structures, materials or characteristics can be combined in any one or more embodiments or examples in a suitable manner.

[0156] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any person skilled in the art who is familiar with the present technical field can easily think of changes or substitutions within the technical scope disclosed in the present application, which should be included in the protection scope of the present application. Therefore, the protection scope of the present application should be based on the protection scope of the claims.

[0157] The present application provides a computer-readable storage medium having a computer program stored thereon, and the computer-readable program instructions are used to execute the interactive display method of the interface link diagram in the above-mentioned embodiment.

[0158] The computer-readable storage medium provided in the present application may be, for example, a USB flash drive, but is not limited to electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, systems or devices, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM: Random Access Memory), a read-only memory (ROM: Read Only Memory), an erasable programmable read-only memory (EPROM: Erasable Programmable Read Only Memory or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM: CD-Read Only Memory), an optical storage device, a magnetic storage device, or any suitable combination of the above. In this embodiment, the computer-readable storage medium may be any tangible medium containing or storing a program, which may be used by or in combination with an instruction execution system, system or device. The program code contained on the computer-readable storage medium may be transmitted using any appropriate medium, including but not limited to: wires, optical cables, RF (Radio Frequency: Radio Frequency), etc., or any suitable combination of the above.

[0159] The above-mentioned computer-readable storage medium may be included in the interactive display device of the interface link diagram; or it may exist independently without being assembled into the interactive display device of the interface link diagram.

[0160] The above-mentioned computer-readable storage medium carries one or more programs. When the above-mentioned one or more programs are executed by the interactive display device of the interface link diagram, the interactive display device of the interface link diagram: when detecting the user's hovering operation on the three-dimensional icon, determines the target function module corresponding to the three-dimensional icon; displays the interactive animation of the target function module; displays the bubble floating pop-up window interface associated with the target function module, and the bubble floating pop-up window interface includes the function menu of the target function module.

[0161] Computer program code for performing the operations of the present application may be written in one or more programming languages ​​or a combination thereof, including object-oriented programming languages, such as Java, Smalltalk, C++, and conventional procedural programming languages, such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a separate software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer via any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0162] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present application. In this regard, each box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the module, the program segment or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a sequence different from that marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram and / or flow chart, and the combination of the boxes in the block diagram and / or flow chart can be implemented with a dedicated hardware-based system that performs the specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0163] The modules involved in the embodiments described in this application may be implemented by software or hardware, wherein the name of the module does not constitute a limitation on the unit itself in some cases.

[0164] The readable storage medium provided by the present application is a computer-readable storage medium, which stores a computer program for executing the above-mentioned interactive display method of the interface link diagram, and can solve the technical problem that the interactive feedback of the interface link diagram is not obvious. Compared with the prior art, the beneficial effects of the computer-readable storage medium provided by the present application are the same as the beneficial effects of the interactive display method of the interface link diagram provided by the above-mentioned embodiment, and will not be repeated here.

[0165] The above descriptions are only some embodiments of the present application, and are not intended to limit the patent scope of the present application. All equivalent structural changes made using the contents of the present application specification and drawings under the technical concept of the present application, or direct / indirect applications in other related technical fields are included in the patent protection scope of the present application.

Claims

1. A method for interactively displaying an interface link diagram, characterized in that: The method comprises: When a user's hovering operation on the three-dimensional icon is detected, determining a target functional module corresponding to the three-dimensional icon; Display an interactive animation of the target functional module; Displaying a bubble floating layer pop-up window interface associated with the target function module, wherein the bubble floating layer pop-up window interface includes a function menu of the target function module; The step of displaying the interactive animation of the target functional module comprises: Acquire all image frames of the three-dimensional icon, and display the image frames in sequence; Determine the link between the target functional module and other functional modules; Determine corresponding highlight display parameters according to the importance of the link, wherein the highlight display parameters include color, style and width; Based on the highlight display parameter, highlight the link; The step of displaying a bubble floating window pop-up interface associated with the target function module, wherein the bubble floating window pop-up interface includes a function menu of the target function module, comprises: Determine the function display areas of all function modules and the bubble floating window interface associated with the target function module; Determine the area to be displayed of the bubble floating layer pop-up window interface according to the blank area outside the function display area; The bubble floating layer pop-up window interface is displayed in the to-be-displayed area, and the bubble floating layer pop-up window interface includes a function menu of the target function module.

2. The method according to claim 1, characterized in that After the step of displaying a bubble floating layer pop-up window interface associated with the target function module, wherein the bubble floating layer pop-up window interface includes a function menu of the target function module, the step further includes: When detecting a click operation of the user on the function menu, determining a target sub-function module corresponding to the click operation; Jump to the function interface corresponding to the target sub-function module.

3. The method according to claim 1, characterized in that After the step of displaying a bubble floating layer pop-up window interface associated with the target function module, wherein the bubble floating layer pop-up window interface includes a function menu of the target function module, the step further includes: When detecting a hovering operation of the user on the function menu, determining a target sub-function module corresponding to the hovering operation; Acquire link information of links between the target functional module and other functional modules; If the target sub-function module matches the link information, the link corresponding to the link information is displayed in association.

4. The method as claimed in claim 3, characterized in that The step of associating and displaying the links corresponding to the link information comprises: Determining a corresponding association display mode according to a matching coefficient between the target sub-function module and the link information; Based on the association display mode, the links corresponding to the link information are displayed in an association manner.

5. The method according to claim 1, characterized in that Before the step of determining the target function module corresponding to the three-dimensional icon when a user hovering operation on the three-dimensional icon is detected, the method further includes: When an original link diagram input by a user is detected, determining a two-dimensional icon in the original link diagram; Determine, according to the image database, a three-dimensional icon corresponding to the two-dimensional icon; The two-dimensional icon in the original link map is replaced by the three-dimensional icon.

6. An interactive display device for an interface link diagram, characterized in that: The device comprises: a memory, a processor and a computer program stored in the memory and executable on the processor, wherein the computer program is configured to implement the steps of the method for interactively displaying an interface link diagram as described in any one of claims 1 to 5.

7. A storage medium, characterized in that: The storage medium is a computer-readable storage medium, and a computer program is stored on the storage medium. When the computer program is executed by a processor, the steps of the interactive display method of the interface link diagram according to any one of claims 1 to 5 are implemented.

Images