Component identification method and device in visual operation interface, equipment and medium

Abstract

The invention discloses a component identification method and device in a visual operation interface, equipment and a medium, and belongs to the technical field of computers. The method comprises the following steps: in a visual operation interface, in response to an identifier creation request of at least one visual component, creating an identifier layer; receiving an identification operation of the visual component, and displaying identification information of the visual component in the identification layer; performing position association on the identification information and the visual component, and recording position association data; reading position associated data; rendering an identification layer, and determining an identification position of the identification information in the identification layer according to the position association data and the position of the visual component; and displaying identification information based on the identification position. According to the technical scheme, the identification information can move along with the movement of the visual component, so that the identification information can be flexibly controlled, it is ensured that the identification information corresponds to the position of the marked visual component, and the use experience of a user is improved.

Description

Technical Field

[0001] The present application belongs to the field of computer technology, and specifically relates to a component identification method, device, equipment and medium in a visual operation interface. Background Art

[0002] With the rapid development of science and technology, the demand for applications is constantly changing. Applications often need to be updated regularly to meet the real needs of users while maintaining their existing functions.

[0003] In the process of developing and updating applications, in order to facilitate viewing by developers and product managers, visual operations are supported during the development process, that is, developers and product managers are allowed to interact with data or graphics in an intuitive way. However, in the prior art, basic operations are performed on the interface, such as dragging and arranging UI (User Interface) components, but there is a lack of flexible marking functions. Especially for users such as product managers who need to frequently annotate and mark, the inability to perform flexible marking will greatly affect work efficiency.

[0004] Therefore, how to flexibly add and control logos in a visual operation interface has become a technical problem that needs to be solved urgently by those skilled in the art. Summary of the invention

[0005] The embodiments of the present application provide a component identification method, apparatus, device and medium in a visual operation interface, with the aim of solving the problem in the prior art that it is impossible to add flexible marks to UI components in a visual operation interface, and the problem that after adding the identification information, the identification information cannot be flexibly controlled. The present solution can achieve the movement of the identification information as the visual component moves by adding the identification information and associating the position between the identification information and the visual component, thereby flexibly controlling the identification information, ensuring that the identification information corresponds to the position of the marked visual component, and improving the user experience.

[0006] In a first aspect, an embodiment of the present application provides a component identification method in a visual operation interface, the method comprising:

[0007] In the visualization operation interface, in response to a logo creation request of at least one visualization component, creating a logo layer;

[0008] Receiving an identification operation of a visualization component, and displaying identification information of the visualization component in the identification layer;

[0009] Performing position association between the identification information and the visualization component, and recording position association data;

[0010] In the process of rendering the visual operation interface by the renderer, reading the position association data;

[0011] Rendering the identification layer, and determining the identification position of the identification information in the identification layer according to the position association data and the position of the visualization component;

[0012] The marker information is displayed based on the marker position.

[0013] Furthermore, after displaying the identification information based on the identification position, the method further includes:

[0014] If a position movement event of the visualization component is identified, the position movement information of the identification information is determined according to the position movement information of the visualization component.

[0015] Furthermore, after the identification information is positionally associated with the visualization component and the position association data is recorded, the method further includes:

[0016] Recording the location-related data in a JSON Schema;

[0017] Accordingly, in the process of rendering the visual operation interface by the renderer, the position association data is read, including:

[0018] In the process of rendering the visual operation interface by the renderer, the location association data is read from the JSON Schema.

[0019] Furthermore, after displaying the identification information based on the identification position, the method further includes:

[0020] In response to the identification information hiding operation, hiding the identification information of the visualization component;

[0021] In response to the identification information display operation, identification information of the visualization component is displayed.

[0022] Furthermore, rendering the identification layer includes:

[0023] The logo layer is rendered using the Render method of the UI framework.

[0024] Furthermore, the logo layer is rendered using the Render method of the UI framework, including:

[0025] The logo layer is rendered above the component layer using the Render method of the UI framework; wherein the component layer is used to render the visual component.

[0026] Further, the identification information is positionally associated with the visualization component, and position association data is recorded, including:

[0027] Positionally associating the identification information with the current position of the visualization component, and recording position association data;

[0028] or,

[0029] When the identification information is in an active state, in response to a drag operation of the identification information, a position of the identification information after the drag operation is performed is positionally associated with the visualization component, and position association data is recorded.

[0030] In a second aspect, an embodiment of the present application provides a component identification device in a visual operation interface, the device comprising:

[0031] An identification layer creation module, used to create an identification layer in response to an identification creation request of at least one visualization component in a visualization operation interface;

[0032] An identification information determination module, used for receiving an identification operation of a visualization component, and displaying identification information of the visualization component in the identification layer;

[0033] A position-associated data recording module, used for performing position association between the identification information and the visualization component and recording position-associated data;

[0034] A position-related data reading module, used for reading the position-related data during the process of rendering the visual operation interface by the renderer;

[0035] A marker position determination module, used for rendering the marker layer, and determining a marker position of the marker information in the marker layer according to the position association data and the position of the visualization component;

[0036] The identification information display module is used to display the identification information based on the identification position.

[0037] In a third aspect, an embodiment of the present application provides an electronic device, which includes a processor, a memory, and a program or instruction stored in the memory and executable on the processor, wherein the program or instruction, when executed by the processor, implements the method described in the first aspect.

[0038] In a fourth aspect, an embodiment of the present application provides a readable storage medium, on which a program or instruction is stored, and when the program or instruction is executed by a processor, the method described in the first aspect is implemented.

[0039] In a fifth aspect, an embodiment of the present application provides a chip, comprising a processor and a communication interface, wherein the communication interface is coupled to the processor, and the processor is used to run a program or instruction to implement the method described in the first aspect.

[0040] In an embodiment of the present application, in a visualization operation interface, in response to an identification creation request of at least one visualization component, an identification layer is created; an identification operation of a visualization component is received, and identification information of the visualization component is displayed in the identification layer; the identification information is positionally associated with the visualization component, and position association data is recorded; in the process of rendering the visualization operation interface through a renderer, the position association data is read; the identification layer is rendered, and the identification position of the identification information in the identification layer is determined according to the position association data and the position of the visualization component; the identification information is displayed based on the identification position. The above technical scheme can realize that the identification information can move with the movement of the visualization component by adding identification information and associating the position between the identification information and the visualization component, so that the identification information can be flexibly controlled to ensure that the identification information corresponds to the position of the marked visualization component, thereby improving the user experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] Figure 1 It is a flowchart of a component identification method in a visual operation interface provided in Example 1 of the present application;

[0042] Figure 2 It is a schematic diagram of the marking and display process of component identification in the visual operation interface provided in the first embodiment of the present application;

[0043] Figure 3 It is a flowchart of a component identification method in a visual operation interface provided in Example 2 of the present application;

[0044] Figure 4 It is a structural schematic diagram of a component identification device in a visual operation interface provided in Example 3 of the present application;

[0045] Figure 5 It is a schematic diagram of the structure of the electronic device provided in Example 4 of the present application. DETAILED DESCRIPTION

[0046] In order to make the purpose, technical scheme and advantages of the present application clearer, the specific embodiments of the present application are further described in detail below in conjunction with the accompanying drawings. It is understood that the specific embodiments described herein are only used to explain the present application, rather than to limit the present application. It should also be noted that, for the convenience of description, only the part related to the present application but not all of the content is shown in the accompanying drawings. Before discussing the exemplary embodiments in more detail, it should be mentioned that some exemplary embodiments are described as processes or methods depicted as flow charts. Although the flow chart describes each operation (or step) as a sequential process, many of the operations therein can be implemented in parallel, concurrently or simultaneously. In addition, the order of each operation can be rearranged. The process can be terminated when its operation is completed, but it can also have additional steps not included in the accompanying drawings. The process can correspond to a method, a function, a procedure, a subroutine, a subprogram, etc.

[0047] The following will be combined with the drawings in the embodiments of the present application to clearly describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, rather than all the embodiments. All other embodiments obtained by ordinary technicians in this field based on the embodiments in the present application belong to the scope of protection of this application.

[0048] The terms "first", "second", etc. in the specification and claims of the present application are used to distinguish similar objects, and are not used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable under appropriate circumstances, so that the embodiments of the present application can be implemented in an order other than those illustrated or described here, and the objects distinguished by "first", "second", etc. are generally of one type, and the number of objects is not limited. For example, the first object can be one or more. In addition, "and / or" in the specification and claims represents at least one of the connected objects, and the character " / " generally indicates that the objects associated with each other are in an "or" relationship.

[0049] The component identification method, device, equipment and medium in the visual operation interface provided by the embodiments of the present application are described in detail below with reference to the accompanying drawings through specific embodiments and their application scenarios.

[0050] Embodiment 1

[0051] Figure 1 1 is a flow chart of a component identification method in a visual operation interface provided in the first embodiment of the present application. Figure 1 As shown, the specific steps include:

[0052] S101, in a visual operation interface, in response to a logo creation request of at least one visual component, creating a logo layer;

[0053] First, the present application is applicable to the scenario of configuring the visual operation interface. Based on the above usage scenario, it can be understood that the execution subject of the present application can be a smart terminal, for example, the smart terminal can include terminal devices such as desktop computers, laptops, tablet computers and smart phones.

[0054] The visual operation interface can be the interface displayed when the staff configures the user interface. It can be understood that the visual operation interface is the editing state of the user interface. In the visual operation interface, the staff can deploy relevant visual components according to needs, such as deploying multiple visual components with different functions for recharging, querying orders, and viewing user centers.

[0055] In this solution, there can be one or more visualization components in the visualization operation interface. For example, the current visualization operation interface displays visualization component A and visualization component B. Then, when the staff needs to create identification for one or more of the visualization components, an identification creation request will be issued. For example, by clicking the "Add Identification" button, it can be recognized that there is a representation creation request, and the request can be responded to to create an identification layer.

[0056] It can be understood that the logo layer can be an independent layer used to edit and create each logo, and the layer can be independent of the component layer.

[0057] S102, receiving an identification operation of a visualization component, and displaying identification information of the visualization component in the identification layer;

[0058] After the creation of the identification layer is completed, the identification operation issued by the user to one or more components can be received, and the corresponding identification information can be edited for each visualization component. For example, the identification information of "data analysis" is added to the visualization component A, and the identification information of "graphic comparison" is added to the visualization component B.

[0059] In one embodiment, an identification information may also be added to multiple visualization components. For example, an identification information with the content of "data analysis comparison" may be added to visualization component A and visualization component B at the same time.

[0060] The identification operation of the visualization component may be issued by a staff member, and may be used to mark the function, state, and stage of the visualization component. For example, if the development of the visualization component is not yet completed, identification information of "development of all contents is not completed" may be added.

[0061] S103, performing position association between the identification information and the visualization component, and recording position association data;

[0062] After the identification operation of the identification information is completed, the position association between the visualization component and the identification information can be automatically realized in response to the user's operation, such as clicking a position association button. The position association can be to associate the relative positions between the two. For example, if the pixel coordinates of the upper left corner of the visualization component are (600, 800) and the pixel coordinates of the upper left corner of the identification information are (600, 600), then the identification information can be determined to be displayed at a position 200 pixel rows above the visualization component.

[0063] After association, the location association data can be recorded in JSON Schema. JSON Schema is a language specification for defining JSON data structure and verifying the validity of JSON documents. It supports data validation to ensure that the input JSON data conforms to the expected structure and rules. For example, it stipulates that a field must be a string type, have a specific length range, or that certain fields are required. For example, define a JSON Schema for user information, requiring that the name field must be a string and have a length between 5 and 20 characters. And documented, clearly describing the format and constraints of JSON data, providing developers with clear documentation. It helps new developers quickly understand the structure and requirements of the data. Front-end and back-end interaction: In the development of front-end and back-end separation, ensure that the front-end and back-end have a consistent understanding of the data, reduce errors and communication costs. The front-end can validate the data entered by the user according to the JSON Schema provided by the back-end. JSON Schema usually consists of a series of keywords and rules, such as type (specify data type), properties (define the properties of the object), required (specify required fields), etc.

[0064] S104, reading the position association data during the process of rendering the visual operation interface by the renderer;

[0065] After the visual operation interface is opened, it can be rendered using a renderer so that the user can see the visual operation interface. It is understandable that the visual operation interface may include one or more visual components. During the rendering process, the position association data can be read to determine whether one or more visual components of the current visual operation interface have pre-recorded position association data. If there is position association data, the position association data page can be rendered through a renderer, so that the identification information of the visual components on it can be displayed while the visual operation interface is opened.

[0066] Among them, the renderer can be responsible for presenting the processed data in a visual way on the user interface. It determines the appearance, layout and style of the elements. The renderer needs to convert the data into an attractive and easy-to-operate graphical interface according to the design specifications and user interaction requirements. For example, in a web application, the renderer will render the structure and style of the page according to the rules of HTML and CSS, including the color, font, size of the text, the position and size of the picture, and the overall layout of the page. In a game application, the renderer will be responsible for presenting the game scenes, characters, special effects and other elements to the players in a realistic way, including the processing of light and shadow effects, material textures and other aspects.

[0067] S105, rendering the identification layer, and determining the identification position of the identification information in the identification layer according to the position association data and the position of the visualization component;

[0068] Specifically, in the process of rendering the identification information, the identification layer may be rendered first, and the identification position of the identification information in the identification layer may be determined according to the position association data and the position of the visualization component.

[0069] For example, the identification information is displayed at a position 200 pixel rows above the visualization component, and the pixel coordinates of the upper left corner of the visualization component are (400,500), then the pixel coordinates of the upper left corner of the identification information are (400,300).

[0070] S106: Display the identification information based on the identification position.

[0071] After determining the identification position of the identification information, the identification information can be displayed on the identification layer. Specifically, the identification information can be displayed according to the indication position of the identification information.

[0072] In this embodiment, optionally, after displaying the identification information based on the identification position, the method further includes:

[0073] If a position movement event of the visualization component is identified, the position movement information of the identification information is determined according to the position movement information of the visualization component.

[0074] In the process of displaying the visual operation interface, if it is recognized that the user moves the position of the visual component, after obtaining the position movement information of the visual component, the position movement information of the identification information can be determined based on the position association data. For example, when displaying the visual operation interface, the user finds that the current position of the visual component A is not ideal, and then moves the position of the visual component A, for example, 100 pixels to the left. Then, after obtaining the position movement information of the visual component, the identification information can also be moved 100 pixels to the left.

[0075] Through such a setting, the present solution can achieve that during the process of adjusting the position of the visual component, the identification information of the visual component is also adjusted accordingly, thereby realizing flexible marking of the visual component and avoiding confusion of the object marked by the identification information caused by moving the visual component without moving the identification information. At the same time, it also does not require the user to move the identification information of the visual component again after moving the visual component, making the operation more convenient.

[0076] In a feasible implementation, optionally, after the identification information is positionally associated with the visualization component and the position association data is recorded, the method further includes:

[0077] Recording the location-related data in a JSON Schema;

[0078] Accordingly, in the process of rendering the visual operation interface by the renderer, the position association data is read, including:

[0079] In the process of rendering the visual operation interface by the renderer, the location association data is read from the JSON Schema.

[0080] After the location-related data is recorded in the JSON Schema, the location-related data can be read from the JSON Schema during the process of rendering the visual operation interface by the renderer.

[0081] Figure 2 Schematic diagram of the marking and display process of component identification in the visual operation interface provided in the first embodiment of the present application. Figure 2 As shown, the location-related data can be read from the JSON Schema, and when the identification layer has data, the identification information of each visualization component in the current visualization operation interface is determined and transmitted to the renderer for rendering operation;

[0082] The renderer renders the individual identification information of each visual component using the Render method of the UI framework and masks it above the component layer;

[0083] The renderer uniformly renders the global identification layer, which is used to mask the visualization operation layer to prevent misoperation of data;

[0084] In this way, in the visual operation interface, there can be a component-level identification layer to identify the current component and support the operation of individual dragging and positioning;

[0085] When hiding the logo information is triggered on the interface, the logo layer and all logo information can be hidden;

[0086] When the display of identification information is triggered on the interface, the identification layer and all identification information can be displayed;

[0087] When the data of the identification information of the identification layer is changed in real time, it can be uniformly transmitted to the converter;

[0088] After receiving the changed layer data, the converter converts the data into JSON for storage.

[0089] For example, in a specific scenario, when a product manager creates a PC management backend prototype, he can use UI components to visually build a management page on a low-code platform, create a new tag layer above the UI components on the page, and then add text tags to the tag layer, such as "Data Analysis of Component A". The product manager can choose to position the text tag relative to the UI component so that when the page scrolls, the text tag moves with the UI component.

[0090] In a feasible solution, you can also take a screenshot of the interface that needs to be marked, and then use an external annotation tool to mark the screenshot.

[0091] This solution is designed in this way, so that non-R&D personnel, such as product managers, can build product prototypes on the low-code platform and make text marks, thereby improving the work efficiency of product managers. At the same time, the text mark layer is isolated from the UI component elements of the visual interface, and can be rendered, displayed, and hidden independently. This solution can display and store text marks in real time on the interface of the visual low-code platform and on the built page elements.

[0092] Among them, the converter can be used to convert one data format or type to another data format or type. For example, the raw data obtained from the backend, such as a date in string format, is converted into a format that is easy to understand and display in the user interface, such as a specific date format. It can handle various types of conversions, such as unit conversion of numerical values, encoding conversion of strings, etc. For example, in an e-commerce application, the price of a product obtained from the database may be an integer stored in cents, but it needs to be displayed as a value with two decimal places in yuan on the user interface, which requires a converter to complete this conversion process. For another example, in a multilingual application, the text data obtained from the server may be a unified encoding format, and the converter needs to convert it into an encoding format suitable for the current user interface language environment.

[0093] Through such a setting, the technical solution can achieve flexible control of identification information, ensure the real-time nature of the positional relationship between the identification information and the marked visual component when the identification information changes, and improve the control efficiency of position association.

[0094] In a feasible implementation, optionally, after displaying the identification information based on the identification position, the method further includes:

[0095] In response to the identification information hiding operation, hiding the identification information of the visualization component;

[0096] In response to the identification information display operation, identification information of the visualization component is displayed.

[0097] It is understandable that buttons of "show identification information" and "hide identification information" may be provided in the visual operation interface, and after the user clicks, the identification information may be hidden or displayed.

[0098] Through such a setting, the present solution can achieve flexible control of identification information, and can display or hide identification information when different staff members have different needs. For example, if the code development staff does not need to display identification information, they can click the "hide identification information" button, and if the product manager staff needs to view the identification information, they can click the "show identification information" button.

[0099] In a feasible implementation, optionally, rendering the identification layer includes:

[0100] The logo layer is rendered using the Render method of the UI framework.

[0101] Among them, in the UI framework, the Render method is a key component, which is responsible for converting data and design into a user-visible interface. The main responsibilities of the Render method include: data processing, receiving and parsing relevant data, which may include component properties, status, content to be displayed, etc. For example, in a list component, the Render method needs to obtain the data of the list item. Component construction, creating and configuring each UI component based on the data. For example, determine the number of buttons to be displayed, the initial value of the text box, etc. based on the data. Layout calculation, calculate the position and size of each component on the screen to ensure that the layout of the interface is reasonable and beautiful. For example, in responsive design, adjust the arrangement of components according to the screen size. Style application, apply the defined style to the component, including color, font, border, etc. Rendering output, output the processed interface information to the screen so that the user can see the final effect.

[0102] This solution can achieve the purpose of efficient rendering of the logo layer by using the Render method to render the logo layer, and can be used to support the display and editing of logo information, thereby improving the editing efficiency of the staff.

[0103] In a feasible implementation, optionally, the logo layer is rendered using a Render method of a UI framework, including:

[0104] The logo layer is rendered above the component layer using the Render method of the UI framework; wherein the component layer is used to render the visual component.

[0105] Among them, the logo layer is rendered above the component layer to highlight key information. The logo usually contains key prompts, important status, or content that users need to pay special attention to. Placing it at the top can ensure that this information attracts the user's attention first and avoids being covered by the component layer. The logo layer contains text descriptions or chart explanations. Placing it at the top can make this information clearer and more readable without being interfered with by complex elements in the component layer. For example, in a data analysis chart, the logo of key data indicators will be clearly displayed above the chart component. This solution not only avoids the chaotic mixing of elements in the logo layer and the component layer, making the entire interface look more organized and neat, but also facilitates user editing operations.

[0106] Through such a setting, the present solution can make it easier for users to obtain important information, reduce the time and effort of searching and distinguishing identification information and visual components, and thus improve the overall user experience.

[0107] In an embodiment of the present application, in a visualization operation interface, in response to an identification creation request of at least one visualization component, an identification layer is created; an identification operation of a visualization component is received, and identification information of the visualization component is displayed in the identification layer; the identification information is positionally associated with the visualization component, and position association data is recorded; in the process of rendering the visualization operation interface through a renderer, the position association data is read; the identification layer is rendered, and the identification position of the identification information in the identification layer is determined according to the position association data and the position of the visualization component; and the identification information is displayed based on the identification position. The above technical scheme can realize that the identification information can move with the movement of the visualization component by adding identification information and associating the position between the identification information and the visualization component, so that the identification information can be flexibly controlled to ensure that the identification information corresponds to the position of the marked visualization component, thereby improving the user experience.

[0108] Embodiment 2

[0109] Figure 3 It is a flow chart of the component identification method in the visual operation interface provided in the second embodiment of the present application. This solution makes a better improvement on the above embodiment, and the specific improvement is: the identification information is associated with the visual component, and the position association data is recorded, including: the identification information is associated with the current position of the visual component, and the position association data is recorded; or, when the identification information is in an active state, in response to the dragging operation of the identification information, the position of the identification information after the dragging operation is associated with the visual component, and the position association data is recorded.

[0110] like Figure 3 As shown, the specific steps include:

[0111] S301, in a visualization operation interface, in response to a logo creation request of at least one visualization component, creating a logo layer;

[0112] S302, receiving an identification operation of a visualization component, and displaying identification information of the visualization component in the identification layer;

[0113] S303, positionally associating the identification information with the current position of the visualization component and recording position association data; or, when the identification information is in an active state, in response to a drag operation of the identification information, positionally associating the position of the identification information after the drag operation with the visualization component and recording position association data;

[0114] In the process of constructing the position association data, after the user completes editing the identification information, it can be associated with the current position of the visualization component, that is, the relative position relationship between the two is obtained. In another case, the identification information can be set to different states. For example, when the identification information is in an active state, it can be dragged or otherwise operated to change its position. After a certain period of time after the position is changed, such as 3 seconds, or when the state is switched to a static state after the position is changed, the position after the dragging operation can be associated with the visualization component to record the position association data.

[0115] S304, reading the position-related data during the process of rendering the visual operation interface by the renderer;

[0116] S305, rendering the identification layer, and determining the identification position of the identification information in the identification layer according to the position association data and the position of the visualization component;

[0117] S306: Display the identification information based on the identification position.

[0118] The technical solution provided in this embodiment can determine the method of position association, so that the position association between identification information and visual components can be performed with simple operations by the user, thereby improving the user's operating efficiency. It is simple and easy to operate, and can provide a better operating experience for users of different identities.

[0119] Embodiment 3

[0120] Figure 4 Schematic diagram of the structure of the component identification device in the visual operation interface provided in the third embodiment of the present application. Figure 4 As shown, the device comprises:

[0121] The identification layer creation module 401 is used to create an identification layer in response to an identification creation request of at least one visualization component in the visualization operation interface;

[0122] The identification information determination module 402 is used to receive an identification operation of a visualization component and display the identification information of the visualization component in the identification layer;

[0123] A position association data recording module 403 is used to perform position association between the identification information and the visualization component and record position association data;

[0124] The position-related data reading module 404 is used to read the position-related data during the process of rendering the visual operation interface by the renderer;

[0125] The identification position determination module 405 is used to render the identification layer and determine the identification position of the identification information in the identification layer according to the position association data and the position of the visualization component;

[0126] The identification information display module 406 is used to display the identification information based on the identification position.

[0127] In an embodiment of the present application, an identification layer creation module is used to create an identification layer in a visual operation interface in response to an identification creation request of at least one visual component; an identification information determination module is used to receive an identification operation of a visual component and display the identification information of the visual component in the identification layer; a position association data recording module is used to associate the identification information with the visual component and record the position association data; a position association data reading module is used to read the position association data in the process of rendering the visual operation interface through a renderer; an identification position determination module is used to render the identification layer and determine the identification position of the identification information in the identification layer according to the position association data and the position of the visual component; an identification information display module is used to display the identification information based on the identification position. The component identification device in the above-mentioned visual operation interface can realize that the identification information can move with the movement of the visual component by adding identification information and associating the position between the identification information and the visual component, so that the identification information can be flexibly controlled to ensure that the identification information corresponds to the position of the marked visual component, thereby improving the user experience.

[0128] The component identification device in the visual operation interface in the embodiment of the present application can be a device, or a component, integrated circuit, or chip in a terminal. The device can be a mobile electronic device or a non-mobile electronic device. Exemplarily, the mobile electronic device can be a mobile phone, a tablet computer, a laptop computer, a PDA, an in-vehicle electronic device, a wearable device, an ultra-mobile personal computer (UMPC), a netbook or a personal digital assistant (PDA), etc., and the non-mobile electronic device can be a server, a network attached storage (NAS), a personal computer (PC), a television (TV), a teller machine or a self-service machine, etc., which is not specifically limited in the embodiment of the present application.

[0129] The component identification device in the visual operation interface in the embodiment of the present application may be a device having an operating system. The operating system may be an Android operating system, an IOS operating system, or other possible operating systems, which are not specifically limited in the embodiment of the present application.

[0130] The component identification device in the visual operation interface provided in the embodiment of the present application can implement each process implemented by the above-mentioned method embodiments. To avoid repetition, it will not be repeated here.

[0131] Embodiment 4

[0132] Figure 5 Schematic diagram of the structure of the electronic device provided in the fourth embodiment of the present application. Figure 5 As shown, an embodiment of the present application also provides an electronic device 500, including a processor 501, a memory 502, and a program or instruction stored in the memory 502 and executable on the processor 501. When the program or instruction is executed by the processor 501, each process of the component identification method embodiment in the above-mentioned visual operation interface is implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

[0133] It should be noted that the electronic devices in the embodiments of the present application include the mobile electronic devices and non-mobile electronic devices mentioned above.

[0134] Embodiment 5

[0135] An embodiment of the present application also provides a readable storage medium, on which a program or instruction is stored. When the program or instruction is executed by a processor, each process of the component identification method embodiment in the above-mentioned visual operation interface is implemented, and the same technical effect can be achieved. To avoid repetition, it will not be repeated here.

[0136] The processor is a processor in the electronic device described in the above embodiment. The readable storage medium includes a computer readable storage medium, such as a computer read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.

[0137] Embodiment 6

[0138] An embodiment of the present application further provides a chip, which includes a processor and a communication interface, wherein the communication interface is coupled to the processor, and the processor is used to run programs or instructions to implement the various processes of the component identification method embodiment in the above-mentioned visual operation interface, and can achieve the same technical effect. To avoid repetition, it will not be repeated here.

[0139] It should be understood that the chip mentioned in the embodiments of the present application can also be called a system-level chip, a system chip, a chip system or a system-on-chip chip, etc.

[0140] It should be noted that, in this article, the terms "comprise", "include" or any other variant thereof are intended to cover non-exclusive inclusion, so that the process, method, article or device including a series of elements includes not only those elements, but also includes other elements not explicitly listed, or also includes elements inherent to such process, method, article or device. In the absence of further restrictions, the elements defined by the sentence "comprise one..." do not exclude the presence of other identical elements in the process, method, article or device including the element. In addition, it should be pointed out that the scope of the methods and devices in the embodiments of the present application is not limited to performing functions in the order shown or discussed, and may also include performing functions in a substantially simultaneous manner or in reverse order according to the functions involved, for example, the described method may be performed in an order different from that described, and various steps may also be added, omitted, or combined. In addition, the features described with reference to certain examples may be combined in other examples.

[0141] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a computer software product, which is stored in a storage medium (such as ROM / RAM, a disk, or an optical disk), and includes a number of instructions for a terminal (which can be a mobile phone, a computer, a server, or a network device, etc.) to execute the methods described in each embodiment of the present application.

[0142] The embodiments of the present application are described above in conjunction with the accompanying drawings, but the present application is not limited to the above-mentioned specific implementation methods. The above-mentioned specific implementation methods are merely illustrative and not restrictive. Under the guidance of the present application, ordinary technicians in this field can also make many forms without departing from the purpose of the present application and the scope of protection of the claims, all of which are within the protection of the present application.

[0143] The above are only preferred embodiments of the present application and the technical principles used. The present application is not limited to the specific embodiments described herein, and various obvious changes, readjustments and substitutions that can be made by those skilled in the art will not deviate from the scope of protection of the present application. Therefore, although the present application is described in more detail through the above embodiments, the present application is not limited to the above embodiments, and may include more other equivalent embodiments without departing from the concept of the present application, and the scope of the present application is determined by the scope of the claims.

Claims

1. A component identification method in a visual operation interface, characterized in that: The method comprises: In the visualization operation interface, in response to a logo creation request of at least one visualization component, creating a logo layer; Receiving an identification operation of a visualization component, and displaying identification information of the visualization component in the identification layer; Performing position association between the identification information and the visualization component, and recording position association data; In the process of rendering the visual operation interface by the renderer, reading the position association data; Rendering the identification layer, and determining the identification position of the identification information in the identification layer according to the position association data and the position of the visualization component; The marker information is displayed based on the marker position.

2. The component identification method in the visual operation interface according to claim 1, characterized in that: After displaying the identification information based on the identification position, the method further includes: If a position movement event of the visualization component is identified, the position movement information of the identification information is determined according to the position movement information of the visualization component.

3. The component identification method in the visual operation interface according to claim 1, characterized in that: After the identification information is positionally associated with the visualization component and the position association data is recorded, the method further includes: Recording the location-related data in a JSON Schema; Accordingly, in the process of rendering the visual operation interface by the renderer, the position association data is read, including: In the process of rendering the visual operation interface by the renderer, the location association data is read from the JSON Schema.

4. The component identification method in the visual operation interface according to claim 1, characterized in that: After displaying the identification information based on the identification position, the method further includes: In response to the identification information hiding operation, hiding the identification information of the visualization component; In response to the identification information display operation, identification information of the visualization component is displayed.

5. The component identification method in the visual operation interface according to claim 1, characterized in that: Rendering the logo layer includes: The logo layer is rendered using the Render method of the UI framework.

6. The component identification method in the visual operation interface according to claim 5, characterized in that: The logo layer is rendered using the Render method of the UI framework, including: The logo layer is rendered above the component layer using the Render method of the UI framework; wherein the component layer is used to render the visual component.

7. The component identification method in a visual operation interface according to claim 1, characterized in that: Associating the identification information with the visualization component and recording the location association data includes: Positionally associating the identification information with the current position of the visualization component, and recording position association data; or, When the identification information is in an active state, in response to a drag operation of the identification information, a position of the identification information after the drag operation is performed is positionally associated with the visualization component, and position association data is recorded.

8. A component identification device in a visual operation interface, characterized in that: The device comprises: An identification layer creation module, used to create an identification layer in response to an identification creation request of at least one visualization component in a visualization operation interface; An identification information determination module, used for receiving an identification operation of a visualization component, and displaying identification information of the visualization component in the identification layer; A position-associated data recording module, used for performing position association between the identification information and the visualization component and recording position-associated data; A position-related data reading module, used for reading the position-related data during the process of rendering the visual operation interface by the renderer; A marker position determination module, used for rendering the marker layer, and determining a marker position of the marker information in the marker layer according to the position association data and the position of the visualization component; The identification information display module is used to display the identification information based on the identification position.

9. An electronic device, characterized in that: It comprises a processor, a memory, and a program or instruction stored in the memory and executable on the processor, wherein when the program or instruction is executed by the processor, the steps of the component identification method in the visual operation interface as described in any one of claims 1 to 7 are implemented.

10. A readable storage medium, characterized in that: The readable storage medium stores a program or an instruction, and when the program or the instruction is executed by the processor, the steps of the component identification method in the visual operation interface according to any one of claims 1 to 7 are implemented.

Images