Control method, device and equipment of large screen assembly

Abstract

The present application discloses a control method, device and equipment for a large-screen component, which relates to the field of computer technology and can reasonably layout the page of the large-screen component without spending a lot of time to adjust the position of the large-screen component in the page layout, thereby improving the operation efficiency of the large-screen component. The method includes: in response to the operation instruction of the large-screen component, adding the configuration information of the large-screen component to the data model queue, the data model queue records the configuration information of the large-screen component that has been dragged into the canvas area, the configuration information includes the layout mode of the large-screen component, according to the configuration information of the large-screen component that has been dragged into the canvas area, determining the canvas area information corresponding to the large-screen component in different layout modes in the data model queue, and when receiving the switching instruction of the large-screen component, controlling the large-screen component to switch the layout mode according to the canvas area information corresponding to the large-screen component in different layout modes.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a control method, device and equipment for a large-screen component. Background Art

[0002] In the era of big data, dynamically displaying data through large-screen devices has become one of the important means of data visualization. Visual large screens are widely used in various occasions. For example, conference rooms, exhibition halls, command centers, monitoring rooms and other places. They can be used for real-time monitoring of large screens, real-time data display on large screens, command and dispatch, etc.

[0003] Normally, large-screen devices have multiple resource types and data that need to be displayed. Related technologies can use large-screen configuration and component configuration tools to perform page layout on large-screen components to present the data. Specifically, in the process of page layout, the control of large-screen components mainly includes the following two methods: one is a grid control method, and the other is a free-movement control method. However, the grid control method limits the movement distance of the large-screen component, making the moving pixels not flexible enough and unable to be applied to more complex large-screen devices, while the free-movement control method requires time-consuming adjustment of the position of the large-screen component, which makes the page debugging time longer. Both of them make it difficult to reasonably layout the page, which limits the position movement of the large-screen component in the page layout. Summary of the invention

[0004] In view of this, the present application provides a control method, device and equipment for a large-screen component, the main purpose of which is to solve the problem that the display control method of the prior art is difficult to reasonably perform page layout, so that the position movement of the large-screen component in the page layout is limited.

[0005] According to a first aspect of the present application, a control method for a large-screen assembly is provided, comprising:

[0006] In response to an operation instruction of the large screen component, adding configuration information of the large screen component to a data model queue, wherein the data model queue records configuration information of the large screen component that has been dragged into the canvas area, and the configuration information includes a layout mode of the large screen component;

[0007] According to the configuration information of the large screen component dragged into the canvas area, determine in the data model queue the canvas area information corresponding to the large screen component in different layout modes;

[0008] When a switching instruction of a large-screen component is received, the large-screen component is controlled to switch the layout mode according to the canvas area information corresponding to the large-screen component being in different layout modes.

[0009] Further, in response to the operation instruction of the large screen component, adding the configuration information of the large screen component to the data model queue includes:

[0010] In response to a drag instruction of the large screen component, obtaining configuration information of the large screen component according to the type of the large screen component;

[0011] When dragging starts, the configuration information of the large screen component is stored in the global memory, and when dragging ends, the configuration information of the large screen component is added to the data model queue.

[0012] Furthermore, after adding the configuration information of the large screen component to the data model queue in response to the operation instruction of the large screen component, the method further includes:

[0013] Generate a layer of large screen components in the canvas area according to the data model queue;

[0014] The hierarchical relationship of the large-screen components in the canvas area is configured in the layer, so that when the large-screen components in the canvas area overlap, the large-screen components with a higher hierarchical relationship are displayed first.

[0015] Further, the determining, in the data model queue, information on the canvas area occupied by the large-screen component in different layout modes according to the configuration information of the large-screen component dragged into the canvas area includes:

[0016] Determine, according to the configuration information of the large screen component dragged into the canvas area, position description information of the large screen component used in different layout modes;

[0017] The location description information is used to determine the canvas area information corresponding to the large-screen components in different layout modes in the data model queue.

[0018] Further, when a switching instruction of the large screen component is received, the large screen component is controlled to switch the layout mode according to the canvas area information corresponding to the large screen component in different layout modes, including:

[0019] When receiving a switching instruction of a large screen component, obtaining a current layout mode used by the large screen component in the canvas area;

[0020] If the switching instruction is to switch from the grid layout mode to the floating layout mode, the coordinate point and the number of grids occupied by the large screen component are obtained, and according to the coordinate point and the number of grids occupied by the large screen component, the position information of the large screen component is switched to the position information of the large screen component relative to the canvas area;

[0021] If the switching instruction is to switch from the floating layout mode to the grid layout mode, the relative position information of the large screen component and the canvas area is obtained, and according to the relative position information, the position information of the large screen component is switched to the coordinate point and the number of occupied grids of the large screen component.

[0022] Furthermore, after determining in the data model queue the information of the canvas area occupied by the large-screen component in different layout modes according to the configuration information of the large-screen component dragged into the canvas area, the method further includes:

[0023] Calculate the canvas area information of the gap in the data model queue according to the configuration information of the large screen component dragged into the canvas area;

[0024] According to the canvas area information of the gap and the canvas area information corresponding to the large-screen component in different layout modes, querying the location information of the large-screen component adaptation in the canvas area;

[0025] According to the location information of the large screen component adaptation, the page layout of the large screen component in the canvas area is controlled.

[0026] Further, querying the adapted position information of the large-screen component in the canvas area according to the canvas area information of the gap and the canvas area information corresponding to the large-screen component in different layout modes includes:

[0027] According to the canvas area information of the gap and the canvas area information corresponding to the large screen component in different layout modes, a position constraint function of the large screen component is constructed in the canvas area, wherein the position constraint function is used to constrain the position information of the large screen component in the canvas area;

[0028] Using the canvas area information of the gap as the input of the position constraint function, and using a dynamic programming algorithm to query multiple position information that meets the constraint conditions in the canvas area;

[0029] Select the location information suitable for the large-screen component from the multiple location information satisfying the constraint conditions.

[0030] Furthermore, the selecting the location information adapted for the large-screen component from the plurality of location information satisfying the constraint condition comprises:

[0031] Obtain historical operation data of different types of large-screen components in the canvas area, and count the position distribution probabilities of different types of large-screen components in the canvas area according to the historical operation data;

[0032] According to the position distribution probability of the different types of large-screen components in the canvas area, the position information adapted for the large-screen component is selected from the multiple position information satisfying the constraint conditions.

[0033] Furthermore, the method further comprises:

[0034] In response to a merge instruction of a large-screen component, obtaining a layout mode of a plurality of large-screen components to be merged;

[0035] If the multiple large-screen components to be merged belong to the same layout mode, merging the position information of the multiple large-screen components to be merged;

[0036] If the multiple large-screen components to be merged do not belong to the same layout mode, the position information of the multiple large-screen components to be merged are switched to the same layout mode and then merged;

[0037] Accordingly, in response to the disassembly instruction of the large-screen assembly, a layout mode of multiple large-screen assemblies in the large-screen assembly to be disassembled is obtained;

[0038] According to the layout patterns of multiple large-screen components in the large-screen components to be disassembled, the position information of the large-screen components to be disassembled is split into position information of multiple corresponding layout patterns.

[0039] According to a second aspect of the present application, a control device for a large screen assembly is provided, comprising:

[0040] an adding unit, configured to add configuration information of the large screen component to a data model queue in response to an operation instruction of the large screen component, wherein the data model queue records configuration information of the large screen component that has been dragged into the canvas area, and the configuration information includes a layout mode of the large screen component;

[0041] A determination unit, configured to determine, in a data model queue, information on the canvas area occupied by the large-screen component in different layout modes according to the configuration information of the large-screen component dragged into the canvas area;

[0042] The switching unit is used to control the large screen component to switch the layout mode according to the canvas area information corresponding to the large screen component in different layout modes when a switching instruction of the large screen component is received.

[0043] Furthermore, the adding unit is specifically used to respond to the dragging instruction of the large screen component, and obtain the configuration information of the large screen component according to the type of the large screen component; store the configuration information of the large screen component in the global memory when the dragging starts, and add the configuration information of the large screen component to the data model queue when the dragging ends.

[0044] Furthermore, the device also includes:

[0045] A generating unit, configured to generate a layer of the large screen component in the canvas area according to the data model queue after adding the configuration information of the large screen component to the data model queue in response to the operation instruction of the large screen component;

[0046] The setting unit is used to set the hierarchical relationship of the large-screen components in the canvas area in the layer, so that when the large-screen components in the canvas area overlap, the large-screen components with a front hierarchical relationship are displayed first.

[0047] Furthermore, the determination unit is specifically used to determine the position description information used by the large-screen component in different layout modes based on the configuration information of the large-screen component dragged into the canvas area; and use the position description information to determine the canvas area information occupied by the large-screen component in different layout modes in the data model queue.

[0048] Furthermore, the switching unit is used to obtain the current layout mode used by the large screen component in the canvas area when receiving a switching instruction of the large screen component; if the switching instruction is to switch from the grid layout mode to the floating layout mode, then the coordinate point and the number of occupied grids of the large screen component are obtained, and according to the coordinate point and the number of occupied grids of the large screen component, the position information of the large screen component is switched to the position information of the large screen component relative to the canvas area; if the switching instruction is to switch from the floating layout mode to the grid layout mode, then the relative position information of the large screen component and the canvas area is obtained, and according to the relative position information, the position information of the large screen component is switched to the coordinate point and the number of occupied grids of the large screen component.

[0049] Furthermore, the device also includes:

[0050] A calculation unit, configured to calculate the canvas area information of the gap in the data model queue according to the configuration information of the large screen component dragged into the canvas area, after determining the canvas area information corresponding to the large screen component in different layout modes in the data model queue according to the configuration information of the large screen component dragged into the canvas area;

[0051] A query unit, configured to query the location information of the large screen component adaptation in the canvas area according to the canvas area information of the gap and the canvas area information corresponding to the large screen component in different layout modes;

[0052] A control unit is used to control the page layout of the large screen component in the canvas area according to the position information adapted by the large screen component.

[0053] Furthermore, the query unit is specifically used to construct a position constraint function of the large-screen component in the canvas area according to the canvas area information of the gap and the canvas area information corresponding to the occupied area of ​​the large-screen component in different layout modes, wherein the position constraint function is used to constrain the position information of the large-screen component in the canvas area; use the canvas area information of the gap as the input of the position constraint function, and use a dynamic programming algorithm to query multiple position information that meets the constraint conditions in the canvas area; and select the position information suitable for the large-screen component from the multiple position information that meets the constraint conditions.

[0054] Furthermore, the query unit is specifically used to obtain historical operation data of different types of large-screen components in the canvas area, and to count the location distribution probabilities of different types of large-screen components in the canvas area based on the historical operation data; and based on the location distribution probabilities of different types of large-screen components in the canvas area, select location information suitable for the large-screen component from the multiple location information that meet the constraint conditions.

[0055] Furthermore, the device also includes:

[0056] A first acquisition unit, configured to acquire a layout mode of a plurality of large-screen components to be merged in response to a merge instruction of the large-screen components;

[0057] A merging unit, configured to merge the position information of the plurality of large-screen components to be merged if the plurality of large-screen components to be merged belong to the same layout mode;

[0058] The merging unit is further configured to switch the position information of the plurality of large-screen components to be merged to the same layout mode and then perform merging processing if the plurality of large-screen components to be merged do not belong to the same layout mode;

[0059] Correspondingly, the second acquisition unit is used to obtain the layout mode of multiple large-screen components in the large-screen component to be disassembled in response to the disassembly instruction of the large-screen component;

[0060] The disassembling unit is used to split the position information of the large-screen assembly to be disassembled into position information of multiple corresponding layout patterns according to the layout patterns of multiple large-screen assemblies in the large-screen assembly to be disassembled.

[0061] According to a third aspect of the present application, a computer device is provided, comprising a memory and a processor, wherein the memory stores a computer program, and the processor implements the steps of the method described in the first aspect when executing the computer program.

[0062] According to a fourth aspect of the present application, a readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the steps of the method described in the first aspect are implemented.

[0063] With the help of the above-mentioned technical scheme, the present application provides a control method, device and equipment for a large-screen component. Compared with the current prior art method of controlling the large-screen component by using rasterization or free movement, the present application responds to the operation instruction of the large-screen component, adds the configuration information of the large-screen component to the data model queue, and the data model queue records the configuration information of the large-screen component that has been dragged into the canvas area. The configuration information includes the layout mode of the large-screen component. Then, according to the configuration information of the large-screen component that has been dragged into the canvas area, the canvas area information corresponding to the large-screen component in different layout modes is determined in the data model queue. When a switching instruction of the large-screen component is received, the large-screen component is controlled to switch the layout mode according to the canvas area information corresponding to the large-screen component in different layout modes. The whole process is not limited to the control methods of rasterization and free movement. By determining the canvas area information corresponding to the large-screen components in different layout modes in the data queue model, it is convenient to accurately control the switching of the layout mode of the large-screen components, and then make a reasonable page layout for the large-screen components. There is no need to spend a lot of time to adjust the position of the large-screen components in the page layout, thereby improving the operation efficiency of the large-screen components.

[0064] The above description is only an overview of the technical solution of the present application. In order to more clearly understand the technical means of the present application, it can be implemented in accordance with the contents of the specification. In order to make the above and other purposes, features and advantages of the present application more obvious and easy to understand, the specific implementation methods of the present application are listed below. BRIEF DESCRIPTION OF THE DRAWINGS

[0065] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:

[0066] Figure 1 It is a flowchart of a control method of a large-screen component according to an embodiment of the present application;

[0067] Figure 2 yes Figure 1 A schematic flow chart of a specific implementation of step 101;

[0068] Figure 3 is a flow chart of a control method of a large-screen assembly according to another embodiment of the present application;

[0069] Figure 4 yes Figure 1 A schematic flow chart of a specific implementation of step 102;

[0070] Figure 5 yes Figure 1 A schematic flow chart of a specific implementation of step 103;

[0071] Figure 6 This is a schematic diagram of the structure of a control device for a large-screen assembly according to an embodiment of the present application;

[0072] Figure 7 It is a schematic diagram of the device structure of a computer device provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0073] Now the content of the present invention will be discussed with reference to several exemplary embodiments. It should be understood that these embodiments are discussed only to enable those skilled in the art to better understand and thus implement the content of the present invention, rather than implying any limitation on the scope of the present invention.

[0074] As used herein, the term "including" and variations thereof are to be interpreted as open-ended terms meaning "including but not limited to." The term "based on" is to be interpreted as "based, at least in part, on." The terms "one embodiment" and "an embodiment" are to be interpreted as "at least one embodiment." The term "another embodiment" is to be interpreted as "at least one other embodiment."

[0075] The related technology can use large-screen configuration and component configuration tools to perform page layout on large-screen components to present data. Specifically, in the process of page layout, the control of large-screen components mainly includes the following two methods: one is a grid control method, and the other is a free movement control method. However, the grid control method will limit the movement distance of the large-screen component, making the moving pixels not flexible enough and unable to be applied to more complex large-screen devices, while the free movement control method requires time-consuming adjustment of the position of the large-screen component, which makes the page debugging time longer. Both of them make it difficult to reasonably layout the page, which limits the position movement of the large-screen component in the page layout.

[0076] In order to solve this problem, this embodiment provides a control method for a large screen component, such as Figure 1 As shown, the method is applied to the client of the large-screen device, and includes the following steps:

[0077] 101. In response to an operation instruction of the large screen component, add configuration information of the large screen component to a data model queue.

[0078] Among them, large-screen components are tools and components used to build large-screen visualization applications, which may include but are not limited to chart components for displaying various types of charts, such as line charts, bar charts, pie charts, and scatter charts; map components for displaying geographic information and map data, which may include various map layers, markers, paths, etc.; text components for displaying text information, which may include titles, paragraphs, labels, etc.; and image components for displaying various image information, which may include static images, dynamic images, carousel images, etc.

[0079] Normally, the operation instructions of the large-screen component may include but are not limited to dragging operation instructions, deleting operation instructions, adjusting operation instructions, locking instructions, hiding instructions, etc. The large-screen component can realize the front-end visualization of the large-screen device through dragging and configuration, and can also be customized and expanded as needed. Specifically in the actual application scenario, the front-end visualization of the large-screen device can be page layout in the canvas area, and multiple layers of canvas can be set in the canvas area according to the layout mode. Each layout mode corresponds to a layer of canvas, and different large-screen components can switch to the corresponding canvas according to the layout mode. For example, large-screen component A uses the m1 layout mode and is located in canvas n1, and large-screen component B uses the m2 layout mode and is located in canvas n2. When operating large-screen component A, the canvas area switches to canvas n1, and when operating large-screen component B, the canvas area switches to canvas n2.

[0080] Furthermore, considering the layout of the page and the page scaling adaptation problem, by adjusting various attributes of the page layout in the canvas area, it can be adapted to different types of large-screen devices, thereby achieving different page layout effects.

[0081] It is understandable that the front end of the large-screen device will provide a corresponding component toolbar, which provides a list of different types of large-screen components. Users can drag the large-screen components into the canvas area by clicking the component icon. The large-screen components in the large-screen component list here are pre-set with configuration information according to the component type, that is, different types of large-screen components have default configuration parameters when they are dragged to the canvas area. For example, the default configuration parameters of the icon-type large-screen components include grid layout mode and occupied grid size, and the default configuration parameters of the text-type large-screen components include floating layout mode and occupied pixel size, etc.

[0082] Furthermore, in order to facilitate the configuration management of the large-screen component, a data model queue can be configured for the canvas area, and the data model queue is used to store the configuration information of the large-screen component. As the large-screen component is continuously dragged into the canvas area, the data model queue records the configuration information of the large-screen component that has been dragged into the canvas area. Correspondingly, as the large-screen component is deleted from the canvas area, the data model queue will also delete the configuration information of the large-screen component. For example, a large-screen component has been dragged into the canvas area, and the type, layout mode, occupancy information, etc. of the large-screen component are stored in the data model queue accordingly. If it is a grid layout mode, the corresponding occupied grid information will be stored, for example, 3 grids are occupied in the length direction and 1 grid is occupied in the width direction. If it is a floating layout mode, the corresponding occupied pixel information will be stored accordingly, for example, 100 pixels are occupied in the length direction and 50 pixels are occupied in the width direction.

[0083] The executor of this embodiment can be a control device or equipment of the large-screen component, which can be configured on the client side of the large-screen device. The configuration information of the large-screen component is added to the data model queue through the operation instructions of the large-screen component, so that the data model queue records the configuration information of the large-screen component that has been dragged into the canvas area. Then, the data model queue is used to query the location information that meets the adaptation of the large-screen component, and the large-screen component is controlled to perform reasonable page layout in the canvas area.

[0084] 102. According to the configuration information of the large-screen component dragged into the canvas area, determine in the data model queue the canvas area information corresponding to the large-screen component in different layout modes.

[0085] It is understandable that the large-screen component has default configuration information. Normally, the large-screen component that has been dragged into the canvas area will determine its position information for page layout in the canvas area based on the default configuration information. The position information can be the set position information. If the user is not satisfied with the set position information, the position information set for the large-screen component can be adjusted. Furthermore, based on the configuration information of the large-screen component that has been dragged into the canvas area, the coordinate range occupied by each large-screen component in different layout modes in the canvas area is determined. Based on the area range occupied by each large-screen component in the canvas area, the canvas area information corresponding to the large-screen component in different layout modes is determined in the data model queue.

[0086] In actual application scenarios, considering that different layout modes use different area measurement methods, correspondingly, the canvas area information corresponding to the large screen component in different layout modes in the data model queue is also different. In the grid layout mode, the canvas occupied area information is equivalent to the grid information occupied in the entire canvas area, such as the grid position and grid size. In the floating layout mode, the canvas area occupied area information is equivalent to the coordinate range occupied in the entire canvas area, such as the area range formed by the coordinate points.

[0087] 103. When a switch instruction of a large-screen component is received, the large-screen component is controlled to switch the layout mode according to the canvas area information corresponding to the large-screen component being in different layout modes.

[0088] Taking into account the flexibility of page layout, the large screen component in the page layout can switch the layout mode through operation. In this embodiment, the large screen component can be any large screen component in the canvas area, that is, each component in the canvas area has the function of switching the layout mode. When a switching instruction of the large screen component is received, the current layout mode used by the large screen component in the canvas area is obtained. If the switching instruction is to switch from grid layout mode to floating layout mode, in the grid layout mode, the large screen component corresponds to the occupied canvas area information using coordinate points and the number of occupied grids, then the coordinate points and the number of occupied grids of the large screen component are obtained, and according to the coordinate points and the number of occupied grids of the large screen component, the position information of the large screen component is switched to the position information of the large screen component relative to the canvas area. If the switching instruction is to switch from floating layout mode to grid layout mode, in the floating layout mode, the large screen component corresponds to the occupied canvas area information using the position information of the large screen component relative to the canvas area, then the relative position information of the large screen component and the canvas area is obtained, and according to the relative position information, the position information of the large screen component is switched to the coordinate points and the number of occupied grids of the large screen component.

[0089] In actual application scenarios, when the canvas area is initialized, at least two layers of canvas areas are usually generated according to the layout mode, and at least two layers of canvas areas coexist. Here, a two-layer canvas area is used as an example for explanation. The two-layer canvas area includes a canvas area in a grid layout mode and a canvas area in a floating layout mode. Specifically, switching the layout mode of a large screen component is equivalent to switching the view in the canvas area. The canvas area of ​​the grid mode layout will divide the canvas area into multiple grids according to the configuration information, and the number of pixels occupied by each grid is also fixed. The canvas area of ​​the floating layout mode will establish a coordinate system according to the configuration information. During the layout mode switching process, if the grid layout mode is switched to the floating layout mode, the position information of the grid layout mode can be obtained, and the coordinate number of the large screen component to be switched in the grid and the number of grids occupied are taken as input. The display width and height information of the large screen component to be switched in the coordinate system is calculated through the number of pixels of each grid, and the position information of the floating layout mode is output. If the floating layout mode is switched to the grid layout mode, the position information of the floating layout mode can be obtained, and the display width and height information of the large screen component to be switched in the coordinate system is taken as input. The number of grids occupied by the large screen component to be switched and the coordinate point information in the grid are calculated through the display width and height information in the coordinate system to obtain the position information of the grid layout mode.

[0090] The control method of the large screen component provided in the embodiment of the present application is compared with the control method of the large screen component using rasterization or free movement in the current prior art. In the present application, by responding to the operation instruction of the large screen component, the configuration information of the large screen component is added to the data model queue, and the configuration information of the large screen component dragged into the canvas area is recorded in the data model queue, and the configuration information includes the layout mode of the large screen component. Then, according to the configuration information of the large screen component dragged into the canvas area, the canvas area information corresponding to the large screen component in different layout modes is determined in the data model queue. When the switching instruction of the large screen component is received, the large screen component is controlled to switch the layout mode according to the canvas area information corresponding to the large screen component in different layout modes. The whole process is not limited to the control method of rasterization and free movement. By determining the canvas area information corresponding to the large screen component in different layout modes in the data queue model, the layout mode switching of the large screen component can be accurately controlled, and then the large screen component is reasonably laid out on the page, without spending a lot of time to adjust the position movement of the large screen component in the page layout, thereby improving the operation efficiency of the large screen component.

[0091] In the above embodiment, the operation instruction of the large screen component may be a drag instruction. The configuration information of the large screen component is usually pre-configured according to the component type. Specifically, in the process of dragging the large screen component to the canvas area, Figure 2 As shown, step 101 includes the following steps:

[0092] 201. In response to a drag instruction of a large screen component, obtain configuration information of the large screen component according to the type of the large screen component.

[0093] 202. When dragging starts, the configuration information of the large screen component is stored in the global memory, and when dragging ends, the configuration information of the large screen component is added to the data model queue.

[0094] It is understandable that different types of large-screen components have different corresponding configuration information, and the configuration information here may include but is not limited to layout type, attribute configuration, and occupied space information.

[0095] Considering the uncertainty of the large screen component during the dragging process, the configuration information of the large screen component can be stored in the global memory at the beginning of the dragging. The global memory is equivalent to the place where variables and function declarations are saved. In other words, the configuration information of the large screen component here can change accordingly according to user operations, and the configuration information of the large screen component is cached through the global memory. When the large screen component is dragged to the canvas area, it means that the large screen component is already in the canvas area. The configuration information of the large screen component can be added to the data model queue, and the data model queue is used to manage the configuration information of the large screen component.

[0096] Furthermore, in the above embodiment, if Figure 3 As shown, after step 101, the method further includes the following steps:

[0097] 301. Generate a layer of a large screen component in a canvas area according to the data model queue.

[0098] 302. The hierarchical relationship of the large-screen components in the canvas area is set in the layer, so that when the large-screen components in the canvas area overlap, the large-screen components with a front hierarchical relationship are displayed first.

[0099] It is understandable that as large-screen components are continuously dragged into the canvas area, the number of large-screen components in the canvas area also increases. In the process of moving large-screen components, overlapping situations are inevitable. At this moment, a layer of large-screen components can be generated in the canvas area, and the layer of large-screen components can be used to configure the hierarchical relationship of the large-screen component display. The layer can be in the form of a list, and the order of the large-screen components in the list is the priority order of the large-screen component display. When multiple large-screen components overlap in the canvas area, the display priority order can be determined according to the order of the large-screen components in the layer.

[0100] Specifically, in the above embodiment, if Figure 4 As shown, step 102 includes the following steps:

[0101] 401. Determine, according to the configuration information of the large-screen component dragged into the canvas area, position description information of the large-screen component used in different layout modes.

[0102] 402. Using the position description information, determine in the data model queue the canvas area information corresponding to the large screen components in different layout modes.

[0103] It can be understood that the configuration information of the large-screen components dragged into the canvas area is default or adjusted, that is, each large-screen component dragged into the canvas area has an initial layout mode. If the initial layout mode of the large-screen component is a grid layout mode, the position description information used by the large-screen component can be expressed using grid information; if the initial layout mode of the large-screen component is a floating layout mode, the position description information used by the large-screen component can be expressed using a coordinate range.

[0104] It should be noted that the canvas occupancy information may change according to the user's operation on the large screen component. For example, adjusting the size of the large screen component or the large screen component will cause the canvas occupancy information to change. Specifically in the grid pattern mode, using the position description information, in the process of determining the canvas area information corresponding to the large screen component in different layout modes in the data model queue, a two-dimensional array can be defined in the data model queue according to the grid information of the canvas area, where each element in the two-dimensional array represents a grid information, and the grid information records the grid state, where the grid state includes an idle state and an occupied state, and then the grid information occupied by the large screen component in the canvas area is used to determine the grid state of each element in the two-dimensional array, and according to the grid state of each element in the two-dimensional array, the grid information of the idle state is selected in the data model queue to determine the canvas area information corresponding to the large screen component in different layout modes.

[0105] In order to accurately calculate the position information of the large screen component in the canvas area, further, in the above embodiment, Figure 5 As shown, after step 102, the method further includes the following steps:

[0106] 501. Calculate the canvas area information of the gap in the data model queue according to the configuration information of the large screen component dragged into the canvas area.

[0107] 502. According to the canvas area information of the gap and the canvas area information corresponding to the large-screen component in different layout modes, query the adapted position information of the large-screen component in the canvas area.

[0108] 503. Control the page layout of the large screen component in the canvas area according to the adapted position information of the large screen component.

[0109] Considering that the empty canvas area information may be split into at least one area information that can accommodate the large screen component by the large screen component dragged into the canvas area, or may be split into multiple area information that cannot accommodate the large screen component by the large screen component dragged into the canvas area. In the first case, it is necessary to select one area information from at least one area information that can accommodate the large screen component as the location information for the large screen component to adapt. For the second case, if multiple area information that cannot accommodate large-screen components can be integrated into one area information that can accommodate large-screen components, then the merged area information will be used as the location information for the large-screen component to be adapted. If multiple area information that cannot accommodate large-screen components cannot be integrated into one area information that can accommodate large-screen components, it means that there is no location information for the large-screen component to be adapted in the canvas area. As an implementable method, the position of the large-screen component that has been dragged into the canvas area can be adjusted, and the canvas area information with gaps formed after the adjustment can be used as the location information for the large-screen component to be adapted. As another implementable method, the user can be prompted to adjust and / or delete other large-screen components in the canvas area to increase the coverage of the canvas area information of the gaps, so that the large-screen component can be assigned to appropriate location information in the canvas area.

[0110] Specifically, in the process of selecting an area information from at least one area information that can accommodate a large-screen component as the position information for the large-screen component to be adapted, taking into account the subsequent size adjustment of the large-screen component, the area information with the largest coverage area is preferentially used as the position information for the large-screen component to be adapted. Correspondingly, in order to save space occupied by the canvas area, the area information with the smallest coverage area can also be used as the position information for the large-screen component to be adapted. Of course, in order to improve the user's operating experience, at least one area information that can accommodate a large screen area can also be circled in the interface, and at least one area information can be displayed to the user through the client so that the user can select from at least one area information.

[0111] Specifically, in the process of querying the adaptive position information of the large-screen component in the canvas area according to the canvas area information of the gap and the canvas area information corresponding to the occupied canvas area of ​​the large-screen component in different layout modes, a position constraint function of the large-screen component can be constructed in the canvas area according to the canvas area information of the gap and the canvas area information corresponding to the occupied canvas area of ​​the large-screen component in different layout modes. Here, the position constraint function is used to constrain the position information of the large-screen component in the canvas area. Then, the canvas area information of the gap is used as the input of the position constraint function, and a dynamic programming algorithm is used to query multiple position information that meet the constraint conditions in the canvas area, and the adaptive position information of the large-screen component is selected from the multiple position information that meet the constraint conditions.

[0112] In this embodiment, the position constraint function is used to constrain the position information of the large-screen component in the canvas area. The position constraint function can be used to determine multiple position information that meet the constraint conditions in the canvas area. Specifically, the canvas area information of the gaps in the data model queue and the configuration information of the large-screen component can be input into the position constraint function. The position constraint function can be used to query multiple position information that meet the constraint conditions in the canvas area information of the gaps.

[0113] It is understandable that the multiple location information that meets the constraints can be used as reference location information, but it is not necessarily the location information that is most suitable for placing the large-screen component. Specifically, in the process of selecting the location information suitable for the large-screen component, the historical operation data of different types of large-screen components in the canvas area can be obtained, and the location distribution probabilities of different types of large-screen components in the canvas area can be statistically analyzed based on the historical operation data. Then, based on the location distribution probabilities of different types of large-screen components in the canvas area, the location information suitable for the large-screen component is selected from the multiple location information that meet the constraints. For example, if a large-screen component of the same type as the large-screen component is often arranged in the middle of the canvas area, the middle position of the canvas can be preferentially selected from multiple location information as the location information suitable for the large-screen component.

[0114] In this embodiment, the number of large-screen components that can be accommodated in the canvas area is limited. Considering that the position information of the large-screen component adaptation may affect the positions of other large-screen components, it is necessary to control the page layout of the large-screen components in the canvas area according to the position information of the large-screen component adaptation, for example, adjust the position of the large-screen component, or adjust the size of the large-screen component, etc., or delete the large-screen component, etc., to accommodate the large-screen component.

[0115] It is understandable that the location information adapted by the large-screen component is equivalent to the initial location information of the large-screen component when it is dragged into the canvas area. If the large-screen component has an association relationship with other large-screen components in the canvas area, the initial location information is not necessarily the most suitable for the user. Here, the association relationship between the large-screen components can be used to control the page layout of the large-screen components in the canvas area, and the layout mode of the large-screen components can also be used to control the page layout of the large-screen components in the canvas area. Specifically, multiple sub-areas can be set in the canvas area, and large-screen components with an exclusive relationship can be scattered to different sub-areas in the canvas area, and large-screen components with a binding relationship can be assigned to the same sub-area. The large-screen components in the grid layout mode can also be assigned to the same sub-area in the canvas area, and the large-screen components in the floating layout mode can be assigned to the same sub-area in the canvas area.

[0116] Furthermore, considering the flexibility of the page layout, the large screen components in the page layout can be merged or disassembled through operations. In the above embodiment, the method further includes the following steps:

[0117] For the merging operation of large-screen components, in response to the merging instruction of the large-screen components, the layout modes of multiple large-screen components to be merged are obtained; if the multiple large-screen components to be merged belong to the same layout mode, the position information of the multiple large-screen components to be merged is merged; if the multiple large-screen components to be merged do not belong to the same layout mode, the position information of the multiple large-screen components to be merged is switched to the same layout mode and then merged, and the overall large-screen component is determined according to the merged position information; accordingly, for the disassembly operation of the large-screen components, in response to the disassembly instruction of the large-screen components, the layout modes of the multiple large-screen components in the large-screen components to be disassembled are obtained, and according to the layout modes of the multiple large-screen components in the large-screen components to be disassembled, the position information of the large-screen components to be disassembled is split into position information of multiple corresponding layout modes, and the disassembled large-screen components are determined according to the split position information.

[0118] In the actual merging processing scenario, considering that the types of multiple large-screen components to be merged may be different, different merging methods need to be used here, mainly including three situations. The first situation is that multiple large-screen components to be merged are merged into multiple independent large-screen components, the other is that multiple large-screen components to be merged are merged into independent large-screen components and merged large-screen components, and the other is that multiple large-screen components to be merged are merged into multiple merged large-screen components. Specifically, during the merging process, it is necessary to set the merging area range of the large-screen components to be merged, and determine the position information of the merged large-screen components in the canvas area according to the merging area range. By merging the large-screen components to be merged into a whole component, these large-screen components can maintain relative position movement and proportional stretching.

[0119] It can be understood that if there are merged large-screen components in the large-screen components to be merged in the merging scenario, a merging level can be set, and correspondingly in the splitting scenario, the large-screen components to be disassembled can be split into multiple large-screen components according to the merging level.

[0120] Further, as Figure 1-5 The specific implementation of the method, the embodiment of the present application provides a control device for a large screen component, such as Figure 6 As shown, the device includes: an adding unit 61, a determining unit 62, and a switching unit 63.

[0121] An adding unit 61 is used to add the configuration information of the large screen component to the data model queue in response to the operation instruction of the large screen component, wherein the data model queue records the configuration information of the large screen component dragged into the canvas area, and the configuration information includes the layout mode of the large screen component;

[0122] A determination unit 62 is used to determine, in the data model queue, information about the canvas area occupied by the large-screen component in different layout modes according to the configuration information of the large-screen component dragged into the canvas area;

[0123] The switching unit 63 is used to control the large screen component to switch the layout mode according to the canvas area information corresponding to the large screen component in different layout modes when a switching instruction of the large screen component is received.

[0124] The control device of the large screen component provided in the embodiment of the present invention responds to the operation instruction of the large screen component and adds the configuration information of the large screen component to the data model queue. The data model queue records the configuration information of the large screen component that has been dragged into the canvas area, and the configuration information includes the layout mode of the large screen component. Then, according to the configuration information of the large screen component that has been dragged into the canvas area, the canvas area information corresponding to the large screen component in different layout modes is determined in the data model queue. When the switching instruction of the large screen component is received, the large screen component is controlled to switch the layout mode according to the canvas area information corresponding to the large screen component in different layout modes. The whole process is not limited to the control method of rasterization and free movement. By determining the canvas area information corresponding to the large screen component in different layout modes in the data queue model, the switching of the layout mode of the large screen component can be accurately controlled, and then the large screen component is reasonably laid out on the page, without spending a lot of time to adjust the position movement of the large screen component in the page layout, thereby improving the operation efficiency of the large screen component.

[0125] In a specific application scenario, the adding unit 61 is specifically used to respond to the dragging instruction of the large screen component, and obtain the configuration information of the large screen component according to the type of the large screen component; store the configuration information of the large screen component in the global memory when the dragging starts, and add the configuration information of the large screen component to the data model queue when the dragging ends.

[0126] In a specific application scenario, the device further includes:

[0127] A generating unit, configured to generate a layer of the large screen component in the canvas area according to the data model queue after adding the configuration information of the large screen component to the data model queue in response to the operation instruction of the large screen component;

[0128] The setting unit is used to set the hierarchical relationship of the large-screen components in the canvas area in the layer, so that when the large-screen components in the canvas area overlap, the large-screen components with a front hierarchical relationship are displayed first.

[0129] In a specific application scenario, the determination unit 62 is specifically used to determine the position description information of the large-screen component in different layout modes based on the configuration information of the large-screen component dragged into the canvas area; and use the position description information to determine the canvas area information corresponding to the large-screen component in different layout modes in the data model queue.

[0130] In a specific application scenario, the switching unit 63 is used to obtain the current layout mode used by the large screen component in the canvas area when receiving a switching instruction of the large screen component; if the switching instruction is to switch from the grid layout mode to the floating layout mode, the coordinate point and the number of occupied grids of the large screen component are obtained, and according to the coordinate point and the number of occupied grids of the large screen component, the position information of the large screen component is switched to the position information of the large screen component relative to the canvas area; if the switching instruction is to switch from the floating layout mode to the grid layout mode, the relative position information of the large screen component and the canvas area is obtained, and according to the relative position information, the position information of the large screen component is switched to the coordinate point and the number of occupied grids of the large screen component.

[0131] In a specific application scenario, the device further includes:

[0132] A calculation unit, configured to calculate the canvas area information of the gap in the data model queue according to the configuration information of the large screen component dragged into the canvas area, after determining the canvas area information corresponding to the large screen component in different layout modes in the data model queue according to the configuration information of the large screen component dragged into the canvas area;

[0133] A query unit, configured to query the location information of the large screen component adaptation in the canvas area according to the canvas area information of the gap and the canvas area information corresponding to the large screen component in different layout modes;

[0134] A control unit is used to control the page layout of the large screen component in the canvas area according to the position information adapted by the large screen component.

[0135] In a specific application scenario, the query unit is specifically used to construct a position constraint function of the large-screen component in the canvas area according to the canvas area information of the gap and the canvas area information corresponding to the large-screen component in different layout modes, and the position constraint function is used to constrain the position information of the large-screen component in the canvas area; use the canvas area information of the gap as the input of the position constraint function, and use a dynamic programming algorithm to query multiple position information that meets the constraint conditions in the canvas area; select the position information suitable for the large-screen component from the multiple position information that meets the constraint conditions.

[0136] In a specific application scenario, the query unit is also specifically used to obtain historical operation data of different types of large-screen components in the canvas area, and to count the location distribution probabilities of different types of large-screen components in the canvas area based on the historical operation data; based on the location distribution probabilities of different types of large-screen components in the canvas area, select location information suitable for the large-screen component from the multiple location information that meets the constraint conditions.

[0137] In a specific application scenario, the device further includes:

[0138] A first acquisition unit, configured to acquire a layout mode of a plurality of large-screen components to be merged in response to a merge instruction of the large-screen components;

[0139] A merging unit, configured to merge the position information of the plurality of large-screen components to be merged if the plurality of large-screen components to be merged belong to the same layout mode;

[0140] The merging unit is further configured to switch the position information of the plurality of large-screen components to be merged to the same layout mode and then perform merging processing if the plurality of large-screen components to be merged do not belong to the same layout mode;

[0141] Correspondingly, the second acquisition unit is used to obtain the layout mode of multiple large-screen components in the large-screen component to be disassembled in response to the disassembly instruction of the large-screen component;

[0142] The disassembling unit is used to split the position information of the large-screen assembly to be disassembled into position information of multiple corresponding layout patterns according to the layout patterns of multiple large-screen assemblies in the large-screen assembly to be disassembled.

[0143] It should be noted that for other corresponding descriptions of the functional units involved in the control device of a large-screen assembly provided in this embodiment, reference can be made to Figure 1-Figure 5 The corresponding description in will not be repeated here.

[0144] Based on the above Figure 1-Figure 5 The method shown in the embodiment of the present application accordingly provides a storage medium on which a computer program is stored, and when the program is executed by a processor, the above-mentioned Figure 1-Figure 5 The control method of the large screen component shown.

[0145] Based on this understanding, the technical solution of the present application can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, a USB flash drive, a mobile hard disk, etc.), and includes a number of instructions for enabling a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in each implementation scenario of the present application.

[0146] Based on the above Figure 1-Figure 5 The method shown, and Figure 6 In order to achieve the above-mentioned purpose, the embodiment of the present application also provides a physical device for controlling the large-screen component, which can be a computer, a smart phone, a tablet computer, a smart watch, a server, or a network device, etc. The physical device includes a storage medium and a processor; the storage medium is used to store a computer program; the processor is used to execute the computer program to achieve the above-mentioned Figure 1-Figure 5The control method of the large screen component shown.

[0147] Optionally, the physical device may also include a user interface, a network interface, a camera, a radio frequency (RF) circuit, a sensor, an audio circuit, a WI-FI module, etc. The user interface may include a display, an input unit such as a keyboard, etc., and the optional user interface may also include a USB interface, a card reader interface, etc. The network interface may optionally include a standard wired interface, a wireless interface (such as a WI-FI interface), etc.

[0148] In an exemplary embodiment, see Figure 7 The physical device includes a communication bus, a processor, a memory and a communication interface, and may also include an input / output interface and a display device, wherein each functional unit can communicate with each other through the bus. The memory stores a computer program, and the processor is used to execute the program stored in the memory and execute the control method of the large screen component in the above embodiment.

[0149] Those skilled in the art will understand that the physical device structure for controlling a large-screen assembly provided in this embodiment does not constitute a limitation on the physical device, and may include more or fewer components, or a combination of certain components, or different component arrangements.

[0150] The storage medium may also include an operating system and a network communication module. The operating system is a program that manages the hardware and software resources of the physical device that controls the above-mentioned large-screen components, and supports the operation of information processing programs and other software and / or programs. The network communication module is used to realize communication between the components inside the storage medium, and communication with other hardware and software in the information processing physical device.

[0151] Through the description of the above implementation methods, those skilled in the art can clearly understand that the present application can be implemented by means of software plus the necessary general hardware platform, or by hardware. By applying the technical solution of the present application, compared with the current existing methods, the present application determines the canvas area information corresponding to the large-screen component in different layout modes in the data queue model, so as to accurately control the switching of the layout mode of the large-screen component, and then reasonably layout the page of the large-screen component, without spending a lot of time to adjust the position of the large-screen component in the page layout, thereby improving the operating efficiency of the large-screen component.

[0152] Those skilled in the art will appreciate that the accompanying drawings are only schematic diagrams of a preferred implementation scenario, and the modules or processes in the accompanying drawings are not necessarily necessary for implementing the present application. Those skilled in the art will appreciate that the modules in the devices in the implementation scenario can be distributed in the devices of the implementation scenario according to the description of the implementation scenario, or can be changed accordingly and located in one or more devices different from the present implementation scenario. The modules of the above-mentioned implementation scenario can be combined into one module, or can be further split into multiple submodules.

[0153] The above serial numbers of this application are only for description and do not represent the advantages and disadvantages of the implementation scenarios. The above disclosure is only a few specific implementation scenarios of this application, but this application is not limited to them, and any changes that can be thought of by technicians in this field should fall within the scope of protection of this application.

Claims

1. A control method for a large screen component, characterized in that: include: In response to an operation instruction of the large screen component, adding configuration information of the large screen component to a data model queue, wherein the data model queue records configuration information of the large screen component that has been dragged into the canvas area, and the configuration information includes a layout mode of the large screen component; According to the configuration information of the large screen component dragged into the canvas area, determine in the data model queue the canvas area information corresponding to the large screen component in different layout modes; When a switching instruction of a large-screen component is received, the large-screen component is controlled to switch the layout mode according to the canvas area information corresponding to the different layout modes of the large-screen component. Specifically, when a switching instruction of the large-screen component is received, the current layout mode used by the large-screen component in the canvas area is obtained; if the switching instruction is to switch from the grid layout mode to the floating layout mode, the coordinate points and the number of occupied grids of the large-screen component are obtained, and according to the coordinate points and the number of occupied grids of the large-screen component, the position information of the large-screen component is switched to the position information of the large-screen component relative to the canvas area; if the switching instruction is to switch from the floating layout mode to the grid layout mode, the relative position information of the large-screen component and the canvas area is obtained, and according to the relative position information, the position information of the large-screen component is switched to the coordinate points and the number of occupied grids of the large-screen component.

2. The method according to claim 1, characterized in that The step of adding the configuration information of the large screen component to the data model queue in response to the operation instruction of the large screen component includes: In response to a drag instruction of the large screen component, obtaining configuration information of the large screen component according to the type of the large screen component; When dragging starts, the configuration information of the large screen component is stored in the global memory, and when dragging ends, the configuration information of the large screen component is added to the data model queue.

3. The method according to claim 1, characterized in that: After adding the configuration information of the large screen component to the data model queue in response to the operation instruction of the large screen component, the method further includes: Generate a layer of large screen components in the canvas area according to the data model queue; The hierarchical relationship of the large-screen components in the canvas area is set in the layer, so that when the large-screen components in the canvas area overlap, the large-screen components with a higher hierarchical relationship are displayed first.

4. The method according to claim 1, characterized in that The determining, in the data model queue, information of the canvas area occupied by the large-screen component in different layout modes according to the configuration information of the large-screen component dragged into the canvas area includes: Determine, according to the configuration information of the large screen component dragged into the canvas area, position description information of the large screen component used in different layout modes; The location description information is used to determine the canvas area information corresponding to the large-screen components in different layout modes in the data model queue.

5. The method according to any one of claims 1 to 4, characterized in that After determining, in the data model queue, information on the canvas areas occupied by the large-screen components in different layout modes according to the configuration information of the large-screen components dragged into the canvas area, the method further includes: Calculate the canvas area information of the gap in the data model queue according to the configuration information of the large screen component dragged into the canvas area; According to the canvas area information of the gap and the canvas area information corresponding to the large-screen component in different layout modes, querying the location information of the large-screen component adaptation in the canvas area; According to the location information of the large screen component adaptation, the page layout of the large screen component in the canvas area is controlled.

6. The method according to claim 5, characterized in that The querying of the location information of the large screen component adaptation in the canvas area according to the canvas area information of the gap and the canvas area information corresponding to the large screen component in different layout modes includes: According to the canvas area information of the gap and the canvas area information corresponding to the large screen component in different layout modes, a position constraint function of the large screen component is constructed in the canvas area, wherein the position constraint function is used to constrain the position information of the large screen component in the canvas area; Using the canvas area information of the gap as the input of the position constraint function, and using a dynamic programming algorithm to query multiple position information that meets the constraint conditions in the canvas area; Select the location information suitable for the large-screen component from the multiple location information satisfying the constraint conditions.

7. A control device for a large screen assembly, characterized in that: include: An adding unit, configured to add configuration information of the large screen component to a data model queue in response to an operation instruction of the large screen component, wherein the data model queue records configuration information of the large screen component that has been dragged into the canvas area, and the configuration information includes a layout mode of the large screen component; A calculation unit, used to determine, in the data model queue, information on the canvas area occupied by the large-screen component in different layout modes according to the configuration information of the large-screen component dragged into the canvas area; A switching unit is used to, upon receiving a switching instruction of a large-screen component, control the large-screen component to switch the layout mode according to the canvas area information corresponding to the large-screen component in different layout modes. Specifically, upon receiving a switching instruction of the large-screen component, obtain the current layout mode used by the large-screen component in the canvas area; if the switching instruction is to switch from a grid layout mode to a floating layout mode, obtain the coordinate points and the number of occupied grids of the large-screen component, and switch the position information of the large-screen component to the position information of the large-screen component relative to the canvas area according to the coordinate points and the number of occupied grids of the large-screen component; if the switching instruction is to switch from a floating layout mode to a grid layout mode, obtain the relative position information of the large-screen component and the canvas area, and switch the position information of the large-screen component to the coordinate points and the number of occupied grids of the large-screen component according to the relative position information.

8. A computer device comprising a memory and a processor, wherein the memory stores a computer program, wherein: When the processor executes the computer program, the steps of the control method of the large-screen component described in any one of claims 1 to 6 are implemented.

9. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the steps of the control method of the large-screen component described in any one of claims 1 to 6 are implemented.

Images