Screen page self-adaptive display method, device, system, equipment and storage medium

Abstract

The application discloses a screen page adaptive display method, device, system, equipment and storage medium, and related embodiments can be applied to mobile terminals, large-screen devices, vehicle-mounted terminals and the like. The method comprises the following steps: obtaining to-be-displayed data of a screen, and extracting canvas information and component information therefrom; when it is determined through a man-machine interaction window that a page needs to be adaptively displayed based on the screen, the size of the screen is obtained; the layout type of the component on the canvas is determined according to the canvas information and the component information; the component information is reconfigured according to the configuration rule corresponding to the layout type, the canvas information is reconfigured according to the size of the screen, and updated to-be-displayed data is obtained; and a page is generated and displayed based on the updated to-be-displayed data. Through adaptive processing of the to-be-displayed data, a page matched with the screen can be generated, so that the original layout effect of the component is maintained in the full-screen display page. Further, the visual display effect of data in the component is ensured.

Description

Technical Field

[0001] This application relates to the field of data visualization technology, and in particular to a method, apparatus, system, device, and storage medium for adaptive screen page display. Background Technology

[0002] With the rapid growth of data volume across all industries, the demand for data visualization has expanded dramatically. Data visualization has become a major research focus. In monitoring centers, dispatch centers, command centers, and other similar locations, large-screen data display systems have become indispensable core facilities. These systems can display data through charts and other components on a page, helping users efficiently discover the relationships, patterns, and trends behind the data.

[0003] In traditional page display solutions, the designed canvas and component layout are directly scaled to create a page that fills the entire screen. However, when there is a difference between the screen ratio and the canvas ratio, several problems may occur in the directly scaled page. Here are three examples: 1. Components deviate from their original positions in the designed layout; 2. Components become deformed; 3. Components are not fully displayed. The following section discusses these issues in conjunction with... Figures 1 to 4 The results of the above three problem scenarios are illustrated and explained.

[0004] Figure 1 This demonstrates a layout illustration of a well-designed canvas and its components. Figure 1 In the example, the canvas and component A are related in terms of position and layout; component A is located in the upper right corner of the canvas. Based on... Figure 1 The layout effect, using traditional page display methods, may produce the following results. Figures 2 to 4 Choose any one of the page display effects. Figure 2 The displayed component A is offset from the top right corner of the screen, compared to... Figure 1 In the layout shown, component A is more centered. Figure 3 The font of component A shown is compared to Figure 1 The font in component A is stretched. Figure 4 The displayed component A only shows part of the text; the rest is not included in the screen. The reason for this problem is that in traditional page display solutions, although the components and canvas have been laid out, the difference between the screen ratio and the canvas ratio means that when generating a full-screen page, the original layout cannot be adapted to the screen ratio difference.

[0005] As illustrated by the examples above, displaying pages using traditional page display techniques can easily lead to a mismatch between the actual layout of components and the original design, thus affecting the visualization of data. How to adaptively maintain the original component and canvas layout on a full-screen page has become a pressing technical problem in data visualization scenarios. Summary of the Invention

[0006] This application provides a screen page adaptive display method, apparatus, system, device, and storage medium to adaptively maintain the original designed components and canvas layout on the displayed page, thereby improving the data visualization display effect.

[0007] The first aspect of this application provides a method for adaptive display of a screen page, the method comprising:

[0008] Obtain the data to be displayed on the screen;

[0009] Canvas information and component information are extracted from the data to be displayed; the canvas information includes the canvas size, and the component information includes the size, position, and positioning type of the components laid out on the canvas;

[0010] When it is determined through the human-computer interaction window that the page needs to be displayed adaptively based on the screen, the size of the screen is obtained; the size of the screen, the size of the canvas, and the size of the component are all expressed in resolution units.

[0011] The layout type of the component on the canvas is determined based on the canvas information and the component information;

[0012] The component information is reconfigured according to the configuration rules corresponding to the layout type, and the canvas information is reconfigured according to the screen size to obtain the updated data to be displayed;

[0013] Generate a page based on the updated data to be displayed;

[0014] The generated page is displayed on the screen.

[0015] A second aspect of this application provides a screen page adaptive display device, the device comprising:

[0016] The data acquisition unit is used to acquire the data to be displayed on the screen.

[0017] The canvas component information extraction unit is used to extract canvas information and component information from the data to be displayed; the canvas information includes the canvas size, and the component information includes the size, position, and positioning type of the components laid out on the canvas;

[0018] The screen size acquisition unit is used to acquire the screen size when it is determined through the human-computer interaction window that the page needs to be displayed adaptively based on the screen; the screen size, the canvas size, and the component size are all expressed in resolution units;

[0019] A layout type determination unit is used to determine the layout type of the component on the canvas based on the canvas information and the component information;

[0020] The data update unit is used to reconfigure the component information according to the configuration rules corresponding to the layout type, and reconfigure the canvas information according to the screen size to obtain the updated data to be displayed;

[0021] A page generation unit is used to generate a page based on the updated data to be displayed.

[0022] A display unit is used to display the generated page on the screen.

[0023] A third aspect of this application provides a screen-adaptive page display system, the system including a display with a screen, and further including:

[0024] The page editor is used to respond to visual operation commands for components and complete the layout of components on the canvas;

[0025] A responsive layout rule system is used to acquire screen data to be displayed; extract canvas information and component information from the data to be displayed; the canvas information includes the canvas size, and the component information includes the size, position, and positioning type of the components laid out on the canvas; display a human-computer interaction window through the display; when it is determined through the human-computer interaction window that the page needs to be displayed adaptively based on the screen, acquire the screen size; the screen size, canvas size, and component size are all expressed in resolution units; determine the layout type of the components on the canvas according to the canvas information and component information; reconfigure the component information according to the configuration rules corresponding to the layout type, and reconfigure the canvas information according to the screen size to obtain updated data to be displayed;

[0026] The page management module is used to generate a page based on the updated data to be displayed, so that the screen can display it.

[0027] A fourth aspect of this application provides a computer device, comprising: the device including a processor and a memory:

[0028] The memory is used to store program code and transmit the program code to the processor;

[0029] The processor is used to execute the screen page adaptive display method described in the first aspect according to the instructions in the program code.

[0030] The fifth aspect of this application provides a computer-readable storage medium for storing program code for executing the screen page adaptive display method described in the first aspect.

[0031] As can be seen from the above technical solutions, the embodiments of this application have the following advantages:

[0032] In this embodiment, the screen's display data is obtained; canvas information and component information are extracted from the display data; when it is determined through the human-computer interaction window that the page needs to be adaptively displayed based on the screen, the screen size is obtained. Then, the layout type of the components on the canvas is determined by analyzing the canvas and component information, and this layout type guides the subsequent page generation operation. Specifically, the component information is reconfigured according to the configuration rules corresponding to the layout type, and the canvas information is reconfigured according to the screen size to obtain updated display data. Since the component information is reconfigured according to the configuration rules corresponding to the component layout type, and the canvas size is also adjusted according to the screen, the updated display data helps the components maintain their original layout effect on the canvas in the displayed page. For example, if the original layout type component is positioned along the upper right corner of the canvas, even if the canvas ratio is different from the screen ratio, by implementing the technical solution of this application to generate the page, the component can still be positioned in the upper right corner of the page, thus ensuring the visualization effect of the data in the component. As can be seen, the technical solution of this application enables the components to maintain the original design layout effect when displayed on the screen, adapting to the screen size. Attached Figure Description

[0033] Figure 1 This is a schematic diagram illustrating the layout effect of a pre-designed canvas and components.

[0034] Figure 2 A diagram illustrating the deviation of a component from its original, pre-designed layout.

[0035] Figure 3 A diagram illustrating how components deform compared to the designed layout.

[0036] Figure 4 This is a diagram illustrating how components are not fully displayed compared to the designed layout.

[0037] Figure 5 A flowchart of a screen page adaptive display method provided in this application embodiment;

[0038] Figure 6AA flowchart illustrating the process of creating and configuring the layout of components and displaying a page, provided for embodiments of this application;

[0039] Figure 6B Another flowchart for the screen-adaptive page display method;

[0040] Figure 7A A flowchart illustrating the process of dynamically configuring component layout through different visual operations, provided for embodiments of this application;

[0041] Figure 7B A flowchart illustrating the method for implementing adaptive page display based on dynamically laid-out components.

[0042] Figure 8 A schematic diagram of the interface of the visual configuration page provided in the embodiments of this application;

[0043] Figure 9 A schematic diagram of the editing window displayed when creating a page, as provided in the embodiments of this application;

[0044] Figure 10 A schematic diagram of the interface of the editing component provided in the embodiments of this application;

[0045] Figure 11 A schematic diagram of a screen page adaptive display device provided in this application embodiment;

[0046] Figure 12 A schematic diagram of a screen page adaptive display system structure provided in this application embodiment;

[0047] Figure 13 This is a schematic diagram of the server structure in an embodiment of this application;

[0048] Figure 14 This is a schematic diagram of the structure of a terminal device in an embodiment of this application. Detailed Implementation

[0049] Traditional page display technologies struggle to adaptively adjust component layouts according to screen size or aspect ratio, potentially resulting in poor data display within components due to the aforementioned issues. (See also...) Figures 2 to 4 To address this issue, embodiments of this application provide a screen-adaptive page display method, apparatus, system, device, and storage medium. The technical solution of this application can maintain the layout of the originally designed components on the canvas in the full-screen display page, even when there is a difference between the screen's aspect ratio and the canvas's aspect ratio, thus ensuring the effective visualization of data.

[0050] The technical solutions described in this application can be applied to mobile terminals, large-screen devices, and vehicle terminals. Specific application scenarios are not limited to artificial intelligence, smart transportation, assisted driving, and cloud technology, all of which may require displaying data through screen pages.

[0051] Intelligent Traffic Systems (ITS), also known as Intelligent Transportation Systems, effectively integrate advanced science and technology (information technology, computer technology, data communication technology, sensor technology, electronic control technology, automatic control theory, operations research, artificial intelligence, etc.) into transportation, service control, and vehicle manufacturing. This strengthens the connection between vehicles, roads, and users, thereby forming a comprehensive transportation system that ensures safety, improves efficiency, enhances the environment, and saves energy.

[0052] Intelligent Vehicle Infrastructure Cooperative Systems (IVICS) are a development direction of Intelligent Transportation Systems (ITS). IVICS utilizes advanced wireless communication and next-generation Internet technologies to implement comprehensive, real-time dynamic information exchange between vehicles and infrastructure. Based on the collection and fusion of dynamic traffic information across all times and spaces, it conducts active vehicle safety control and cooperative road management, fully realizing effective collaboration between people, vehicles, and roads. This ensures traffic safety, improves traffic efficiency, and ultimately forms a safe, efficient, and environmentally friendly road traffic system.

[0053] The aforementioned adaptive screen display can be applied to processing devices that communicate with the screen, such as terminal devices or servers. This method can be executed independently by the terminal device or server, or it can be applied to network scenarios where the terminal device and server communicate, operating in cooperation. The terminal device can be a mobile phone, desktop computer, personal digital assistant (PDA), tablet computer, smart home appliance, smart voice interaction device, etc. The server can be understood as an application server or a web server. In actual deployment, the server can be a standalone physical server, a server cluster consisting of multiple physical servers, or a distributed system. The terminal and server can be connected directly or indirectly via wired or wireless communication; this application does not impose any restrictions on this connection.

[0054] The specific implementation of the scheme is described below with reference to an example. See also Figure 5This figure is a flowchart of a screen page adaptive display method provided in an embodiment of this application. Figure 5 The methods shown include:

[0055] S501: Obtain the data to be displayed on the screen.

[0056] In this embodiment, a human-computer interaction interface is provided, through which users can configure the canvas, components, and data source. After configuration, the processing device mentioned above can collect the data to be displayed on the screen.

[0057] Specifically, the human-computer interaction interface displays a layout preview window and an editing window. The editing window allows users to configure the canvas, components, and data source through interactive operations. The layout preview window displays a real-time preview image or a preview image generated after configuration is triggered. For example, if the size of a component on the canvas is enlarged, the layout preview window can display the enlarged effect of that component. Additionally, users can perform visual operations on components, such as deleting, adding, dragging, and scaling. These commands can also be used to configure components.

[0058] S502: Extract canvas information and component information from the data to be displayed.

[0059] The key information for page display in the data to be displayed is the canvas information and component information. Therefore, in order to facilitate the subsequent generation of the page, it is necessary to extract the canvas information and component information from the data to be displayed.

[0060] Canvas information includes canvas size, and component information includes the size, position, and positioning type of the components laid out on the canvas.

[0061] In this embodiment, the canvas information includes the canvas size, specifically the canvas width and height. The component information includes the size, position, and positioning type of the components laid out on the canvas. The component size includes the component width and component height. For ease of distinction, in the following text, the canvas width and canvas height will be represented by `canvasWidth` and `canvasHeight`, respectively, and the component width and component height will be represented by `componentWidth` and `componentHeight`, respectively.

[0062] When representing the position of components on the canvas, a vertex on the canvas is used as the origin. In practical applications, any one of the top-left, bottom-left, top-right, or bottom-right vertex of the canvas can be used as the origin. For ease of understanding, the following example uses the top-left vertex of the canvas as the origin for component positioning. The vertex on the canvas used as the origin can be manually set, or a certain vertex can be used as the default origin.

[0063] A component's positioning type (positionType) includes one of the following: top-left, top-bottom, right-top, and right-bottom. The positioning type indicates the vertex that serves as the origin among multiple vertices of the canvas. For example, if the component's position is based on the top-left vertex of the canvas, its positioning type is top-left; if it's based on the bottom-left vertex, its positioning type is bottom-left; if it's based on the top-right vertex, its positioning type is top-right; and if it's based on the bottom-right vertex, its positioning type is bottom-right.

[0064] S503: When it is determined through the human-computer interaction window that the page needs to be displayed adaptively based on the screen, obtain the screen size.

[0065] The human-computer interaction window can be an editing window or another window displayed on the interface, such as a new pop-up. The human-computer interaction window can have graphical controls, such as switches, that allow the user to determine whether the page should be displayed adaptively to the screen size. When the switch is triggered and turned on, it indicates that the page should be displayed adaptively to the screen size; otherwise, the page can be directly scaled according to the current layout configuration to generate the displayed page. Additionally, the form in which the user can determine the display intention in the human-computer interaction window can also be a drop-down menu, a checkbox, etc. There are no limitations here.

[0066] The screen dimensions include screen width and screen height, represented by `windowWidth` and `windowHeight`, respectively. The screen dimensions, canvas dimensions, and component dimensions are all expressed in resolution units. In the embodiments of this application, the screen dimensions, canvas dimensions, and component dimensions are all expressed in resolution units. As an example, the unit of representation for the above dimensions is pixels (px). For example, a screen size of 1000px × 800px means a screen width of 1000px and a screen height of 800px.

[0067] The screen size directly affects the compatibility with the original canvas and components. Therefore, in order to maintain the original layout effect well in the displayed page after determining that the page needs to be displayed adaptively based on the screen, it is necessary to obtain the screen size and then complete the subsequent page generation operation.

[0068] S504: Determine the layout type of the component on the canvas based on the canvas information and component information.

[0069] In this embodiment, the component information and canvas information reflect the layout effect of the original canvas and components. To maintain the original layout effect when displaying the page in full screen, this step is necessary to determine the layout type of the components in the original design. The layout type largely reflects the layout effect.

[0070] This application's embodiments list the following possible layout types for components: full-screen layout, centered layout, bottom-left corner layout, top-right corner layout, bottom-right corner layout, and top-left corner layout. The layout type of a component can be determined by calculation based on the canvas size, the component's size, and the component's position.

[0071] In one optional implementation, a pre-built set of layout type determination conditions is constructed, including multiple layout type determination conditions, each corresponding to a different layout type of the component. When it is necessary to determine the layout type of a component, the layout type determination conditions are traversed from the set of layout type determination conditions. Since the layout type determination conditions are based on canvas size and component information, it is possible to determine whether the traversed layout type determination conditions are satisfied based on the canvas size, component size, and component position. For ease of explanation, the layout type determination conditions satisfied by the component can be used as target determination conditions. Since each layout type determination condition uniquely corresponds to a layout type, the layout type corresponding to the target determination condition can be determined as the layout type of the component through the target determination condition and the correspondence between the determination conditions and layout types. For example, if the component satisfies the determination condition corresponding to the center layout layout, then the component's layout type on the canvas is a center layout.

[0072] It should be noted that before S504 is executed, the component's layout type is the default layout type, which can be one of the following: full-screen layout, centered layout, bottom-left layout, top-right layout, bottom-right layout, or top-left layout. As an example, the top-left layout is used as the default layout type. However, through the implementation of S504, it can be found that the actual determined component layout type may differ from the default layout type. Therefore, to maintain the original component layout design, it is necessary to reconfigure the component information based on the layout type determined by S504, thereby completing the page generation. See S505-S506 for details.

[0073] In this example, the default value for the component's positioning type (which is one of top-left, top-bottom, right-top, and right-bottom) is top-left. That is, the top-left corner of the canvas is used as the origin of the component's positioning. The component's positioning point is its top-left corner. The component's position information is determined based on its positioning point and the vertex on the canvas that serves as the origin. The component's position includes: the horizontal coordinate (positionX) and vertical coordinate (positionY) of the component's positioning point relative to the origin on the canvas.

[0074] The layout type determination condition set introduced earlier can be specifically determined based on the component's positioning type. Different positioning types may correspond to different layout type determination condition sets. Therefore, in the specific implementation of S504, it can be that the layout type determination condition set corresponding to the positioning type of the component is first determined based on the component's positioning type. Then, based on the canvas size, the component's size and position, each layout type determination condition is traversed in the layout type determination condition set to determine the layout type determination condition satisfied by the component as the target determination condition; the layout type corresponding to the target determination condition is determined as the layout type of the component.

[0075] S505: Reconfigure component information according to the configuration rules corresponding to the layout type, and reconfigure canvas information according to the screen size to obtain updated data to be displayed.

[0076] The determination criteria and corresponding configuration rules for several different layout types are listed below:

[0077] a. Full-screen layout

[0078] Judgment criteria: The absolute values ​​of the component's horizontal coordinate, vertical coordinate, the difference between the canvas width and component width, and the difference between the canvas height and component height are all less than or equal to a preset threshold. For example, if the preset threshold is 5px, then judgment criterion 'a' is mathematically represented as:

[0079] Math.abs(positionX)<=5px&&Math.abs(positionY)<=5px&&Math.abs(canvasWidth-componentWidth)<=5px&&Math.abs(canvasHeight-componentHeight)<=5px

[0080] The preset threshold can be set based on actual needs; no numerical limit is specified for the preset threshold here. The preset threshold represents the allowable error range; the smaller the allowable error range, the smaller the preset threshold can be set.

[0081] Configuration rules: Reconfigure the component width and height to the screen width and height respectively, and reconfigure the horizontal and vertical coordinates to 0. Specifically: (componentWidth, componentHeight, positionType, positionX, positionY) = (windowWidth, windowHeight, 'top-left', 0, 0).

[0082] b. Centered layout

[0083] Judgment criterion: The absolute value of the first difference is less than or equal to a preset threshold. The first difference is obtained by subtracting half the component width from the difference between half the canvas width and the horizontal coordinate. Using a preset threshold of 5px as an example, the mathematical expression of judgment criterion b is:

[0084] Math.abs(canvasWidth / 2-positionX-componentWidth / 2)<=5px

[0085] Configuration rule: Reconfigure the horizontal coordinate to half the difference between the width and the component width. Specifically: (positionType, positionX, positionY) = ('top-left', (windowWidth-componentWidth) / 2, positionY).

[0086] c. Bottom left corner layout

[0087] Judgment criterion: The second difference is less than or equal to the product of the canvas height and the preset coefficient, and the horizontal axis is less than half the canvas width. The second difference is obtained by subtracting the component height from the difference between the canvas height and the vertical axis. Using a preset coefficient of 0.1 as an example, the mathematical expression of judgment criterion c is:

[0088] (canvasHeight-positionY-componentHeight)<=canvasHeight*0.1&&positionX <canvasWidth / 2

[0089] The preset coefficient can also be set according to actual needs; there is no limit to the value of the preset coefficient here.

[0090] Configuration rules: Reconfigure the positioning type to lower left positioning, which indicates that the lower left corner of the canvas is the origin, and reconfigure the ordinate to the second difference value.

[0091] Specifically: (positionType, positionX, positionY) = ('bottom-left', positionX, canvasHeight-positionY-componentHeight).

[0092] d. Bottom right corner layout

[0093] Judgment criterion: The second difference is less than or equal to the product of the canvas height and the preset coefficient, and the horizontal coordinate is greater than half the canvas width. The mathematical expression for judgment criterion d is:

[0094] (canvasHeight-positionY-componentHeight)<=canvasHeight*0.1&&positionX>canvasWidth / 2

[0095] Configuration rules: Reconfigure the positioning type to bottom-right positioning, indicating that the bottom-right corner of the canvas is the origin; reconfigure the horizontal coordinate to the third difference value; reconfigure the vertical coordinate to the second difference value; the third difference value is obtained by subtracting the component width from the difference between the canvas width and the horizontal coordinate. Specifically: (positionType, positionX, positionY) = ('bottom-right', canvasWidth-position-componentWidth, canvasHeight-positionY-componentHeight).

[0096] e. Top right corner layout

[0097] Judgment criteria: The horizontal coordinate of the component is greater than half the width of the canvas, and the component's layout type is not a bottom-right layout. The first condition is mathematically expressed as:

[0098] positionX>canvasWidth / 2

[0099] Configuration rules: Reconfigure the positioning type to top-right positioning, indicating that the top-right corner of the canvas is the origin, and reconfigure the horizontal coordinate to the third difference value. Specifically: (positionType, positionX, positionY) = ('top-right', canvasWidth-positionX-componentWidth, positionY).

[0100] f. Top left corner layout

[0101] Judgment criteria: The component's layout type does not belong to full-screen layout, center layout, bottom left corner layout, top right corner layout, bottom right corner layout, and top left corner layout, that is, it does not meet the above judgment criteria a to e.

[0102] Configuration rule: Do not change component information.

[0103] The examples above illustrate how, in scenarios where the default layout type is top-left local and the default positioning type is top-left positioning, the component information is reconfigured based on the configuration strategy corresponding to the actual determined layout type when the actual determined layout type differs from the default layout type. Of course, the layout type determination conditions and configuration rules mentioned above may change when the default layout type is another layout type and / or the component's default positioning type is another positioning type.

[0104] To generate a page that adapts to the screen, the canvas size also needs to be adjusted. Specifically, when the canvas size differs from the screen size, the canvas size is changed to match the screen size. The canvas width and height are then configured to match the screen width and height, respectively, making the canvas size full-screen as {windowWidth, windowHeight}.

[0105] The above reconfiguration of canvas and component information completes the update of the data to be displayed.

[0106] S506: Generate a page based on the updated data to be displayed.

[0107] Set the canvas's position property to relative; configure the component's layout properties based on the updated component information in the data to be displayed, including setting the component's position property to absolute. Finally, based on the canvas and component's position properties and layout properties, render a screen-fitted page using Cascading Style Sheets (CSS) absolute positioning layout technology.

[0108] CSS (Cascading Style Sheets) is a computer language used to style HTML (an application of Standard Generalized Markup Language) or XML (a subset of Standard Generalized Markup Language) documents. CSS can not only statically format web pages, but also dynamically format elements on a webpage in conjunction with various scripting languages. CSS allows for pixel-level precise control over the layout and positioning of elements on a webpage, supports almost all font sizes and styles, and has the ability to edit the styles of webpage objects and models.

[0109] The steps for configuring the layout properties of the components mentioned above are as follows:

[0110] If the component's layout type is fullscreen layout, then the component's CSS layout properties (position, left, top, width, height) are ('absolute', 0, 0, componentWidth, componentHeight).

[0111] If the component's layout type is center layout, then the component's CSS layout properties (position, left, top, width, height) are ('absolute', positionX, positionY, componentWidth, componentHeight).

[0112] If the component's layout type is bottom-left layout and its positionType is bottom-left, then the component's CSS layout properties (position, left, bottom, width, height) are ('absolute', positionX, positionY, componentWidth, componentHeight).

[0113] If the component's layout type is bottom right layout and its positionType is bottom-right, then the component's CSS layout properties (position, right, bottom, width, height) are ('absolute', positionX, positionY, componentWidth, componentHeight).

[0114] If the component's layout type is top-right and its positionType is top-right, then the component's CSS layout properties (position, right, top, width, height) are ('absolute', positionX, positionY, componentWidth, componentHeight).

[0115] If the component's layout type is the default top-left layout and its positionType is top-left (the default value), then the component's CSS layout properties (position, left, top, width, height) are ('absolute', positionX, positionY, componentWidth, componentHeight).

[0116] In the foregoing embodiments, for ease of explanation, each example uses a single component. All components laid out on the canvas can be grouped into a component list. When performing the above operations, the list can be traversed, and corresponding operations can be performed on each component in the list, thereby generating the page based on the results of the operations.

[0117] S507: Display the generated page on the screen.

[0118] After generating the page, it can be displayed in full screen. The layout of the components in the display will be consistent with or similar to the expected layout of the components as configured in the initial layout information. This solves the problem. Figures 2 to 4 The data visualization of various components shown is not performing well.

[0119] In this embodiment, the screen's data to be displayed is obtained, and canvas information and component information are extracted from it. When it is determined that the page needs to be adaptively displayed based on the screen, the screen size is obtained. The layout type of the component on the canvas is determined based on the canvas information and component information. The component information is reconfigured according to the configuration rules corresponding to the layout type, and the canvas information is reconfigured according to the screen size to obtain updated data to be displayed. A page is generated and displayed based on the updated data to be displayed. Through this adaptive processing of the data to be displayed, a page matching the screen can be generated, thus maintaining the original layout effect of the components in a full-screen display. This ensures the visualization effect of the data in the components.

[0120] In the embodiments of this application, Figure 5 The screen-based adaptive page display method shown can be used as a page display method that can be optionally enabled. For example, when enabled, the following steps are executed: Figure 5 The process is illustrated with the steps shown. When this step is not selected, other default page display methods are used, such as a simple scaling algorithm based on the initial layout configuration information. The canvas and its components are then tiled across the entire screen. In this approach, if the screen ratio and canvas ratio are inconsistent, it may cause issues. Figures 2 to 4 The issue of visual data display is illustrated. In an optional implementation, a graphical control-style switch is set in the window (human-computer interaction window) of the visual layout component. The layout type of the component is determined based on the canvas information and component information, including: when the switch is triggered and in the on state, the layout type of the component is determined based on the canvas information and component information. Otherwise, if the switch is in the off state, a scaling method is used to generate a page for display based on the initial layout configuration information.

[0121] As mentioned in step S501 of the embodiment described above, component information needs to be configured. In a specific implementation, this can involve receiving visual operation instructions applied to the components; these instructions control the layout of the components on the canvas. Visual operation instructions can be commands for adding, deleting, dragging, scaling, etc., used to add, delete, drag, or scale components. After receiving the visual operation instructions, the new size and / or new position of the components can be obtained based on the canvas size, the initial size and position of the components, and the type and parameters of the visual operation instructions. Finally, the new size and / or new position is updated in the component information displayed in the editing window. The type of visual operation instruction can be adding, deleting, dragging, or scaling. The parameters of the visual operation instructions can be the displacement, addition position, dragging direction, dragging distance, scaling factor, etc.

[0122] Before receiving visual operation instructions applied to a component, it's necessary to determine the object of the visual operation instructions, i.e., the component. Specifically, the component can be determined based on the selection operation applied to a component in the component library; or, it can be determined based on the selection operation applied to a component on the canvas. This approach primarily targets components already existing in the component library that require layout operations. In practical applications, for components not present in the component library, they need to be created and added to the component library for visual layout operations.

[0123] Figure 6A This is a flowchart illustrating the process of creating, laying out, configuring, and displaying components on a page. For example... Figure 6A As shown, the process is mainly divided into two parts: the process executed in the page editor and the process executed in the component editor. In the page editor, the page is first laid out, which is equivalent to creating or editing a large-screen application in preparation for page generation. Then, the required components are selected from the component library. If the component does not exist in the component library, it needs to be developed through the component editor, selecting the icon type, such as line chart, bar chart, pie chart, area chart, map, dashboard, relationship diagram, geographic visualization, etc. The data source chart visual configuration is configured, and then a preview chart is generated based on the chart type and configuration. The component configuration is then saved to the component library. During this process, component debugging may also be involved. After debugging, it is added to the component library. If the required components are present in the component library, optional required components are added to the canvas during layout. The components are placed in the specified positions on the canvas through visual operations to complete the layout. Finally, the on / off state of the switch in the visual layout component window (a human-computer interaction window) determines whether it is enabled. Figure 5The page display method shown reconfigures component and canvas information. When enabled, it adaptively updates the configuration based on the acquired data to be displayed, and executes... Figure 5 The method flow shown; when not enabled, directly scale the layout canvas and components to generate a page that fills the screen.

[0124] Combining the user's visual editing operations of components in human-computer interaction scenarios, the following will demonstrate... Figure 6B Another flowchart illustrating the screen-responsive page display method. See also Figure 6B The method includes:

[0125] S601: Creates a blank page in response to a page creation operation.

[0126] The page creation operation can be implemented by the user triggering the page creation module. Simultaneously, a window pops up to edit the page's name and notes. Users can manually name and add notes to the newly created page.

[0127] S602: Displays the layout effect preview window and editing window.

[0128] S603: In response to a selection of the canvas, display the canvas's optional configuration options in the editing window.

[0129] For example, the color, texture, and size of the canvas.

[0130] S604: Obtain canvas information in response to triggering and / or editing operations performed on optional configuration items on the canvas.

[0131] S605: In response to the selection of a target component in the component library, the target component is determined as the object to be edited.

[0132] The selection can be achieved by clicking, or by using other supported methods.

[0133] S606: Obtain component information in response to triggering and / or editing operations on optional configuration items of the target component; or obtain component information in response to visualization operations on the target component.

[0134] S607: In response to an edit operation or path link applied to the data source import box of the target component, obtain the data source of the component.

[0135] S608: Generate a preview image based on the canvas information, the component information of all components on the canvas, and the data source corresponding to the component, and display the preview image through the layout effect preview window.

[0136] S609: When the layout configuration is confirmed through the human-computer interaction window, generate the data to be displayed based on the canvas information, the component information of all components on the canvas, and the data source corresponding to the components.

[0137] In this step, the human-computer interaction window can be a window that confirms the user's intention to display the page adaptively based on the screen, or it can be any other human-computer interaction window. Here, the way to allow the user to select the layout configuration can be a graphical control provided in the window with the words "Confirm current layout configuration effect". When the user triggers this control, it indicates that the user has confirmed the layout of the components and canvas in the preview image.

[0138] S610: Extract canvas information and component information from the data to be displayed.

[0139] S611: When it is determined through the human-computer interaction window that the page needs to be displayed adaptively based on the screen, obtain the screen size.

[0140] S612: Determine the layout type of the component on the canvas based on the canvas information and component information.

[0141] S613: Reconfigure component information according to the configuration rules corresponding to the layout type, and reconfigure canvas information according to the screen size to obtain updated data to be displayed.

[0142] S614: Generates a page based on the updated data to be displayed and displays it on the screen. The impact of various visualization operations on layout configuration is described below. Figure 7A This is a flowchart illustrating the process of dynamically configuring component layout through different visual operations. For example... Figure 7A As shown, when components need to be laid out, the canvas is first initialized, then the canvas width and height are calculated, and the absolute layout of the components is rendered. Then, components are added, deleted, dragged, or scaled by performing add, delete, drag, or scale operations. For adding or deleting components, a new layout can be obtained after the operation and updated on the canvas. For dragging or scaling components, the layout of the components needs to be adjusted accordingly; for example, dragging changes the component's position, and scaling changes its size. A new layout can also be obtained after the operation and updated on the canvas. In the attached diagrams, `uuid` represents the unique identifier of the component, and `newX`, `newY`, `newW`, and `newH` represent the component's new horizontal and vertical coordinates, and its new width and height. Finally, after the layout is completed through visual operations, the layout configuration can be saved to obtain the data to be displayed.

[0143] The following is passed Figure 7BThis document presents a flowchart illustrating methods for implementing adaptive page display based on dynamically laid-out components. For example... Figure 7B As shown, the method includes:

[0144] S701: In response to a visual operation instruction on a target component laid out on the canvas, determine the type of visual operation.

[0145] S702: Based on the canvas size, the initial size and target position of the target component, and the type and parameters of the visualization operation, obtain the new size and / or new position of the target component.

[0146] S703: Update the target component information based on the new size and / or new position of the target component, and obtain the updated component information.

[0147] S704: Obtain the data to be displayed based on the updated component information, the configured canvas information, and the component data source.

[0148] The implementation methods of S705 to S710 are basically the same as those of S502 to S507, so they will not be described in detail here.

[0149] Taking large-screen page display as an example, traditional static large-screen visualization application technology implementation solutions cannot support dynamic configuration layout of components. This means that it is often necessary to repeatedly develop and implement the layout configuration of data large-screen applications according to business needs.

[0150] This invention, based on React and CSS absolute positioning technology, supports a visual free canvas operation method and a responsive layout system. It dynamically calculates and renders the canvas layout style of components, enabling the industrial production of visual data dashboards and significantly improving the engineering development efficiency of these dashboards. React is a JavaScript library for building user interfaces. Users can pass various types of parameters in React, such as declarative code to help render the UI, static HTML DOM elements, dynamic variables, and even interactive application components.

[0151] To facilitate understanding of the visual interface for configuring the canvas and component layout, as well as the user-executable operations, several accompanying diagrams are provided below. Figure 8 A schematic diagram of the interface for the visual configuration page. Figure 8 The left side is a visual list of the various components that have been laid out in the canvas displayed on the page; Figure 8 The right side is the page editor's configuration window for the canvas; Figure 8 The center displays a preview window showcasing the layout of the canvas and components. Before creating a page (for large-screen applications), the name and description can be edited; the pop-up editing window is as follows... Figure 9As shown. After entering the creation page, the canvas and component library are displayed. Selecting a specific component from the component library and adding it to the canvas will then... Figure 10 The component editor window on the right side of the illustrated interface allows users to edit the component's position and size. If the user changes the component's position and size visually, this will also be displayed in the component editor window. Additionally, the component's data source can be edited; for example, the data source can originate from a specific file. When configuring the data source for a component, the component's data type and the specific content of the data can also be edited.

[0152] Based on the screen page adaptive display method described above, this application also provides a screen page adaptive display device. Figure 11 This is a schematic diagram of the device, as shown below. Figure 11 As shown, the screen page adaptive display device 1100 includes:

[0153] The data acquisition unit 1101 is used to acquire the data to be displayed on the screen;

[0154] Canvas component information extraction unit 1102 is used to extract canvas information and component information from the data to be displayed; the canvas information includes the canvas size, and the component information includes the size, position and positioning type of the components laid out on the canvas;

[0155] The screen size acquisition unit 1103 is used to acquire the screen size when it is determined through the human-computer interaction window that the page needs to be displayed adaptively based on the screen; the screen size, the canvas size, and the component size are all expressed in resolution units;

[0156] The layout type determination unit 1104 is used to determine the layout type of the component on the canvas based on the canvas information and the component information;

[0157] The data update unit 1105 is used to reconfigure the component information according to the configuration rules corresponding to the layout type, and reconfigure the canvas information according to the screen size to obtain the updated data to be displayed;

[0158] Page generation unit 1106 is used to generate a page based on the updated data to be displayed;

[0159] Display unit 1107 is used to display the generated page through the screen.

[0160] This solution adaptively processes the data to be displayed, generating a page that matches the screen size, thus maintaining the original layout of the components even in full-screen displays. This, in turn, ensures the effective visualization of the data within the components.

[0161] Optionally, the data acquisition unit 1101 includes:

[0162] The window display sub-unit is used to display the layout effect preview window and the editing window;

[0163] Preview image generation is used to generate a preview image based on the canvas information, component information, and data source corresponding to the component configured in the editing window;

[0164] The content display sub-unit is used to display the preview image in the layout effect preview window;

[0165] The data generation subunit is used to generate the data to be displayed based on the canvas information, component information, and the data source corresponding to the component when the layout effect configuration is determined through the human-computer interaction window.

[0166] Optionally, the layout type determination unit 1104 includes:

[0167] The set determines the sub-unit, which is used to determine the set of layout type determination conditions corresponding to the positioning type of the component; the positioning type indicates the vertex that serves as the origin among the multiple vertices of the canvas;

[0168] The target determination condition determination subunit is used to traverse each layout type determination condition in the layout type determination condition set based on the canvas size, the size and position of the component, and determine the layout type determination condition that the component satisfies as the target determination condition; each layout type determination condition in the layout type determination condition set is a determination condition related to the canvas size and the component information.

[0169] The layout type determination subunit is used to determine the layout type corresponding to the target determination condition as the layout type of the component.

[0170] Optionally, the component's position includes the horizontal and vertical coordinates of its positioning point relative to the origin on the canvas; the positioning type indicates the vertex among multiple vertices of the canvas that serves as the origin; the default value of the component's positioning type is top-left positioning, used to indicate that the top-left corner vertex of the canvas serves as the origin; the component's positioning point is the top-left corner vertex of the component; the at least one layout type includes: full-screen layout, centered layout, bottom-left layout, top-right layout, bottom-right layout, and top-left layout; the canvas size includes: canvas width and canvas height; the component size includes: component width and component height;

[0171] When the absolute values ​​of the horizontal coordinate, the vertical coordinate, the difference between the canvas width and the component width, and the difference between the canvas height and the component height are all less than or equal to a preset threshold, the layout type of the component is determined to be a full-screen layout.

[0172] When the target determination condition is that the absolute value of the first difference is less than or equal to the preset threshold, the layout type of the component is determined to be a centered layout; the first difference is obtained by subtracting half the width of the component from the difference between half the canvas width and the horizontal coordinate.

[0173] When the target determination condition is that the second difference is less than or equal to the product of the canvas height and the preset coefficient, and the horizontal coordinate is less than half of the canvas width, the layout type of the component is determined to be the bottom left corner layout; the second difference is obtained by subtracting the component height from the difference between the canvas height and the vertical coordinate.

[0174] When the target determination condition is that the second difference is less than or equal to the product of the canvas height and the preset coefficient, and the horizontal coordinate is greater than half of the canvas width, the layout type of the component is determined to be the bottom right corner layout.

[0175] When the horizontal coordinate is greater than half the width of the canvas and the layout type of the component is not the bottom right corner layout, the layout type of the component is determined to be the top right corner layout.

[0176] When the layout type of the component does not belong to full-screen layout, center layout, bottom left corner layout, top right corner layout, bottom right corner layout, or top left corner layout, the layout type of the component is determined to be top left corner layout.

[0177] Optionally, the data update unit 1105 is used for:

[0178] When the layout type of the component is full-screen layout, the component width and the component height are reconfigured to the width and height of the screen, respectively, and the horizontal coordinate and the vertical coordinate are both reconfigured to 0;

[0179] When the layout type of the component is centered, the horizontal coordinate is reconfigured to half the difference between the width and the width of the component;

[0180] When the layout type of the component is bottom left layout, the positioning type is reconfigured to bottom left positioning, which is used to indicate that the bottom left corner vertex of the canvas is the origin, and the ordinate is reconfigured to the second difference.

[0181] When the layout type of the component is bottom right corner layout, the positioning type is reconfigured to bottom right positioning, which is used to indicate that the bottom right corner vertex of the canvas is the origin. The horizontal coordinate is reconfigured to the third difference value, and the vertical coordinate is reconfigured to the second difference value. The third difference value is obtained by subtracting the component width from the difference between the canvas width and the horizontal coordinate.

[0182] When the layout type of the component is top-right layout, the positioning type is reconfigured to top-right positioning, which indicates that the top-right vertex of the canvas is the origin, and the horizontal coordinate is reconfigured to the third difference value.

[0183] The data update unit 1105 is specifically used to reconfigure the canvas information according to the screen size. Specifically, the width and height of the canvas are configured to match the width and height of the screen, respectively. Optionally, the page generation unit 1106 includes:

[0184] The position attribute setting subunit is used to set the position attribute of the canvas to a relative position attribute;

[0185] The layout attribute setting sub-unit is used to configure the layout attributes of the component according to the component information in the updated data to be displayed; the layout attributes include the position attributes of the component, and the position attributes of the component are set to absolute position attributes;

[0186] The page rendering subunit is used to render a page adapted to the screen by using Cascading Style Sheets (CSS) absolute positioning layout technology, based on the position attributes of the canvas and the components, as well as the layout attributes of the components.

[0187] Optionally, the data acquisition unit 1101 includes:

[0188] The instruction receiving subunit is used to receive visual operation instructions applied to the component; the visual operation instructions are used to control the layout effect of the component on the canvas.

[0189] The configuration information acquisition subunit is used to obtain the new size and / or new position of the component based on the canvas size, the initial size and initial position of the component, and the type and parameters of the visualization operation instruction;

[0190] The component information update subunit is used to update the new size and / or the new position in the component information displayed in the editing window.

[0191] Optionally, the data acquisition unit 1101 further includes: a component determination subunit, configured to determine the component as the operation object of the visualization operation instruction based on the selection operation of the component in the component library before receiving the visualization operation instruction applied to the component; or, to determine the component as the operation object of the visualization operation instruction based on the selection operation of the component on the canvas before receiving the visualization operation instruction applied to the component.

[0192] The apparatus described in the above embodiments can be deployed on a server or on a terminal device.

[0193] Based on the screen page adaptive display method and apparatus described in the foregoing embodiments, this application also provides a screen page adaptive display system. Figure 12 This is a structural diagram of a screen-adaptive page display system. (Example) Figure 12 As shown, the system 1200 includes a display with a screen, and also includes:

[0194] The page editor is used to respond to visual operation commands for components and complete the layout of components on the canvas;

[0195] A responsive layout rule system is used to acquire screen data to be displayed; extract canvas information and component information from the data to be displayed; the canvas information includes the canvas size, and the component information includes the size, position, and positioning type of the components laid out on the canvas; display a human-computer interaction window through the display; when it is determined through the human-computer interaction window that the page needs to be displayed adaptively based on the screen, acquire the screen size; the screen size, canvas size, and component size are all expressed in resolution units; determine the layout type of the components on the canvas according to the canvas information and component information; reconfigure the component information according to the configuration rules corresponding to the layout type, and reconfigure the canvas information according to the screen size to obtain updated data to be displayed;

[0196] The page management module is used to generate a page based on the updated data to be displayed, so that the screen can display it.

[0197] Optionally, the screen-adaptive page display system also includes:

[0198] The component editor supports the creation of components and the publication of the created components to the component library;

[0199] The component management module is used to support the management of components in the component library.

[0200] Optionally, the screen-adaptive page display system also includes:

[0201] The server is used to store the updated data to be displayed and the pages generated by the page management module.

[0202] It should be noted that in the screen page adaptive display method, device, system, and equipment provided in this application embodiment, the layout is implemented based on CSS absolute positioning, but can also be implemented using CSS flexible layout / CSS grid layout systems, etc., to achieve a large-screen application layout system that conforms to rules. The responsive layout algorithm in this invention is implemented based on a CSS rule system, but can also be implemented using other layout algorithms according to product requirements. The component implementation in this invention is based on React component technology, but can also be based on other component technologies such as Vue / Angular / Web Component; the server implementation in this invention is based on Node.js server technology, but can also be based on other server technologies such as Python / PHP / Go.

[0203] Figure 13 This is a schematic diagram of a server structure provided in an embodiment of this application. The server 900 can vary significantly due to different configurations or performance. It may include one or more central processing units (CPUs) 922 (e.g., one or more processors) and memory 932, and one or more storage media 930 (e.g., one or more mass storage devices) for storing application programs 942 or data 944. The memory 932 and storage media 930 can be temporary or persistent storage. The program stored in the storage media 930 may include one or more modules (not shown in the diagram), each module may include a series of instruction operations on the server. Furthermore, the CPU 922 may be configured to communicate with the storage media 930 and execute the series of instruction operations in the storage media 930 on the server 900.

[0204] Server 900 may also include one or more power supplies 926, one or more wired or wireless network interfaces 950, one or more input / output interfaces 958, and / or one or more operating systems 941, such as Windows Server™, Mac OS X™, Unix™, Linux™, FreeBSD™, etc.

[0205] The steps performed by the server in the above embodiments can be based on this Figure 13 The server structure shown.

[0206] CPU 922 is used to perform the following steps:

[0207] Obtain the data to be displayed on the screen;

[0208] Canvas information and component information are extracted from the data to be displayed; the canvas information includes the canvas size, and the component information includes the size, position, and positioning type of the components laid out on the canvas;

[0209] When it is determined through the human-computer interaction window that the page needs to be displayed adaptively based on the screen, the size of the screen is obtained; the size of the screen, the size of the canvas, and the size of the component are all expressed in resolution units.

[0210] The layout type of the component on the canvas is determined based on the canvas information and the component information;

[0211] The component information is reconfigured according to the configuration rules corresponding to the layout type, and the canvas information is reconfigured according to the screen size to obtain the updated data to be displayed;

[0212] Generate a page based on the updated data to be displayed;

[0213] The generated page is displayed on the screen. This application embodiment also provides another screen-page adaptive display device, such as… Figure 14 As shown, for ease of explanation, only the parts related to the embodiments of this application are shown. For specific technical details not disclosed, please refer to the method section of the embodiments of this application. The terminal can be any terminal device including mobile phones, tablets, personal digital assistants (PDAs), point-of-sale (POS) terminals, in-vehicle computers, etc. Taking a mobile phone as an example:

[0214] Figure 14 This is a block diagram illustrating a portion of the structure of a mobile phone related to the terminal provided in the embodiments of this application. (Reference) Figure 14 The mobile phone includes: a radio frequency (RF) circuit 1010, a memory 1020, an input unit 1030, a display unit 1040, a sensor 1050, an audio circuit 1060, a wireless fidelity (WiFi) module 1070, a processor 1080, and a power supply 1090, etc. Those skilled in the art will understand that... Figure 14 The mobile phone structure shown does not constitute a limitation on the mobile phone and may include more or fewer components than shown, or combine certain components, or have different component arrangements.

[0215] The following is combined Figure 14A detailed introduction to each component of a mobile phone:

[0216] The RF circuit 1010 can be used for receiving and transmitting signals during information transmission or calls. Specifically, it receives downlink information from the base station and processes it with the processor 1080; additionally, it transmits uplink data to the base station. Typically, the RF circuit 1010 includes, but is not limited to, an antenna, at least one amplifier, a transceiver, a coupler, a low-noise amplifier (LNA), a duplexer, etc. Furthermore, the RF circuit 1010 can also communicate wirelessly with networks and other devices. The aforementioned wireless communications may use any communication standard or protocol, including but not limited to Global System for Mobile Communications (GSM), General Packet Radio Service (GPRS), Code Division Multiple Access (CDMA), Wideband Code Division Multiple Access (WCDMA), Long Term Evolution (LTE), email, and Short Messaging Service (SMS).

[0217] The memory 1020 can be used to store software programs and modules. The processor 1080 executes various mobile phone functions and data processing by running the software programs and modules stored in the memory 1020. The memory 1020 may mainly include a program storage area and a data storage area. The program storage area may store the operating system, applications required for at least one function (such as sound playback function, image playback function, etc.), etc.; the data storage area may store data created according to the use of the mobile phone (such as audio data, phonebook, etc.). In addition, the memory 1020 may include high-speed random access memory, and may also include non-volatile memory, such as at least one disk storage device, flash memory device, or other volatile solid-state storage device.

[0218] The input unit 1030 can be used to receive input numerical or character information, and to generate key signal inputs related to user settings and function control of the mobile phone. Specifically, the input unit 1030 may include a touch panel 1031 and other input devices 1032. The touch panel 1031, also known as a touch screen, can collect touch operations performed by the user on or near it (such as operations performed by the user using a finger, stylus, or any suitable object or accessory on or near the touch panel 1031), and drive the corresponding connection devices according to a pre-set program. Optionally, the touch panel 1031 may include two parts: a touch detection device and a touch controller. The touch detection device detects the user's touch position and the signal generated by the touch operation, and transmits the signal to the touch controller; the touch controller receives touch information from the touch detection device, converts it into touch point coordinates, and sends it to the processor 1080, and can also receive and execute commands sent by the processor 1080. In addition, the touch panel 1031 can be implemented using various types such as resistive, capacitive, infrared, and surface acoustic wave. In addition to the touch panel 1031, the input unit 1030 may also include other input devices 1032. Specifically, other input devices 1032 may include, but are not limited to, one or more of the following: physical keyboard, function keys (such as volume control buttons, power buttons, etc.), trackball, mouse, joystick, etc.

[0219] The display unit 1040 can be used to display information input by the user or information provided to the user, as well as various menus of the mobile phone. The display unit 1040 may include a display panel 1041, which may optionally be configured as a Liquid Crystal Display (LCD), Organic Light-Emitting Diode (OLED), or similar display panel 1041. Further, a touch panel 1031 may cover the display panel 1041. When the touch panel 1031 detects a touch operation on or near it, it transmits the information to the processor 1080 to determine the type of touch event. Subsequently, the processor 1080 provides corresponding visual output on the display panel 1041 according to the type of touch event. Although in Figure 14 In this embodiment, the touch panel 1031 and the display panel 1041 are two separate components to realize the input and output functions of the mobile phone. However, in some embodiments, the touch panel 1031 and the display panel 1041 can be integrated to realize the input and output functions of the mobile phone.

[0220] The mobile phone may also include at least one sensor 1050, such as a light sensor, a motion sensor, and other sensors. Specifically, the light sensor may include an ambient light sensor and a proximity sensor. The ambient light sensor can adjust the brightness of the display panel 1041 according to the ambient light level, and the proximity sensor can turn off the display panel 1041 and / or the backlight when the phone is moved to the ear. As a type of motion sensor, an accelerometer sensor can detect the magnitude of acceleration in various directions (generally three axes). When stationary, it can detect the magnitude and direction of gravity and can be used for applications that recognize the phone's posture (such as landscape / portrait switching, related games, magnetometer posture calibration), vibration recognition-related functions (such as pedometer, taps), etc. Other sensors that may be configured in the mobile phone, such as gyroscopes, barometers, hygrometers, thermometers, and infrared sensors, will not be described in detail here.

[0221] The audio circuit 1060, speaker 1061, and microphone 1062 provide an audio interface between the user and the mobile phone. The audio circuit 1060 converts the received audio data into electrical signals and transmits them to the speaker 1061, where the speaker 1061 converts them into sound signals for output. On the other hand, the microphone 1062 converts the collected sound signals into electrical signals, which are then received by the audio circuit 1060, converted into audio data, and then processed by the processor 1080 before being transmitted via the RF circuit 1010 to, for example, another mobile phone, or the audio data can be output to the memory 1020 for further processing.

[0222] WiFi is a short-range wireless transmission technology. Through the WiFi module 1070, mobile phones can help users send and receive emails, browse web pages, and access streaming media, providing users with wireless broadband internet access. Although Figure 14 The WiFi module 1070 is shown, but it is understood that it is not an essential component of a mobile phone and can be omitted as needed without changing the essence of the invention.

[0223] The processor 1080 is the control center of the mobile phone, connecting various parts of the phone through various interfaces and lines. It executes software programs and / or modules stored in the memory 1020 and calls data stored in the memory 1020 to perform various functions and process data, thereby providing overall monitoring of the phone. Optionally, the processor 1080 may include one or more processing units; preferably, the processor 1080 may integrate an application processor and a modem processor, wherein the application processor mainly handles the operating system, user interface, and applications, and the modem processor mainly handles wireless communication. It is understood that the modem processor may not be integrated into the processor 1080.

[0224] The mobile phone also includes a power supply 1090 (such as a battery) that supplies power to various components. Preferably, the power supply can be logically connected to the processor 1080 through a power management system, thereby enabling functions such as charging, discharging, and power consumption management through the power management system.

[0225] Although not shown, mobile phones may also include a camera, Bluetooth module, etc., which will not be described in detail here.

[0226] In this embodiment of the application, the processor 1080 included in the terminal also has the following functions:

[0227] Obtain the data to be displayed on the screen;

[0228] Canvas information and component information are extracted from the data to be displayed; the canvas information includes the canvas size, and the component information includes the size, position, and positioning type of the components laid out on the canvas;

[0229] When it is determined through the human-computer interaction window that the page needs to be displayed adaptively based on the screen, the size of the screen is obtained; the size of the screen, the size of the canvas, and the size of the component are all expressed in resolution units.

[0230] The layout type of the component on the canvas is determined based on the canvas information and the component information;

[0231] The component information is reconfigured according to the configuration rules corresponding to the layout type, and the canvas information is reconfigured according to the screen size to obtain the updated data to be displayed;

[0232] Generate a page based on the updated data to be displayed;

[0233] The generated page is displayed on the screen. This application also provides a computer-readable storage medium for storing program code that executes any one of the screen page adaptive display methods described in the foregoing embodiments.

[0234] This application also provides a computer program product including instructions that, when run on a computer, cause the computer to execute any one of the screen page adaptive display methods described in the foregoing embodiments.

[0235] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0236] In the several embodiments provided in this application, it should be understood that the disclosed systems, apparatuses, and methods can be implemented in other ways. For example, the apparatus embodiments described above are merely illustrative; for instance, the division of 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 coupling or direct coupling or communication connection shown or discussed may be an indirect coupling or communication connection between apparatuses or units through some interfaces, and may be electrical, mechanical, or other forms.

[0237] 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.

[0238] Furthermore, the functional units in the various embodiments of this application 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.

[0239] 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 technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes: USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, optical disks, and other media capable of storing program code.

[0240] The above-described embodiments are only used to illustrate the technical solutions of this application, and are not intended to limit them. Although this application 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 this application.

Claims

1. A method for adaptive display of a screen page, characterized in that, include: Obtain the data to be displayed on the screen; Extract canvas information and component information from the data to be displayed; The canvas information includes the canvas size; the component information includes the size, position, and positioning type of the components laid out on the canvas; the position of the component includes the horizontal and vertical coordinates of the positioning point of the component relative to the origin on the canvas; the positioning type indicates the vertex among the multiple vertices of the canvas that serves as the origin. When it is determined through the human-computer interaction window that the page needs to be displayed adaptively based on the screen, the size of the screen is obtained; The screen size, the canvas size, and the component size are all expressed in resolution units; Based on the positioning type of the component, a set of layout type determination conditions corresponding to the positioning type is determined; based on the canvas size, the size and position of the component, each layout type determination condition is traversed in the set of layout type determination conditions to determine the layout type determination condition that the component satisfies as the target determination condition; each layout type determination condition in the set of layout type determination conditions is a determination condition related to the canvas size and the component information. The layout type corresponding to the target determination condition is determined as the layout type of the component; The component information is reconfigured according to the configuration rules corresponding to the layout type, and the canvas information is reconfigured according to the screen size to obtain the updated data to be displayed; Generate a page based on the updated data to be displayed; The generated page is displayed on the screen.

2. The method according to claim 1, characterized in that, The acquisition of the screen data to be displayed includes: Displays a preview window and an editing window for the layout effect; A preview image is generated based on the canvas information, component information, and data source corresponding to the component configured in the editing window; The preview image is displayed in the layout effect preview window; When the layout configuration is confirmed through the human-computer interaction window, the data to be displayed is generated based on the canvas information, component information, and the data source corresponding to the component.

3. The method according to claim 1, characterized in that, The default value for the positioning type of the component is top-left positioning, which indicates that the top-left corner of the canvas is the origin; the positioning point of the component is the top-left corner of the component; the layout types include: full-screen layout, center layout, bottom-left layout, top-right layout, bottom-right layout, and top-left layout; the canvas size includes: canvas width and canvas height; the component size includes: component width and component height. When the absolute values ​​of the horizontal coordinate, the vertical coordinate, the difference between the canvas width and the component width, and the difference between the canvas height and the component height are all less than or equal to a preset threshold, the layout type of the component is determined to be a full-screen layout. When the target determination condition is that the absolute value of the first difference is less than or equal to the preset threshold, the layout type of the component is determined to be a centered layout; the first difference is obtained by subtracting half the width of the component from the difference between half the canvas width and the horizontal coordinate. When the target determination condition is that the second difference is less than or equal to the product of the canvas height and the preset coefficient, and the horizontal coordinate is less than half of the canvas width, the layout type of the component is determined to be the bottom left corner layout; the second difference is obtained by subtracting the component height from the difference between the canvas height and the vertical coordinate. When the target determination condition is that the second difference is less than or equal to the product of the canvas height and the preset coefficient, and the horizontal coordinate is greater than half of the canvas width, the layout type of the component is determined to be the bottom right corner layout. When the horizontal coordinate is greater than half the width of the canvas and the layout type of the component is not the bottom right corner layout, the layout type of the component is determined to be the top right corner layout. When the layout type of the component does not belong to full-screen layout, center layout, bottom left corner layout, top right corner layout, or bottom right corner layout, the layout type of the component is determined to be top left corner layout.

4. The method according to claim 3, characterized in that, The step of reconfiguring the component information according to the configuration rules corresponding to the layout type includes: When the layout type of the component is full-screen layout, the component width and the component height are reconfigured to the width and height of the screen, respectively, and the horizontal coordinate and the vertical coordinate are both reconfigured to 0; When the layout type of the component is centered, the horizontal coordinate is reconfigured to half the difference between the screen width and the component width; When the layout type of the component is bottom left layout, the positioning type is reconfigured to bottom left positioning, which is used to indicate that the bottom left corner vertex of the canvas is the origin, and the ordinate is reconfigured to the second difference. When the layout type of the component is bottom right corner layout, the positioning type is reconfigured to bottom right positioning, which is used to indicate that the bottom right corner vertex of the canvas is the origin. The horizontal coordinate is reconfigured to the third difference value, and the vertical coordinate is reconfigured to the second difference value. The third difference value is obtained by subtracting the component width from the difference between the canvas width and the horizontal coordinate. When the layout type of the component is top-right layout, the positioning type is reconfigured to top-right positioning, which indicates that the top-right vertex of the canvas is the origin, and the horizontal coordinate is reconfigured to the third difference value.

5. The method according to claim 1, characterized in that, The step of reconfiguring the canvas information according to the screen size includes: Configure the width and height of the canvas to match the width and height of the screen, respectively; The process of generating a page based on the updated data to be displayed includes: Set the position attribute of the canvas to a relative position attribute; Configure the layout properties of the component according to the component information in the updated data to be displayed; the layout properties include the position properties of the component, and the position properties of the component are set to absolute position properties; Based on the position attributes of the canvas and the components, as well as the layout attributes of the components, a page adapted to the screen is rendered using Cascading Style Sheets (CSS) absolute positioning layout technology.

6. The method according to claim 2, characterized in that, The configuration of the component information includes: Receive visual operation instructions applied to the component; the visual operation instructions are used to control the layout effect of the component on the canvas; Based on the canvas size, the initial size and initial position of the component, and the type and parameters of the visualization operation command, obtain the new size and / or new position of the component; Update the component information displayed in the editing window with the new size and / or the new position.

7. The method according to claim 6, characterized in that, Before receiving the visual operation instructions applied to the component, the method further includes: Based on the selection operation performed on the component in the component library, the component is determined as the operation object of the visual operation instruction; or, Based on the selection operation performed on the component on the canvas, the component is determined as the operation object of the visualization operation instruction.

8. A screen page adaptive display device, characterized in that, include: The data acquisition unit is used to acquire the data to be displayed on the screen. A canvas component information extraction unit is used to extract canvas information and component information from the data to be displayed; the canvas information includes the canvas size, and the component information includes the size, position, and positioning type of the components laid out on the canvas; the position of the component includes the horizontal and vertical coordinates of the positioning point of the component relative to the origin on the canvas; the positioning type indicates the vertex among the multiple vertices of the canvas that serves as the origin; The screen size acquisition unit is used to acquire the screen size when it is determined through the human-computer interaction window that the page needs to be displayed adaptively based on the screen. The screen size, the canvas size, and the component size are all expressed in resolution units; The layout type determination unit is used to determine the layout type determination condition set corresponding to the positioning type of the component based on the positioning type of the component; based on the canvas size, the size and position of the component, it traverses each layout type determination condition in the layout type determination condition set to determine the layout type determination condition satisfied by the component as the target determination condition; each layout type determination condition in the layout type determination condition set is a determination condition related to the canvas size and the component information. The layout type corresponding to the target determination condition is determined as the layout type of the component; The data update unit is used to reconfigure the component information according to the configuration rules corresponding to the layout type, and reconfigure the canvas information according to the screen size to obtain the updated data to be displayed; A page generation unit is used to generate a page based on the updated data to be displayed. A display unit is used to display the generated page on the screen.

9. A screen page adaptive display system, characterized in that, Including displays with screens, and also: The page editor is used to respond to visual operation commands for components and complete the layout of components on the canvas; A responsive layout rule system is used to acquire screen data to be displayed; extract canvas information and component information from the data; the canvas information includes the canvas size, and the component information includes the size, position, and positioning type of the components laid out on the canvas; the position of the component includes the horizontal and vertical coordinates of the component's positioning point relative to the origin on the canvas; the positioning type indicates the vertex among multiple vertices of the canvas that serves as the origin; a human-computer interaction window is displayed through the display; when it is determined through the human-computer interaction window that the page needs to be adaptively displayed based on the screen, the screen size is acquired; the screen size, canvas size, and component size are all expressed in resolution units. Based on the positioning type of the component, determine the set of layout type judgment conditions corresponding to the positioning type; based on the canvas size, the size and position of the component, traverse each layout type judgment condition in the set of layout type judgment conditions to determine the layout type judgment condition satisfied by the component as the target judgment condition; each layout type judgment condition in the set of layout type judgment conditions is a judgment condition about the canvas size and the component information; determine the layout type corresponding to the target judgment condition as the layout type of the component; reconfigure the component information according to the configuration rules corresponding to the layout type, and reconfigure the canvas information according to the screen size to obtain the updated data to be displayed; The page management module is used to generate a page based on the updated data to be displayed, so that the screen can display it.

10. The screen page adaptive display system according to claim 9, characterized in that, Also includes: The component editor supports the creation of components and the publication of the created components to the component library; The component management module is used to support the management of components in the component library.

11. The screen page adaptive display system according to claim 9 or 10, characterized in that, Also includes: The server is used to store the updated data to be displayed and the pages generated by the page management module.

12. A computer device, characterized in that, The device includes a processor and a memory: The memory is used to store program code and transmit the program code to the processor; The processor is configured to execute the screen page adaptive display method according to any one of claims 1 to 7 according to the instructions in the program code.

13. A computer-readable storage medium, characterized in that, The computer-readable storage medium is used to store program code for executing the screen page adaptive display method according to any one of claims 1 to 7.

Images