Rendering method, device, electronic device and computer readable medium for pipeline

Abstract

The present disclosure relates to a pipeline rendering method, device, electronic device and computer-readable medium, and belongs to the field of computer technology. The method comprises: dividing the task nodes in the pipeline into multiple stages, wherein each stage includes at least one parallel layer, and each parallel layer includes at least one serial layer; processing the connections between each stage so that the connections between each stage are located at the topmost layer of the parallel layer under each stage; rendering the pipeline according to the layout structure of the pipeline after processing the connections between each stage. The present disclosure can reduce the cost of pipeline rendering and improve the efficiency of rendering by dividing the task nodes in the pipeline into multiple stages and processing the connections between each stage.

Description

Technical Field

[0001] The present disclosure relates to the field of computer technology, and in particular to a pipeline rendering method, a pipeline rendering device, an electronic device, and a computer-readable medium. Background Art

[0002] For some large projects or applications, many CI / CD tools are usually involved in the process from coding to release. Integrating CI / CD tools into a system and executing all processes through pipelines can reduce human errors and improve release efficiency.

[0003] Currently, the front-end rendering pipeline method cannot take into account both low learning cost and good graphic expression, and the rendering efficiency is low.

[0004] In view of this, there is an urgent need in the art for a pipeline rendering method that can reduce the cost of pipeline rendering while improving rendering efficiency.

[0005] It should be noted that the information disclosed in the above background technology section is only used to enhance the understanding of the background of the present disclosure, and therefore may include information that does not constitute the prior art known to ordinary technicians in the field. Summary of the invention

[0006] The purpose of the present disclosure is to provide a pipeline rendering method, a pipeline rendering device, an electronic device and a computer-readable medium, thereby reducing the cost of pipeline rendering at least to a certain extent and improving the rendering efficiency.

[0007] According to a first aspect of the present disclosure, a pipeline rendering method is provided, comprising:

[0008] Divide the task nodes in the pipeline into multiple stages, wherein each stage includes at least one parallel layer, and each parallel layer includes at least one serial layer;

[0009] Processing the connection lines between the stages so that the connection lines between the stages are located at the topmost layer of the parallel layer under each stage;

[0010] The pipeline is rendered according to the layout structure of the pipeline after processing the connections between the stages.

[0011] In an exemplary embodiment of the present disclosure, processing the connection lines between the stages so that the connection lines between the stages are located at the topmost layer of the parallel layer under each stage includes:

[0012] The connection lines between the stages are processed using pseudo-classes in a cascading style sheet, so that the connection lines between the stages are located at the topmost layer of the parallel layers under each stage.

[0013] In an exemplary embodiment of the present disclosure, the using of pseudo-classes in a cascading style sheet to process the connection lines between the stages so that the connection lines between the stages are located at the topmost layer of the parallel layer under each stage includes:

[0014] The width value, height value and position of the pseudo class of each of the parallel layers are adjusted so that the connection lines between the stages are located at the topmost layer of the parallel layers under each of the stages.

[0015] In an exemplary embodiment of the present disclosure, the adjusting the width value, height value and position of the pseudo class of each parallel layer includes:

[0016] Obtaining the upper outer margin between each of the parallel layers, and determining the width and height of the pseudo class of each of the parallel layers according to the upper outer margin;

[0017] The outer margin of each pseudo class of the parallel layer is determined according to the upper outer margin, and the upper boundary offset value of each pseudo class of the parallel layer is determined according to the outer margin.

[0018] In an exemplary embodiment of the present disclosure, determining the width value and height value of the pseudo-class of each of the parallel layers according to the upper margin includes:

[0019] Obtain the width and height of the parallel layer;

[0020] Obtaining a width value of the pseudo class of the parallel layer according to the sum of the width value of the parallel layer and the upper outer margin;

[0021] The height value of the pseudo class of the parallel layer is obtained according to the sum of the height value of the parallel layer and the upper outer margin.

[0022] In an exemplary embodiment of the present disclosure, determining the upper boundary offset value of each pseudo-class of the parallel layer according to the outer margin includes:

[0023] Obtaining the height of the task node according to the sum of half of the outer margin and the outer margin;

[0024] The upper boundary offset value of each pseudo class of the parallel layer is obtained according to the negative number of the sum of half the height of the task node and the upper outer margin.

[0025] In an exemplary embodiment of the present disclosure, rendering the pipeline according to the layout structure of the pipeline after processing the connections between the stages includes:

[0026] According to the layout structure of the pipeline after processing the connections between the stages, the pipeline is rendered through a document object model.

[0027] According to a second aspect of the present disclosure, a pipeline rendering device is provided, comprising:

[0028] A task node division module, used to divide the task nodes in the pipeline into multiple stages, wherein each stage includes at least one parallel layer, and each parallel layer includes at least one serial layer;

[0029] A stage connection processing module, used for processing the connection between each of the stages so that the connection between each of the stages is located at the topmost layer of the parallel layer under each of the stages;

[0030] The pipeline rendering module is used to render the pipeline according to the layout structure of the pipeline after processing the connections between the various stages.

[0031] According to a third aspect of the present disclosure, an electronic device is provided, comprising: a processor; and a memory for storing executable instructions of the processor; wherein the processor is configured to execute any one of the pipeline rendering methods described above by executing the executable instructions.

[0032] According to a fourth aspect of the present disclosure, a computer-readable medium is provided, on which a computer program is stored, and when the computer program is executed by a processor, the pipeline rendering method described in any one of the above is implemented.

[0033] The exemplary embodiments of the present disclosure may have the following beneficial effects:

[0034] In the pipeline rendering method of the example implementation of the present disclosure, the task nodes in the pipeline are divided into multiple stages, and the lines between the stages are processed, and the pipeline is rendered according to the layout structure of the pipeline after the lines between the stages are processed. The pipeline rendering method in the example implementation of the present disclosure can, on the one hand, reduce the cost of pipeline rendering and improve the rendering efficiency of the pipeline while ensuring the advantages in graphic expression; on the other hand, it can realize the rapid development and rapid iteration of the business, and improve the efficiency and accuracy of the application or project from coding to publishing.

[0035] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0036] The accompanying drawings herein are incorporated into the specification and constitute a part of the specification, illustrate embodiments consistent with the present disclosure, and together with the specification are used to explain the principles of the present disclosure. Obviously, the accompanying drawings described below are only some embodiments of the present disclosure, and for ordinary technicians in this field, other accompanying drawings can be obtained based on these accompanying drawings without creative work.

[0037] Figure 1 A schematic diagram schematically shows multiple CI / CD tools involved in the process from coding to release of an enterprise-level application according to a specific embodiment of the present disclosure;

[0038] Figure 2 A schematic diagram of a pipeline according to a specific embodiment of the present disclosure is schematically shown;

[0039] Figure 3 A schematic flow chart showing a pipeline rendering method according to an exemplary embodiment of the present disclosure;

[0040] Figure 4 A schematic diagram schematically shows a serial arrangement according to a specific embodiment of the present disclosure;

[0041] Figure 5 A schematic diagram schematically shows a parallel arrangement according to a specific embodiment of the present disclosure;

[0042] Figure 6 A schematic diagram schematically shows a combination of serial and parallel arrangements according to a specific embodiment of the present disclosure;

[0043] Figure 7 A schematic diagram schematically shows an irregular complex arrangement according to a specific embodiment of the present disclosure;

[0044] Figure 8 A schematic diagram schematically shows a stage according to a specific embodiment of the present disclosure;

[0045] Fig. 9 Schematically showing a schematic diagram of two stages according to a specific embodiment of the present disclosure;

[0046] Fig.10 A schematic diagram schematically shows three levels of a Pipeline structure according to a specific embodiment of the present disclosure;

[0047] Fig.11 A schematic diagram schematically shows a basic loop structure of a Pipeline according to a specific embodiment of the present disclosure;

[0048] Fig.12A schematic diagram showing a flow chart of adjusting the width value, height value and positioning of a pseudo class of each parallel layer according to an exemplary embodiment of the present disclosure;

[0049] Fig.13 A schematic diagram schematically shows a Pipeline structure of a default layout according to a specific embodiment of the present disclosure;

[0050] Fig.14 A schematic diagram of a Pipeline structure after line processing according to a specific embodiment of the present disclosure is schematically shown;

[0051] Fig.15 A schematic diagram schematically shows a JSON data structure according to a specific embodiment of the present disclosure;

[0052] Fig.16 A block diagram of a rendering device of a pipeline according to an exemplary embodiment of the present disclosure is shown;

[0053] Fig.17 A schematic diagram of the structure of a computer system suitable for implementing the electronic device of the embodiment of the present disclosure is shown. DETAILED DESCRIPTION

[0054] Example embodiments will now be described more fully with reference to the accompanying drawings. However, example embodiments can be implemented in a variety of forms and should not be construed as being limited to the examples set forth herein; on the contrary, these embodiments are provided so that the present disclosure will be more comprehensive and complete, and the concepts of the example embodiments are fully conveyed to those skilled in the art. The described features, structures, or characteristics may be combined in one or more embodiments in any suitable manner. In the following description, many specific details are provided to provide a full understanding of the embodiments of the present disclosure. However, those skilled in the art will appreciate that the technical solutions of the present disclosure may be practiced while omitting one or more of the specific details, or other methods, components, devices, steps, etc. may be adopted. In other cases, known technical solutions are not shown or described in detail to avoid obscuring various aspects of the present disclosure.

[0055] In addition, the accompanying drawings are only schematic illustrations of the present disclosure and are not necessarily drawn to scale. The same reference numerals in the figures represent the same or similar parts, and their repeated description will be omitted. Some of the block diagrams shown in the accompanying drawings are functional entities and do not necessarily correspond to physically or logically independent entities. These functional entities can be implemented in software form, or implemented in one or more hardware modules or integrated circuits, or implemented in different networks and / or processor devices and / or microcontroller devices.

[0056] For some large enterprise-level projects or applications, the process from coding to release generally involves many CI / CD (Continuous Integration, Continuous Delivery, Continuous Deployment, Continuous Deployment) tools, such as code version management - Git, project building - Maven, testing - Junit, release - Jenkins, deployment - Docker, etc. Figure 1 shown.

[0057] Nowadays, many businesses are faced with the problem of rapid development and release of versions for testing, and then rapid iteration after market feedback. This process is very cumbersome and requires repeated operations. Human errors often occur in the middle of the process, leading to release failures. In short, the release process of a project or application is very costly and risky for operators.

[0058] In order to free up operators, the concept and specific implementation of pipeline came into being, which is to integrate CI / CD tools into a system, so that operators only need to fill out a form once and complete the execution of all processes by clicking a button. Among them, the Pipeline client can provide task node related information and real-time status through a visual interface, including the configuration, operation status, logs, etc. of each task node.

[0059] Pipeline——pipeline, such as Figure 2 As shown, it has the following two characteristics:

[0060] 1. It has a direction (usually from left to right), and the direction is irreversible.

[0061] 2. It has two operation modes: serial and parallel (the two operation modes can be combined).

[0062] In some related embodiments, there are generally two ways of front-end rendering pipeline, namely SVG (Scalable Vector Graphics) and DOM (Document Object Model). However, both of the above methods have certain advantages and disadvantages. Although the SVG method has more advantages in expressing graphics, it requires additional learning costs. The DOM method is just the opposite. It does not have an advantage in graphic expression, but there is no learning cost for front-end developers.

[0063] This example implementation first provides a pipeline rendering method. Figure 3 As shown, the rendering method of the above pipeline may include the following steps:

[0064] Step S310: Divide the task nodes in the pipeline into multiple stages, wherein each stage includes at least one parallel layer, and each parallel layer includes at least one serial layer.

[0065] Step S320: Process the connections between the various stages so that the connections between the various stages are located at the topmost layer of the parallel layer under each stage.

[0066] Step S330: Render the pipeline according to the layout structure of the pipeline after processing the connections between the various stages.

[0067] In the pipeline rendering method of the example implementation of the present disclosure, the task nodes in the pipeline are divided into multiple stages, and the lines between the stages are processed, and the pipeline is rendered according to the layout structure of the pipeline after the lines between the stages are processed. The pipeline rendering method in the example implementation of the present disclosure can, on the one hand, reduce the cost of pipeline rendering and improve the rendering efficiency of the pipeline while ensuring the advantages in graphic expression; on the other hand, it can realize the rapid development and rapid iteration of the business, and improve the efficiency and accuracy of the application or project from coding to publishing.

[0068] Next, combine Figures 4 to 15 The above steps of this exemplary embodiment are described in more detail.

[0069] In step S310, the task nodes in the pipeline are divided into multiple stages, wherein each stage includes at least one parallel layer, and each parallel layer includes at least one serial layer.

[0070] Before dividing the task nodes in the pipeline, first analyze the structure of the Pipeline.

[0071] The simplest Pipeline structure is that each node is arranged in series or in parallel. Figure 4 As shown, the parallel arrangement is as follows Figure 5 The second is the combination of serial and parallel arrangement, such as Figure 6 As shown. In fact, the combination arrangement can become more complex and irregular, such as Figure 7 As shown. Figure 7 For this kind of irregular Pipeline, the most important thing is not the rendering method, but making it regular is the first problem to be solved.

[0072] In this example implementation, in order to make the Pipeline regular, it is necessary to add a logic to the Pipeline - a stage. By adding logic similar to the stage, the Pipeline can be segmented, making it regular from irregular.

[0073] A stage is a logical hierarchy that can only have serial or parallel modes, but not both. Figure 8 The whole is a stage. Task 1, Task 2, Task 3, and Task 4 are in parallel relationship and belong directly to the stage. However, Task 2 and Task 3 are in serial relationship and do not belong directly to the stage. Fig. 9 For the Pipeline in, it needs to be divided into two stages, one containing tasks 1, 2, and 4, and the other containing only task 3.

[0074] Based on the above stage logic, the Pipeline structure can be divided into three levels, such as Fig.10 As shown, from the outer layer to the inner layer, they are respectively - phase layer 1001, parallel layer 1002, and serial layer 1003. It is worth noting that in this exemplary implementation, the serial layer is only set as the innermost layer, and in fact, the serial layer may also contain some parallel structures.

[0075] After dividing the Pipeline level into stage layer, parallel layer, and serial layer, each layer can correspond to a loop in the code program, that is, the basic structure of the Pipeline can be rendered through three layers of loops.

[0076] The loop structure of Pipeline is as follows Fig.11 As shown, the first layer traverses the stage data, obtains the stage data (i=0), then traverses the parallel data of the second layer below it, obtains the parallel data (j=0), and then performs traversal of the serial data of the third layer below it, that is, traversal of the task nodes (k=0 to n). After traversing the task nodes, it returns to the previous layer and continues to traverse the parallel data of the second layer to obtain parallel data (j=1). Then, it traverses the serial data of the third layer below it again. When all the parallel data of the second layer are traversed, it loops back to the first layer stage and obtains the stage data (i=1). The above steps are continued to loop until all the stage data are traversed.

[0077] In step S320, the connection lines between the various stages are processed so that the connection lines between the various stages are located at the topmost layer of the parallel layer under each stage.

[0078] Since the stages are connected by one line instead of multiple lines, each stage can be regarded as a "point", and multiple "points" (stages) are connected to form a complete line - the pipeline.

[0079] After determining the basic structure of the Pipeline, the lines between the stages can be processed so that the lines between the stages are located at the top of the parallel layer under each stage to improve rendering efficiency.

[0080] In this example implementation, the connection lines between the various stages can be processed using pseudo-classes in the cascading style sheet. Specifically, the width value, height value and positioning of the pseudo-classes of each parallel layer can be adjusted so that the connection lines between the various stages are located at the topmost layer of the parallel layer under each stage.

[0081] Cascading Style Sheets (CSS) is a computer language used to express the style of files such as HTML (Hyper Text Markup Language) or XML (Extensible Markup Language). CSS has a series of pseudo-class elements, such as :before, :after, :first-line, :first-letter, etc.

[0082] In this example implementation, CSS can be used to lay out the basic structure of Pipeline and set its specific appearance. The most complicated part of using CSS for layout and appearance setting is the line processing between the parallel layer and serial layer task nodes. The lines can be cleverly processed using the pseudo-classes before or after in the CSS style. The specific method for processing the lines is to set the width, height and positioning of each pseudo-class of the parallel layer. In this example implementation, only the pseudo-class before is used as an example for explanation, and the specific setting method of the pseudo-class after is similar.

[0083] In this example implementation, Fig.12 As shown, adjust the width, height, and positioning of the pseudo class of each parallel layer. Specifically, the following steps may be included:

[0084] Step S1210: Obtain the upper margin between each parallel layer, and determine the width and height of the pseudo class of each parallel layer according to the upper margin.

[0085] In this example implementation, the width and height values ​​of the parallel layer can be obtained, and then the width value of the pseudo-class of the parallel layer is obtained based on the sum of the width value of the parallel layer and the top margin, and the height value of the pseudo-class of the parallel layer is obtained based on the sum of the height value of the parallel layer and the top margin.

[0086] For example, the width of the pseudo class can be set to calc(100%+48px), which is 48 pixels more than the width of the parallel layer; the height can also be set to calc(100%+48px), which is 48 pixels more than the height of the parallel layer. Among them, 48px is the top margin (margin-top) between each parallel layer, which can also be set to 24 or 96 pixels. The specific setting can be determined according to the rendered distance or frame distance to ensure the image is beautiful. In addition, calc() represents a calculation function.

[0087] Step S1220: Determine the outer margin of each pseudo-class in each parallel layer according to the upper outer margin, and determine the upper boundary offset value of the pseudo-class in each parallel layer according to the outer margin.

[0088] In this example implementation, the margins of the pseudo-classes of each parallel layer can be determined based on the top margin. For example, if the top margin between each parallel layer is 48px, the margins of the pseudo-classes of each parallel layer can be set to "margin:0-24px;", so that the pseudo-class before protrudes 24 pixels to the left and right in the horizontal direction relative to the current parallel layer.

[0089] In this example implementation, the height of the task node can be obtained according to half of the margin and the sum of the margins, and then the upper boundary offset value of the pseudo-class of each parallel layer can be obtained according to the negative number of the sum of half of the height of the task node and the upper margin.

[0090] For example, if the value of the margin is 24px, then the height of the task node is 36px based on 24px plus half of 24px. Then, based on half of the height of the task node 36px plus the value of the top margin (margin-top) 48, the upper boundary offset value of the pseudo-class of each parallel layer is obtained as "top:-66px". In this way, the bottom line of the pseudo-class before just passes through all the task nodes under the current parallel layer in a vertically centered direction, and the left and right side lines of the pseudo-class before just intersect with the bottom line of the pseudo-class before of the previous layer (parallel layer).

[0091] Based on the above method, all stages are spread out horizontally through CSS styles, and then the lines between stages are connected at the top of the parallel layer under each stage. This can reduce a lot of unnecessary calculations when rendering the Pipeline, and can also convey the logical meaning to be expressed. Fig.13 and Fig.14 For example, Fig.13 The parallel layers at the stage where task 1 is located and the parallel layers at the stages where tasks 2 and 3 are located are centered in the vertical direction. Since the position of each task needs to be confirmed during rendering, Fig.13To determine the location of Task 1, we need to add the heights of Task 2 and Task 3 and divide by 2. Fig.14 The parallel layers under each stage are laid out according to the default div (DIVision, the position and hierarchy of cascading style sheet units) tag characteristics. Since the heights of Task 1 and Task 2 are consistent, efficiency can be improved during rendering.

[0092] In step S330, the pipeline is rendered according to the layout structure of the pipeline after processing the connections between the various stages.

[0093] In this example implementation, the layout structure of the pipeline after processing the connections between the various stages can be used to render the pipeline on the front-end page through the Document Object Model (DOM). After the basic structure of the Pipeline becomes regular through the aforementioned steps and the connections between the various stages are processed, the rendering of the Pipeline can be achieved at a lower cost using the DOM method.

[0094] In this example implementation, in order to render the Pipeline as described above on the front end, it is also necessary to provide JSON (JavaScript Object Notation, JS object notation) data with a certain structure, refer to Fig.15 shown.

[0095] It should be noted that although the steps of the method in the present disclosure are described in a specific order in the drawings, this does not require or imply that the steps must be performed in this specific order, or that all the steps shown must be performed to achieve the desired results. Additionally or alternatively, some steps may be omitted, multiple steps may be combined into one step, and / or one step may be decomposed into multiple steps, etc.

[0096] Furthermore, the present disclosure also provides a pipeline rendering device. Fig.16 As shown, the pipeline rendering device may include a task node division module 1610, a stage connection processing module 1620 and a pipeline rendering module 1630. Among them:

[0097] The task node division module 1610 may be used to divide the task nodes in the pipeline into multiple stages, wherein each stage includes at least one parallel layer, and each parallel layer includes at least one serial layer;

[0098] The stage connection processing module 1620 may be used to process the connections between the various stages so that the connections between the various stages are located at the topmost layer of the parallel layer under each stage;

[0099] The pipeline rendering module 1630 may be used to render the pipeline according to the layout structure of the pipeline after processing the connections between the various stages.

[0100] In some exemplary embodiments of the present disclosure, the stage connection processing module 1620 may include a pseudo-class processing unit, which can be used to process the connections between the stages using the pseudo-classes in the cascading style sheet so that the connections between the stages are located at the topmost layer of the parallel layer under each stage.

[0101] In some exemplary embodiments of the present disclosure, the pseudo-class processing unit may include a pseudo-class parameter adjustment unit, which can be used to adjust the width value, height value and positioning of the pseudo-class of each parallel layer so that the connecting lines between the various stages are located at the topmost layer of the parallel layers under each stage.

[0102] In some exemplary embodiments of the present disclosure, the pseudo-class parameter adjustment may include a pseudo-class width and height adjustment unit and a pseudo-class positioning adjustment unit.

[0103] The pseudo-class width and height adjustment unit can be used to obtain the upper margin between each parallel layer, and determine the width and height values ​​of the pseudo-class of each parallel layer according to the upper margin;

[0104] The pseudo-class positioning adjustment unit may be used to determine the outer margins of the pseudo-classes of each parallel layer according to the upper outer margin, and determine the upper boundary offset value of the pseudo-classes of each parallel layer according to the outer margin.

[0105] In some exemplary embodiments of the present disclosure, the pseudo class width and height adjustment unit may include a parallel layer width and height acquisition unit, a pseudo class width value determination unit, and a pseudo class height value determination unit.

[0106] The parallel layer width and height acquisition unit can be used to obtain the width and height values ​​of the parallel layer;

[0107] The pseudo-class width value determination unit may be used to obtain the width value of the pseudo-class of the parallel layer according to the sum of the width value of the parallel layer and the upper outer margin;

[0108] The pseudo-class height value determination unit may be configured to obtain the height value of the pseudo-class of the parallel layer according to the sum of the height value of the parallel layer and the upper margin.

[0109] In some exemplary embodiments of the present disclosure, the pseudo-class positioning adjustment unit may include a unit and a unit.

[0110] The task node height determination unit may be used to obtain the height of the task node according to the sum of half of the outer margin and the outer margin;

[0111] The boundary offset value determination unit may be used to obtain the upper boundary offset value of the pseudo-class of each parallel layer according to the negative number of the sum of half the height of the task node and the upper outer margin.

[0112] In some exemplary embodiments of the present disclosure, the pipeline rendering module 1630 may include a document object model rendering unit, which may be used to render the pipeline through a document object model according to the layout structure of the pipeline after processing the connections between the various stages.

[0113] The specific details of each module / unit in the rendering device of the above pipeline have been described in detail in the corresponding method embodiment part, and will not be repeated here.

[0114] Fig.17 A schematic diagram of the structure of a computer system suitable for implementing an electronic device of an embodiment of the present invention is shown.

[0115] It should be noted that Fig.17 The computer system 1700 of the electronic device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present invention.

[0116] like Fig.17 As shown, the computer system 1700 includes a central processing unit (CPU) 1701, which can perform various appropriate actions and processes according to the program stored in the read-only memory (ROM) 1702 or the program loaded from the storage part 1708 to the random access memory (RAM) 1703. In the RAM 1703, various programs and data required for system operation are also stored. The CPU 1701, the ROM 1702, and the RAM 1703 are connected to each other through a bus 1704. An input / output (I / O) interface 1705 is also connected to the bus 1704.

[0117] The following components are connected to the I / O interface 1705: an input section 1706 including a keyboard, a mouse, etc.; an output section 1707 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 1708 including a hard disk, etc.; and a communication section 1709 including a network interface card such as a LAN card, a modem, etc. The communication section 1709 performs communication processing via a network such as the Internet. A drive 1710 is also connected to the I / O interface 1705 as needed. A removable medium 1711, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 1710 as needed, so that a computer program read therefrom is installed into the storage section 1708 as needed.

[0118] In particular, according to an embodiment of the present invention, the process described below with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present invention includes a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication section 1709, and / or installed from a removable medium 1711. When the computer program is executed by a central processing unit (CPU) 1701, various functions defined in the system of the present application are executed.

[0119] It should be noted that the computer-readable medium shown in the present disclosure may be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present disclosure, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, device or device. In the present disclosure, a computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, in which a computer-readable program code is carried. This propagated data signal may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. Computer-readable signal media may also be any computer-readable medium other than computer-readable storage media, which may send, propagate or transmit a program for use by or in conjunction with an instruction execution system, apparatus or device. The program code contained on the computer-readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, optical cable, RF, etc., or any suitable combination of the above.

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

[0121] As another aspect, the present application also provides a computer-readable medium, which may be included in the electronic device described in the above embodiment; or may exist independently without being assembled into the electronic device. The above computer-readable medium carries one or more programs, and when the above one or more programs are executed by an electronic device, the electronic device implements the method described in the following embodiment.

[0122] It should be noted that, although several modules of the device for action execution are mentioned in the above detailed description, this division is not mandatory. In fact, according to the embodiments of the present disclosure, the features and functions of two or more modules described above can be concretized in one module. Conversely, the features and functions of one module described above can be further divided into multiple modules to be concretized.

[0123] Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing the invention disclosed herein. This application is intended to cover any modifications, uses or adaptations of the present disclosure, which follow the general principles of the present disclosure and include common knowledge or customary technical means in the art that are not disclosed in the present disclosure.

[0124] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A pipeline rendering method, characterized in that: include: Divide the task nodes in the pipeline into multiple stages, wherein each stage includes at least one parallel layer, each parallel layer includes at least one serial layer, and the stage directly includes a serial mode or a parallel mode, but does not include both serial and parallel modes; Processing the connection lines between the stages so that the connection lines between the stages are located at the topmost layer of the parallel layer under each stage; The pipeline is rendered according to the layout structure of the pipeline after processing the connections between the stages.

2. The pipeline rendering method according to claim 1, characterized in that: The processing of the connection lines between the stages so that the connection lines between the stages are located at the topmost layer of the parallel layer under each stage includes: The connection lines between the stages are processed using pseudo-classes in a cascading style sheet, so that the connection lines between the stages are located at the topmost layer of the parallel layers under each stage.

3. The pipeline rendering method according to claim 2, characterized in that: The method of using pseudo-classes in a cascading style sheet to process the connection lines between the stages so that the connection lines between the stages are located at the topmost layer of the parallel layer under each stage includes: The width value, height value and position of the pseudo class of each of the parallel layers are adjusted so that the connection lines between the stages are located at the topmost layer of the parallel layers under each of the stages.

4. The pipeline rendering method according to claim 3, characterized in that: The adjusting the width value, height value and positioning of the pseudo class of each parallel layer includes: Obtaining the upper outer margin between each of the parallel layers, and determining the width and height of the pseudo class of each of the parallel layers according to the upper outer margin; The outer margin of each pseudo class of the parallel layer is determined according to the upper outer margin, and the upper boundary offset value of each pseudo class of the parallel layer is determined according to the outer margin.

5. The pipeline rendering method according to claim 4, characterized in that: The determining the width value and height value of the pseudo-class of each parallel layer according to the upper outer margin includes: Obtain the width and height of the parallel layer; Obtaining a width value of the pseudo class of the parallel layer according to the sum of the width value of the parallel layer and the upper outer margin; The height value of the pseudo class of the parallel layer is obtained according to the sum of the height value of the parallel layer and the upper outer margin.

6. The pipeline rendering method according to claim 4, characterized in that: The determining the upper boundary offset value of the pseudo-class of each parallel layer according to the outer margin includes: Obtaining the height of the task node according to the sum of half of the outer margin and the outer margin; The upper boundary offset value of each pseudo class of the parallel layer is obtained according to the negative number of the sum of half the height of the task node and the upper outer margin.

7. The pipeline rendering method according to claim 1, characterized in that: Rendering the pipeline according to the layout structure of the pipeline after processing the connections between the stages includes: According to the layout structure of the pipeline after processing the connections between the stages, the pipeline is rendered through a document object model.

8. A pipeline rendering device, characterized in that: include: A task node division module is used to divide the task nodes in the pipeline into multiple stages, wherein each stage includes at least one parallel layer, each parallel layer includes at least one serial layer, and the stage directly includes a serial mode or a parallel mode, but does not include both serial and parallel modes; A stage connection processing module, used for processing the connection between each of the stages so that the connection between each of the stages is located at the topmost layer of the parallel layer under each of the stages; The pipeline rendering module is used to render the pipeline according to the layout structure of the pipeline after processing the connections between the various stages.

9. An electronic device, characterized in that: include: processor; as well as A memory, used to store one or more programs, when the one or more programs are executed by the processor, enables the processor to implement the pipeline rendering method as described in any one of claims 1 to 7.

10. A computer readable medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the pipeline rendering method according to any one of claims 1 to 7 is implemented.

Images