CN109857388B - Code generation method, device, server and computer readable medium - Google Patents
Code generation method, device, server and computer readable medium Download PDFInfo
- Publication number
- CN109857388B CN109857388B CN201910024809.0A CN201910024809A CN109857388B CN 109857388 B CN109857388 B CN 109857388B CN 201910024809 A CN201910024809 A CN 201910024809A CN 109857388 B CN109857388 B CN 109857388B
- Authority
- CN
- China
- Prior art keywords
- picture
- information
- elements
- source file
- attribute information
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 63
- 238000007781 pre-processing Methods 0.000 claims description 20
- 238000004458 analytical method Methods 0.000 claims description 15
- 230000009467 reduction Effects 0.000 claims description 11
- 230000008569 process Effects 0.000 claims description 10
- 238000012545 processing Methods 0.000 claims description 10
- 238000004590 computer program Methods 0.000 claims description 9
- 230000002159 abnormal effect Effects 0.000 claims description 7
- 238000012544 monitoring process Methods 0.000 claims description 6
- 238000011084 recovery Methods 0.000 claims description 6
- 238000000605 extraction Methods 0.000 claims description 4
- 238000011161 development Methods 0.000 abstract description 10
- 238000010586 diagram Methods 0.000 description 16
- 238000013461 design Methods 0.000 description 11
- 230000006870 function Effects 0.000 description 7
- 238000009877 rendering Methods 0.000 description 6
- 238000004891 communication Methods 0.000 description 4
- 230000003287 optical effect Effects 0.000 description 4
- 230000000007 visual effect Effects 0.000 description 4
- 230000003993 interaction Effects 0.000 description 3
- 238000004364 calculation method Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 238000002203 pretreatment Methods 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 230000004044 response Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 230000003796 beauty Effects 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
Images
Landscapes
- Processing Or Creating Images (AREA)
Abstract
The embodiment of the application discloses a code generation method, a code generation device, a server and a computer readable medium. An embodiment of the method comprises: acquiring a picture source file to be processed; extracting each element in the picture source file and attribute information of each element; analyzing the attribute information to generate position relation information of each element; based on the position relation information, laying out each element; program code for restoring the picture is generated based on the layout result and the attribute information. The embodiment improves the development efficiency of the webpage.
Description
Technical Field
The embodiment of the application relates to the technical field of computers, in particular to a code generation method, a code generation device, a server and a computer readable medium.
Background
A User Interface (UI) can be generally considered as an integral design of human-computer interaction, operation logic, and Interface beauty for software or a web page. The excellent user interface not only can enable the software or the webpage to become individual and tasteful, but also can enable the operation of the software or the webpage to be more comfortable, simple and natural, thereby fully embodying the positioning and the characteristics of the software or the webpage and the like.
In the development process of software or a web page, generally, a visual designer needs to design a user interface to form a picture source file (i.e., a UI design draft), and then a front-end engineer completes the work of restoring a code from the user interface design draft according to the user interface design draft. The analysis work of the user interface design draft in the restoration work is particularly important, hours or even days are often consumed, the efficiency is low, and the requirement on the skills of front-end engineers is high.
Disclosure of Invention
The embodiment of the application provides a code generation method, a code generation device, a server and a computer readable medium, so as to solve the problems that the work efficiency of analyzing a picture source file is low and the requirement on the skill of a front-end engineer is high in the prior art.
In a first aspect, an embodiment of the present application provides a code generation method, which is applied to a server, and the method includes: acquiring a picture source file to be processed; extracting each element and attribute information of each element in the picture source file; analyzing the attribute information to generate position relation information among elements; based on the position relation information, laying out each element; program code for restoring the picture is generated based on the layout result and the attribute information.
In some embodiments, the attribute information further includes element position information and element size information; analyzing the attribute information to generate the position relation information among the elements, wherein the position relation information comprises the following steps: generating box model information corresponding to each element based on the element position information and the element size information; and generating position relation information among the elements based on the box model information, the element position information and the element size information, wherein the position relation information comprises the distance among the box models corresponding to the elements.
In some embodiments, determining the number of columns of the elements to be laid out per row based on the positional relationship information includes: determining whether each row of elements to be laid out has a coincidence relation or not based on the position relation information, wherein the coincidence relation comprises a total coincidence relation and a local coincidence relation; taking the elements with the coincidence relation as a column, taking each element without the coincidence relation as a column, counting the number of columns of the elements to be laid out in each row, and laying out the elements in each row according to the determined number of columns.
In some embodiments, the attribute information includes an element overlay order; and after the elements are laid out based on the positional relationship information, the method further includes: and adjusting the layout result of each element according to the element covering sequence.
In some embodiments, extracting the elements and the attribute information of the elements in the picture source file includes: preprocessing a picture source file, wherein the preprocessing comprises at least one of the following: checking each element in the picture source file, and storing each element in the picture source file; and extracting each element, and extracting attribute information of each element from the picture source file.
In some embodiments, the preprocessing further includes storing a to-be-restored picture corresponding to the picture source file; and after generating the program code for restoring the picture, the method further comprises: running a program code for restoring the picture to generate a restored picture; comparing the reduced picture with a picture to be reduced, and determining the reduction degree of the reduced picture; and determining whether the program code for restoring the picture is qualified or not based on the comparison of the restoration degree and a preset value.
In some embodiments, after generating the restored picture, the method further comprises: and determining the pixel difference value between the restored picture and the picture to be restored.
In some embodiments, obtaining a pending picture source file comprises: responding to the received analysis task message sent by the storage server, and acquiring a picture source file to be processed from the storage server; and after generating program code for restoring the picture based on the layout result and the attribute information, the method further includes: and sending the program code for restoring the picture to a storage server.
In some embodiments, the method further comprises: monitoring the processing process of the picture source file in real time according to a preset dimension, wherein the preset dimension comprises at least one of the following items: abnormal state, recovery success rate, time-consuming information.
In a second aspect, an embodiment of the present application provides a code generation apparatus, which is applied to a server, and the apparatus includes: an acquisition unit configured to acquire a picture source file to be processed; an extracting unit configured to extract each element and attribute information of each element in a picture source file; an analysis unit configured to analyze the attribute information to generate positional relationship information between the elements; a layout unit configured to lay out the elements based on the positional relationship information; a code generating unit configured to generate a program code for restoring the picture based on the layout result and the attribute information.
In some embodiments, the attribute information further includes element position information and element size information; and an analysis unit including: a first generation module configured to generate box model information corresponding to each element based on the element position information and the element size information; and the second generation module is configured to generate position relation information among the elements based on the box model information, the element position information and the element size information, wherein the position relation information comprises the distance among the box models corresponding to the elements.
In some embodiments, a layout module, comprising: the first determining module is configured to determine whether an overlapping relation exists in each row of elements to be laid out based on the position relation information, wherein the overlapping relation comprises a total overlapping relation and a local overlapping relation; and the second determining module is configured to take the elements with the coincidence relation as a column, take each element without the coincidence relation as a column, count the number of columns of the elements to be laid out in each row, and lay out the elements in each row according to the determined number of columns.
In some embodiments, the attribute information includes an element overlay order; and the apparatus further comprises: an adjusting unit configured to adjust a layout result of each element in the element covering order.
In some embodiments, the extraction unit is further configured to: preprocessing a picture source file, wherein the preprocessing comprises at least one of the following: checking each element in the picture source file, and storing each element in the picture source file; and extracting each element, and extracting attribute information of each element from the picture source file.
In some embodiments, the preprocessing further includes storing a to-be-restored picture corresponding to the picture source file; and the apparatus further comprises: the running unit is configured to run the program codes for restoring the picture and generate a restored picture; the first determining unit is configured to compare the reduced picture with a picture to be reduced and determine the reduction degree of the reduced picture; and the second determining unit is configured to determine whether the program code for restoring the picture is qualified or not based on the comparison of the restoration degree and a preset value.
In some embodiments, the apparatus further comprises: and the third determining unit is configured to determine the pixel difference value of the restored picture and the picture to be restored.
In some embodiments, the obtaining unit is further configured to: responding to the received analysis task message sent by the storage server, and acquiring a picture source file to be processed from the storage server; and the apparatus further comprises: a storage unit configured to transmit the program code for restoring the picture to a storage server.
In some embodiments, the apparatus further comprises: the monitoring unit is configured to monitor the processing process of the picture source file in real time according to preset dimensionality, wherein the preset dimensionality comprises at least one of the following items: abnormal state, recovery success rate, time-consuming information.
In a third aspect, an embodiment of the present application provides a server, including: one or more processors; storage means having one or more programs stored thereon which, when executed by one or more processors, cause the one or more processors to implement a method as in any one of the embodiments of the first aspect described above.
In a fourth aspect, the present application provides a computer-readable medium, on which a computer program is stored, which when executed by a processor implements the method according to any one of the embodiments of the first aspect.
According to the code generation method and device provided by the embodiment of the application, after the picture source file to be processed is obtained, each element in the picture source file and attribute information of each element can be extracted; then, the attribute information can be analyzed to generate position relation information among the elements, so that the elements can be conveniently laid out based on the position relation information; finally, program code for restoring the picture is generated based on the layout result and the attribute information. Therefore, the analysis work of the picture source file can be completed without manpower, the workload of a front-end engineer is reduced, and the skill requirement of the front-end engineer is lowered; meanwhile, the resolution speed of the picture source file is improved, and the webpage development efficiency is improved.
Drawings
Other features, objects and advantages of the present application will become more apparent upon reading of the following detailed description of non-limiting embodiments thereof, made with reference to the accompanying drawings in which:
FIG. 1 is a flow diagram of one embodiment of a code generation method according to the present application;
FIG. 2 is a flow diagram of yet another embodiment of a code generation method according to the present application;
FIG. 3 is a schematic diagram of an interaction between a server executing a code generation method and a storage server according to the present application;
FIG. 4 is a schematic block diagram of one embodiment of a code generation apparatus according to the present application;
FIG. 5 is a block diagram of a computer system suitable for use in implementing a server according to embodiments of the present application.
Detailed Description
The present application will be described in further detail with reference to the following drawings and examples. It is to be understood that the specific embodiments described herein are merely illustrative of the relevant invention and not restrictive of the invention. It should be noted that, for convenience of description, only the portions related to the related invention are shown in the drawings.
It should be noted that the embodiments and features of the embodiments in the present application may be combined with each other without conflict. The present application will be described in detail below with reference to the embodiments with reference to the attached drawings.
Referring to FIG. 1, a flow 100 of one embodiment of a code generation method according to the present application is shown. The code generation method can be applied to a server and comprises the following steps:
In the present embodiment, an execution subject (e.g., a server) of the code generation method may acquire a picture source file to be processed. The picture source file can be a user interface design draft for a user interface, an advertisement design draft and the like, and the application scene of the picture is not limited by the invention. As an example, the above-mentioned picture source file may be a Sketch (a vector design tool) source file or a PhotoShop source file, or the like.
In practice, a variety of elements may be included in the picture source file. Such as slices, layers, vector images, text, etc. Here, the type, version, content, capacity, and the like of the picture source file are not particularly limited.
In this embodiment, the element in the picture source file to be processed may include at least one of the following: layer, vector diagram, slice, text.
In some optional implementations of this embodiment, the execution subject may be communicatively connected to a storage server. The storage server may be configured to store one or more image source files to be currently processed, and may also be configured to store the program code for restoring the image after the main body is executed. In response to receiving the parsing task message sent by the storage server, the execution body may obtain a to-be-processed picture source file from the storage server.
And 102, extracting each element and attribute information of each element in the picture source file.
In this embodiment, the execution body may extract each element in the picture source file and attribute information of each element. It should be noted that the attribute information may include, but is not limited to: element position information, element size information, index information, style information, text information, and the like. The kind, content, and the like of the attribute information of each element are not particularly limited here.
Here, for different types of picture source files, extraction of elements and attribute information may be performed in different manners. As an example, if the picture source file is a Sketch source file, the elements and the attribute information of the elements in the Sketch source file can be extracted according to the information in the document specification of the Sketch source file through a pre-written script and an existing third-party tool (e.g., SketchTools).
In some optional implementations of this embodiment, the attribute information may include an element covering order. The element covering sequence may be an arrangement sequence of the elements in the picture source file from the bottommost layer to the topmost layer in sequence. For example, a picture to be restored includes two image elements. A portion of the second image element covers a partial area of the first image element. The element overlay order may be the first image element, the second image element in sequence.
In the above implementation, the execution main body may extract the elements and the attribute information by: in the first step, the picture source file may be preprocessed. Wherein the pre-treatment comprises at least one of: and checking each element in the picture source file, and storing each element in the picture source file. As an example, a slice element, a layer element, a vector diagram element, and the like in each element may be checked by a pre-written script according to attribute information of each element in a document specification of a Sketch source file; the slice elements and vector map elements in each element may be stored by a third party tool (e.g., Sketch Tools). In addition, the preprocessing may further include a version upgrade operation on the Sketch source file, and at the same time, the Sketch source file may also be exported as a picture to be restored for subsequent use, and the slice element and the vector image element may also be exported as pictures for subsequent use in generating the program code. It should be noted that, the layer elements in the picture source file may not be changed in the preprocessing operation. And secondly, extracting the elements and extracting the attribute information of the elements from the picture source file.
In this embodiment, since the attribute information may include information such as element position information and element size information, the execution body may calculate a positional relationship between elements based on the attribute information to generate positional relationship information. Here, the positional relationship information may be used to indicate a relative position between elements. For example, the positional relationship information may include relative distances between elements.
As an example, the coordinate point at the upper left corner of the terminal interface may be used as the origin of coordinates. An element closest to the origin of coordinates is defined as a first element, and an element adjacent to the first element is defined as a second element. Then, the relative distance of the second element from the first element may be determined. The distance may include a lateral distance and a longitudinal distance. The distance may be characterized by a coordinate difference. By analogy, the distance between each adjacent element can be determined. Thereby determining the positional relationship of the elements. The origin of coordinates herein is not particularly limited, and may be set as needed.
And 104, laying out each element based on the position relation information.
In this embodiment, the execution body may lay out the elements based on the positional relationship information. For example, a one-column layout, a two-column layout, a multi-column layout, or the like may be performed.
Specifically, since the relative position between the elements can be determined by the above positional relationship information. Therefore, by using the positional relationship information, it can be determined whether there is an overlapping relationship between the elements to be laid out for each line. The above-mentioned overlapping relationship may include a full overlap, a partial overlap, and the like. Then, the executing body may use the elements having the overlapping relationship as a column, use each element having no overlapping relationship as a single column, and count the number of columns of the elements to be laid out in each row. And finally, laying out the elements according to the number of the columns.
As an example, elements ui1, ui2, ui3, ui4, and ui5 are included in the picture source file. The elements ui1 and ui2 are located in the row with the ordinate y1, i.e. the row with the ordinate y1 contains two elements ui1 and ui 2. The elements ui3 and ui4 are located in the row with the ordinate y2, i.e. the row with the ordinate y2 contains three elements ui3, ui4 and ui 5. Here, if it is known that the elements ui1, ui2 do not have an overlapping relationship based on the positional relationship information, two-column arrangement may be performed for the row whose ordinate is y1, and the element ui1 and the element ui2 may be arranged separately. Further, if it is known that the elements ui3, ui4 overlap each other and the element ui5 does not overlap each other based on the positional relationship information, the elements ui3, ui4 may be arranged in one column, the element ui5 may be arranged in a single column, and the row having the ordinate y2 may be arranged in two columns. One of the columns is arranged with elements ui3, ui4, the other column is arranged with elements ui 5.
In some optional implementation manners of this embodiment, after obtaining the layout result, the layout result of each element may be further adjusted according to the element coverage order. Thus, the element coverage can be matched with the element coverage in the picture to be restored. Here, when the arrangement operation is performed on the elements, the arrangement operation may be performed in a preset rendering order. In general, the preset rendering order may be an order from top left to bottom right, and the rendering order is not particularly limited herein.
And 105, generating a program code for restoring the picture based on the layout result and the attribute information.
In this embodiment, the execution body may generate a program code for restoring the picture according to the layout result and the attribute information. The layout result may include information such as element position information, element size information, position relationship information, and an order of the layer where the element is located. The above-mentioned attribute information may include element size information, index information, style information, text information, color information, and the like.
Here, the program code for restoring the picture may be presented with the restored picture after being executed. The program code for restoring pictures may be code of a specified language. As an example, the program code for restoring pictures may be HTML (HyperText Markup Language) code. In practice, the elements may be converted to tags in the HTML code. For example, if the element is an image, the tag is < img >. After that, the attribute information of the element may be converted into an attribute name and an attribute value, and added to the tag corresponding to the element. Thereby, program code for restoring the picture is generated.
It should be noted that the execution subject may only automatically generate the code related to the restored picture, and the code of the rest functions or events may be manually written based on the method of the prior art.
In some optional implementation manners of this embodiment, after generating the program code for restoring the picture, the execution main body may further perform the following steps:
firstly, the program code for restoring the picture is operated, so that the restored picture is generated.
And then, comparing the reduced picture with the picture to be reduced to determine the reduction degree of the reduced picture. In practice, the reduction degree may be used to represent the similarity between the reduced picture and the picture to be reduced. Here, the above-mentioned reduction degree may be determined in various ways. As an example, pixel values of the same positions of two pictures may be matched, and a ratio of the number of the matched positions to the total number of pixel points of the pictures is determined as the reduction degree. The method for determining the reduction degree is not limited to the above example, and may be determined according to other preset rules, which are not limited herein.
And finally, determining whether the program code for restoring the picture is qualified or not based on the comparison of the restoration degree and a preset value. Here, if the reduction degree is not less than the predetermined value, it may be determined that the program code for reducing the picture is qualified. Otherwise, a failure may be determined. In practice, after determining that the data is not qualified, the execution main body can also generate and return alarm information.
In some optional implementation manners of this embodiment, after the program code for restoring the picture is run to generate the restored picture, the execution main body may further determine a pixel difference value between the restored picture and the picture to be restored. Here, it may be an RGB difference value. In practice, the difference calculation may be performed using an object (e.g., Canvas object) that is self-contained by the browser and is capable of supporting pixel difference calculation. Or generating a difference image between the restored picture and the picture to be restored by directly adopting a difference operation mode. Thereby obtaining the pixel difference value of each pixel point.
In some optional implementations of this embodiment, after generating the program code for restoring the picture, the executing body may further send the program code for restoring the picture to a storage server for the user to call and view. Here, the storage server may be configured to store a picture source file to be processed and a processed program code for restoring a picture.
In some optional implementation manners of this embodiment, in the process of processing the picture source file by the execution main body, the processing of the picture source file may be monitored in real time according to a preset dimension. Wherein, the preset dimension may include at least one of the following: abnormal state, recovery success rate, time-consuming information. As an example, the abnormal state may include that program code for restoring the picture cannot be generated, that the program code for restoring the picture takes too long to generate, and the like. The restoration success rate may be a ratio of the number of times program code for restoring the picture is generated to the total amount of the acquired picture source files to be processed. The time consumption information may be a total time period from when the picture source file is acquired to when the program code for restoring the picture is generated.
In the method provided by the embodiment of the application, after the picture source file to be processed is acquired, each element in the picture source file and attribute information of each element can be extracted; then, the attribute information may be analyzed to generate positional relationship information between the elements, so that the elements may be laid out based on the positional relationship information; and finally, generating a program code for restoring the picture based on the layout result and the attribute information. Therefore, the analysis work of the picture source file can be completed without manpower, the workload of a front-end engineer is reduced, and the skill requirement of the front-end engineer is lowered; meanwhile, the resolution speed of the picture source file is improved, and the webpage development efficiency is improved.
With further reference to FIG. 2, a flow 200 of yet another embodiment of a code generation method is shown. The code generation method flow 200. The method comprises the following steps:
In the present embodiment, the execution subject (e.g., server) of the code generation method may be communicatively connected to the storage server. The storage server may be configured to store one or more image source files to be currently processed, and may also be configured to store the program code for restoring the image after the main body is executed. In response to receiving the parsing task message sent by the storage server, the execution body may obtain a to-be-processed picture source file from the storage server.
Here, the element in the picture source file to be processed may include at least one of: layer, vector diagram, slice, text.
In this embodiment, the execution body may extract the elements and the attribute information by:
in the first step, the picture source file may be preprocessed. Wherein the pre-treatment comprises at least one of: and checking each element in the picture source file, and storing each element in the picture source file. As an example, a slice element, a layer element, a vector diagram element, and the like in each element may be checked by a pre-written script according to attribute information of each element in a document specification of a Sketch source file; the slice elements and vector map elements in each element may be stored by a third party tool (e.g., Sketch Tools). In addition, the preprocessing may further include a version upgrade operation on the Sketch source file, and at the same time, the Sketch source file may also be exported as a picture to be restored for subsequent use, and the slice element and the vector image element may also be exported as pictures for subsequent use in generating the program code. It should be noted that, the layer elements in the picture source file may not be changed in the preprocessing operation.
And secondly, extracting the elements and extracting the attribute information of the elements from the picture source file.
It should be noted that the attribute information may include an element coverage order. In addition, other information may be included. For example, may include, but is not limited to: element position information, element size information, index information, style information, text information, and the like. The kind, content, and the like of the attribute information of each element are not particularly limited here.
In the present embodiment, the execution body described above may extract element position information and element size information from attribute information of each element. Here, the element position information may include coordinates of the element. The element size information may include the width and height of the element. Then, box model information corresponding to each element may be generated based on the extracted element position information and element size information.
In practice, the box model is a thinking model used in CSS (Cascading Style Sheets) technology that is often used in web page design. The Box Model is also called a Box Model (Box Model), and includes several elements, namely, element content (content), inner margin (padding), border (border), and outer margin (margin).
When the element position information and the element size information of each element in the picture source file are known, the execution main body can determine information such as an inner edge distance, a frame, an outer edge distance and the like in the box model corresponding to each element, so as to generate box model information. Here, the box model information may be a code for indicating a box model. The code may contain values for elements in the box model.
And step 204, generating position relation information among the elements based on the box model information, the element position information and the element size information.
In this embodiment, since the box model information may include information such as the value of the inner frame and the value of the outer frame, when the element size information of an element is known, the size of the box model corresponding to each element may be determined. When the element position information of each element is known, the position relationship of the box model corresponding to each element can be determined. Based on the size and position of the box models corresponding to each element, information such as the distance between the box models corresponding to the elements can be determined. Here, the positional relationship information may be information such as a distance between the determined box models.
In the present embodiment, since the relative position between the elements can be determined by the above positional relationship information. Therefore, by using the positional relationship information, it can be determined whether there is an overlapping relationship between the elements to be laid out for each line. The above-described coincidence relation may include a total coincidence relation and a partial coincidence relation.
And step 206, taking the elements with the coincidence relation as a column, taking each element without the coincidence relation as a column, counting the number of columns of the elements to be laid out in each row, and laying out the elements in each row according to the determined number of columns.
In this embodiment, the executing body may use the elements having the overlapping relationship as a column, use each element having no overlapping relationship as a single column, and count the number of columns of the elements to be laid out in each row. And finally, laying out the elements according to the number of the columns.
As an example, elements ui1, ui2, ui3, ui4, and ui5 are included in the picture source file. The elements ui1 and ui2 are located in the row with the ordinate y1, i.e. the row with the ordinate y1 contains two elements ui1 and ui 2. The elements ui3 and ui4 are located in the row with the ordinate y2, i.e. the row with the ordinate y2 contains three elements ui3, ui4 and ui 5. Here, if it is known that the elements ui1, ui2 do not have an overlapping relationship based on the positional relationship information, two columns of arrangement may be made for the row whose ordinate is y1, and the element ui1 and the element ui2 may be arranged separately. Further, if it is known that the elements ui3, ui4 overlap each other and the element ui5 does not overlap each other based on the positional relationship information, the elements ui3, ui4 may be arranged in one column, the element ui5 may be arranged in a single column, and the row having the ordinate y2 may be arranged in two columns. One of the columns is arranged with elements ui3, ui4, the other column is arranged with elements ui 5.
In this embodiment, the execution subject may adjust the layout result of each element according to the element coverage order. Thus, the element coverage can be matched with the element coverage in the picture to be restored.
Here, when the arrangement operation is performed on the elements, the arrangement operation may be performed in a preset rendering order. In general, the preset rendering order may be an order from top left to bottom right, and the rendering order is not particularly limited herein.
And step 208, generating program codes for restoring the pictures based on the layout result and the attribute information.
In this embodiment, after the layout result is adjusted, a program code for restoring the picture may be generated according to the adjusted layout result and the attribute information. The adjusted layout result may include information such as element position information, element size information, position relationship information, and an order of the layer where the element is located. The above-mentioned attribute information may include element size information, index information, style information, text information, color information, and the like.
In this embodiment, after generating the program code for restoring the picture, the execution main body may further send the program code for restoring the picture to a storage server for the user to call and view. Here, the storage server may be configured to store a picture source file to be processed and a processed program code for restoring a picture.
As can be seen from fig. 2, compared with the embodiment corresponding to fig. 1, the flow 200 of the code generation method in the present embodiment relates to the steps of generating box model information, and generating positional relationship information between elements using the box model information. Therefore, the analysis work of the picture source file can be completed without manpower, the workload of a front-end engineer is reduced, and the skill requirement of the front-end engineer is lowered; meanwhile, the resolution speed of the picture source file is improved, and the webpage development efficiency is improved. Further, steps are involved for interacting with the storage server. Therefore, in the development process of the software or the webpage, the visual designer and the front-end engineer can work in parallel, and the development efficiency of the software or the webpage is improved on the whole.
With continued reference to fig. 3, fig. 3 is a schematic diagram of interaction between a server and a storage server that execute the code generation method according to the present embodiment. Here, the server that performs the code generation method may be referred to as a resolution server.
As shown in fig. 3, the visual design engineer may upload the designed picture source file to a storage server. After receiving the picture source file, the storage server firstly sends a parsing task message to the parsing server. Here, the parsing task message may be used to notify the parsing server of the pulling of the picture source file.
Then, the parsing server may obtain the picture source file from the storage server, and perform preprocessing, parsing, and the like on the picture source file. Finally, program code for restoring the picture is generated.
Finally, the parsing server may send the program code for restoring the picture to a designated directory of the storage server, and the storage server may store the program code for restoring the picture. At this time, the front-end engineer can download and use the program code for restoring the picture.
Therefore, in the development process of the software or the webpage, the visual designer and the front-end engineer can work in parallel, and the development efficiency of the software or the webpage is improved on the whole.
With further reference to fig. 4, as an implementation of the methods shown in the above-mentioned figures, the present application provides an embodiment of a code generation apparatus, which corresponds to the embodiment of the method shown in fig. 1, and which is particularly applicable in a server.
As shown in fig. 4, the code generation apparatus 400 according to this embodiment includes: an acquisition unit 401 configured to acquire a picture source file to be processed; an extracting unit 402, configured to extract each element in the picture source file and attribute information of each element, where the element in the picture source file includes a layer and at least one of: vector diagram, slice, text, the above-mentioned attribute information includes the element and covers the order; an analysis unit 403 configured to analyze the attribute information to generate positional relationship information between elements; a layout unit 404 configured to lay out the elements based on the positional relationship information; a code generating unit 406 configured to generate a program code for restoring the picture based on the layout result and the above-described attribute information.
In some optional implementations of this embodiment, the attribute information may include element position information and element size information. The parsing unit 403 may include a first generating module and a second generating module (not shown in the figure). The first generating module may be configured to generate box model information corresponding to each of the elements based on the element position information and the element size information. The second generating module may be configured to generate positional relationship information between elements based on the box model information, the element position information, and the element size information, wherein the positional relationship information includes distances between box models corresponding to the elements.
In some embodiments, the layout module may include: a first determining module configured to determine whether an overlapping relationship exists between each row of elements to be laid out based on the position relationship information, wherein the overlapping relationship includes a total overlapping relationship and a partial overlapping relationship; and the second determining module is configured to take the elements with the coincidence relation as a column, take each element without the coincidence relation as a column, count the number of columns of the elements to be laid out in each row, and lay out the elements in each row according to the determined number of columns.
In some embodiments, the attribute information includes an element overlay order; and the device may further comprise an adjustment unit (not shown in the figure). Wherein the adjusting unit may be configured to adjust the layout result of each element according to the element coverage order.
In some optional implementations of the present embodiment, the extracting unit 402 may be further configured to: preprocessing the picture source file, wherein the preprocessing comprises at least one of the following steps: checking each element in the picture source file, and storing each element in the picture source file; and extracting the elements and extracting the attribute information of the elements from the picture source file.
In some optional implementation manners of this embodiment, the preprocessing further includes storing a to-be-restored picture corresponding to the picture source file. And, the apparatus may further include an operation unit, a first determination unit, and a second determination unit (not shown in the drawings). The running unit may be configured to run the program code for restoring the picture, and generate a restored picture; the first determining unit is configured to determine the reduction degree of the reduced picture based on the comparison between the reduced picture and the picture to be reduced; and the second determining unit is configured to determine whether the program code for restoring the picture is qualified or not based on the comparison between the restoration degree and a preset value.
In some optional implementations of this embodiment, the apparatus may further include a third determining unit (not shown in the figure). The third determining unit may be configured to determine a pixel difference between the restored picture and the picture to be restored.
In some optional implementations of this embodiment, the obtaining unit 401 may be further configured to: and responding to the received analysis task message sent by the storage server, and acquiring a picture source file to be processed from the storage server. And, the apparatus may further include a storage unit (not shown in the drawings). Wherein the storage unit may be configured to transmit the program code for restoring the picture to the storage server.
In some optional implementations of this embodiment, the apparatus may further include: a monitoring unit (not shown in the figure). The monitoring unit may be configured to monitor a processing procedure of the picture source file in real time according to a preset dimension, where the preset dimension includes at least one of: abnormal state, recovery success rate, time-consuming information.
In the apparatus provided by the foregoing embodiment of the present application, after the obtaining unit 401 obtains a picture source file to be processed, the extracting unit 402 may extract each element in the picture source file and attribute information of each element. Then, analyzing section 403 may analyze the attribute information to generate positional relationship information between the elements, so that layout section 404 may lay out the elements based on the positional relationship information. Finally, the code generating unit 405 may generate a program code for restoring a picture based on the layout result and the above-described attribute information. Therefore, the analysis work of the picture source file can be completed without manpower, the workload of a front-end engineer is reduced, and the skill requirement of the front-end engineer is lowered; meanwhile, the resolution speed of the picture source file is improved, and the webpage development efficiency is improved.
Referring now to FIG. 5, a block diagram of a computer system 500 suitable for use in implementing a server according to embodiments of the present application is shown. The server shown in fig. 5 is only an example, and should not bring any limitation to the functions and the scope of use of the embodiments of the present application.
As shown in fig. 5, the computer system 500 includes a Central Processing Unit (CPU)501 that can perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM)502 or a program loaded from a storage section 508 into a Random Access Memory (RAM) 503. In the RAM 503, various programs and data necessary for the operation of the system 500 are also stored. The CPU 501, ROM 502, and RAM 503 are connected to each other via a bus 504. An input/output (I/O) interface 505 is also connected to bus 504.
The following components are connected to the I/O interface 505: an input portion 506 including a keyboard, a mouse, and the like; an output portion 507 including a display such as a Liquid Crystal Display (LCD) and a speaker; a storage portion 508 including a hard disk and the like; and a communication section 509 including a network interface card such as a LAN card, a modem, or the like. The communication section 509 performs communication processing via a network such as the internet. The driver 510 is also connected to the I/O interface 505 as necessary. A removable medium 511 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on the drive 510 as necessary, so that a computer program read out therefrom is mounted into the storage section 508 as necessary.
In particular, according to an embodiment of the present disclosure, the processes described above with reference to the flowcharts may be implemented as computer software programs. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method illustrated in the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network through the communication section 509, and/or installed from the removable medium 511. The computer program performs the above-described functions defined in the method of the present application when executed by the Central Processing Unit (CPU) 501. It should be noted that the computer readable medium described herein can be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present application, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In this application, however, a computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, fiber optic cable, RF, etc., or any suitable combination of the foregoing.
The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present application. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The units described in the embodiments of the present application may be implemented by software or hardware. The described units may also be provided in a processor, and may be described as: a processor includes an acquisition unit, an extraction unit, a parsing unit, a layout unit, and a code generation unit. Wherein the names of the elements do not in some way constitute a limitation on the elements themselves.
As another aspect, the present application also provides a computer-readable medium, which may be contained in the apparatus described in the above embodiments; or may be present separately and not assembled into the device. The computer readable medium carries one or more programs which, when executed by the apparatus, cause the apparatus to: acquiring a picture source file to be processed; extracting each element in the picture source file and attribute information of each element; analyzing the attribute information to generate position relation information of each element; based on the position relation information, laying out the elements; and generating program codes for restoring the pictures based on the layout result and the attribute information.
The above description is only a preferred embodiment of the application and is illustrative of the principles of the technology employed. It will be appreciated by those skilled in the art that the scope of the invention herein disclosed is not limited to the particular combination of features described above, but also encompasses other arrangements formed by any combination of the above features or their equivalents without departing from the spirit of the invention. For example, the above features may be replaced with (but not limited to) features having similar functions disclosed in the present application.
Claims (16)
1. A code generation method applied to a server, the method comprising:
acquiring a picture source file to be processed;
extracting each element in the picture source file and attribute information of each element;
analyzing the attribute information to generate position relation information among elements;
based on the position relation information, laying out the elements;
generating program codes for restoring pictures based on layout results and the attribute information;
the attribute information comprises an element covering sequence, wherein the element covering sequence is an arrangement sequence of the elements in the picture source file from the bottommost layer to the topmost layer in sequence; and
after the laying out the elements based on the positional relationship information, the method further includes:
adjusting the layout result of each element according to the element covering sequence;
the laying out the elements based on the position relation information includes:
determining whether each row of elements to be laid out has a coincidence relation or not based on the position relation information, wherein the coincidence relation comprises a total coincidence relation and a local coincidence relation;
taking the elements with the coincidence relation as a column, taking each element without the coincidence relation as a column, counting the number of columns of the elements to be laid out in each row, and laying out the elements in each row according to the determined number of columns.
2. The code generation method according to claim 1, wherein the attribute information further includes element position information and element size information; and
the analyzing the attribute information to generate the position relation information between the elements includes:
generating box model information corresponding to each element based on the element position information and the element size information;
and generating position relation information among the elements based on the box model information, the element position information and the element size information, wherein the position relation information comprises the distance among the box models corresponding to the elements.
3. The code generation method according to claim 1, wherein the extracting elements in the picture source file and attribute information of the elements includes:
preprocessing the picture source file, wherein the preprocessing comprises at least one of: checking each element in the picture source file, and storing each element in the picture source file;
and extracting the elements and extracting the attribute information of the elements from the picture source file.
4. The code generation method according to claim 3, wherein the preprocessing further includes storing a picture to be restored corresponding to the picture source file; and
after the generating of the program code for restoring pictures, the method further comprises:
running the program code for restoring the picture to generate a restored picture;
comparing the reduced picture with the picture to be reduced, and determining the reduction degree of the reduced picture;
and determining whether the program code for restoring the picture is qualified or not based on the comparison of the restoration degree and a preset value.
5. The code generation method of claim 4, wherein after said generating the restored picture, the method further comprises:
and determining the pixel difference value of the restored picture and the picture to be restored.
6. The code generation method according to claim 1, wherein the obtaining of the picture source file to be processed includes:
responding to the received analysis task message sent by a storage server, and acquiring a picture source file to be processed from the storage server; and
after the generating of the program code for restoring the picture based on the layout result and the attribute information, the method further includes:
and sending the program code for restoring the picture to the storage server.
7. The code generation method of claim 1, wherein the method further comprises:
monitoring the processing process of the picture source file in real time according to preset dimensions, wherein the preset dimensions comprise at least one of the following items: abnormal state, recovery success rate, time-consuming information.
8. A code generation apparatus applied to a server, the apparatus comprising:
an acquisition unit configured to acquire a picture source file to be processed;
an extracting unit configured to extract each element in the picture source file and attribute information of the each element;
an analysis unit configured to analyze the attribute information to generate positional relationship information between elements;
a layout unit configured to lay out the elements based on the positional relationship information;
a code generating unit configured to generate a program code for restoring a picture based on a layout result and the attribute information;
the attribute information comprises an element covering sequence, wherein the element covering sequence is an arrangement sequence of the elements in the picture source file from the bottommost layer to the topmost layer in sequence; and
the device further comprises:
an adjusting unit configured to adjust a layout result of the elements in the element covering order;
the layout unit includes:
a first determining module configured to determine whether an overlapping relation exists between each row of elements to be laid out based on the position relation information, wherein the overlapping relation includes a total overlapping relation and a local overlapping relation;
and the second determining module is configured to take the elements with the coincidence relation as a column, take each element without the coincidence relation as a column, count the number of columns of the elements to be laid out in each row, and lay out the elements in each row according to the determined number of columns.
9. The code generation apparatus according to claim 8, wherein the attribute information further includes element position information and element size information; and
the analysis unit includes:
a first generation module configured to generate box model information corresponding to each element based on the element position information and the element size information;
a second generating module configured to generate positional relationship information between elements based on the box model information, the element position information, and the element size information, wherein the positional relationship information includes distances between box models corresponding to the elements.
10. The code generation apparatus according to claim 8, wherein the extraction unit is further configured to:
preprocessing the picture source file, wherein the preprocessing comprises at least one of: checking each element in the picture source file, and storing each element in the picture source file;
and extracting the elements and extracting the attribute information of the elements from the picture source file.
11. The code generation apparatus according to claim 10, wherein the preprocessing further includes storing a picture to be restored corresponding to the picture source file; and
the device further comprises:
the running unit is configured to run the program codes for restoring the pictures and generate restored pictures;
the first determining unit is configured to compare the reduced picture with the picture to be reduced and determine the reduction degree of the reduced picture;
a second determining unit configured to determine whether the program code for restoring the picture is qualified based on a comparison of the restoration degree with a preset value.
12. The code generation apparatus of claim 11, wherein the apparatus further comprises:
a third determining unit configured to determine a pixel difference value between the restored picture and the picture to be restored.
13. The code generation apparatus according to claim 8, wherein the acquisition unit is further configured to:
responding to the received analysis task message sent by a storage server, and acquiring a picture source file to be processed from the storage server; and
the device further comprises:
a storage unit configured to transmit the program code for restoring the picture to the storage server.
14. The code generation apparatus of claim 8, wherein the apparatus further comprises:
the monitoring unit is configured to monitor the processing process of the picture source file in real time according to preset dimensions, wherein the preset dimensions include at least one of the following: abnormal state, recovery success rate, time-consuming information.
15. A server, comprising:
one or more processors;
a storage device having one or more programs stored thereon,
when executed by the one or more processors, cause the one or more processors to implement the method of any one of claims 1-7.
16. A computer-readable medium, on which a computer program is stored which, when being executed by a processor, carries out the method according to any one of claims 1-7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910024809.0A CN109857388B (en) | 2019-01-10 | 2019-01-10 | Code generation method, device, server and computer readable medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910024809.0A CN109857388B (en) | 2019-01-10 | 2019-01-10 | Code generation method, device, server and computer readable medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109857388A CN109857388A (en) | 2019-06-07 |
| CN109857388B true CN109857388B (en) | 2021-06-15 |
Family
ID=66894456
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910024809.0A Active CN109857388B (en) | 2019-01-10 | 2019-01-10 | Code generation method, device, server and computer readable medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109857388B (en) |
Families Citing this family (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112116681B (en) * | 2019-06-19 | 2023-07-25 | 腾讯科技（深圳）有限公司 | Image generation method, device, computer equipment and storage medium |
| CN110321126B (en) * | 2019-07-08 | 2020-09-29 | 北京三快在线科技有限公司 | Method and device for generating page code |
| CN110442333A (en) * | 2019-07-11 | 2019-11-12 | 北京磨刀刻石科技有限公司 | Method and apparatus based on design drawing automatically generating program code |
| CN113535151B (en) * | 2020-04-14 | 2024-05-17 | 北京京东振世信息技术有限公司 | Code generation method and device |
| CN113742619B (en) * | 2020-11-13 | 2025-02-21 | 北京沃东天骏信息技术有限公司 | Method, device, electronic device and storage medium for determining page layout |
| CN113963173B (en) * | 2021-10-15 | 2025-07-22 | 抖音视界有限公司 | Feature extraction method and device for design manuscript, computer equipment and storage medium |
| CN114647476B (en) * | 2022-03-31 | 2024-06-11 | 北京百度网讯科技有限公司 | Page rendering method, device, equipment, storage medium and program |
| CN116798053B (en) * | 2023-07-20 | 2024-04-26 | 上海合芯数字科技有限公司 | Icon generation method and device |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104166556A (en) * | 2014-08-27 | 2014-11-26 | 北京金山安全软件有限公司 | Software interface replacing method and device and terminal |
| CN106484408A (en) * | 2016-09-29 | 2017-03-08 | 电子科技大学 | A kind of node relationships figure display methods based on HTML5 and system |
| CN107357942A (en) * | 2017-09-04 | 2017-11-17 | 山东达创网络科技股份有限公司 | A kind of source code auxiliary Core Generator and its generation method |
| US10108432B1 (en) * | 2009-04-16 | 2018-10-23 | Intuit Inc. | Generating a script based on user actions |
Family Cites Families (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20080313282A1 (en) * | 2002-09-10 | 2008-12-18 | Warila Bruce W | User interface, operating system and architecture |
| JP4102847B2 (en) * | 2006-06-30 | 2008-06-18 | シャープ株式会社 | Image data providing apparatus, image display apparatus, image display system, image data providing apparatus control method, image display apparatus control method, control program, and recording medium |
| CN103744674B (en) * | 2014-01-06 | 2017-01-25 | 北京奇虎科技有限公司 | Method and device for generating hypertext markup language (HTML) procedure code |
| US10268455B2 (en) * | 2016-05-20 | 2019-04-23 | Microsoft Technology Licensing, Llc | Augmenting an original class with an augmenting class |
| CN110427187A (en) * | 2019-07-31 | 2019-11-08 | 山东浪潮通软信息科技有限公司 | A kind of list visual layout method based on the parsing of HTML Custom Attributes |
-
2019
- 2019-01-10 CN CN201910024809.0A patent/CN109857388B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10108432B1 (en) * | 2009-04-16 | 2018-10-23 | Intuit Inc. | Generating a script based on user actions |
| CN104166556A (en) * | 2014-08-27 | 2014-11-26 | 北京金山安全软件有限公司 | Software interface replacing method and device and terminal |
| CN106484408A (en) * | 2016-09-29 | 2017-03-08 | 电子科技大学 | A kind of node relationships figure display methods based on HTML5 and system |
| CN107357942A (en) * | 2017-09-04 | 2017-11-17 | 山东达创网络科技股份有限公司 | A kind of source code auxiliary Core Generator and its generation method |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109857388A (en) | 2019-06-07 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109857388B (en) | Code generation method, device, server and computer readable medium | |
| CN108229485B (en) | Method and apparatus for testing user interface | |
| US9773165B2 (en) | Method and system for webpage regression testing | |
| CN109255767B (en) | Image processing method and device | |
| US10049095B2 (en) | In-context editing of output presentations via automatic pattern detection | |
| US20140229426A1 (en) | Electronic blueprint system and method | |
| US8340408B2 (en) | Automatic page layout validation | |
| CN116738106A (en) | System and method for converting web content into reusable templates and components | |
| CN112965645B (en) | Page dragging method and device, computer equipment and storage medium | |
| US20150121196A1 (en) | Browser-based image processing | |
| US20210406615A1 (en) | Learning device, classification device, learning method, classification method, learning program, and classification program | |
| CN110472175A (en) | User behavior analysis method and terminal device | |
| WO2016095502A1 (en) | Mathematical formula processing method, device, apparatus and computer storage medium | |
| CN110633251B (en) | File conversion method and equipment | |
| CN112800373B (en) | Webpage resource data generation method and device, computer equipment and storage medium | |
| CN106776267A (en) | Web application compatibility test method and web application compatibility test equipment | |
| US20120229857A1 (en) | Moving labels in graphical output to avoid overprinting | |
| CN108133029B (en) | Map element adjusting method, device and equipment and computer-readable storage medium | |
| JP2012099097A (en) | Application of path-fill algorithm in laying out text at periphery of object | |
| CN116774973A (en) | Data rendering method, device, computer equipment and storage medium | |
| US11354379B2 (en) | Display control method and display control apparatus | |
| CN114428601A (en) | Visual manuscript checking method and device | |
| CN112286785B (en) | Abnormality detection method and device for user interface | |
| CN112579991A (en) | Page data protection method, device, equipment and medium | |
| CN111061971B (en) | Method and device for extracting information |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |