CN115344252A - Visual large screen generation method and device and storage medium - Google Patents

Abstract

The application provides a method, a device and a storage medium for generating a visual large screen, wherein the method comprises the following steps: the method comprises the steps of obtaining a page design file, analyzing the page design file, obtaining file information corresponding to the page design file, loading the file information to a basic page, and generating a visual large screen, wherein the basic page is a configuration file containing layout components, and different layout components respectively correspond to different layouts of the basic page. The method and the device for generating the large visual screen can greatly shorten the development period of the large visual screen and reduce the cost.

Description

Visual large screen generation method and device and storage medium

Technical Field

The application relates to the technical field of data processing, in particular to a method and a device for generating a visual large screen and a storage medium.

Background

With the advent of cloud computing and big data era, data information presents the situation of explosive development, so that how to extract and display effective information in mass data becomes a research hotspot of various industries. The visualization is the last kilometer of the big data ecological chain and is also the link for the user to most directly perceive data. The visualized large screen is the most intuitive and effective information transfer mode, and becomes a mainstream data display mode.

At present, a large visual screen is generated from a demand to an effect display through a plurality of stages: data demand analysis → (2) prototype function design → (3) UI art design → (4) front end page development → (5) backend data docking debugging → (6) visualization large on-screen lines. In the front-end page development stage, a large amount of manpower is required to be invested for customized development according to a design drawing, and a large amount of repetitive work exists in the development process, for example, page layout development of a large visual screen is caused, so that the development period of the large visual screen is too long.

Disclosure of Invention

The application provides a method and a device for generating a visual large screen and a storage medium, which are used for solving the problem that the development cycle of the visual large screen is too long.

In a first aspect, the present application provides a method for generating a large visual screen, including:

acquiring a page design file, wherein each layer in the page design file is labeled according to a preset layer labeling rule, and the preset layer labeling rule is used for setting layer grouping and layer names for each layer;

analyzing the page design file to obtain file information corresponding to the page design file;

and loading the file information to a basic page to generate a visual large screen, wherein the basic page is a configuration file containing layout components, and different layout components respectively correspond to different layouts of the basic page.

Optionally, loading the file information to a basic page, and generating a large visual screen, including:

determining a target style corresponding to the basic page and the layout component according to the layer style attribute information in the file information;

determining target elements contained in the basic page according to the layer element attribute information in the file information;

and generating a visual large screen according to the target style and the target elements.

Optionally, determining a target style corresponding to the base page and the layout component according to the layer style attribute information in the file information includes:

traversing file information to determine layer style attribute information corresponding to each layer, wherein each layer comprises a background layer, a decorative layer, a component normal layer, a component selection middle layer and a text layer;

determining a target style corresponding to a basic page according to the layer style attribute information corresponding to the background layer;

determining target patterns corresponding to all the layout components according to pattern layer pattern attribute information corresponding to the decoration layer, the component normal state layer, the component selection middle layer and the text layer;

the pattern layer style attribute information corresponding to the decorative layer comprises style attribute information of a frame and a chart in the decorative layer; the layer style attribute information corresponding to the component normal layer comprises style attribute information of a chart and a button in the component normal layer; the pattern layer style attribute information corresponding to the component selection layer comprises pattern attribute information selected by a diagram and a button in the component selection layer; and the image layer style attribute information corresponding to the text layer comprises style attribute information of the text in the text layer.

Optionally, determining a target element included in the base page according to the layer element attribute information in the file information includes:

traversing file information to determine layer element attribute information corresponding to each layer, wherein each layer comprises a background layer, a decorative layer, a component normal layer, a component selection middle layer and a text layer;

determining target elements contained in a basic page according to layer element attribute information corresponding to each layer;

the layer element attribute information corresponding to the background layer comprises element attribute information of pictures and vector images in the background layer; the layer element attribute information corresponding to the decorative layer comprises element attribute information of pictures or icons in the decorative layer; the layer element attribute information corresponding to the component normal layer comprises element attribute information of a chart and a button in the component normal layer; the layer element attribute information corresponding to the text layer comprises element attribute information of the text in the text layer.

Optionally, the file information includes the size of the page design file and layer information of each layer in the page design file, and the file information is loaded to the basic page to generate a large visual screen, including:

adjusting the size of a basic page according to the size of the page design file;

and loading the graph layer information to the adjusted basic page to generate a visual large screen.

Optionally, the method for generating a large visualization screen further includes:

and after the large visual screen is generated, adjusting the large visual screen based on the resolution of the display screen to obtain the large visual screen matched with the display screen.

In a second aspect, the present application provides an apparatus for generating a large visual screen, including:

the system comprises a first obtaining module, a second obtaining module and a third obtaining module, wherein the first obtaining module is used for obtaining a page design file, all layers in the page design file are labeled according to a preset layer labeling rule, and the preset layer labeling rule is used for setting layer groups and layer names for all the layers;

the second acquisition module is used for analyzing the page design file and acquiring file information corresponding to the page design file;

the generating module is used for loading the file information to a basic page to generate a visual large screen, the basic page is a configuration file containing layout components, and different layout components respectively correspond to different layouts of the basic page.

Optionally, the generating module is specifically configured to:

determining a target style corresponding to the basic page and the layout component according to the layer style attribute information in the file information;

determining target elements contained in the basic page according to the layer element attribute information in the file information;

and generating a visual large screen according to the target style and the target elements.

Optionally, when the generating module is configured to determine the target style corresponding to the base page and the layout component according to the layer style attribute information in the file information, the generating module is specifically configured to:

traversing file information to determine layer style attribute information corresponding to each layer, wherein each layer comprises a background layer, a decorative layer, a component normal layer, a component selection middle layer and a text layer;

determining a target style corresponding to a basic page according to the layer style attribute information corresponding to the background layer;

determining a target style corresponding to each layout component according to the layer style attribute information corresponding to the decorative layer, the component normal layer, the component selection middle layer and the text layer;

the pattern layer style attribute information corresponding to the decorative layer comprises style attribute information of a frame and a chart in the decorative layer; the pattern layer style attribute information corresponding to the component normal state layer comprises the style attribute information of a chart and a button in the component normal state layer; the layer style attribute information corresponding to the component selection middle layer comprises style attribute information selected by a diagram and a button in the component selection middle layer; and the layer style attribute information corresponding to the text layer comprises style attribute information of the text in the text layer.

Optionally, when the generating module is configured to determine the target element included in the base page according to the layer element attribute information in the file information, the generating module is specifically configured to:

traversing file information to determine layer element attribute information corresponding to each layer, wherein each layer comprises a background layer, a decorative layer, a component normal layer, a component selecting middle layer and a text layer;

determining target elements contained in a basic page according to layer element attribute information corresponding to each layer;

the layer element attribute information corresponding to the background layer comprises element attribute information of pictures and vector images in the background layer; the layer element attribute information corresponding to the decorative layer comprises element attribute information of pictures or icons in the decorative layer; the element attribute information of the image layer corresponding to the component normal state layer comprises element attribute information of a chart and a button in the component normal state layer; the layer element attribute information corresponding to the text layer comprises element attribute information of the text in the text layer.

Optionally, the file information includes a size of the page design file and layer information of each layer in the page design file, and the generating module is specifically configured to:

adjusting the size of a basic page according to the size of the page design file;

and loading the graph layer information to the adjusted basic page to generate a visual large screen.

Optionally, the generation apparatus of the large visualization screen further includes:

and the adjusting module is used for adjusting the large visual screen based on the resolution of the display screen after the large visual screen is generated, so as to obtain the large visual screen adaptive to the display screen.

In a third aspect, the present application provides an electronic device, comprising: a memory and a processor;

the memory is used for storing program instructions;

the processor is used for calling the program instructions in the memory to execute the generation method of the visualization large screen according to the first aspect of the application.

In a fourth aspect, the present application provides a computer-readable storage medium, in which computer program instructions are stored, and when the computer program instructions are executed, the method for generating a large visualization screen according to the first aspect of the present application is implemented.

In a fifth aspect, the present application provides a computer program product comprising a computer program which, when executed by a processor, implements the method for generating a visualization large screen according to the first aspect of the present application.

According to the method and the device for generating the visual large screen and the storage medium, the page design file is obtained, the page design file is analyzed, the file information corresponding to the page design file is obtained, the file information is loaded to the basic page, the visual large screen is generated, the basic page is a configuration file containing layout components, and different layout components respectively correspond to different layouts of the basic page. The large visual screen is generated through the method, and the file information corresponding to the page design file marked according to the preset layer marking rule is loaded to the basic page to generate the large visual screen, so that the development period of the large visual screen can be greatly shortened, and the cost is reduced.

Drawings

In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings needed to be used in the description of the embodiments or the prior art will be briefly introduced below, and it is obvious that the drawings in the following description are some embodiments of the present application, and for those skilled in the art, other drawings can be obtained according to these drawings without inventive exercise.

Fig. 1 is a schematic view of an application scenario provided in an embodiment of the present application;

fig. 2 is a flowchart of a method for generating a large visualization screen according to an embodiment of the present application;

fig. 3 is a schematic diagram of a psd layer grouping structure according to an embodiment of the present application;

fig. 4a is a schematic diagram of a layer naming structure according to an embodiment of the present application;

fig. 4b is a schematic diagram of a layer naming structure according to another embodiment of the present application;

fig. 5 is a schematic diagram of a layer naming structure of a background layer according to an embodiment of the present application;

fig. 6 is a schematic view illustrating a layer naming structure of a decoration layer according to an embodiment of the present disclosure;

fig. 7 is a schematic diagram of a layer naming structure of a normal layer of a device according to an embodiment of the present application;

fig. 8 is a diagram illustrating a layer naming structure of a component layer according to an embodiment of the present application;

fig. 9 is a schematic diagram of a layer naming structure of a text layer according to an embodiment of the present application;

fig. 10 is a flowchart of a method for generating a large visualization screen according to another embodiment of the present application;

fig. 11 is a schematic structural diagram of a generation apparatus for a large visual screen according to an embodiment of the present application;

fig. 12 is a schematic structural diagram of a generation apparatus for a large visualization screen according to another embodiment of the present application;

fig. 13 is a schematic structural diagram of an electronic device according to an embodiment of the present application.

Detailed Description

In order to make the objects, technical solutions and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are some embodiments of the present application, but not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.

According to the implementation scheme in the prior art, the final online of the large visual screen is subjected to multiple stages, wherein the most time-consuming stage is the front-end page development stage, and multiple repetitive works including large-screen page resolution adaptation, large-screen page layout development and the like exist in each visual large-screen development, so that the problems of overlong development period, overhigh cost, high requirement on the technical level of developers, high cost for common users and the like often exist.

Based on the above problems, the application provides a method, an apparatus and a storage medium for generating a visual large screen, in which a design completion draft, such as a photoshop file, is layered, layers are explicitly grouped and named, and then the photoshop file is analyzed by, for example, a psd.

Fig. 1 is a schematic view of an application scenario provided in an embodiment of the present application. As shown in fig. 1, in the application scenario, an interface design completion draft (i.e., a page design file) of a large visual screen is to be generated in the client 110. Illustratively, the page design file is a photoshop file, and when there is a demand for generating a large visual screen from the photoshop file, the photoshop file is sent to the server 120 through the network, and the server 120 generates a corresponding large visual screen. For a specific implementation process of the server 120 generating the large visualization screen according to the page design file, reference may be made to the schemes of the following embodiments.

It should be noted that fig. 1 is only a schematic diagram of an application scenario provided in this embodiment, and this embodiment of the present application does not limit the devices included in fig. 1, and also does not limit the positional relationship between the devices in fig. 1. For example, in the application scenario shown in fig. 1, a data storage device may be further included, and the data storage device may be an external memory with respect to the client 110 or the server 120, or may be an internal memory integrated in the client 110 or the server 120. Alternatively, the interface design completion draft used to generate the large visualization screen may be retrieved from a data storage device.

Fig. 2 is a flowchart of a method for generating a large visualization screen according to an embodiment of the present application. The method of the embodiment of the application can be applied to electronic equipment, and the electronic equipment can be a server or a server cluster and the like. As shown in fig. 2, the method of the embodiment of the present application includes:

s201, acquiring a page design file.

The layers in the page design file are marked according to a preset layer marking rule, and the preset layer marking rule is used for setting layer grouping and layer names for the layers.

In this embodiment, the page design file may be input by a user to the electronic device executing the embodiment of the method, or may be sent by another device to the electronic device executing the embodiment of the method. Illustratively, the page design file is a photoshop file, which is in a photoshop document (psd) format. Each layer in the photoshop file is labeled according to a preset layer labeling rule, and the specific labeling process comprises the following two steps:

the method comprises the following steps of firstly, carrying out psd layer grouping on a photoshop file before labeling, dividing pages of the photoshop file before labeling into five layers according to a vertical structure, and respectively from bottom to top: background layer, decorative layer, subassembly normality layer, subassembly select middle level, text layer. Wherein, the positions from bottom to top are determined by the sequence of layer names 01-10 when the five-layer structure has conflict in parallel layers. Exemplarily, fig. 3 is a schematic diagram of a psd layer grouping structure provided in an embodiment of the present application, and as shown in fig. 3, five layers of structures are respectively from bottom to top: background layer, decorative layer, subassembly normality layer, subassembly select middle level, text layer. Further, fig. 4a is a schematic diagram of a layer naming structure provided in an embodiment of the present application, and as shown in fig. 4a, the layer naming structure may include: background layer, decorative layer, subassembly normality layer, subassembly select middle level, text layer.

It should be noted that there is a conflict of parallel hierarchies, and the positions from bottom to top are determined by the order of layer names 01-10. Fig. 4b is a schematic diagram of a layer naming structure provided in another embodiment of the present application, and as shown in fig. 4b, there is a case where two decoration layers, namely the decoration layer 01 and the decoration layer 02, have a parallel hierarchical conflict, so that the two decoration layers are named as the decoration layer 01 and the decoration layer 02, and so on, which is not described herein again.

And secondly, naming the layers of each structural layer according to the five-layer structural grouping to obtain the labeled photoshop file.

The specific process of naming the image layers of each structural layer comprises the following five steps:

firstly, grouping the layer names according to the principle that the picture is the base vector image, and when the layer attributes are the same, arranging and naming from bottom to top according to the sequence of the layer names 01-10. Exemplarily, fig. 5 is a schematic diagram of a layer naming structure of a background layer according to an embodiment of the present application, and as shown in fig. 5, the layer naming structure of the background layer includes a picture and a vector image, where the picture is based on an upper vector image, and therefore, the picture is below and the vector image is above. For the two image layers which are both pictures, the image layers are named as picture 01 and picture 02 respectively; and if the image layers are vector images, the image layers are named as a vector image layer 01 and a vector image layer 02 respectively.

And secondly, grouping the decorative layers, wherein the main contents of the decorative layers are the decoration of a frame and the decoration of graph contents, the frame decoration is divided into an upper direction (top), a lower direction (bottom), a left direction (left) and a right direction (right), each direction is named independently in a group, a corresponding layer is arranged below each direction group, the layers are divided into pictures and vector images, and the principle that the pictures are bottom vector images in the grouping processing of the background layer is followed. The chart decoration is divided into another group, the lower part of the chart decoration is divided into five direction groups of upper, middle, lower, left and right, a corresponding layer is arranged under each direction group, the layers are divided into pictures and vector images, and the principle that the pictures are base vector images in the grouping processing of the background layer is adopted. Exemplarily, fig. 6 is a schematic view of a layer naming structure of a decoration layer provided in an embodiment of the present application, and as shown in fig. 6, the layer naming structure of the decoration layer includes groups in four directions, i.e., upper, lower, left, and right, corresponding to border decorations and chart groups corresponding to chart decorations.

And thirdly, grouping and naming the normal layer of the assembly, wherein the content of the normal layer of the assembly is divided into two-dimensional chart display content and button default content, the two-dimensional chart content and the button default content (button, btn) are divided into five directions of top, center, bottom, left and right, each direction is independently grouped, and naming and displaying rules of the layers under each direction group are consistent with the grouping and processing of the decoration layers. Fig. 7 is a schematic diagram of a layer naming structure of a normal layer of a component according to an embodiment of the present application, where as shown in fig. 7, the layer naming structure of the normal layer of the component includes buttons and groups in five directions, i.e., upper, middle, lower, left, and right, corresponding to the lower direction of the diagram.

And fourthly, the component selects the grouping naming processing of the middle layer, the content of the component selecting the middle layer is mainly the graph selection prompt and the selection style of the button, and the content grouping and naming display are consistent with the grouping naming processing of the normal layer of the component. Fig. 8 is a schematic diagram of a layer naming structure of a component selection layer according to an embodiment of the present application, where as shown in fig. 8, the layer naming structure of the component selection layer includes a chart and groups in five directions, i.e., up, middle, down, left, and right, corresponding to the button.

And fifthly, grouping and naming processing of a text layer, wherein the text layer is mainly divided into a first, a second and a third levels of titles and text chart font contents, the title font layer is named with H (such as H1-H5), the chart font content layer is mainly named with P, a page is divided into five directions according to the grouping and naming processing mode of the normal state layer of the component, and each direction is marked independently. Exemplarily, fig. 9 is a schematic diagram of a layer naming structure of a text layer according to an embodiment of the present application, and as shown in fig. 9, the layer naming structure of the text layer includes groups in five directions, i.e., upper, middle, lower, left, and right, and corresponding titles and paragraphs under the left group, where, for both layers are titles, the layer names are respectively title 01 and title 02; for the layers which are paragraphs, the layer names are paragraph 01 and paragraph 02 respectively.

Through the steps, the photoshop file labeled according to the preset layer labeling rule is obtained.

S202, analyzing the page design file to obtain file information corresponding to the page design file.

After the page design file is obtained, the file information corresponding to the page design file can be obtained by analyzing the page design file. Illustratively, the photoshop file labeled according to the preset layer labeling rule is parsed by a psd. After the analysis, the psd.js tool returns a data object in the JSON format, the data object is stored in a psdData variable, the photoshop file can be accessed in a tree structure form through a psd.tree () method, information of all layers in the photoshop file can be acquired through the psd.tree (). By the method, the file information corresponding to the page design file is obtained.

S203, loading the file information to a basic page to generate a visual large screen, wherein the basic page is a configuration file containing layout components, and different layout components respectively correspond to different layouts of the basic page.

In this step, the document information is loaded to the base page, i.e. the base page is configured based on the document information, i.e. the document information is added to the corresponding position of the base page, and/or the style of the base page and the layout components therein is adjusted according to the document information, etc.

The basic page is a general basic page for generating a large visual screen. Illustratively, the basic page is a configuration file in a JSON format, the layout of the basic page is divided into five parts, namely top, center, bottom, left and right, and each part corresponds to one layout component. The basic page provides a default style sheet for the whole of the visualization large screen to be generated, and provides a respective default style sheet for the layout component corresponding to each part. Illustratively, an initial default data object PageAttr of a base page may be defined for storing default style sheet information related to the base page, where the expression is: pageAttr = { ID, csAttr, topCsstr, centerCsAttr, bottomCsAttr, leftCsAttr, rightCsAttr }, where ID represents a unique identifier of the base page, csAttr represents a Cascade Style Sheet (CSS) attribute of the base page, csAttr is a set of Style data including width (width), height (height), background (background), and so on, topCsstat, centerCsAttr, bottomCsAttr, leftCsAttr, and RightCsAttr represent CSS attributes of five layout components of the base page, respectively.

And after the file information corresponding to the page design file is obtained, loading the file information to a basic page to generate a visual large screen.

Optionally, after the visualization large screen is generated, the visualization large screen is displayed to the user. For example, if the electronic device is a server, after the server generates a large visual screen, the large visual screen is sent to the electronic device with a display screen through a network, and the large visual screen is displayed through the display screen.

According to the method for generating the visual large screen, the page design file is acquired, the page design file is analyzed, the file information corresponding to the page design file is acquired, the file information is loaded to the basic page, the visual large screen is generated, the basic page is a configuration file containing layout components, and different layout components respectively correspond to different layouts of the basic page. According to the large visual screen generated by the embodiment of the application, the file information corresponding to the page design file marked according to the preset layer marking rule is loaded to the basic page to generate the large visual screen, so that the development cycle of the large visual screen can be greatly shortened, and the cost is reduced.

On the basis of the above embodiment, the file information may include the size of the page design file, the layer information of each layer in the page design file, and the like. The layer information may include layer style attribute information, layer element attribute information, and the like. Illustratively, the size of the pagedesign file may include the width and height of the pagedesign file. Illustratively, when parsing the page design file, the size of the page design file is saved in the psdData variable; the layer information is stored in the layer list despendantsList variable.

How to load the file information into the basic page and generate the visual large screen is further explained below.

In some embodiments, loading the file information into the base page and generating the large visual screen may include: adjusting the size of a basic page according to the size of the page design file; and loading the graph layer information to the adjusted basic page to generate a visual large screen.

A flowchart of the generation method of the visualization large screen is explained in detail below with reference to fig. 10. As shown in fig. 10, the method of the embodiment of the present application may include:

s1001, acquiring a page design file.

S1002, analyzing the page design file to obtain file information corresponding to the page design file.

In the embodiment of the present application, reference may be made to the related description of the embodiment shown in fig. 2 for specific implementation processes of S1001 and S1002, which are not described herein again.

It should be clear that the following steps S1003 to S1006 further explain how to load the file information into the basic page to generate the visual large screen; alternatively, the following steps S1004 to S1006 further explain "how to load the graph layer information to the adjusted base page, and generate the visual large screen".

S1003, adjusting the size of the basic page according to the size of the page design file.

After the file information of the page design file is obtained, the size of the basic page is adjusted according to the size of the page design file contained in the file information. Illustratively, the size of the page design file (i.e., the width and height of the page design file) is stored in the psdData variable, and the initial default data object of the base page is PageAttr, then the width value and height value corresponding to the size of the entire page design file are read from the psdData variable, which respectively represent the width and height of the page design file, and are respectively assigned to the width attribute and height attribute in the CsAttr in the PageAttr data object, so as to determine the size of the base page, i.e., determine the width and height of the large visual screen to be generated.

And S1004, determining a target style corresponding to the basic page and the layout component according to the layer style attribute information in the file information.

As a possible implementation, the step may further include: traversing file information to determine layer style attribute information corresponding to each layer, wherein each layer comprises a background layer, a decorative layer, a component normal layer, a component selection middle layer and a text layer; determining a target style corresponding to a basic page according to the layer style attribute information corresponding to the background layer; and determining the target style corresponding to each layout component according to the layer style attribute information corresponding to the decoration layer, the component normal layer, the component selection middle layer and the text layer. The pattern layer style attribute information corresponding to the decorative layer comprises style attribute information of a frame and a chart in the decorative layer; the layer style attribute information corresponding to the component normal layer comprises style attribute information of a chart and a button in the component normal layer; the pattern layer style attribute information corresponding to the component selection layer comprises pattern attribute information selected by a diagram and a button in the component selection layer; and the layer style attribute information corresponding to the text layer comprises style attribute information of the text in the text layer.

Illustratively, the initial default data object of the base page is PageAttr, and based on file information corresponding to an obtained photoshop file, the layer information may be stored in a layer list descndantslist variable, and the layer list variable descndantslist is traversed to determine layer style attribute information corresponding to each layer. Reading information of a background layer, assigning style attribute information in an object of the background layer to the CsAttr of the PageAttr, for example, if an object with a type (type) of a picture (picture) is analyzed in the background layer, reading the style attribute information of the picture from the background layer and adding the style attribute information to the CsAttr, thereby determining a target style corresponding to a basic page. After the information of the background layer is processed, the information in the decoration layer is read again, the border decoration is divided into four directions of top, bottom, left and right, the pattern attribute information in four groups of objects of top, bottom, left and right of the border decoration is respectively assigned to the five directions of top, center, bottom, left and right of the Page Attr, and the pattern attribute information in five groups of objects of top, center, left and right of the Page decoration is respectively assigned to the top, bottom, center, left and right of the Page Attr. After the information of the decoration layer is processed, the information in the component normal layer is read, wherein the component normal layer information comprises chart (chart) and btn objects, and chart and btn are respectively divided into top, center, bottom, left and right directions. The style attribute information in the five-group objects of top, center, bottom, left and right in the component normality layer chart and btn are respectively assigned to TopCssAttr, center CsAttr, bottom CsAttr, leftCsAttr and RightCsAttr of PageAttr. After the information of the normal layer of the component is processed, reading the information in the component selection middle layer, wherein the information of the component selection middle layer is that corresponding style attribute information is selected by chart and selected by btn, and the style attribute information selected by the component in the five groups of objects of top, center, bottom, left and right in chart and btn in the component selection middle layer is respectively assigned to TopCssAttr, centerCsAttr, bottomCsAttr, leftCsAttr and RightCsAttr of PageAttr. After the information of the selected layer of the component is processed, the style attribute information in the text layer is read, the text layer is divided into five directions of top, center, bottom, left and right, and the style attribute information in the five groups of objects of top, center, bottom, left and right in the text layer is respectively assigned to TopCssAttr, center CsAttr, bottom CsAttr, leftCsAttr and RightCsAttr of PageAttr. Through the method, the target style corresponding to the basic page and the layout assembly is determined.

S1005, determining the target elements contained in the basic page according to the layer element attribute information in the file information.

As a possible implementation, the step may further include: traversing file information to determine layer element attribute information corresponding to each layer, wherein each layer comprises a background layer, a decorative layer, a component normal layer, a component selection middle layer and a text layer; and determining target elements contained in the basic page according to the layer element attribute information corresponding to each layer. The layer element attribute information corresponding to the background layer comprises element attribute information of pictures and vector images in the background layer; the layer element attribute information corresponding to the decorative layer comprises element attribute information of pictures or icons in the decorative layer; the layer element attribute information corresponding to the component normal layer comprises element attribute information of a chart and a button in the component normal layer; the layer element attribute information corresponding to the text layer comprises element attribute information of the text in the text layer.

Illustratively, the initial default data object of the base page is PageAttr, and based on the file information corresponding to the photoshop file obtained in step S202, the layer information may be stored in a layer list despendantlist variable, and the layer list variable despendantlist is traversed to determine the layer style attribute information corresponding to each layer. Reading information of a background layer, adding corresponding element attribute information to a basic page through an add element (addElement) method for a picture or a vector image in the background layer, for example, creating a corresponding element in the basic page when an object with a picture type is analyzed in the background layer, wherein the element is represented by < img >. After the information of the background layer is processed, the information in the decoration layer is read, and corresponding element attribute information is added to the basic page through an addElement method for the pictures or the icons in the decoration layer. After the information of the decoration layer is processed, reading the information in the component normal layer, wherein the component normal layer information comprises chart and btn objects, chart and btn are divided into five directions of top, center, bottom, left and right respectively, and corresponding element attribute information is added to the basic page through an addElement method for the objects in each direction of chart and btn in the component normal layer. After the information of the normal layer of the component is processed, the information in the text layer is read, the text layer is divided into five directions of top, center, bottom, left and right, the text in each direction in the text layer is added with corresponding element attribute information to each layout component of the basic page through an addElement method, for example, type is an object of text (text), and the element attribute information of a title (represented by < H1 >) or a paragraph (represented by < P >) is created according to the attribute name of the object of text (text). Through the method, the target elements contained in the basic page are determined.

And S1006, generating a visual large screen according to the target style and the target elements.

It is understood that the visualization large screen contains target elements and has a target style. Illustratively, the visualization large screen is an html page, but the embodiment of the application is not limited thereto.

In order to adapt the large visual screen to the resolutions of different display screens, the electronic device can also automatically adjust the large visual screen by adopting a resolution adaptation program. Therefore, the method for generating the large visual screen may further include:

s1007, adjusting the large visual screen based on the resolution of the display screen to obtain the large visual screen matched with the display screen.

Illustratively, the width of a page design file is defined as w, the height of the page design file is defined as h, the resolution of a display screen is defined as dw dh, the ratio of the resolution of the display screen to the width of the page design file is obtained, the smaller value of the width ratio and the height ratio is represented by a minRation variable, then the visual large screen is zoomed through a transform: scale (minRation) attribute of a Cascading Style Sheet 3 (CSS 3), then the position of the visual large screen is adjusted, so that the visual large screen is displayed in the middle of the display screen, the distance between the visual large screen and the screen is adjusted to be (dh-h)/2, and the distance between the visual large screen and the screen is adjusted to be (dw-w)/2. By the method, the visual large screen adaptive to the display screen is obtained.

According to the method for generating the visual large screen, after the page design file is obtained, the page design file is analyzed to obtain the file information corresponding to the page design file, and the size of the basic page is adjusted according to the size of the page design file; determining a target style corresponding to the basic page and the layout component according to the layer style attribute information in the file information; determining target elements contained in the basic page according to the layer element attribute information in the file information; further, generating a visual large screen according to the target style and the target elements; and finally, adjusting the large visual screen based on the resolution of the display screen to obtain the large visual screen adaptive to the display screen. The method comprises the steps of loading file information corresponding to a page design file which is labeled according to a preset layer labeling rule to a basic page to generate a large visual screen, and adapting the generated large visual screen to the resolution of a display screen to obtain the large visual screen adapted to the display screen, so that the development period of the large visual screen can be greatly shortened, and the cost is reduced; meanwhile, the generated visual large-screen display screen is high in restoration degree and can be adapted to large-screen display screens with any resolution.

The following are embodiments of the apparatus of the present application that may be used to perform embodiments of the method of the present application. For details which are not disclosed in the embodiments of the apparatus of the present application, reference is made to the embodiments of the method of the present application.

Fig. 11 is a schematic structural diagram of a generation apparatus for a large visual screen according to an embodiment of the present application. As shown in fig. 11, a generation apparatus 1100 for a large visualization screen according to an embodiment of the present application includes: a first obtaining module 1101, a second obtaining module 1102 and a generating module 1103. Wherein:

the first obtaining module 1101 is configured to obtain a page design file. The method comprises the steps that all layers in a page design file are labeled according to preset layer labeling rules, and the preset layer labeling rules are used for setting layer groups and layer names for all the layers.

The second obtaining module 1102 is configured to parse the page design file to obtain file information corresponding to the page design file.

The generating module 1103 is configured to load the file information to the base page, and generate a large visual screen. The basic page is a configuration file containing layout components, and different layout components respectively correspond to different layouts of the basic page.

On the basis of any one of the illustrated embodiments, the generating module 1103 may be specifically configured to: determining a target style corresponding to the basic page and the layout component according to the layer style attribute information in the file information; determining target elements contained in the basic page according to the layer element attribute information in the file information; and generating a visual large screen according to the target style and the target elements.

On the basis of any one of the embodiments described above, when the generating module 1103 is configured to determine, according to the layer style attribute information in the file information, a target style corresponding to the base page and the layout component, specifically configured to: traversing file information to determine layer style attribute information corresponding to each layer, wherein each layer comprises a background layer, a decorative layer, a component normal layer, a component selection middle layer and a text layer; determining a target style corresponding to a basic page according to the layer style attribute information corresponding to the background layer; and determining the target style corresponding to each layout component according to the layer style attribute information corresponding to the decoration layer, the component normal layer, the component selection middle layer and the text layer. The pattern layer style attribute information corresponding to the decorative layer comprises style attribute information of a frame and a chart in the decorative layer; the pattern layer style attribute information corresponding to the component normal state layer comprises the style attribute information of a chart and a button in the component normal state layer; the layer style attribute information corresponding to the component selection middle layer comprises style attribute information selected by a diagram and a button in the component selection middle layer; and the layer style attribute information corresponding to the text layer comprises style attribute information of the text in the text layer.

On the basis of any one of the embodiments shown above, when the generating module 1103 is configured to determine, according to the layer element attribute information in the file information, a target element included in the base page, the generating module may specifically be configured to: traversing file information to determine layer element attribute information corresponding to each layer, wherein each layer comprises a background layer, a decorative layer, a component normal layer, a component selection middle layer and a text layer; and determining target elements contained in the basic page according to the layer element attribute information corresponding to each layer. The layer element attribute information corresponding to the background layer comprises element attribute information of pictures and vector images in the background layer; the layer element attribute information corresponding to the decorative layer comprises element attribute information of pictures or icons in the decorative layer; the layer element attribute information corresponding to the component normal layer comprises element attribute information of a chart and a button in the component normal layer; the layer element attribute information corresponding to the text layer comprises element attribute information of the text in the text layer.

On the basis of any of the above-described embodiments, the file information may include the size of the page design file and layer information of each layer in the page design file. In this case, the generating module 1103 may be specifically configured to: adjusting the size of a basic page according to the size of the page design file; and loading the graph layer information to the adjusted basic page to generate a visual large screen.

Fig. 12 is a schematic structural diagram of a generation apparatus for a large visualization screen according to another embodiment of the present application. As shown in fig. 12, the apparatus 1200 for generating a large visual screen according to the embodiment of the present application may further include, on the basis of the apparatus structure shown in fig. 11:

and the adjusting module 1104 is configured to adjust the large visual screen based on the resolution of the display screen after the large visual screen is generated, so as to obtain the large visual screen adapted to the display screen.

The apparatus of this embodiment may be configured to implement the technical solution of any one of the above-mentioned method embodiments, and the implementation principle and the technical effect are similar, which are not described herein again.

Fig. 13 is a schematic structural diagram of an electronic device according to an embodiment of the present application. Illustratively, the electronic device may be provided as a computer such as a server. Referring to fig. 13, electronic device 1300 comprises a processing component 1301 that further comprises one or more processors, and memory resources, represented by memory 1302, for storing instructions, such as application programs, that are executable by processing component 1301. The application programs stored in memory 1302 may include one or more modules that each correspond to a set of instructions. Further, the processing component 1301 is configured to execute instructions to perform any of the method embodiments described above.

The electronic device 1300 may also include a power component 1303 configured to perform power management of the electronic device 1300, a wired or wireless network interface 1304 configured to connect the electronic device 1300 to a network, and an input/output (I/O) interface 1305. The electronic device 1300 may operate based on an operating system, such as Windows Server, mac OS XTM, unixTM, linuxTM, freeBSDTM or the like, stored in the memory 1302.

The embodiment of the present application further provides a computer-readable storage medium, in which computer-executable instructions are stored, and when a processor executes the computer-executable instructions, a scheme of the above generation method for a large visual screen is implemented.

The embodiment of the present application further provides a computer program product, where the computer program product includes computer execution instructions, and when the processor executes the computer execution instructions, the scheme of the generation method for the large visual screen is implemented as above.

The computer-readable storage medium may be any type or combination of volatile or non-volatile memory devices, such as Static Random Access Memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic or optical disk. Readable storage media can be any available media that can be accessed by a general purpose or special purpose computer.

An exemplary readable storage medium is coupled to the processor such the processor can read information from, and write information to, the readable storage medium. Of course, the readable storage medium may also be an integral part of the processor. The processor and the readable storage medium may reside in an Application Specific Integrated Circuits (ASIC). Of course, the processor and the readable storage medium may also reside as discrete components in the generation apparatus of the visualization large screen.

Those of ordinary skill in the art will understand that: all or a portion of the steps of implementing the above-described method embodiments may be performed by hardware associated with program instructions. The program may be stored in a computer-readable storage medium. When executed, the program performs steps comprising the method embodiments described above; and the aforementioned storage medium includes: various media that can store program codes, such as ROM, RAM, magnetic or optical disks.

Finally, it should be noted that: the above embodiments are only used for illustrating the technical solutions of the present application, and not for limiting the same; although the present application has been described in detail with reference to the foregoing embodiments, it should be understood by those of ordinary skill in the art that: the technical solutions described in the foregoing embodiments may still be modified, or some or all of the technical features may be equivalently replaced; and the modifications or the substitutions do not make the essence of the corresponding technical solutions depart from the scope of the technical solutions of the embodiments of the present application.

Claims (10)

1. A method for generating a visual large screen is characterized by comprising the following steps:

acquiring a page design file, wherein each layer in the page design file is labeled according to a preset layer labeling rule, and the preset layer labeling rule is used for setting layer groups and layer names for each layer;

analyzing the page design file to obtain file information corresponding to the page design file;

and loading the file information to a basic page to generate a visual large screen, wherein the basic page is a configuration file containing layout components, and different layout components respectively correspond to different layouts of the basic page.

2. The method for generating a large visual screen according to claim 1, wherein the loading the file information to a base page to generate a large visual screen comprises:

determining a target style corresponding to the basic page and the layout component according to the layer style attribute information in the file information;

determining target elements contained in the basic page according to the layer element attribute information in the file information;

and generating a visual large screen according to the target style and the target element.

3. The method for generating a visual large screen according to claim 2, wherein the determining the target style corresponding to the basic page and the layout component according to the layer style attribute information in the file information includes:

traversing the file information to determine layer style attribute information corresponding to each layer, wherein each layer comprises a background layer, a decorative layer, a component normal layer, a component selection middle layer and a text layer;

determining a target style corresponding to the basic page according to the layer style attribute information corresponding to the background layer;

determining a target style corresponding to each layout component according to the layer style attribute information corresponding to the decoration layer, the component normal layer, the component selection middle layer and the text layer;

the pattern layer style attribute information corresponding to the decorative layer comprises style attribute information of a frame and a chart in the decorative layer; the layer style attribute information corresponding to the component normal layer comprises style attribute information of a chart and a button in the component normal layer; the pattern layer style attribute information corresponding to the component selection layer comprises pattern attribute information selected by a diagram and a button in the component selection layer; and the layer style attribute information corresponding to the text layer comprises the style attribute information of the text in the text layer.

4. The method for generating a visual large screen according to claim 2, wherein the determining, according to the layer element attribute information in the file information, a target element included in the base page includes:

traversing the file information to determine layer element attribute information corresponding to each layer, wherein each layer comprises a background layer, a decorative layer, a component normal layer, a component selection middle layer and a text layer;

determining target elements contained in the basic page according to the layer element attribute information corresponding to each layer;

the layer element attribute information corresponding to the background layer comprises element attribute information of pictures and vector images in the background layer; the layer element attribute information corresponding to the decorative layer comprises element attribute information of pictures or icons in the decorative layer; the layer element attribute information corresponding to the component normal layer comprises element attribute information of a chart and a button in the component normal layer; and the layer element attribute information corresponding to the text layer comprises the element attribute information of the text in the text layer.

5. The method according to claim 1, wherein the file information includes a size of the page design file and layer information of each layer in the page design file, and the loading of the file information to a base page to generate the large visual screen includes:

adjusting the size of the basic page according to the size of the page design file;

and loading the layer information to the adjusted basic page to generate a visual large screen.

6. A generation method of a visualization large screen according to any one of claims 1 to 5, characterized by further comprising:

and after the large visual screen is generated, adjusting the large visual screen based on the resolution of the display screen to obtain the large visual screen matched with the display screen.

7. A visual large-screen generating device is characterized by comprising:

the system comprises a first obtaining module, a second obtaining module and a third obtaining module, wherein the first obtaining module is used for obtaining a page design file, all layers in the page design file are labeled according to a preset layer labeling rule, and the preset layer labeling rule is used for setting layer groups and layer names for all the layers;

the second acquisition module is used for analyzing the page design file and acquiring file information corresponding to the page design file;

and the generating module is used for loading the file information to a basic page to generate a visual large screen, the basic page is a configuration file containing layout components, and different layout components respectively correspond to different layouts of the basic page.

8. An electronic device, comprising: a memory and a processor;

the memory is to store program instructions;

the processor is used for calling the program instructions in the memory to execute the generation method of the visualization large screen according to any one of claims 1 to 6.

9. A computer-readable storage medium, wherein computer program instructions are stored in the computer-readable storage medium, and when executed, the computer program instructions implement the method for generating a large visualization screen according to any one of claims 1 to 6.

10. A computer program product comprising a computer program, characterized in that the computer program, when being executed by a processor, implements the method of generating a visualization large screen according to any of claims 1-6.

Images