Node icon rendering method and related equipment

Abstract

The embodiment of the invention provides a node icon rendering method and related equipment. The node icon rendering method comprises the steps that in response to rendering of a node graph, basic icons corresponding to all nodes are obtained according to node types, and the basic icons are vector plots; according to the node state, changing the color of the basic icon corresponding to each node to obtain a node icon corresponding to each node; and inserting the node icon of each node into a graph to obtain the node graph. According to the technical scheme provided by the embodiment of the invention, through the mode, only one default vector plot needs to be loaded finally, and all subsequent state changes are realized by dynamically modifying the same file. Therefore, the total number of the pictures needing to be loaded is remarkably reduced, and the page loading performance and the response speed are improved.

Description

Node icon rendering methods and related devices Technical Field

[0001] This application relates to the fields of computer and communication technology, and more specifically, to a method for rendering node icons and related equipment. Background Technology

[0002] Currently, during the rendering of the node graph, each icon's different danger level or state requires a different image. This results in a large number of image files needing to be prepared for each state, especially as the number of icon and state types increases dramatically. This not only increases storage requirements but also makes image management and updates cumbersome. Summary of the Invention

[0003] The embodiments of this application provide a node icon rendering method and related device, which can at least to some extent overcome the above-mentioned problems caused by the prior art.

[0004] Other features and advantages of this application will become apparent from the following detailed description, or may be learned in part from practice of this application.

[0005] According to one aspect of the embodiments of this application, a node icon rendering method is provided, comprising: in response to rendering a node graph, obtaining a basic icon corresponding to each node according to the node type; changing the color of the basic icon corresponding to each node according to the node state to obtain a node icon corresponding to each node; and inserting the node icon of each node into the graph to obtain the node graph.

[0006] In some embodiments of this application, the step of changing the color of the basic icon corresponding to each node according to the node state to obtain the node icon corresponding to the node specifically includes: reading the string of the basic icon; modifying the color value of the basic icon in the string according to the node state to obtain the node icon corresponding to each node.

[0007] In some embodiments of this application, the step of modifying the color value of the base icon in the string according to the node state to obtain the node icon corresponding to each node specifically includes: parsing the string into a DOM object; and modifying the color value of the base icon using standard DOM operations to obtain the node icon corresponding to each node.

[0008] In some embodiments of this application, after parsing the string into a DOM object, the method further includes: checking the DOM object to determine whether an icon element exists; if the icon element exists, the parsing is successful; if the icon element does not exist, the parsing fails.

[0009] In some embodiments of this application, the step of obtaining the basic icon corresponding to each node according to the node type in response to rendering the node graph specifically includes: determining the node type corresponding to each node in response to rendering the node graph; and obtaining the basic icon corresponding to each node according to the node type.

[0010] In some embodiments of this application, the method further includes: in response to the update of the basic icon, re-rendering the node icon of the corresponding node type according to the mapping to obtain the updated node icon; and re-inserting the updated node icon into the graph to complete the update of the node graph.

[0011] In some embodiments of this application, the step of re-rendering the node icon of the corresponding node type according to the mapping in response to the update of the base icon to obtain the updated node icon specifically includes: in response to the update of the base icon, determining all nodes of the corresponding node type according to the mapping; and changing the color of the updated base icon according to the node status of each node under the node type to obtain the updated node icon.

[0012] According to one aspect of the embodiments of this application, a node icon rendering apparatus is provided, characterized in that the node icon rendering apparatus includes: an icon acquisition module, configured to acquire a basic icon corresponding to each node according to the node type in response to rendering a node graph, wherein the basic icon is a vector icon; a color modification module, configured to change the color of the basic icon corresponding to each node according to the node state, thereby obtaining a node icon corresponding to each node; and a graph production module, configured to insert the node icon of each node into a graph, thereby obtaining the node graph.

[0013] In some embodiments of this application, the color modification module specifically includes: a string reading submodule, used to read the string of the basic icon; and a color value modification submodule, used to modify the color value of the basic icon in the string according to the node status, so as to obtain the node icon corresponding to each node.

[0014] In some embodiments of this application, the color value modification submodule specifically includes: a DOM parsing unit, used to parse the string into a DOM object; and a DOM operation unit, used to modify the color value of the basic icon using standard DOM operations to obtain the node icon corresponding to each node.

[0015] In some embodiments of this application, the node icon rendering device further includes: an object checking unit, used to check the DOM object and determine whether an icon element exists; a parsing success unit, used to parse successfully if the icon element exists; and a parsing failure unit, used to parse unsuccessfully if the icon element does not exist.

[0016] In some embodiments of this application, the icon acquisition module specifically includes: a type determination submodule, used to determine the node type corresponding to each node in response to the rendering of the node graph; and an icon acquisition submodule, used to acquire the basic icon corresponding to each node according to the node type.

[0017] In some embodiments of this application, the node icon rendering device further includes: a re-rendering module, used to re-render the node icon of the corresponding node type according to the mapping in response to the update of the basic icon, so as to obtain the updated node icon; and a graph update module, used to re-insert the updated node icon into the graph to complete the update of the node graph.

[0018] In some embodiments of this application, the re-rendering module specifically includes: a node determination submodule, used to determine all nodes of the corresponding node type according to the mapping in response to the update of the base icon; and an icon update submodule, used to change the color of the updated base icon according to the node status of each node under the node type to obtain the updated node icon.

[0019] According to one aspect of the embodiments of this application, a computer-readable medium is provided having a computer program stored thereon, which, when executed by a processor, implements the node icon rendering method as described in the above embodiments.

[0020] According to one aspect of the embodiments of this application, an electronic device is provided, including: one or more processors; and a storage device for storing one or more programs, which, when executed by the one or more processors, cause the one or more processors to implement the node icon rendering method as described in the above embodiments.

[0021] According to one aspect of the embodiments of this application, a computer program product is provided, including a computer program, characterized in that, when the computer program is executed by a processor, it implements the node icon rendering method as described in the above embodiments.

[0022] In some embodiments of this application, the technical solutions utilize a unified base icon, designing a default vector icon as the base image for each icon type. This ensures that only one file of the base icon exists, regardless of the icon's state. The flexibility of vector icons allows different states to be represented by modifying their internal fill color. During page rendering, the content of the vector icon is read, and the color values ​​in the vector icon are dynamically adjusted based on the node's state. This approach allows for direct color replacement within the vector icon programmatically, without the need to pre-prepare image variations for each color. Through this method, only one default vector icon needs to be loaded, and all subsequent state changes are achieved by dynamically modifying the same file. This significantly reduces the total number of images that need to be loaded, improving page loading performance and response speed.

[0023] It should be understood that the above general description and the following detailed description are exemplary and explanatory only, and do not limit this application. Attached Figure Description

[0024] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application. It is obvious that the drawings described below are merely some embodiments of this application, and those skilled in the art can obtain other drawings based on these drawings without any inventive effort. In the drawings:

[0025] Figure 1 illustrates an exemplary implementation environment in which the technical solutions of the embodiments of this application can be applied.

[0026] Figure 2 shows a flowchart of a node icon rendering method provided in an embodiment of this application.

[0027] Figure 3 shows a flowchart of a specific implementation of step S200 in the node icon rendering method according to the embodiment corresponding to Figure 2.

[0028] Figure 4 shows a flowchart of a specific implementation of step S220 in the node icon rendering method according to the embodiment corresponding to Figure 3.

[0029] Figure 5 shows a schematic diagram of the structure of a node icon rendering device provided in an embodiment of this application.

[0030] Figure 6 shows a schematic diagram of the structure of a computer system for an electronic device provided in an embodiment of this application. Detailed Implementation

[0031] Exemplary embodiments will now be described more fully with reference to the accompanying drawings. However, these exemplary embodiments can be implemented in many forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided to make this application more comprehensive and complete, and to fully convey the concept of the exemplary embodiments to those skilled in the art.

[0032] Furthermore, the described features, structures, or characteristics can be combined in any suitable manner in one or more embodiments. Numerous specific details are provided in the following description to give a thorough understanding of embodiments of this application. However, those skilled in the art will recognize that the technical solutions of this application can be practiced without one or more of the specific details, or other methods, components, apparatuses, steps, etc., can be employed. In other instances, well-known methods, apparatuses, implementations, or operations are not shown or described in detail to avoid obscuring various aspects of this application.

[0033] The block diagrams shown in the accompanying drawings are merely functional entities and do not necessarily correspond to physically independent entities. That is, these functional entities can be implemented in software, in one or more hardware modules or integrated circuits, or in different network and / or processor devices and / or microcontroller devices.

[0034] The flowcharts shown in the accompanying drawings are merely illustrative and do not necessarily include all content and operations / steps, nor do they necessarily have to be performed in the described order. For example, some operations / steps can be broken down, while others can be combined or partially combined; therefore, the actual execution order may change depending on the specific circumstances.

[0035] Figure 1 shows a schematic diagram of an exemplary system architecture to which the technical solutions of the embodiments of this application can be applied.

[0036] As shown in Figure 1, the system architecture may include terminal devices (one or more of the following shown in Figure 1: smartphone 101, tablet computer 102, and portable computer 103; desktop computers, etc.), a network 104, and a server 105. The network 104 serves as the medium for providing a communication link between the terminal devices and the server 105. The network 104 may include various connection types, such as wired communication links, wireless communication links, etc.

[0037] It should be understood that the number of terminal devices, networks, and servers in Figure 1 is merely illustrative. Depending on implementation needs, any number of terminal devices, networks, and servers can be used. For example, server 105 could be a server cluster composed of multiple servers.

[0038] Users can interact with server 105 via network 104 using terminal devices to receive or send messages, etc. Server 105 can be a server that provides various services. For example, a user can upload a rendering request to server 105 using terminal device 103 (or terminal device 101 or 102). In response to rendering the node graph, server 105 can obtain the basic icon corresponding to each node according to the node type. The basic icon is a vector icon. According to the node status, the color of the basic icon corresponding to each node is changed to obtain the node icon corresponding to each node. The node icon of each node is inserted into the graph to obtain the node graph.

[0039] It should be noted that the node icon rendering method provided in this application embodiment is generally executed by server 105, and correspondingly, the node icon rendering device is generally set in server 105. However, in other embodiments of this application, the terminal device may also have similar functions to the server, thereby executing the node icon rendering scheme provided in this application embodiment.

[0040] The implementation details of the technical solutions in the embodiments of this application are described in detail below:

[0041] Figure 2 shows a flowchart of a node icon rendering method according to an embodiment of this application. This node icon rendering method can be executed by a server, which may be the server shown in Figure 1. Referring to Figure 2, the node icon rendering method includes at least:

[0042] S100, in response to rendering the node graph, obtain the basic icon corresponding to each node according to the node type, wherein the basic icon is a vector icon.

[0043] S200: Based on the node status, change the color of the basic icon corresponding to each node to obtain the node icon corresponding to each node.

[0044] S300, insert the node icons of each node into the graph to obtain the node graph.

[0045] In the embodiments of this application, a unified base icon is used, with each icon type's base image designed as a default vector icon. This ensures that regardless of the icon's state, only one file of the base icon exists. The flexibility of vector icons allows different states to be represented by modifying their internal fill color. During page rendering, the content of the vector icon is read, and the color values ​​in the vector icon are dynamically adjusted based on the node's state. This approach allows for direct color replacement within the vector icon programmatically, without the need to pre-prepare image variations for each color. Through this method, only one default vector icon needs to be loaded, and all subsequent state changes are achieved by dynamically modifying the same file. This significantly reduces the total number of images that need to be loaded, improving page loading performance and response speed.

[0046] In S100, when rendering a page, each type of node corresponds to an icon type, and each icon type has a unified base icon. Therefore, the corresponding base icon can be determined directly based on the node type.

[0047] In the embodiments of this application, the base icons are vector graphics to ensure that they can be easily edited and modified, and displayed and rendered consistently on various devices and platforms, thus ensuring design consistency. Furthermore, once vector graphics are inserted into the node diagram, they can be scaled at any resolution without losing image clarity and detail, and their file size is relatively small, saving storage space and improving loading speed.

[0048] The vector image is typically a Scalable Vector Graphics (SVG) image. In other embodiments, it can also be an image in other formats such as AI (Adobe Illustrator), WMF (Windows Metafile), or EMF (Enhanced Metafile).

[0049] Specifically, in some embodiments, the specific implementation of step S100 can be found in the following embodiments. This embodiment is a detailed description of step S100 in the node icon rendering method shown in the corresponding embodiment of FIG2. In the node icon rendering method, step S100 may include the following steps:

[0050] In response to the rendering of the node graph, determine the node type corresponding to each node.

[0051] Retrieve the basic icon corresponding to each node based on its type.

[0052] In the embodiments of this application, after receiving the command to render the node graph, the node information of each node is read first, and the node information includes the node type of the node. Then, based on the node type of the node, its corresponding basic icon is obtained.

[0053] It's important to note that a node's node type is related to the data type it maps to. For example, it can include files, IP addresses, domain names, URLs, MIDs, RouterMacs, certificates, public reports, and email addresses. Different data types will have different node types and use different base icons.

[0054] In S200, the flexibility of vector icons allows different states to be represented by modifying their internal fill color. During page rendering, the content of the vector icon is read, and the color values ​​in the vector icon are dynamically adjusted according to the node's state. This allows for direct color replacement within the vector icon programmatically, without the need to prepare image variants for each color in advance.

[0055] The node status can be determined based on different application environments, such as the level of danger, the level of urgency, and the processing status. It can be specifically set according to the user's actual usage.

[0056] Specifically, in some embodiments, the detailed implementation of step S200 can be referred to FIG3. FIG3 is a detailed description of step S200 in the node icon rendering method shown in the embodiment corresponding to FIG2. In the node icon rendering method, step S200 may include the following steps:

[0057] S210, Read the string of the base icon.

[0058] S220, Based on the node status, modify the color value of the basic icon in the string to obtain the node icon corresponding to each node.

[0059] In the embodiments of this application, during page rendering, the string content of the basic icon is read, and the color value in the basic icon is dynamically adjusted according to the state of the node. That is, the color is directly replaced in the basic icon through programming, so that node icons of various colors can be obtained without preparing image variants of each color in advance.

[0060] In S210, the string of the base icon is the text representation of the content of the base icon, which is usually obtained through asynchronous requests (such as the fetch API) or other AJAX methods to obtain the content of the base icon file.

[0061] In S220, the significance of reading strings is that the attributes of the base icon, such as color and size, can be dynamically modified at runtime without having to prepare different image files in advance for each change, thereby simplifying image management and improving loading efficiency.

[0062] Specifically, in some embodiments, the detailed implementation of step S220 can be referred to FIG4. FIG4 is a detailed description of step S220 in the node icon rendering method shown in the embodiment corresponding to FIG3. In the node icon rendering method, step S220 may include the following steps:

[0063] S222, the string is parsed into a DOM object.

[0064] S224, Modify the color value of the base icon using standard DOM operations to obtain the node icon corresponding to each node.

[0065] In this embodiment, the obtained basic icon file content is converted into a manipulable DOM object so that it can be modified later.

[0066] In S222, the obtained SVG content string is converted into a manipulable DOM object. Typically, DOMParser is used to parse the SVG string. DOMParser is a browser-provided API interface used to parse the basic icon string into a DOM tree. Then, parseFromString is used, which accepts two parameters: the first is the string to be parsed, and the second is the string type. In some implementations, 'image / svg+xml' can be used to represent the SVG content. Finally, icon elements can be selected from the parsed document for further manipulation.

[0067] In S224, after obtaining the icon element, standard DOM manipulation methods (such as setAttribute, classList.add, etc.) can be used to modify the vector graphic's attributes or styles. Generally, the setAttribute: method can be used to set the attributes of SVG elements, such as width, height, or color. Furthermore, the querySelector('path'): method can be used to select specific graphic elements within the vector graphic for modification.

[0068] That is, in the embodiments of this application, not only the color value of the vector graphic can be modified, but also the height, width, and even graphic elements can be modified. Therefore, in some embodiments of this application, the node states of different dimensions can correspond one-to-one with the attributes and styles of vector graphics of different dimensions. For example, in one embodiment, the danger level of a node can correspond to the color of the vector graphic, the emergency state of a node can correspond to the width and height of the vector graphic, and the processing state of a node can correspond to the graphic elements of the vector graphic.

[0069] In some other embodiments, after step S222, step S220 may further include:

[0070] Examine the DOM object to determine if an icon element exists.

[0071] If the icon element exists, the parsing is successful.

[0072] If the icon element does not exist, the parsing will fail.

[0073] In this embodiment, various errors and exceptions may be encountered during the parsing of vector graphic content and modification of vector graphic attributes. Therefore, after parsing the string into a DOM object, it is necessary to check the DOM object to determine whether it is a valid vector graphic object. Specifically, by checking whether there are vector graphic elements (i.e., icon elements) in the DOM object, if they exist, it proves that the DOM object is a valid vector graphic object, the parsing is successful, and step S224 can be continued; if they do not exist, it proves that the DOM object is an invalid vector graphic object, the parsing fails, and at this time, exceptions need to be handled, and error messages can also be output. Exceptions can be handled by using try-catch to catch and handle the above-mentioned exceptions.

[0074] Since node states can vary depending on the application environment, such as danger level, urgency level, and processing status, in some embodiments, a node's state may change with user actions. For example, after user interaction, a node's processing status may change from unprocessed to processing, and then from processing to completed. Similarly, a node's urgency level may increase or decrease during task processing. Therefore, in some embodiments of this application, the state of each node in the graph can be monitored, and when the state of any node changes, the node's icon attributes and icon style are updated according to the changed state.

[0075] In S300, after obtaining the node icon corresponding to each node, it is inserted into the graph to complete the rendering of the node graph and display the corresponding node graph on the page.

[0076] The embodiments of this application significantly improve resource management efficiency and page loading performance by using a unified vector graphic resource and dynamically modifying its attributes to adapt to different states. On one hand, the embodiments of this application only need to manage and store one type of vector graphic file, instead of multiple image files for each state and icon combination, reducing storage space and management complexity, as well as the number of network requests and image loading, thus accelerating page rendering and improving user experience. On the other hand, dynamically modifying the colors of the vector graphic file allows for quick adaptation to different state changes without replacing images each time, increasing the flexibility and adaptability of the implementation.

[0077] In other embodiments, the node icon rendering method may further include:

[0078] In response to the update of the base icon, the node icon of the corresponding node type is re-rendered according to the mapping to obtain the updated node icon.

[0079] The updated node icons are then reinserted into the graph to complete the update of the node graph.

[0080] In this embodiment, when it is necessary to change the node icon style of certain nodes, only the base icon needs to be updated. Specifically, after the base icon is updated, in response to the update, according to the mapping relationship between node type and base icon, all nodes under that node type are re-rendered to obtain the updated node icons, and these updated node icons are reinserted into the graph to complete the update of the node graph.

[0081] In some embodiments, the specific steps for re-rendering the node icon are as follows:

[0082] In response to the update of the base icon, all nodes of the corresponding node type are determined based on the mapping.

[0083] Based on the node status of each node under this node type, the color of the updated base icon is changed to obtain the updated node icon.

[0084] In this embodiment, after updating the base icon, in response to the update, all nodes under that node type are found based on the mapping relationship between node types and base icons. Specifically, this search can be performed based on node identifiers, node coordinates, etc. After finding all nodes, the node information is reread to determine the node state of each node, and then the color of the updated base icon is changed to obtain the updated node icon. This dynamic modification in this embodiment allows for rapid adaptation to different state changes without needing to replace the image each time, increasing the flexibility and adaptability of the implementation.

[0085] The following describes an apparatus embodiment of this application, which can be used to execute the node icon rendering method in the above embodiments of this application. For details not disclosed in the apparatus embodiments of this application, please refer to the embodiments of the node icon rendering method described above.

[0086] Figure 5 shows a block diagram of a node icon rendering apparatus according to an embodiment of this application.

[0087] Referring to FIG5, a node icon rendering apparatus 500 according to an embodiment of the present application includes: an icon acquisition module 510, a color modification module 520, and a map production module 530.

[0088] The icon acquisition module 510 is used to obtain the basic icon corresponding to each node according to the node type in response to the rendering of the node graph. The basic icon is a vector icon. The color modification module 520 is used to change the color of the basic icon corresponding to each node according to the node status to obtain the node icon corresponding to each node. The graph production module 530 is used to insert the node icon of each node into the graph to obtain the node graph.

[0089] In some embodiments of this application, the color modification module specifically includes: a string reading submodule, used to read the string of the basic icon; and a color value modification submodule, used to modify the color value of the basic icon in the string according to the node status, so as to obtain the node icon corresponding to each node.

[0090] In some embodiments of this application, the color value modification submodule specifically includes: a DOM parsing unit, used to parse the string into a DOM object; and a DOM operation unit, used to modify the color value of the basic icon using standard DOM operations to obtain the node icon corresponding to each node.

[0091] In some embodiments of this application, the node icon rendering device further includes: an object checking unit, used to check the DOM object and determine whether an icon element exists; a parsing success unit, used to parse successfully if the icon element exists; and a parsing failure unit, used to parse unsuccessfully if the icon element does not exist.

[0092] In some embodiments of this application, the icon acquisition module specifically includes: a type determination submodule, used to determine the node type corresponding to each node in response to the rendering of the node graph; and an icon acquisition submodule, used to acquire the basic icon corresponding to each node according to the node type.

[0093] In some embodiments of this application, the node icon rendering device further includes: a re-rendering module, used to re-render the node icon of the corresponding node type according to the mapping in response to the update of the basic icon, so as to obtain the updated node icon; and a graph update module, used to re-insert the updated node icon into the graph to complete the update of the node graph.

[0094] In some embodiments of this application, the re-rendering module specifically includes: a node determination submodule, used to determine all nodes of the corresponding node type according to the mapping in response to the update of the base icon; and an icon update submodule, used to change the color of the updated base icon according to the node status of each node under the node type to obtain the updated node icon.

[0095] In the embodiments of this application, a unified base icon is used, with each icon type's base image designed as a default vector icon. This ensures that regardless of the icon's state, only one file of the base icon exists. The flexibility of vector icons allows different states to be represented by modifying their internal fill color. During page rendering, the content of the vector icon is read, and the color values ​​in the vector icon are dynamically adjusted based on the node's state. This approach allows for direct color replacement within the vector icon programmatically, without the need to pre-prepare image variations for each color. Through this method, only one default vector icon needs to be loaded, and all subsequent state changes are achieved by dynamically modifying the same file. This significantly reduces the total number of images that need to be loaded, improving page loading performance and response speed.

[0096] Figure 6 shows a schematic diagram of the structure of a computer system suitable for implementing the electronic device of the present application.

[0097] It should be noted that the computer system of the electronic device shown in Figure 6 is only an example and should not impose any limitations on the functionality and scope of use of the embodiments of this application.

[0098] As shown in Figure 6, the computer system includes a Central Processing Unit (CPU) 1801, which can perform various appropriate actions and processes based on programs stored in Read-Only Memory (ROM) 1802 or programs loaded from storage portion 1808 into Random Access Memory (RAM) 1803, such as performing the methods described in the above embodiments. The RAM 1803 also stores various programs and data required for system operation. The CPU 1801, ROM 1802, and RAM 1803 are interconnected via a bus 1804. An Input / Output (I / O) interface 1805 is also connected to the bus 1804.

[0099] The following components are connected to I / O interface 1805: an input section 1806 including a keyboard, mouse, etc.; an output section 1807 including a cathode ray tube (CRT), liquid crystal display (LCD), etc., and speakers, etc.; a storage section 1808 including a hard disk, etc.; and a communication section 1809 including a network interface card such as a LAN (Local Area Network) card, modem, etc. The communication section 1809 performs communication processing via a network such as the Internet. A drive 1810 is also connected to I / O interface 1805 as needed. Removable media 1811, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., are installed on drive 1810 as needed so that computer programs read from them can be installed into storage section 1808 as needed.

[0100] Specifically, according to embodiments of this application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this application include a computer program product comprising a computer program carried on a computer-readable medium, the computer program including a computer program for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication section 1809, and / or installed from removable medium 1811. When the computer program is executed by central processing unit (CPU) 1801, it performs various functions defined in the system of this application.

[0101] It should be noted that the computer-readable medium shown in the embodiments of this application can be a computer-readable signal medium or a computer-readable storage medium, or any combination of the two. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. 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 disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM), flash memory, optical fiber, portable compact disc read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this application, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In this application, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying a computer-readable computer program. The transmitted data signal can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. The computer-readable signal medium can also be any computer-readable medium other than a computer-readable storage medium, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The computer program contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to wireless, wired, etc., or any suitable combination thereof.

[0102] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this application. Each block in a flowchart or block diagram may represent a module, segment, or portion of code, which contains one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram or flowchart, and combinations of blocks in a block diagram or flowchart, can be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0103] The units described in the embodiments of this application can be implemented in software or hardware, and the described units can also be located in a processor. The names of these units do not necessarily limit the specific unit itself.

[0104] In another aspect, this application also provides a computer-readable medium, which may be included in the electronic device described in the above embodiments; or it may exist independently and not assembled into the electronic device. The computer-readable medium carries one or more programs, which, when executed by the electronic device, cause the electronic device to perform the methods described in the above embodiments.

[0105] This specification also provides a computer program product that stores at least one instruction, which is loaded by the processor and executed as described in the embodiments shown in Figures 1 to 4 above. For details of the execution process, please refer to the specific description of the embodiments shown in Figures 1 to 4, which will not be repeated here.

[0106] It should be noted that although several modules or units for the device used to perform actions have been mentioned in the detailed description above, this division is not mandatory. In fact, according to the embodiments of this application, the features and functions of two or more modules or units described above can be embodied in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided and embodied by multiple modules or units.

[0107] Through the above description of the embodiments, those skilled in the art will readily understand that the exemplary embodiments described herein can be implemented by software or by combining software with necessary hardware. Therefore, the technical solutions according to the embodiments of this application can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (such as a CD-ROM, USB flash drive, external hard drive, etc.) or on a network, including several instructions to cause a computing device (such as a personal computer, server, touch terminal, or network device, etc.) to execute the method according to the embodiments of this application.

[0108] Other embodiments of this application will readily occur to those skilled in the art upon consideration of the specification and practice of the embodiments disclosed herein. This application is intended to cover any variations, uses, or adaptations of this application that follow the general principles of this application and include common knowledge or customary techniques in the art not disclosed herein.

[0109] It should be understood that this application is not limited to the precise structure described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of this application is limited only by the appended claims.

Claims

1. A method for rendering node icons, characterized in that, include: In response to the rendering of the node graph, the basic icon corresponding to each node is obtained according to the node type, and the basic icon is a vector icon; Based on the node status, change the color of the corresponding basic icon for each node to obtain the node icon for each node. The node icons of each node are inserted into the graph to obtain the node graph.

2. The node icon rendering method as described in claim 1, characterized in that, The step of changing the color of the basic icon corresponding to each node according to the node status to obtain the node icon specifically includes: reading the string of the basic icon; modifying the color value of the basic icon in the string according to the node status to obtain the node icon corresponding to each node.

3. The node icon rendering method as described in claim 2, characterized in that, The step of modifying the color value of the basic icon in the string according to the node state to obtain the node icon corresponding to each node specifically includes: parsing the string into a DOM object; and using standard DOM operations to modify the color value of the basic icon to obtain the node icon corresponding to each node.

4. The node icon rendering method as described in claim 3, characterized in that, After parsing the string into a DOM object, the method further includes: checking the DOM object to determine whether an icon element exists; if the icon element exists, the parsing is successful; if the icon element does not exist, the parsing fails.

5. The node icon rendering method as described in claim 1, characterized in that, The step of responding to the rendering of the node graph and obtaining the basic icon corresponding to each node according to the node type specifically includes: responding to the rendering of the node graph and determining the node type corresponding to each node; obtaining the basic icon corresponding to each node according to the node type.

6. The node icon rendering method as described in claim 1, characterized in that, The method further includes: in response to the update of the basic icon, re-rendering the node icon of the corresponding node type according to the mapping to obtain the updated node icon; and re-inserting the updated node icon into the graph to complete the update of the node graph.

7. The node icon rendering method as described in claim 6, characterized in that, In response to the update of the base icon, the node icon of the corresponding node type is re-rendered according to the mapping to obtain the updated node icon. Specifically, this includes: in response to the update of the base icon, determining all nodes of the corresponding node type according to the mapping; and changing the color of the updated base icon according to the node status of each node under the node type to obtain the updated node icon.

8. A node icon rendering device, characterized in that, The node icon rendering device includes: an icon acquisition module, used to acquire a basic icon corresponding to each node according to the node type in response to the rendering of the node graph, wherein the basic icon is a vector icon; a color modification module, used to change the color of the basic icon corresponding to each node according to the node status, thereby obtaining the node icon corresponding to each node; and a graph production module, used to insert the node icon of each node into the graph, thereby obtaining the node graph.

9. A computer-readable medium having a computer program stored thereon, characterized in that, When the computer program is executed by the processor, it implements the node icon rendering method as described in any one of claims 1 to 7.

10. An electronic device, characterized in that, include: One or more processors; A storage device for storing one or more programs, which, when executed by one or more processors, cause the one or more processors to implement the node icon rendering method as described in any one of claims 1 to 7.

Images