Movatterモバイル変換


[0]ホーム

URL:


CN118963903B - Interactive display method, device and storage medium of interface link diagram - Google Patents

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

Info

Publication number
CN118963903B
CN118963903BCN202411435739.5ACN202411435739ACN118963903BCN 118963903 BCN118963903 BCN 118963903BCN 202411435739 ACN202411435739 ACN 202411435739ACN 118963903 BCN118963903 BCN 118963903B
Authority
CN
China
Prior art keywords
interface
target
link
function
user
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN202411435739.5A
Other languages
Chinese (zh)
Other versions
CN118963903A (en
Inventor
李晓辉
熊丽萍
滕一帆
林大海
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shenzhen Smart City Technology Development Group Co ltd
Original Assignee
Shenzhen Smart City Technology Development Group Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shenzhen Smart City Technology Development Group Co ltdfiledCriticalShenzhen Smart City Technology Development Group Co ltd
Priority to CN202411435739.5ApriorityCriticalpatent/CN118963903B/en
Publication of CN118963903ApublicationCriticalpatent/CN118963903A/en
Application grantedgrantedCritical
Publication of CN118963903BpublicationCriticalpatent/CN118963903B/en
Activelegal-statusCriticalCurrent
Anticipated expirationlegal-statusCritical

Links

Classifications

Landscapes

Abstract

The application discloses an interactive display method, equipment and a storage medium of an interface link diagram, which relate to the technical field of interface display and comprise the steps of determining a target function module corresponding to a three-dimensional icon when a hovering operation of a user in the three-dimensional icon is detected; displaying the bubble floating layer popup window interface associated with the target function module, wherein the bubble floating layer popup window interface comprises a function menu of the target function module. Aiming to enhance interactive feedback for the user.

Description

Interactive display method, device and storage medium of interface link diagram
Technical Field
The present application relates to the field of interface display technologies, and in particular, to an interactive display method, device, and storage medium for an interface link map.
Background
The link graph is a graph representation method for showing the condition that different nodes are connected with each other through links. In the link graph, nodes represent functional modules, and links represent connection relationships or interaction paths between the functional modules.
The current link diagram interface is usually displayed directly in a text tiling mode. Specifically, different functional modules are distinguished through two-dimensional rectangular boxes, the direction of a link is indicated by utilizing two-dimensional arrows, and the functional modules are classified by matching with color blocks. When a user hovers a mouse over a particular function module, the color of the associated text changes to indicate that the function module may be clicked in.
However, in the practical application process, the link relationship of the display scheme is complex and not intuitive, and the hierarchical structure is chaotic and unclear. Under such a display condition, even if the color of the text changes due to the hovering of the mouse, the interactive feedback is still not obvious due to the excessively complex background.
The foregoing is provided merely for the purpose of facilitating understanding of the technical solutions of the present application and is not intended to represent an admission that the foregoing is prior art.
Disclosure of Invention
The application mainly aims to provide an interactive display method, equipment and storage medium of an interface link diagram, and aims to solve the technical problem that interactive feedback of the interface link diagram is not obvious.
In order to achieve the above object, the present application provides an interactive display method of an interface link diagram, the method comprising:
When the hovering operation of a user on the three-dimensional icon is detected, determining a target function module corresponding to the three-dimensional icon;
displaying the interactive animation of the target function module;
And displaying a bubble floating layer popup window interface associated with the target functional module, wherein the bubble floating layer popup window interface comprises a functional menu of the target functional module.
In one embodiment, the step of displaying the interactive animation of the target function module includes:
acquiring all image frames of the three-dimensional icon, and sequentially displaying the image frames;
And determining links between the target functional module and other functional modules, and highlighting the links.
In one embodiment, the step of highlighting the link includes:
Determining corresponding highlighting parameters according to the importance of the link, wherein the highlighting parameters comprise color, style and width;
and highlighting the link based on the highlighting parameter.
In an embodiment, after the step of displaying the bubble floating layer popup interface associated with the target function module, the bubble floating layer popup interface includes a function menu of the target function module, the method further includes:
When the clicking operation of a user on the function menu is detected, determining a target sub-function module corresponding to the clicking operation;
And jumping to a function interface corresponding to the target sub-function module.
In an embodiment, after the step of displaying the bubble floating layer popup interface associated with the target function module, the bubble floating layer popup interface includes a function menu of the target function module, the method further includes:
when the hovering operation of the user in the function menu is detected, determining a target sub-function module corresponding to the hovering operation;
acquiring link information of links between the target functional module and other functional modules;
and if the target sub-function module is matched with the link information, carrying out associated display on the link corresponding to the link information.
In an embodiment, the step of performing association display on the link corresponding to the link information includes:
determining a corresponding association display mode according to the matching coefficient of the target sub-functional module and the link information;
And carrying out association display on the links corresponding to the link information based on the association display mode.
In an embodiment, before the step of determining the target function module corresponding to the three-dimensional icon when the hovering operation of the user over 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;
Determining a three-dimensional icon corresponding to the two-dimensional icon according to a picture database;
And replacing the two-dimensional icon in the original link diagram with the three-dimensional icon.
In an embodiment, the step of displaying the bubble floating layer popup interface associated with the target function module, where the bubble floating layer popup interface includes a function menu of the target function module includes:
determining function display areas of all the function modules and the bubble floating layer popup window interface associated with the target function module;
Determining a region to be displayed of the bubble floating layer popup window interface according to the blank region outside the function display region;
and displaying the bubble floating layer popup window interface in the area to be displayed, wherein the bubble floating layer popup window interface comprises a function menu of the target function module.
In addition, in order to achieve the aim, the application also provides an interactive display device of the interface link diagram, which comprises a memory, a processor and a computer program stored on the memory and capable of running on the processor, wherein the computer program is configured to realize the steps of the interactive display method of the interface link diagram.
In addition, to achieve the above object, the present application also proposes a storage medium, which is a computer-readable storage medium, on which a computer program is stored, which when executed by a processor, implements the steps of the interactive display method of an interface link map as described above.
One or more technical schemes provided by the application have at least the following technical effects:
The application provides an interactive display method of an interface link diagram, which is used for immediately focusing on a target function module corresponding to a three-dimensional icon when a hovering operation of a user on the three-dimensional icon is detected. The method extracts the attention of the user from the complex background and concentrates the attention on the currently focused functional module, thereby avoiding the interference of the background complexity on the interactive feedback. In one aspect, an interactive animation of the target function module is displayed. Through the animation effect, the instant perception of the interactive operation by the user is enhanced, and the visual enhancement is helpful for improving the user experience and reducing the learning cost. On the other hand, displaying a bubble floating layer popup window interface associated with the target functional module. The method directly and clearly presents the related information of the functional module, and a user does not need to search for the required content in a complex hierarchical structure, so that the information acquisition efficiency is greatly improved.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the application and together with the description, serve to explain the principles of the application.
In order to more clearly illustrate the embodiments of the application or the technical solutions of the prior art, the drawings which are used in the description of the embodiments or the prior art will be briefly described, and it will be obvious to a person skilled in the art that other drawings can be obtained from these drawings without inventive effort.
FIG. 1 is a schematic flow chart of an interactive display method of an interface link diagram according to an embodiment of the present application;
FIG. 2 is a schematic diagram of a three-dimensional icon provided in an embodiment of an interactive display method of an interface link diagram of the present application;
FIG. 3 is a schematic two-dimensional display diagram of an interactive display method according to an embodiment of the present application;
FIG. 4 is a schematic flow chart of a second embodiment of an interactive display method of an interface link diagram according to the present application;
FIG. 5 is a schematic flow chart of a third embodiment of an interactive display method of an interface link diagram according to the present application;
FIG. 6 is a schematic flow chart of a fourth embodiment of an interactive display method of an interface link diagram according to the present application;
Fig. 7 is a schematic diagram of a picture database provided in a fourth embodiment of an interactive display method of an interface link diagram according to the present application;
Fig. 8-13 are schematic diagrams of three-dimensional icons of the platform link diagram of the intelligent gateway system provided by the interactive display method of the interface link diagram of the present application;
Fig. 14 is a schematic device structure diagram of a hardware operating environment related to an interactive display method of an interface link diagram in an embodiment of the present application.
The achievement of the objects, functional features and advantages of the present application will be further described with reference to the accompanying drawings, in conjunction with the embodiments.
Detailed Description
It should be understood that the specific embodiments described herein are merely illustrative of the technical solution of the present application and are not intended to limit the present application.
For a better understanding of the technical solution of the present application, the following detailed description will be given with reference to the drawings and the specific embodiments.
The method comprises the main steps of determining a target function module corresponding to a three-dimensional icon when a hovering operation of a user on the three-dimensional icon is detected, displaying an interactive animation of the target function module, and displaying a bubble floating layer popup interface associated with the target function module, wherein the bubble floating layer popup interface comprises a function menu of the target function module.
Since the link relationships of the current interface link graph tend to be complex and not intuitive, the hierarchical structure also appears chaotic and unclear. Under such a display condition, even if the color of the text changes due to the hovering of the mouse, the interactive feedback is still not obvious due to the excessively complex background. Moreover, the user needs to spend a lot of time and effort to understand the interface, and the learning cost is high.
In order to solve the problems, the application provides a scheme that when the hovering operation of a user in the three-dimensional icon is detected, the three-dimensional icon is adopted, and not only the interactive animation but also the bubble floating layer popup window interface are displayed, so that the user obtains more obvious interactive feedback.
It should be noted that, the execution body of the present solution may be a computing service device with functions of data processing, network communication and program running, such as a tablet computer, a personal computer, a mobile phone, or an interactive display device of an interface link diagram capable of implementing the above functions. The following embodiments will be described with reference to an interactive display device of an interface link diagram as an example.
Based on this, an embodiment of the present application provides an interactive display method of an interface link map, and referring to fig. 1, fig. 1 is a schematic flow chart of a first embodiment of the interactive display method of an interface link map.
In this embodiment, the interactive display method of the interface link diagram includes steps S10 to S30:
Step S10, when a hovering operation of a user on a three-dimensional icon is detected, determining a target function module corresponding to the three-dimensional icon;
it should be noted that three-dimensional icons refer to graphical interface elements having three-dimensional visual effects, which may enhance stereoscopic effects by visual effects such as shading, highlighting, perspective, etc., making them more prominent and attractive on the interface, and hover operation refers to an operation in which a user places a mouse pointer over one interface element, such as an icon, button, etc., but does not click. This manner of operation allows a user to preview information or functionality related to an element without activating or selecting the element.
Optionally, binding a mouse event detector for an element where the three-dimensional icon is located, where the events generally include a mouse moving element, writing an event processing function, where the function is triggered when the mouse moving element is detected, for detecting two-dimensional coordinates of the mouse in real time, converting the two-dimensional coordinates into three-dimensional view coordinates, which generally involve calculation of a projection matrix and a view matrix, using the converted three-dimensional coordinates to perform collision detection with a geometry of the three-dimensional icon, which can be implemented by technologies such as ray casting, to determine whether a "ray" of the mouse pointer intersects any portion of the three-dimensional icon, and if so, determining that the mouse hovers over the three-dimensional icon, i.e., confirming that a hover operation of the user over the three-dimensional icon is detected.
It is known that there is a mapping between each three-dimensional icon and a particular function, meaning that the system has predefined which icons represent which functions. For example, fig. 2 is an initial interface of a platform link diagram of an intelligent gateway system, which includes 6 three-dimensional icons corresponding to a service release function, a service access function, a service management function, a service monitoring function, an operation center function, and an open platform function, respectively.
Therefore, when the hovering operation of the user on the three-dimensional icon is detected, the system can check the intersection point of the light rays and judge the specific icon hovered by the user. And then, determining a target function module corresponding to the current icon based on a preset mapping relation.
Step S20, displaying the interactive animation of the target function module;
optionally, a real-time rendering mode is adopted, and the specific steps are as follows:
Preparing a three-dimensional model or a scene, namely creating the three-dimensional model of the functional module in three-dimensional modeling software, and designing the scene and elements required by the interactive animation. The export model is in a format that can be used in a real-time rendering engine.
Setting a rendering engine, namely integrating a real-time rendering engine in an application program. The three-dimensional model and scene are loaded and imported into the rendering engine.
Configuring the animation, namely configuring the interactive animation of the functional module in the rendering engine, which may comprise setting parameters such as key frames of the animation, animation curves, animation duration and the like. If the animation is related to the user's interaction, it is also necessary to set conditions that trigger the animation, such as mouse hovering.
Thus, when the trigger condition is met, each frame of the interactive animation can be dynamically generated and displayed according to the animation configuration based on the real-time rendering function of the rendering engine.
Optionally, a pre-designed mode is adopted, and the specific steps are as follows:
Designing an animation scene, namely designing the animation scene related to each functional module according to the characteristics of each functional module, wherein the scene can comprise element change, dynamic effect, interface change and the like, for example, changing the shape, color and size of the element, adding dynamic effects such as movement, rotation, scaling and the like, popup window, page jump and the like;
Configuring animation by integrating a proper animation library or framework into the development environment of the link map interface. In the animation library or framework, parameters of the animation, such as animation duration, delay time, animation curve, animation repetition number and the like, are configured according to the designed animation scene.
Binding an animation, binding the configured animation to the corresponding user interface element of the target function module, typically involves setting a specific class name, ID (Identity document, identification number) or data attribute for the elements, and referencing the elements through a selector in an animation library or framework.
Thus, when the triggering condition is met, the interactive animation bound by the target function module can be triggered through the API (Application Programming Interface ) of the animation library or framework, so that the interactive animation of the target function module is immediately effective.
And step S30, displaying a bubble floating layer popup window interface associated with the target functional module, wherein the bubble floating layer popup window interface comprises a functional menu of the target functional module.
It should be noted that the bubble float popup interface is a user interface element that is typically presented in the form of a small float with rounded borders and arrows pointing to the trigger elements, containing function menus associated with the target function module.
In the design phase, the following steps are performed:
Designing the content of the bubble floating layer, namely designing the content of the bubble floating layer popup window according to the function and the requirement of the target functional module, wherein the content comprises a functional menu, prompt information or related operation options.
Creating a bubble float container-in the HTML document or front end framework, a container element such as < div > is created to carry the contents of the bubble float. This container should initially be invisible.
Thus, when the triggering condition is met, a corresponding function can be executed to display the bubble floating layer popup window interface. This function should modify the CSS properties of the bubble float container so that it is never visible to visible and may also require calculation and adjustment of the position of the bubble float to ensure that it is pointing correctly to the trigger element and does not obscure other important content.
When the bubble floating layer popup window interface is displayed, the display position of the bubble floating layer popup window interface needs to be reasonably arranged. The reasonable position selection avoids the situation of shielding important information or interfering with the current operation of a user, and reduces the possibility of interface confusion and misoperation.
Specifically, the function display area that each function module occupies in the user interface is specified. And identifying a blank area outside the functional display area, and selecting a position which does not interfere with the current operation of the user and attracts the attention of the user as an area to be displayed by the system according to the size and the shape of the bubble floating layer popup window interface and the visual habit and the operation habit of the user. And then displaying a bubble floating layer popup window interface in the area to be displayed.
After that, the system will continuously detect the user's behavior on the interface, and once the user's clicking operation on the function menu is detected, the system will parse the specific menu item pointed to by this operation. The mapping relation between a menu item and a sub-function module is maintained in the system, so that the target sub-function module corresponding to the menu item can be determined based on the mapping relation. Then, the system executes 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 cumbersome navigation or search processes, which helps to increase the overall response speed of the system.
Additionally, to enhance the user experience, logic may be added to automatically hide the bubble float after a period of time, or to hide the trigger element when the user moves its focus away from it. This may be accomplished by setting a timer or detecting other events.
The embodiment provides an interactive display method of an interface link diagram, which is different from the two-dimensional display mode in fig. 3, and the scheme comprehensively adopts three-dimensional display, so that the visual effect is enhanced, and the interactive experience is improved. When the hovering operation of the user on the three-dimensional icon is detected, the scheme immediately focuses on the target function module corresponding to the three-dimensional icon. The method extracts the attention of the user from the complex background and concentrates the attention on the currently focused functional module, thereby avoiding the interference of the background complexity on the interactive feedback. In one aspect, an interactive animation of the target function module is displayed. Through the animation effect, the instant perception of the interactive operation by the user is enhanced, and the visual enhancement is helpful for improving the user experience and reducing the learning cost. On the other hand, displaying a bubble floating layer popup window interface associated with the target functional module. The method directly and clearly presents the related information of the functional module, and a user does not need to search for the required content in a complex hierarchical structure, so that the information acquisition efficiency is greatly improved.
In the second embodiment of the present application, the same or similar content as in the first embodiment of the present application may be referred to the description above, and will not be repeated. On this basis, referring to fig. 4, step S20 includes steps a10 to a20:
step A10, acquiring all image frames of the three-dimensional icon, and sequentially displaying the image frames;
And step A20, determining links between the target functional module and other functional modules, and highlighting the links.
This embodiment relates to both node and link dimensions.
The node dimension, focusing on the animation effect is directly applied to the three-dimensional icon.
When the triggering condition is met, all image frames of the three-dimensional icon where the target functional module is located are determined based on a preset binding relation. The image frames are then displayed in a predetermined sequence in a fluent manner, creating a dynamic icon effect to provide visual interactive feedback to the user.
The link dimension, focusing on the connection relationship between the three-dimensional icons.
Firstly, because the function modules exchange data through the API, the links between the target function module and other function modules can be clarified by analyzing the calling relation of the API, and further, the user interface elements corresponding to the links are determined.
Next, a pattern of highlighting the link is determined, for example, changing the link color from gray to bright.
After the highlighting styles and corresponding user interface elements are determined, the styles are applied to the elements. This is typically accomplished by modifying the CSS (CASCADING STYLE SHEETS, cascading style sheet) style of the element, adding a specific class name to ensure that the highlighting effect is reflected instantaneously upon user interaction.
Illustratively, the link's highlighting is determined according to its importance in the overall business process or data flow:
firstly, defining importance evaluation indexes including but not limited to functionality, user interaction frequency and the like, collecting related data from a plurality of channels of a system log, a monitoring tool, a user behavior analysis system and the like, cleaning the data, integrating the data to form a complete link importance evaluation data set, and for each link, scoring the links according to the collected indexes and distributing weights to reflect the importance degree of each index. The importance of the links is ranked according to the sum of the scores, such as high importance, medium importance, low importance.
And secondly, based on the mapping relation between the preset importance and the highlighting parameters, after the importance of the current link is calculated, the highlighting parameters applicable to the current link can be determined, including the color, the style and the width.
For example, high importance- -red, solid line, 4mm thick line, medium importance- -yellow, dash-dot line, 2mm moderate line, low importance- -blue, dashed line, 1mm thin line.
Finally, the link is subjected to actual visual processing according to the determined highlighting parameters. This typically involves modifying the rendering properties of the link so that it is displayed in different colors, lines, and widths in the user interface. In this way, the user can more easily identify and understand the functions and relationships of the links, thereby improving the readability and usability of the interface.
The embodiment provides an interactive display method of an interface link diagram, and a pre-designed mode is adopted to provide a clear structure so as to ensure that all feedback is consistent, and therefore, a user can expect and understand better in use. The animation effect of the node dimension provides rich visual experience for the user by dynamically displaying the image frames of the three-dimensional icon, and the dynamic feedback not only can attract the attention of the user, but also can intuitively express the current operation result. And the highlighting process of the link dimension emphasizes the connection relation between the functional modules, and provides clear navigation path and visual guidance for the user. And through the feedback of two dimensions of the nodes and the links, the learning cost is reduced, and the understanding capability of the user is improved.
In the third embodiment of the present application, the same or similar content as the first embodiment of the present application can be referred to the description above, and the description is omitted. On this basis, please refer to fig. 5, after step S30, steps B10 to B30 are further included:
step B10, when the hovering operation of the user in the function menu is detected, determining a target sub-function module corresponding to the hovering operation;
Step B20, obtaining link information of links between the target functional module and other functional modules;
and step B30, if the target sub-function module is matched with the link information, carrying out associated display on the link corresponding to the link information.
The scheme focuses on local and global linkage, wherein the local is a sub-functional module under a functional module, and the global is a link between the functional module and other functional modules.
The system continuously detects the behavior of the user on the interface, and once the hovering operation of the user on the function menu is detected, the system determines the corresponding target sub-function module, and the specific steps are the same as those of the first embodiment, and are not described herein.
Optionally, based on the calling relation of the API between the functional modules, links between the target functional module and other functional modules are determined, and relevant information of the links is further retrieved by querying a database, reading a configuration file or accessing a data structure in a memory, including but not limited to ID, function, attribute, etc.
Further, the target sub-functional module is matched with the link information, and specifically, the dimension consideration of functional relevance, data flow continuity, business logic dependence and the like can be realized. The method comprises the steps of checking whether links in link information are directly related to functions of target sub-function modules or not, analyzing flow paths of data flows in links for data flow continuity, determining whether the target sub-function modules are located on key nodes of the paths, and considering whether clear dependency relationships exist in business logic or not according to business logic dependency, so that a certain target sub-function module must depend on output or input of the links.
Illustratively, the target function module is an "operation center", the menu functions of which include a "monitoring center", a "log center", a "message center", and the links of which include a "rule configuration", a "data collection", and the like.
When the mouse hovers over the log center, the system automatically matches the log center with the rule configuration data acquisition data:
And (3) checking the functional relevance, namely traversing each link in the link information, and checking whether the link is directly related to the function of the target sub-functional module. For example, it is apparent that the "logging center" has a direct functional relevance to the "logging" link.
Data flow continuity analysis, which is to analyze the flow path of the data flow in the link and determine whether the log center is on the key node of the path. If the data stream is recorded after "data acquisition" to the "log center," the "log center" and "data acquisition" may be considered to have continuity in the data stream.
And judging the dependency of the business logic, wherein whether an explicit dependency relationship exists in the business logic is considered. For example, if business logic requires that all collected data must be recorded and reviewed through a "log center," the "log center" link is dependent on "data collection.
And judging which link information the target sub-function module is matched with according to the analysis, and further carrying out associated display on the matched links. For example, if the "log center" matches the "data collection", the system automatically highlights the interface element where the "data collection" is located.
In addition, the matching degree between the target sub-functional module and the link information can be quantized, and different display modes are adopted, and the specific steps are as follows:
for each evaluation dimension, a scoring rule needs to be formulated.
Functional relevance is to give a high score (e.g., 1.0) if the link information directly describes the function of the target sub-functional module, a medium score (e.g., 0.5-0.8) if the function is relevant but not directly, and a low score (e.g., 0.0) if it is not relevant at all.
Data flow continuity, namely, giving a high score if the data flow in the link information is completely dependent on the output of the target sub-functional module, giving a medium score if the data flow is partially dependent or only used as one of input sources, and giving a low score if the data flow is not dependent.
Business logic relies on scoring according to the degree of connection closeness or level of dependency between the two in the business logic graph.
Since different evaluation dimensions may have different impact on the degree of matching, a weight needs to be assigned to each dimension. Then, the score of each dimension is multiplied by the weight corresponding to the score, and all the products are added to obtain a final matching coefficient.
The method comprises the steps of defining a plurality of intervals with matching coefficients in advance, and designating an associated display mode for each interval. For example:
high matching (0.8-1.0) using a pronounced highlighting effect, dynamic elements or pop-up boxes, emphasizing importance.
And (3) matching (0.5-0.8) by using common highlighting, frames or color changes and moderately prompting.
Low matching (0.0-0.5) is to use desalination effect or no special display to reduce visual disturbance.
Therefore, in practical application, according to the calculated matching coefficient, a corresponding associated display mode can be determined. The display mode can intuitively reflect the relation between the target sub-function module and the link information and the importance of the relation.
The embodiment provides an interactive display method of an interface link diagram, emphasizes local and global linkage, and the linkage is helpful to construct a hierarchical structure of information, so that a user can clearly know the influence or association of the operation on the whole system when performing local operation, and the user is helped to make a more intelligent decision.
In the fourth embodiment of the present application, the same or similar content as in the first embodiment of the present application can be referred to the above description, and the description thereof will be omitted. On this basis, please refer to fig. 6, before step S10, further comprising steps C10 to C30:
Step C10, when an original link diagram input by a user is detected, determining a two-dimensional icon in the original link diagram;
step C20, determining a three-dimensional icon corresponding to the two-dimensional icon according to a picture database;
And step C30, replacing the two-dimensional icon in the original link diagram with the three-dimensional icon.
The original link map entered by the user may be a two-dimensional graphical interface and the system needs to be able to recognize two-dimensional icons in these elements.
The system needs to analyze the original link map to identify all two-dimensional icons used therein. This process may involve image processing techniques or matching of libraries of icons, ensuring that the system can accurately identify which icons are in two-dimensional format.
Specifically, an edge detection algorithm is used for extracting edge information of the icons to help identify outlines of the icons, and feature extraction is performed on the outlines to obtain geometric features of each icon. The two-dimensional icons in the original link map are identified by comparing the shape matching technique with the icon library.
Referring to fig. 7, within the system is a predefined picture database for associating each two-dimensional icon to its corresponding three-dimensional icon. For example, a two-dimensional icon representing an "operation center" may correspond to a three-dimensional icon having a similar appearance but a three-dimensional effect.
Based on the picture database, a three-dimensional icon corresponding to the two-dimensional icon in the original link diagram can be determined.
And finally, replacing all the two-dimensional icons in the original link diagram with the three-dimensional icons corresponding to the two-dimensional icons. This typically involves redrawing the link map on the user interface, replacing the original two-dimensional icon with a three-dimensional icon, leaving the positions and properties of all other elements unchanged, and finally displaying at the user interface layer.
In addition to the mode, the application can design and manufacture a three-dimensional icon through vector software, and the same interface optimization purpose is realized.
The embodiment provides an interactive display method of an interface link diagram, wherein a large amount of three-dimensional icon data can be stored in a database in advance, and when two-dimensional icons need to be converted, only the corresponding three-dimensional icons need to be searched in the database, and re-creation or rendering is not needed. Thus, the time in the conversion process is obviously shortened, and the overall efficiency is improved.
Illustratively, fig. 2 is an initial interface of a platform link diagram of an intelligent gateway system, which includes 6 three-dimensional icons corresponding to a service release function, a service access function, a service administration function, a service monitoring function, an operation center function, and an open platform function, respectively.
FIG. 8 is an interactive animation of a mouse hovering over a "service release" icon area and triggering a "service release" icon while popping up a "service release" bubble floating layer popup window interface, which is a more additional functionality included under that functionality, and after clicking, will jump to additional pages.
FIG. 9 is an interactive animation of a mouse hovering over a "service Access" icon area and triggering a "service Access" icon while popping up a "service Access" bubble float layer popup window interface, which is a more additional functionality involved under that functionality, and after clicking will jump to additional pages.
FIG. 10 is an interactive animation of a mouse hovering over a "service remediation" icon area followed by triggering the "service remediation" icon while popping up a "service remediation" bubble float layer pop-up interface, which is a more additional functionality involved in this functionality, and after clicking, will jump to additional pages.
FIG. 11 is an interactive animation of a mouse hovering over a "service monitor" icon area followed by triggering a "service monitor" icon while popping up a "service monitor" bubble float layer pop-up interface, which is a more powerful function contained under that function, and after clicking, will jump to other pages.
Fig. 12 is an interactive animation of a mouse hovering in an "operation center" icon area to trigger an "operation center" icon, and at the same time, popping up an "operation center" bubble floating layer popup window interface, where the "operation center" bubble floating layer popup window is a more other function included in the function, and after clicking, the operation center "bubble floating layer popup window jumps to other pages.
FIG. 13 is an interactive animation of a mouse hovering over an "open platform" icon area and triggering an "open platform" icon while popping up an "open platform" bubble float layer pop-up window interface, which is a more additional functionality involved in the functionality, and jumping to additional pages after clicking.
In the interactive animation corresponding to each frame, the icon changes. After the mouse is hovered in the area of the 'open platform' icon, the interval between the small squares in the 'open platform' icon gradually becomes larger. After the mouse is hovered in the service monitor icon area, the direction of the column in the service monitor icon deflects. After the mouse hovers over the service release icon area, the distance of the paper in the service release icon becomes gradually larger. After the mouse hovers in the service access icon and the service management icon areas, the widths of the service access icon and the service management icon are gradually increased. After the mouse hovers over the "operation center" icon area, the position of the arrow in the "operation center" icon moves upward.
According to the interactive display method of the interface link diagram, the three-dimensional dynamic icons of the link diagram are output through the three-dimensional software design, the three-dimensional design is carried out on the 6 modules of the link diagram, the dynamic design is carried out on each three-dimensional icon, when a user floats in an icon area through a mouse, the dynamic effect of the three-dimensional icon is triggered, meanwhile, a dialog box is popped up to provide more menu selections under the menu function, the three-dimensional link diagram is convenient for the user to quickly understand the interface function and content, the user can quickly understand and make selections, the learning cost of the user is reduced, and meanwhile, the work efficiency of the user is improved.
It should be noted that the foregoing examples are only for understanding the present application, and do not limit the interactive display method of the interface link diagram of the present application, and more forms of simple transformation based on the technical concept are all within the scope of the present application.
The application provides an interactive display device of an interface link diagram, which comprises at least one processor and a memory in communication connection with the at least one processor, wherein the memory stores a computer program which can be executed 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 of the interface link diagram in the first embodiment.
Referring now to FIG. 14, a schematic diagram of an interactive display device suitable for use in implementing the interface link diagram of an embodiment of the present application is shown. 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, notebook computers, digital broadcast receivers, PDAs (Personal DIGITAL ASSISTANT: personal digital assistants), PADs (Portable Application Description: tablet computers), PMPs (Portable MEDIA PLAYER: portable multimedia players), vehicle-mounted terminals (e.g., car navigation terminals), and the like, and fixed terminals such as digital TVs, desktop computers, and the like. The interactive display device of the interface link diagram shown in fig. 14 is merely an example, and should not be construed as limiting the functionality and scope of use of the embodiments of the present application.
As shown in fig. 14, the interactive display device of the interface link diagram may include a processing means 1001 (e.g., a central processor, a graphic processor, etc.), which may perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM) 1002 or a program loaded from a storage means 1003 into a random access Memory (RAM: random Access Memory) 1004. In the 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, the ROM1002, and the RAM1004 are connected to each other by a bus 1005. An input/output (I/O) interface 1006 is also connected to the bus. In general, a system including an input device 1007 such as a touch screen, a touch pad, a keyboard, a mouse, an image sensor, a microphone, an accelerometer, a gyroscope, etc., an output device 1008 including a Liquid crystal display (LCD: liquid CRYSTAL DISPLAY), a speaker, a vibrator, etc., a storage device 1003 including a magnetic tape, a hard disk, etc., and a communication device 1009 may be connected to the I/O interface 1006. The communicator 1009 may allow the interactive display device of the interface link diagram to communicate wirelessly or by wire with other devices to exchange data. While an interactive display device with an interface link diagram of various systems is shown in the figures, it should be understood that not all of the illustrated systems are required to be implemented or provided. More or fewer systems may alternatively be implemented or provided.
In particular, according to embodiments of the present disclosure, the processes described above with reference to flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method shown in the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network through a communication device, or installed from the storage device 1003, or installed from the ROM 1002. The above-described functions defined in the method of the disclosed embodiment of the application are performed when the computer program is executed by the processing device 1001.
The interactive display device of the interface link diagram provided by the application can solve the technical problem that the interactive feedback of the interface link diagram is not obvious by adopting the interactive display method of the interface link diagram in the embodiment. Compared with the prior art, the interactive display device of the interface link diagram has the same beneficial effects as the interactive display method of the interface link diagram provided by the embodiment, and other technical features in the interactive display device of the interface link diagram are the same as the features disclosed by the method of the previous embodiment, and are not repeated herein.
It is to be understood that portions of the present disclosure may be implemented in hardware, software, firmware, or a combination thereof. In the description of the above embodiments, particular features, structures, materials, or characteristics may be combined in any suitable manner in any one or more embodiments or examples.
The foregoing is merely illustrative of the present application, and the present application is not limited thereto, and any person skilled in the art will readily recognize that variations or substitutions are within the scope of the present application. Therefore, the protection scope of the present application shall be subject to the protection scope of the claims.
The present application provides a computer-readable storage medium having a computer program stored thereon, the computer-readable program instructions for performing the interactive display method of the interface link map in the above-described embodiments.
The computer readable storage medium provided by the present application may be, for example, a U disk, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, or device, or a combination of any of the foregoing. More specific examples of a computer-readable storage medium may include, but are not limited to, an electrical connection having one or more wires, a portable computer diskette, a hard disk, a random access Memory (RAM: random Access Memory), a Read-Only Memory (ROM), an erasable programmable Read-Only Memory (EPROM: erasable Programmable Read Only Memory or flash Memory), an optical fiber, a portable compact disc Read-Only Memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In this embodiment, a computer-readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, or device. Program code embodied on a computer readable storage medium may be transmitted using any appropriate medium, including but not limited to electrical wiring, fiber optic cable, RF (Radio Frequency) and the like, or any suitable combination of the foregoing.
The computer readable storage medium may be included in the interactive display device of the interface link map or may exist alone without being assembled into the interactive display device of the interface link map.
The computer readable storage medium carries one or more programs, and when the 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 determines a target function module corresponding to a three-dimensional icon when a user hovering operation on the three-dimensional icon is detected, displays interactive animation of the target function module, and displays a bubble floating layer popup interface associated with the target function module, wherein the bubble floating layer popup interface comprises a function menu of the target function module.
Computer program code for carrying out operations of the present application may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, smalltalk, C ++ and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of remote computers, the remote computer may be connected to the user's computer through any kind of network, including a local area network (LAN: local Area Network) or a wide area network (WAN: wide Area Network), or may be connected to an external computer (for example, through the Internet using an Internet service provider).
The flowcharts and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present application. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The modules involved in the embodiments of the present application may be implemented in software or in hardware. Wherein the name of the module does not constitute a limitation of the unit itself in some cases.
The readable storage medium provided by the application is a computer readable storage medium, and the computer readable storage medium is stored with a computer program for executing the interactive display method of the interface link diagram, so that the technical problem that the interactive feedback of the interface link diagram is not obvious can be solved. Compared with the prior art, the beneficial effects of the computer readable storage medium provided by the application are the same as those of the interactive display method of the interface link diagram provided by the above embodiment, and are not described herein.
The foregoing description is only a partial embodiment of the present application, and is not intended to limit the scope of the present application, and all the equivalent structural changes made by the description and the accompanying drawings under the technical concept of the present application, or the direct/indirect application in other related technical fields are included in the scope of the present application.

Claims (7)

CN202411435739.5A2024-10-152024-10-15Interactive display method, device and storage medium of interface link diagramActiveCN118963903B (en)

Priority Applications (1)

Application NumberPriority DateFiling DateTitle
CN202411435739.5ACN118963903B (en)2024-10-152024-10-15Interactive display method, device and storage medium of interface link diagram

Applications Claiming Priority (1)

Application NumberPriority DateFiling DateTitle
CN202411435739.5ACN118963903B (en)2024-10-152024-10-15Interactive display method, device and storage medium of interface link diagram

Publications (2)

Publication NumberPublication Date
CN118963903A CN118963903A (en)2024-11-15
CN118963903Btrue CN118963903B (en)2025-03-07

Family

ID=93396850

Family Applications (1)

Application NumberTitlePriority DateFiling Date
CN202411435739.5AActiveCN118963903B (en)2024-10-152024-10-15Interactive display method, device and storage medium of interface link diagram

Country Status (1)

CountryLink
CN (1)CN118963903B (en)

Citations (3)

* Cited by examiner, † Cited by third party
Publication numberPriority datePublication dateAssigneeTitle
CN110096189A (en)*2019-04-122019-08-06平安国际智慧城市科技股份有限公司Application function access control method, device, storage medium and terminal device
CN112346680A (en)*2019-08-072021-02-09阿里巴巴集团控股有限公司Display method, device, system and storage medium
CN115407906A (en)*2022-08-232022-11-29湖北星纪时代科技有限公司User interface interaction method, device, medium and equipment

Family Cites Families (3)

* Cited by examiner, † Cited by third party
Publication numberPriority datePublication dateAssigneeTitle
US8527896B2 (en)*2003-10-232013-09-03Microsoft CorporationUser interface menu with hovering icons
CN109697001B (en)*2017-10-242021-07-27腾讯科技(深圳)有限公司Interactive interface display method and device, storage medium and electronic device
CN112783388B (en)*2021-01-212023-02-21维沃移动通信(杭州)有限公司Display method, display device and electronic equipment

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication numberPriority datePublication dateAssigneeTitle
CN110096189A (en)*2019-04-122019-08-06平安国际智慧城市科技股份有限公司Application function access control method, device, storage medium and terminal device
CN112346680A (en)*2019-08-072021-02-09阿里巴巴集团控股有限公司Display method, device, system and storage medium
CN115407906A (en)*2022-08-232022-11-29湖北星纪时代科技有限公司User interface interaction method, device, medium and equipment

Also Published As

Publication numberPublication date
CN118963903A (en)2024-11-15

Similar Documents

PublicationPublication DateTitle
CN106575203B (en)Hover-based interaction with rendered content
US9489131B2 (en)Method of presenting a web page for accessibility browsing
US9756140B2 (en)Tracking user behavior relative to a network page
EP2715499B1 (en)Invisible control
US9317257B2 (en)Folded views in development environment
US8302020B2 (en)Widget authoring and editing environment
US7546543B2 (en)Widget authoring and editing environment
CN108553894B (en)Display control method and device, electronic equipment and storage medium
US20180024730A1 (en)Custom widgets based on graphical user interfaces of applications
US20140245205A1 (en)Keyboard navigation of user interface
US9792268B2 (en)Zoomable web-based wall with natural user interface
KR20040089518A (en)System and method for creation of an object within an object hierarchy structure
WO2013085528A1 (en)Methods and apparatus for dynamically adapting a virtual keyboard
CN111324252B (en)Display control method and device in live broadcast platform, storage medium and electronic equipment
CN110489041B (en)Method, device, equipment and medium for automatically aligning small program dragging elements
US10838585B1 (en)Interactive content element presentation
TW201617839A (en)Light dismiss manager
KR20140132731A (en)Web page application controls
CN109828807A (en)Method, apparatus, electronic equipment and the storage medium of the small routine gesture switching page
US7908567B1 (en)Method and system for navigating in a document
CN108920230B (en) Response method, device, device and storage medium for mouse hovering operation
TWI492141B (en) Browsing device, browsing method, recording program with non-temporary computer-readable recording media, and script program
US20120173984A1 (en)Context-addressed tabs for presentation applications
CN118963903B (en)Interactive display method, device and storage medium of interface link diagram
US20180267691A1 (en)Method and system for generating audio associated with a user interface

Legal Events

DateCodeTitleDescription
PB01Publication
PB01Publication
SE01Entry into force of request for substantive examination
SE01Entry into force of request for substantive examination
GR01Patent grant
GR01Patent grant

[8]ページ先頭

©2009-2025 Movatter.jp