A large-screen visualization method, apparatus, device and medium

Abstract

The application relates to the technical field of data visualization, and in particular to a large-screen visualization method and device, equipment and a medium. In the application, a canvas is rasterized and divided, and the coordinates of a dragged component are automatically calibrated in combination with a raster rule; whether the components are overlapped is judged through rectangular region detection, directional avoidance is performed with a raster as a step, and after the layout is completed, all component parameters are encapsulated into structured serialized data for storage. In the rendering stage, a scaling coefficient is calculated based on the size of a reference canvas and the size of an actual large screen, and after uniform equi-proportion scaling of the component parameters, dynamic rendering is completed. The traditional large-screen page-by-page independent coding mode is abandoned, low-code drag-and-drop layout, automatic component regularization and multi-resolution seamless adaptation are realized, the development, adaptation and maintenance costs are greatly reduced, and the large-screen visualization building efficiency is improved.

Description

Technical Field

[0001] This invention relates to the field of data visualization technology, and in particular to a large-screen visualization method, apparatus, device, and medium. Background Technology

[0002] With the widespread application of data visualization and large-screen display systems, large-screen visualization has comprehensively covered numerous industry scenarios. Currently, large-screen visualization development in the industry is mostly based on project-specific development models, lacking standardized, reusable component architectures and universal development systems. Large-screen pages, visualization components, data integration logic, and interaction adaptation logic for different industries, scenarios, and even different projects within the same industry all need to be developed from scratch. This results in a large amount of repetitive development work, leading to low development efficiency. Therefore, improving development efficiency in the large-screen visualization process has become an urgent problem to be solved. Summary of the Invention

[0003] This invention provides a method, apparatus, device, and medium for large-screen visualization, in order to solve the problem of low development efficiency in the process of large-screen visualization.

[0004] Firstly, a large-screen visualization method is provided, the large-screen visualization method comprising: Obtain the canvas size of the preset canvas, and based on the canvas size, construct the grid layout information of the preset canvas, wherein the grid layout information includes grid spacing and layout rules; Obtain the component coordinates of the component to be laid out that has been dragged onto the preset canvas, and calculate the canvas coordinates of the component to be laid out based on the component coordinates, the grid spacing and the layout rules; The detection results are obtained by detecting whether the component area of ​​the component to be laid out overlaps with the component area of ​​the already laid out component. If the detection result is overlapping, then the overlapping area is determined, and based on the overlapping area, the grid spacing is used as the step size to move until the detection result is non-overlapping, thus obtaining the final canvas coordinates; Collect the component size, style parameters and configuration parameters of each component, combine them with the canvas size, encapsulate and serialize them into canvas layout data; When rendering the large screen to be rendered, the canvas layout data is called and the canvas size in the canvas layout data is extracted. Based on the screen size of the large screen to be rendered and the canvas size, the width scaling factor and the height scaling factor are calculated respectively, and the minimum value of the two is taken as the global scaling factor. Based on the global scaling factor and the canvas layout data, the large screen to be rendered is dynamically rendered to obtain the rendered large screen.

[0005] Secondly, a large-screen visualization device is provided, the large-screen visualization device comprising: A construction module is used to obtain the canvas size of a preset canvas, and construct the grid layout information of the preset canvas based on the canvas size. The grid layout information includes grid spacing and layout rules. The first calculation module is used to obtain the component coordinates of the component to be laid out that is dragged onto the preset canvas, and calculate the canvas coordinates of the component to be laid out based on the component coordinates, the grid spacing and the layout rules. The detection module is used to detect whether the component area of ​​the component to be laid out overlaps with the component area of ​​the already laid out component, and obtain the detection result; The moving module is used to determine the overlapping area if the detection result is overlapping, and move according to the overlapping area with the grid spacing as the step size until the detection result is non-overlapping, so as to obtain the final canvas coordinates; The acquisition module is used to acquire the component size, style parameters and configuration parameters of each component, and encapsulate and serialize them into canvas layout data in combination with the canvas size. The second calculation module is used to call the canvas layout data and extract the canvas size from the canvas layout data when rendering the large screen to be rendered. Based on the screen size of the large screen to be rendered and the canvas size, the module calculates the width scaling factor and the height scaling factor respectively, and takes the minimum value of the two as the global scaling factor. The rendering module is used to dynamically render the large screen to be rendered based on the global scaling factor and the canvas layout data, so as to obtain the rendered large screen.

[0006] Thirdly, a computer device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of the above-described large-screen visualization method.

[0007] Fourthly, a computer-readable storage medium is provided, which stores a computer program that, when executed by a processor, implements the steps of the aforementioned large-screen visualization method.

[0008] This application first divides the canvas into rasterized sections, and then automatically calibrates the coordinates of draggable components based on raster rules. It then uses rectangular region detection to determine if components overlap, performing directional avoidance with the raster as the step size. After layout completion, all component parameters are encapsulated into structured serialized data for storage. During the rendering phase, a scaling factor is calculated based on the baseline canvas size and the actual large-screen size. Component parameters are then uniformly scaled proportionally to complete dynamic rendering. This approach abandons the traditional page-by-page independent coding mode for large screens, achieving low-code drag-and-drop layout, automatic component organization, and seamless multi-resolution adaptation, significantly reducing development, adaptation, and maintenance costs, and improving the efficiency of large-screen visualization construction. Attached Figure Description

[0009] To more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings used in the description of the embodiments of the present invention will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0010] Figure 1 This is a schematic diagram of an application environment for a large-screen visualization method provided in an embodiment of the present invention; Figure 2 This is a flowchart illustrating a large-screen visualization method provided in an embodiment of the present invention; Figure 3 This is a schematic diagram of a large-screen visualization device provided in an embodiment of the present invention; Figure 4 This is a schematic diagram of the structure of a computer device provided in an embodiment of the present invention. Detailed Implementation

[0011] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0012] In the following description, specific details such as particular system architectures and techniques are set forth for illustrative purposes and not for limitation, in order to provide a thorough understanding of the embodiments of this application. However, those skilled in the art will understand that this application may also be implemented in other embodiments without these specific details. In other instances, detailed descriptions of well-known systems, apparatuses, circuits, and methods have been omitted so as not to obscure the description of this application with unnecessary detail.

[0013] It should be understood that, when used in this application specification and the appended claims, the term "comprising" indicates the presence of the described features, integrals, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, integrals, steps, operations, elements, components and / or a collection thereof.

[0014] It should also be understood that the term “and / or” as used in this application specification and the appended claims means any combination of one or more of the associated listed items and all possible combinations, and includes such combinations.

[0015] As used in this application specification and the appended claims, the term "if" may be interpreted, depending on the context, as "when," "once," "in response to determination," or "in response to detection." Similarly, the phrase "if determined" or "if detected [the described condition or event]" may be interpreted, depending on the context, as meaning "once determined," "in response to determination," "once detected [the described condition or event]," or "in response to detection [the described condition or event]."

[0016] Furthermore, in the description of this application and the appended claims, the terms "first," "second," "third," etc., are used only to distinguish descriptions and should not be construed as indicating or implying relative importance.

[0017] References to "one embodiment" or "some embodiments" as described in this specification mean that one or more embodiments of this application include a specific feature, structure, or characteristic described in connection with that embodiment. Therefore, the phrases "in one embodiment," "in some embodiments," "in other embodiments," "in still other embodiments," etc., appearing in different parts of this specification do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically emphasized. The terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless otherwise specifically emphasized.

[0018] It should be understood that the sequence number of each step in the following embodiments does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0019] To illustrate the technical solution of this application, specific embodiments are described below.

[0020] The large-screen visualization method provided in one embodiment of the present invention can be applied to, for example... Figure 1In this application environment, the terminal device is used to display the corresponding large-screen visualization. The server obtains the canvas size of the preset canvas and constructs the grid layout information of the preset canvas based on the canvas size. The grid layout information includes grid spacing and layout rules. The server obtains the component coordinates of the component to be laid out that is dragged onto the preset canvas. Based on the component coordinates, grid spacing, and layout rules, the server calculates the canvas coordinates of the component to be laid out. The server detects whether the component area of ​​the component to be laid out overlaps with the component area of ​​the already laid out component and obtains the detection result. If the detection result is an overlap, the server determines the overlapping area and moves according to the overlapping area with the grid spacing as the step size until the detection result is obtained. If there is no overlap, the final canvas coordinates are obtained; the component size, style parameters, and configuration parameters of each component are collected, and the component size, style parameters, configuration parameters, and canvas size of each component are encapsulated and serialized into canvas layout data; when rendering the large screen to be rendered, the canvas layout data is called, and the canvas size in the canvas layout data is extracted. According to the large screen size to be rendered and the canvas size, the width scaling factor and the height scaling factor are calculated respectively, and the minimum value of the two is taken as the global scaling factor; based on the global scaling factor and the canvas layout data, the large screen to be rendered is dynamically rendered to obtain the rendered large screen.

[0021] The client can be, but is not limited to, various personal computers, laptops, smartphones, tablets, and portable wearable devices. The server can be implemented using a standalone server or a server cluster consisting of multiple servers. The invention will now be described in detail through specific embodiments.

[0022] Please see Figure 2 , Figure 2 This is a flowchart illustrating a large-screen visualization method provided in an embodiment of the present invention, which includes the following steps: S21: Obtain the canvas size of the preset canvas, and construct the grid layout information of the preset canvas based on the canvas size. The grid layout information includes grid spacing and layout rules.

[0023] In step S21, the preset canvas is a predefined standard canvas template, and its size determines the baseline resolution of the visualization screen. Based on the canvas size, the grid layout information of the preset canvas is constructed, including grid spacing and layout rules. The grid layout information, including grid spacing and layout rules, represents the quantitative constraints on the alignment, snapping, and scaling of components within the canvas, ensuring that components maintain visual consistency and interactive accuracy at any resolution.

[0024] In this embodiment, the canvas size of the preset canvas is obtained. For example, the canvas size can be 1920×1080, 3840×2160, or a customized resolution. The preset canvas is then rasterized, that is, the preset canvas is divided into several rows and columns of grids according to a preset spacing. The distance between adjacent grid lines is the grid spacing, which defines the minimum step unit of the grid cell. The grid spacing includes horizontal spacing and vertical spacing, which can be equal or unequal, and can be flexibly configured according to actual design requirements. Corresponding layout rules are set, including component alignment methods and snapping strategies. Among them, the alignment methods are left alignment, center alignment, right alignment, etc., and the snapping strategy defines the snapping distance threshold between the component edge and the grid line.

[0025] In this embodiment, by pre-constructing grid layout information, a unified constraint benchmark can be provided for the subsequent arrangement of large-screen visualization components, avoiding the problems of misalignment and disproportion of components under different resolutions. This not only reduces the workload of repeatedly adjusting and aligning components in large-screen visualization design, but also ensures that the final large-screen visualization interface has a uniform and regular visual effect on display devices of different sizes, thereby improving the development efficiency and display quality of the large-screen visualization interface.

[0026] S22: Obtain the coordinates of the component to be laid out that has been dragged onto the preset canvas. Calculate the canvas coordinates of the component to be laid out based on the component coordinates, grid spacing, and layout rules.

[0027] In step S22, the component to be laid out is any visual element that the user drags from the component library to the preset canvas. The component coordinates are the initial mouse landing point coordinates of the component on the canvas, reflecting the user's original intention. The canvas coordinates of the component to be laid out are the final position coordinates of the component after being constrained by the layout rules. In this embodiment, the coordinates of the component to be laid out are obtained when it is dragged onto a preset canvas. These coordinates are the real-time coordinates of the mouse or touch point during the dragging process. Specifically, when the user drags the component onto the canvas, the system captures its landing point coordinates in real time, including the horizontal X-axis coordinates and the vertical Y-axis coordinates. The real-time coordinates are defined with the bottom left corner of the preset canvas as the origin, the positive X-axis direction to the right, and the positive Y-axis direction upwards. The component to be laid out can include visual elements such as charts, text, indicator cards, tables, and maps. When calculating the canvas coordinates of the component to be laid out based on the component coordinates, grid spacing, and layout rules, a grid rounding and snapping algorithm can be used. This algorithm performs integer division operations on the original X-axis and Y-axis coordinates, combined with the corresponding grid spacing, to obtain the target grid row and column values ​​corresponding to the component coordinates. The canvas coordinates are then calculated using these grid row and column values. Divide the component coordinates by the grid spacing in the corresponding direction, round down to get the row and column index of the component in the grid system, and then multiply the row and column index by the grid spacing to get the canvas coordinates that are snapped to the grid node.

[0028] For example, if the grid spacing in the X-axis direction is 20px and the component coordinate in the X-axis direction is 127px, divide the component coordinate by the grid spacing in the corresponding direction and round it to 6, then multiply it by the grid spacing to get 120.

[0029] Optionally, the canvas coordinates of the component to be laid out are calculated based on the component coordinates, grid spacing, and layout rules, including: Based on the component coordinates and grid spacing, the distance between the component to be laid out and the intersection points of each grid cell is calculated. The grid intersection point corresponding to the minimum distance is determined as the canvas coordinates of the component to be laid out.

[0030] In this embodiment, the distances between the component to be laid out and the intersections of each grid cell are calculated based on the component coordinates. During the calculation, the Euclidean distances from the center point of the component to the four grid cell intersections are calculated. Based on the distances between the component and each grid cell intersection, and in conjunction with layout rules, the canvas coordinates of the component to be laid out are determined. The layout rule is to determine the grid cell intersection with the shortest distance as the canvas coordinates of the component to be laid out. That is, the grid cell intersection with the shortest distance is used as the snap anchor point, and the component's center point is automatically snapped to this anchor point, thus completing the precise positioning of the component in the grid system. The introduction of grid layout and automatic snapping mechanisms achieves neat alignment of components and reduces the difficulty of manual layout.

[0031] In this embodiment, the distance between the component to be laid out and the intersection of the grid is calculated, and the component canvas coordinates are automatically determined in combination with the layout rules. Developers do not need to manually input coordinates and drag to adjust, nor do they need to remember complicated alignment shortcuts. This greatly simplifies the layout alignment operation of multiple components in large-screen visualization scenarios, lowers the layout operation threshold for non-professional designers, and ensures that all components are neatly arranged according to the grid rules, effectively improving the component layout efficiency and overall aesthetics of the large-screen visualization page.

[0032] S23: Detect whether the component area of ​​the component to be laid out overlaps with the component area of ​​the already laid out component, and obtain the detection result.

[0033] In step S23, the component area refers to the actual grid area occupied by each component on the preset canvas. Specifically, the component size of the component to be laid out is obtained. Using the canvas coordinates as a reference, and combining the number of grid rows and columns spanned by the component size, a rectangular area of ​​the component to be laid out is delineated in the grid coordinate system. This area is defined by the grid coordinate system, using the starting coordinates and the component size together, to ensure that the area accurately reflects the actual area occupied by the component on the canvas.

[0034] The algorithm retrieves the component regions of already laid-out components within a preset canvas. It then checks whether the component regions of the component to be laid out overlap with those of the already laid-out components, obtaining the detection result. This determines whether the two rectangular regions intersect within their grid ranges. If there is no intersection, the detection result is "no overlap"; if there is an intersection, the detection result is "overlap".

[0035] S24: If the detection result is overlap, determine the overlap area, and move according to the overlap area with the grid spacing as the step size until the detection result is non-overlapping, and obtain the final canvas coordinates.

[0036] In step S24, the overlapping area is the common grid range obtained by the intersection of the component area of ​​the component to be laid out and the component area of ​​the already laid out component. The movement step is based on the grid spacing, which means that each time the position of the component to be laid out is adjusted, the offset of the coordinate is equal to the pre-set grid spacing, so as to ensure that the edge of the component to be laid out can still be aligned with the grid after the movement, and maintain the regularity of the overall layout.

[0037] In this embodiment, the intersection boundary of the grid coordinates of the component area to be laid out and the component area of ​​the already laid out component is calculated to determine the starting grid coordinates of the overlapping area and the number of rows and columns crossed. Then, based on the current position of the component to be laid out, it is preferentially moved outward from the canvas in the horizontal direction with a step size of a single grid spacing. Each time it moves, an overlap detection is re-performed. If there is still an overlap when moving to the canvas boundary in the horizontal direction, it is changed to moving in the vertical direction with a step size of grid spacing until a non-overlapping result is obtained after re-detection. At this time, the canvas coordinates of the component to be laid out are the final canvas coordinates.

[0038] Optionally, based on the overlapping area, the system moves in steps of grid spacing until the detection result indicates no overlap, obtaining the final canvas coordinates, including: If the overlapping area is a horizontal overlapping area, start from the canvas coordinates and move the component to be laid out to the right with the grid spacing as the step size until the detection result is non-overlapping, and obtain the final canvas coordinates. If the overlapping area is a vertical overlapping area, then starting from the canvas coordinates, move the component to be laid out downwards with the grid spacing as the step size until the detection result is non-overlapping, and obtain the final canvas coordinates. If the overlapping area includes both horizontal and vertical overlapping areas, then starting from the canvas coordinates, the component to be laid out is moved to the right to eliminate the horizontal overlap, with the grid spacing as the step size, and then moved downwards until the detection result is no overlap, thus obtaining the final canvas coordinates.

[0039] In this embodiment, the overlapping area includes a horizontal overlapping area and a vertical overlapping area. The horizontal overlapping area is the grid range where the component to be laid out and the already laid out component overlap in the horizontal direction, and the vertical overlapping area is the grid range where the component to be laid out and the already laid out component overlap in the vertical direction. If the overlapping area is a horizontal overlapping area, starting from the canvas coordinates, the component to be laid out is moved to the right in steps of grid spacing until the detection result is no overlap. That is, after each move, the component area of ​​the component to be laid out and the component area of ​​the already laid out component are re-detected to see if they overlap. If they still overlap, the moving steps are repeated until there is no longer any intersection between the grid ranges. At this point, the moving is stopped, and the new canvas coordinates and corresponding component area of ​​the component to be laid out are obtained after adjustment.

[0040] If the overlapping area is a vertical overlap, the component to be laid out is moved downwards from the canvas coordinates, with the grid spacing as the step size, until the detection result shows no overlap, thus obtaining the final canvas coordinates. That is, after each downward movement of one step size, the adjusted component area to be laid out is re-detected to see if there is still an intersection of grid ranges with the component areas of all already laid out components. If the detection result still shows overlap, the downward movement is repeated with the grid spacing as the step size, and the detection is repeated until the detection result shows no overlap. The movement stops, and the position of the component to be laid out at this point is locked as the final canvas coordinates, completing the avoidance layout adjustment of the component to be laid out.

[0041] If the overlapping area includes both horizontal and vertical overlapping areas, then starting from the canvas coordinates, the component to be laid out is moved to the right in steps of the grid spacing to eliminate the horizontal overlap, and then moved downwards until the detection result shows no overlap, thus obtaining the final canvas coordinates. That is, the component to be laid out is gradually moved to the right in steps of the grid spacing until the horizontal overlap is eliminated. Each time it moves, it is re-detected whether an overlapping area is included. When the component to be laid out is moved downwards in steps of the grid spacing, each time it moves downwards, it is re-detected whether the component area of ​​the current component to be laid out still overlaps with the component areas of all already laid out components in the grid range. If overlap still exists, the moving and detection steps are repeated until the detection result shows no overlap or intersection, at which point the movement stops, and the position of the component to be laid out at this point is locked as the final canvas coordinates, completing this avoidance layout adjustment.

[0042] In this embodiment, the positions of overlapping components are adjusted by gradually moving based on the grid step size. This eliminates the need for complex area collision calculations, ensuring a regular layout and no component overlap while reducing the amount of layout calculations and improving the efficiency of layout generation for large-screen visualization. This adapts to the needs of rapid layout adjustment of multiple components in large-screen scenarios.

[0043] S25: Collect the component size, style parameters, and configuration parameters of each component, and encapsulate and serialize the component size, style parameters, configuration parameters, and canvas size of each component into canvas layout data.

[0044] In step S25, the component size is the length and width of the canvas space occupied by the component; the style parameters are the set of visual attributes that define the component's appearance; and the configuration parameters are the set of settings for the component's internal functions and interaction logic. The canvas layout data is a complete structure containing the component size, style parameters, and configuration parameters.

[0045] In this embodiment, the component size, style parameters and configuration parameters of each component are collected one by one. The component size includes the actual rendered width and height of the component. The style parameters include visual rendering information such as component font style, color scheme, rounded corners, shadow, transparency, border style, and layout style. The configuration parameters include functional configuration information such as component type, component unique identifier, data interface information, interaction configuration, and responsive adaptation rules.

[0046] When constructing canvas layout data based on layout parameters, configuration parameters, style parameters, and canvas size, a structured data model can be used for organization and encapsulation. This structured data model uses the canvas size as the root node and expands downwards layer by layer into three sub-domains: grid partitioning, component positioning, and style configuration, forming a complete layout data tree. Grid partitioning describes the grid division rules and grid spacing of the preset canvas; component positioning records the precise coordinates of each target component in the canvas, the number of grids it occupies, and its hierarchical relationship; and style configuration uniformly manages the style parameters of all target components.

[0047] In this embodiment, based on the canvas size, a grid layout information for a preset canvas is constructed to facilitate the standardized arrangement of components according to the grid layout information. The canvas coordinates of the components to be laid out are calculated and determined based on the component coordinates, grid spacing, and layout rules, thereby determining the precise mounting coordinates of the components within the preset canvas. Based on the canvas coordinates, the components to be laid out are placed on the preset canvas, ensuring that each component is neatly arranged within the canvas. Canvas layout data is constructed based on layout parameters, configuration parameters, style parameters, and canvas size, so that the subsequent component rendering engine can directly parse and apply it.

[0048] Optionally, the component size, style parameters, configuration parameters, and canvas size of each component are encapsulated and serialized into canvas layout data, including: Encapsulate layout parameters, configuration parameters, style parameters, and canvas size into JSON structured data; The JSON structured data is serialized to obtain serialized data, which is then used as canvas layout data.

[0049] In this embodiment, layout parameters, configuration parameters, style parameters, and canvas size are encapsulated as JSON structured data. For example, a standardized top-level key-value object is predefined as the data carrier, with canvas as the root node to uniformly store canvas size, grid layout rules, and component sets. The canvas size corresponds to storing the overall width and overall height fields of the canvas. Layout parameters are uniformly collected into the grid sub-objects under canvas, storing grid layout-related parameters such as the number of grid columns, grid spacing, and grid row height. Configuration parameters and style parameters are split according to the component dimension. A components array is built under canvas to hold all page component objects. Each component object independently stores component configuration parameters such as component unique identifier, component name, component x-coordinate, component y-coordinate, component width, component height, and stacking level. At the same time, a style sub-object is nested within the component object to separately classify and store style parameters such as background color, text color, and font size. Key names at each level adopt a fixed naming convention, and different types of parameters are stored in a layered and isolated manner to avoid confusion of parameter fields. After completing the classification, collection, and nesting encapsulation of all parameters, a complete and hierarchically clear JSON is formed. Structured data.

[0050] Furthermore, the JSON structured data is serialized to obtain serialized data, which is then used as the canvas layout data. During serialization, a general JSON string serialization algorithm is used to uniformly convert various data types in the JSON structured data, such as numbers, strings, arrays, and nested objects, into continuous, readable string text. Simultaneously, field quotation mark completion, object separator, and array separator standardization are performed, eliminating references between data objects in program memory, and converting it into linear string serialized data that can be persistently stored and transmitted across modules. After serialization, this string-formatted serialized data is directly defined as the canvas layout data. In this embodiment, by encapsulating various parameters into a universal JSON structured data format, the threshold for data parsing can be lowered, allowing rendering programs in different environments to quickly read and process the data. The serialized data is smaller in size and easier to store and transmit. During the rendering stage, only the serialized data needs to be deserialized to quickly obtain the complete layout configuration without recalculating the component positions and styles, which greatly improves the rendering and loading efficiency of large-screen visualization pages.

[0051] S26: When rendering the large screen to be rendered, call the canvas layout data and extract the canvas size from the canvas layout data. Based on the screen size of the large screen to be rendered and the canvas size, calculate the width scaling factor and the height scaling factor respectively, and take the minimum value of the two as the global scaling factor.

[0052] In step S26, the rendering process involves uniformly scaling all component layout parameters in the canvas layout data, such as position coordinates, size, and font size, according to a global scaling factor. This yields new layout parameters adapted to the current screen size to be rendered. Based on these new scaled layout parameters, each visualization component is sequentially called, and all components are rendered according to the new position and size parameters, ultimately generating a visualization page adapted to the current screen resolution and size. The screen size to be rendered is the physical resolution of the actual display device, including the screen width and height. Based on the screen size to be rendered and the canvas size, width scaling factors and height scaling factors are calculated respectively, and the minimum of the two is taken as the global scaling factor.

[0053] In this embodiment, when rendering the large screen to be rendered, the canvas layout data is called, and the canvas size is extracted from the canvas layout data. When calling the canvas layout data, its JSON string content can be directly parsed to extract the canvas size. When calculating the scaling factor based on the large screen size and the canvas size, the ratio of the large screen size to the canvas size can be used directly. The scaling factor includes a width scaling factor and a height scaling factor. The width scaling factor is calculated based on the ratio of the large screen width to the canvas width, and the height scaling factor is calculated based on the ratio of the large screen height to the canvas height. The minimum of the two is taken as the global scaling factor. By taking the minimum of the width scaling factor and the height scaling factor as the global scaling factor, it is ensured that the canvas content can fully adapt to the display area of ​​the large screen to be rendered after scaling, while preserving the original aspect ratio of the canvas, avoiding stretching and deformation of components and charts, and ensuring the final display effect of the large screen visualization. In this embodiment, when rendering the large screen to be rendered, the canvas layout data is called to extract the canvas size. Based on the screen size and the canvas size, the global scaling factor is calculated so that the component coordinates and sizes on the canvas can be mapped proportionally to the actual large screen, ensuring that the layout maintains a consistent visual effect on display devices with different resolutions.

[0054] S27: Based on the global scaling factor and canvas layout data, dynamically render the large screen to be rendered to obtain the rendered large screen.

[0055] In step S27, dynamic rendering involves real-time proportional transformation of the coordinates, width, height, font, margins, and other parameters of each component in the canvas layout data based on the global scaling factor.

[0056] In this embodiment, based on the global scaling factor and canvas layout data, when dynamically rendering the large screen to be rendered, all components are first traversed to obtain the coordinates and size parameters of each component under the preset canvas. Then, the coordinate values ​​and width and height values ​​are multiplied by the global scaling factor obtained from the current canvas adaptation, and the font size and the margins between components are simultaneously scaled proportionally. After the adjustment is completed, all components are drawn onto the large screen canvas according to the updated parameters, completing the dynamic rendering output of the entire large screen. Through this real-time proportional transformation method, it can be ensured that the content of the large screen maintains the correct proportion and complete display effect on display screens of different sizes and resolutions, avoiding problems such as content distortion, cropping, or excessive white space.

[0057] In this embodiment, dynamic rendering of the large screen to be rendered is performed based on the global scaling factor and canvas layout data, achieving decoupled rendering of component position, appearance, and data. This decoupled design means that when the screen resolution changes, only the global scaling factor needs to be recalculated and the target layout parameters updated, without needing to adjust the style or data configuration of each component individually, significantly improving the system's adaptability and maintainability.

[0058] This application first divides the canvas into rasterized sections, and then automatically calibrates the coordinates of draggable components based on raster rules. It then uses rectangular region detection to determine if components overlap, performing directional avoidance with the raster as the step size. After layout completion, all component parameters are encapsulated into structured serialized data for storage. During the rendering phase, a scaling factor is calculated based on the baseline canvas size and the actual large-screen size. Component parameters are then uniformly scaled proportionally to complete dynamic rendering. This approach abandons the traditional page-by-page independent coding mode for large screens, achieving low-code drag-and-drop layout, automatic component organization, and seamless multi-resolution adaptation, significantly reducing development, adaptation, and maintenance costs, and improving the efficiency of large-screen visualization construction.

[0059] It should be understood that the sequence number of each step in the above embodiments does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present invention.

[0060] In one embodiment, a large-screen visualization device is provided, which corresponds one-to-one with the large-screen visualization method described in the above embodiments. For example... Figure 3 As shown, the large-screen visualization device 30 includes: a construction module 31, a first calculation module 32, a detection module 33, a movement module 34, a collection module 35, a second calculation module 36, and a rendering module 37.

[0061] Module 31 is used to obtain the canvas size of the preset canvas and, based on the canvas size, construct the grid layout information of the preset canvas, which includes grid spacing and layout rules.

[0062] The first calculation module 32 is used to obtain the component coordinates of the component to be laid out that is dragged onto the preset canvas, and calculate the canvas coordinates of the component to be laid out based on the component coordinates, grid spacing and layout rules.

[0063] The detection module 33 is used to detect whether the component area of ​​the component to be laid out overlaps with the component area of ​​the already laid out component, and obtain the detection result.

[0064] The moving module 34 is used to determine the overlapping area if the detection result is overlapping, and move in steps with grid spacing according to the overlapping area until the detection result is non-overlapping, so as to obtain the final canvas coordinates.

[0065] The acquisition module 35 is used to acquire the component size, style parameters and configuration parameters of each component, and encapsulate and serialize the component size, style parameters, configuration parameters and canvas size of each component into canvas layout data.

[0066] The second calculation module 36 is used to call the canvas layout data and extract the canvas size from the canvas layout data when rendering the large screen to be rendered. Based on the screen size and canvas size of the large screen to be rendered, the width scaling factor and height scaling factor are calculated respectively, and the minimum value of the two is taken as the global scaling factor.

[0067] Rendering module 37 is used to dynamically render the large screen to be rendered based on the global scaling factor and canvas layout data, so as to obtain the rendered large screen.

[0068] Optionally, the first computing module 32 includes: The calculation unit is used to calculate the distance between the component to be laid out and the intersection points of each grid cell in the grid cell, based on the component coordinates and grid spacing.

[0069] The determination unit is used to determine the grid intersection point corresponding to the minimum distance as the canvas coordinates of the component to be laid out.

[0070] Optionally, the moving module 34 includes: The first moving unit is used to move the component to be laid out to the right, starting from the canvas coordinates and using the grid spacing as the step, if the overlapping area is a horizontal overlapping area, until the detection result is that it does not overlap, and obtain the final canvas coordinates.

[0071] The second moving unit is used to move the component to be laid out downwards from the canvas coordinates, with the grid spacing as the step size, if the overlapping area is a vertical overlapping area, until the detection result is that it does not overlap, and obtain the final canvas coordinates.

[0072] If the overlapping area includes both horizontal and vertical overlapping areas, then starting from the canvas coordinates, the component to be laid out is moved to the right in steps of grid spacing to eliminate the horizontal overlap, and then moved down until the detection result is no overlap, thus obtaining the final canvas coordinates.

[0073] Optionally, the acquisition module 35 includes: The encapsulation unit is used to encapsulate layout parameters, configuration parameters, style parameters, and canvas size into JSON structured data.

[0074] The serialization unit is used to serialize JSON structured data to obtain serialized data, which is then used as canvas layout data.

[0075] It should be noted that the information interaction and execution process between the above-mentioned units are based on the same concept as the method embodiments of the present invention. For details on their specific functions and technical effects, please refer to the method embodiments section, which will not be repeated here.

[0076] Figure 4 This is a schematic diagram of the structure of a computer device provided in an embodiment of the present invention. Figure 4 As shown, the computer device of this embodiment includes: at least one processor ( Figure 4 (Only one is shown), a memory, and a computer program stored in the memory and executable on at least one processor, wherein the processor executes the computer program to implement the steps in any of the above-described embodiments of the large-screen visualization method.

[0077] This computer device may include, but is not limited to, a processor and memory. Those skilled in the art will understand that... Figure 4 The examples of computer devices are merely examples and do not constitute a limitation on computer devices. Computer devices may include more or fewer components than shown in the illustration, or combinations of certain components, or different components, such as network interfaces, displays, and input devices.

[0078] The processor referred to can be a CPU, but it can also be other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor can be a microprocessor or any conventional processor.

[0079] Memory includes readable storage media, internal memory, etc., wherein internal memory can be the RAM of a computer device, providing an environment for the operation of the operating system and computer-readable instructions stored in the readable storage media. The readable storage media can be the hard drive of a computer device, or in other embodiments, it can be an external storage device of the computer device, such as a plug-in hard drive, Smart Media Card (SMC), Secure Digital (SD) card, or Flash Card. Furthermore, memory can include both internal storage units and external storage devices of a computer device. Memory is used to store the operating system, applications, bootloader, data, and other programs, such as program code for computer programs. Memory can also be used to temporarily store data that has been output or will be output.

[0080] Those skilled in the art will understand that, for the sake of convenience and brevity, the above-described division of functional units and modules is used as an example. In practical applications, the functions described above can be assigned to different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiments can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit. Furthermore, the specific names of the functional units and modules are only for easy differentiation and are not intended to limit the scope of protection of this invention. The specific working process of the units and modules in the above device can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here. If the integrated unit is implemented as a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the present invention can implement all or part of the processes in the methods of the above embodiments by instructing related hardware through a computer program. The computer program can be stored in a computer-readable storage medium, and when executed by a processor, it can implement the steps of the above method embodiments. The computer program includes computer program code, which can be in the form of source code, object code, executable files, or certain intermediate forms. A computer-readable medium can include at least: any entity or device capable of carrying computer program code, a recording medium, a computer memory, read-only memory (ROM), random access memory (RAM), electrical carrier signals, telecommunication signals, and software distribution media. Examples include USB flash drives, portable hard drives, magnetic disks, or optical disks. In some jurisdictions, according to legislation and patent practice, computer-readable media cannot be electrical carrier signals or telecommunication signals.

[0081] The present invention can implement all or part of the processes in the methods of the above embodiments, or it can be accomplished by a computer program product. When the computer program product is run on a computer device, the computer device executes the steps in the above method embodiments.

[0082] In the above embodiments, the descriptions of each embodiment have different focuses. For parts that are not described in detail or recorded in a certain embodiment, please refer to the relevant descriptions of other embodiments.

[0083] Those skilled in the art will recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementations should not be considered beyond the scope of this invention.

[0084] In the embodiments provided by this invention, it should be understood that the disclosed apparatus / computer devices and methods can be implemented in other ways. For example, the apparatus / computer device embodiments described above are merely illustrative. For instance, the division of modules or units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the mutual coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between apparatuses or units may be electrical, mechanical, or other forms.

[0085] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0086] It should be noted that any AI models, software tools, or components not belonging to this company appearing in the embodiments of this application are merely illustrative examples and do not represent actual use. All user personal information involved in the embodiments of this application has been authorized (with the knowledge and consent) by the relevant parties or has been fully authorized by all parties, and the executing entity may obtain it through various legal and compliant means. The collection, storage, use, processing, transmission, provision, and disclosure of the information, data, and signals involved all comply with relevant laws and regulations and do not violate public order and good morals.

[0087] The above embodiments are only used to illustrate the technical solutions of the present invention, and are not intended to limit it. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be included within the protection scope of the present invention.

Claims

1. A large-screen visualization method, characterized in that, The large-screen visualization method includes: Obtain the canvas size of the preset canvas, and based on the canvas size, construct the grid layout information of the preset canvas, wherein the grid layout information includes grid spacing and layout rules; Obtain the component coordinates of the component to be laid out that has been dragged onto the preset canvas, and calculate the canvas coordinates of the component to be laid out based on the component coordinates, the grid spacing and the layout rules; The detection results are obtained by detecting whether the component area of ​​the component to be laid out overlaps with the component area of ​​the already laid out component. If the detection result is overlapping, then the overlapping area is determined, and based on the overlapping area, the grid spacing is used as the step size to move until the detection result is non-overlapping, thus obtaining the final canvas coordinates; Collect the component size, style parameters, and configuration parameters of each component, and encapsulate and serialize the component size, style parameters, configuration parameters, and canvas size of each component into canvas layout data; When rendering the large screen to be rendered, the canvas layout data is called and the canvas size in the canvas layout data is extracted. Based on the screen size of the large screen to be rendered and the canvas size, the width scaling factor and the height scaling factor are calculated respectively, and the minimum value of the two is taken as the global scaling factor. Based on the global scaling factor and the canvas layout data, the large screen to be rendered is dynamically rendered to obtain the rendered large screen.

2. The large-screen visualization method as described in claim 1, characterized in that, The step of calculating the canvas coordinates of the component to be laid out based on the component coordinates, the grid spacing, and the layout rules includes: Based on the component coordinates and the grid spacing, the distance between the component to be laid out and the intersection points of each grid cell is calculated; The grid intersection point corresponding to the minimum distance is determined as the canvas coordinates of the component to be laid out.

3. The large-screen visualization method as described in claim 1, characterized in that, The overlapping area includes a horizontal overlapping area and a vertical overlapping area; The step of moving the grid with the grid spacing as the step size according to the overlapping area until the detection result is non-overlapping, to obtain the final canvas coordinates, includes: If the overlapping area is a horizontal overlapping area, then starting from the canvas coordinates, the component to be laid out is moved to the right with the grid spacing as the step size until the detection result is non-overlapping, and the final canvas coordinates are obtained. If the overlapping area is a vertical overlapping area, then starting from the canvas coordinates, the component to be laid out is moved downwards with the grid spacing as the step size until the detection result is non-overlapping, and the final canvas coordinates are obtained. If the overlapping area includes both horizontal and vertical overlapping areas, then starting from the canvas coordinates, the component to be laid out is moved to the right to eliminate the horizontal overlap, with the grid spacing as the step size, and then moved downwards until the detection result is no overlap, thus obtaining the final canvas coordinates.

4. The large-screen visualization method as described in claim 1, characterized in that, The step of encapsulating and serializing the component size, style parameters, configuration parameters, and canvas size of each component into canvas layout data includes: The component size, style parameters, configuration parameters of each component, and the canvas size are encapsulated into JSON structured data; The JSON structured data is serialized to obtain serialized data, which is then used as the canvas layout data.

5. A large-screen visualization device, characterized in that, The large-screen visualization device includes: A construction module is used to obtain the canvas size of a preset canvas and construct the grid layout information of the preset canvas based on the canvas size. The grid layout information includes grid spacing and layout rules. The first calculation module is used to obtain the component coordinates of the component to be laid out that is dragged onto the preset canvas, and calculate the canvas coordinates of the component to be laid out based on the component coordinates, the grid spacing and the layout rules. The detection module is used to detect whether the component area of ​​the component to be laid out overlaps with the component area of ​​the already laid out component, and to obtain the detection result; The moving module is used to determine the overlapping area if the detection result is overlapping, and move according to the overlapping area with the grid spacing as the step size until the detection result is non-overlapping, so as to obtain the final canvas coordinates; The acquisition module is used to collect the component size, style parameters and configuration parameters of each component, and encapsulate and serialize them into canvas layout data in combination with the canvas size. The second calculation module is used to call the canvas layout data and extract the canvas size from the canvas layout data when rendering the large screen to be rendered. Based on the screen size of the large screen to be rendered and the canvas size, the module calculates the width scaling factor and the height scaling factor respectively, and takes the minimum value of the two as the global scaling factor. The rendering module is used to dynamically render the large screen to be rendered based on the global scaling factor and the canvas layout data, so as to obtain the rendered large screen.

6. The large-screen visualization device as described in claim 5, characterized in that, The first computing module includes: The calculation unit is used to calculate the distance between the component to be laid out and the intersection points of each grid cell in the grid cell based on the component coordinates and the grid spacing. The determining unit is used to determine the grid intersection point corresponding to the minimum distance as the canvas coordinates of the component to be laid out.

7. The large-screen visualization device as described in claim 5, characterized in that, The mobile module includes: The first moving unit is used to move the component to be laid out to the right, starting from the canvas coordinates and using the grid spacing as the step size, if the overlapping area is a horizontal overlapping area, until the detection result is non-overlapping, and obtain the final canvas coordinates. The second moving unit is used to move the component to be laid out downwards from the canvas coordinates, with the grid spacing as the step size, if the overlapping area is a vertical overlapping area, until the detection result is non-overlapping, and obtain the final canvas coordinates. If the overlapping area includes both horizontal and vertical overlapping areas, then starting from the canvas coordinates, the component to be laid out is moved to the right to eliminate the horizontal overlap, with the grid spacing as the step size, and then moved downwards until the detection result is no overlap, thus obtaining the final canvas coordinates.

8. The large-screen visualization device as described in claim 5, characterized in that, The acquisition module includes: The encapsulation unit is used to encapsulate the layout parameters, the configuration parameters, the style parameters, and the canvas size into JSON structured data; The serialization unit is used to serialize the JSON structured data to obtain serialized data, and to use the serialized data as the canvas layout data.

9. A computer device, characterized in that, The computer device includes a processor, a memory, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the large-screen visualization method as described in any one of claims 1 to 4.

10. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by the processor, it implements the large-screen visualization method as described in any one of claims 1 to 4.

Images