Page configuration method, page configuration system, electronic device and readable storage medium
By generating a visual configuration page and obtaining the display status parameters of controls, the problem of low efficiency in configuring dynamic pages in existing technologies is solved, and the automatic adaptation and consistent display of controls on different terminal devices are realized.
Patent Information
- Application Number
- CN202210099869.0
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2022-01-27
- Publication Date
- 2026-02-17
- Estimated Expiration
- 2042-01-27
AI Technical Summary
Existing technologies lack efficient non-code methods for configuring dynamic pages, resulting in low development efficiency.
The control device generates a visual configuration page, obtains the display status of the control and generates parameters. The terminal device determines the display status of the control based on these parameters, thus achieving automatic adaptation of the control to different terminal devices.
It improves the efficiency and consistency of page configuration, ensures consistent display and alignment of controls across different terminal devices, and simplifies the development process.
Smart Images

Figure CN114489620B_ABST
Abstract
Description
TECHNICAL FIELD
[0001] Embodiments of the present disclosure relate to the technical field of computer, and particularly, to a page configuration method, a page configuration system, an electronic device and a readable storage medium. BACKGROUND
[0002] The visual editor is a way to configure a dynamic page more simply and efficiently from the UI (User Interface) level without codes. The developer only needs to develop the basic page panel, and can output the development product more efficiently. SUMMARY
[0003] In a first aspect, the embodiments of the present disclosure provide a page configuration method applied to a page configuration system, the page configuration system comprising a control device and a terminal device, the control device and the terminal device being communicatively connected, and the method comprising the following steps:
[0004] generating, by the control device, a visual configuration page;
[0005] obtaining, by the control device, a display state of a control in the configuration page, the display state comprising a display position and a display size of the control;
[0006] generating, by the control device, a control parameter according to the display state, wherein the control parameter comprises a distance between the display position of the control and each boundary of the configuration page, and a ratio between the display size and a size of the configuration page;
[0007] sending, by the control device, the control parameter to the terminal device;
[0008] determining, by the terminal device, a display state of the control in the terminal device according to a display parameter of the terminal device and the control parameter.
[0009] In a second aspect, the embodiments of the present disclosure provide a page configuration method applied to a control device in a page configuration system, the page configuration system comprising the control device and a terminal device, the control device and the terminal device being communicatively connected, and the method comprising the following steps:
[0010] generating a visual configuration page;
[0011] obtaining a display state of a control in the configuration page;
[0012] generating a control parameter according to the display state, wherein the control parameter comprises a distance between a display position of the control and each boundary of the configuration page, and a ratio between a display size and a size of the configuration page;
[0013] sending the control parameter to the terminal device, so that the terminal device determines the display state of the control on the terminal device according to the display parameter of the terminal device and the control parameter.
[0014] In some embodiments, the control includes a first control and a second control, and before the display state of the control in the configuration page is obtained, the method further includes:
[0015] When a display instruction of displaying the second control on the configuration page is received, a first coordinate parameter is obtained, wherein the first coordinate parameter is determined according to the position of the first control displayed on the configuration page, or the first coordinate parameter is determined according to a preset reference position on the configuration page;
[0016] A second coordinate parameter of the second control is determined according to the adjustment instruction of the second control;
[0017] When a difference between a target coordinate parameter in the first coordinate parameter and the corresponding second coordinate parameter is less than a preset difference threshold, the second coordinate parameter is updated as the target coordinate parameter;
[0018] The position of the second control is updated according to the updated second coordinate parameter.
[0019] In some embodiments, the preset reference position includes a plurality of reference mark lines.
[0020] In some embodiments, after the control parameter is generated according to the display state, the method further includes:
[0021] Obtaining attribute information of the control, the attribute information including at least one of a binding relationship between the control and a function interface and a corresponding relationship between the control and a control event;
[0022] Adding the attribute information of the control in the control parameter.
[0023] In some embodiments, the control parameter is saved through a json file.
[0024] In a third aspect, the embodiments of the present disclosure provide a page configuration method applied to a terminal device in a page configuration system, the page configuration system including a control device and a terminal device, the control device and the terminal device being in communication connection, and the method including the following steps:
[0025] receive a control parameter sent by the control device, wherein the control parameter is generated by the control device according to a display state of the control in the configuration page, and the control parameter comprises a distance between a display position of the control and each boundary of the configuration page and a ratio of the display size to the size of the configuration page;
[0026] determine the display state of the control in the terminal device according to the display parameter of the terminal device and the control parameter.
[0027] In some embodiments, the determination of the display state of the control in the terminal device according to the display parameter of the terminal device and the control parameter comprises:
[0028] obtain the display parameter of the terminal device, wherein the display parameter comprises the size of the display interface of the terminal device;
[0029] calculate the display size of the control in the terminal device according to the display parameter and the control parameter, wherein a first display ratio of the control is equal to a second display ratio of the control, the first display ratio is a ratio of the display size of the control in the display interface to the size of the display interface, and the second display ratio is a ratio of the display size of the control in the configuration page to the size of the configuration page;
[0030] calculate the display position of the control in the terminal device according to the display parameter and the control parameter, wherein a third display ratio of the control is equal to a fourth display ratio of the control, the third display ratio is a ratio of a first distance and a second distance, the first distance is a distance between the control and the boundary of the display interface, and the second distance is the size of the display interface, and the fourth display ratio is a ratio of a third distance and a fourth distance, the third distance is a distance between the control and the boundary of the configuration page, and the second distance is the size of the configuration page;
[0031] generate the display state of the control in the terminal device, wherein the display state of the control in the terminal device comprises the display size and the display position of the control in the terminal device.
[0032] In a fourth aspect, the embodiments of the present disclosure provide a page configuration system, which comprises a control device and a terminal device, and the control device and the terminal device are communicatively connected.
[0033] The control device is configured to:
[0034] generate a visual configuration page;
[0035] acquire a display state of the control in the configuration page, the display state including a display position and a display size of the control;
[0036] generate a control parameter according to the display state, wherein the control parameter includes a distance between the display position of the control and each boundary of the configuration page, and a ratio between the display size and a size of the configuration page;
[0037] send the control parameter to the terminal device;
[0038] The terminal device is configured to:
[0039] determine a display state of the control in the terminal device according to the display parameter of the terminal device and the control parameter.
[0040] In a fifth aspect, an electronic device is provided, including a memory, a processor, and a program stored in the memory and capable of running on the processor; the processor is configured to read the program in the memory to implement the steps in the above method.
[0041] In a sixth aspect, a readable storage medium is provided for storing a program, the program being executed by a processor to implement the steps in the above method. BRIEF DESCRIPTION OF DRAWINGS
[0042] In order to more clearly illustrate the technical solutions of the embodiments of the present disclosure, the following will briefly introduce the drawings needed to be used in the description of the embodiments of the present disclosure. Obviously, the drawings in the following description are only some embodiments of the present disclosure, and for those skilled in the art, other drawings can also be obtained from these drawings without creative labor.
[0043] Figure 1 is a flow diagram of the page configuration method provided by the embodiments of the present disclosure;
[0044] Figure 2 is an architecture diagram between the target device and the virtual device provided by the embodiments of the present disclosure;
[0045] Figure 3 is a communication principle diagram of the target device and the virtual device provided by the embodiments of the present disclosure;
[0046] Figure 4 is a structural diagram of the page configuration device provided by the embodiments of the present disclosure;
[0047] Figure 5 is a structural diagram of the electronic device provided by the embodiments of the present disclosure. DETAILED DESCRIPTION
[0048] The technical solutions of the embodiments of this disclosure will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of this disclosure. Based on the embodiments of this disclosure, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this disclosure.
[0049] The terms "first," "second," etc., used in the embodiments of this disclosure are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion. For example, a process, method, system, product, or device that includes a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to these processes, methods, products, or devices. Additionally, the use of "and / or" in this application indicates at least one of the connected objects, such as A and / or B and / or C, representing seven possibilities: including A alone, B alone, C alone, both A and B present, both B and C present, both A and C present, and A, B, and C present.
[0050] This disclosure provides a page configuration method applied to a page configuration system, which includes a control device and a terminal device, and the control device and the terminal device are communicatively connected.
[0051] In this embodiment of the disclosure, the control device refers to a server, network-side device, or host computer, etc. The operator generates the configuration information of the page on the host computer and then sends the configuration information to the terminal device. The terminal device configures the corresponding page based on the received configuration information. In this way, it is possible to control the terminal device to configure the page on the terminal device through the control device.
[0052] like Figure 1 As shown, in one embodiment, the method includes the following steps:
[0053] Step 101: The control device generates a visual configuration page.
[0054] In this embodiment, the page is configured in a visual manner. On the control device, a configuration page is first created.
[0055] like Figure 2 As shown, in one embodiment, an editing interface 200 can be opened, and a configuration page 201 can be created on the editing interface 200. During implementation, the size, resolution, background image, and other elements of the configuration page 201 can be set as needed.
[0056] Step 102: The control device obtains the display status of the control on the configuration page, the display status including the display position and display size of the control.
[0057] Next, controls 202 are added to the configuration page 201 in a visual manner. In this embodiment, a list of controls can be provided. When a control 202 needs to be added to the page, the operator can add the required control 202 to the configuration page 201 by selecting a control 202 from the list.
[0058] After adding control 202, the position and size of control 202 can be further adjusted. In this embodiment, the coordinates of control 202 can be input. In order to simplify the operation process, in some embodiments, the operator can also directly drag control 202 on the configuration page 201 to adjust the position of control 202.
[0059] like Figure 3 As shown, in some embodiments, the control 202 can be displayed in the blank area of the editing interface 200. The operator can add the control 202 to the configuration page 201 by dragging the control 202 to the corresponding area of the configuration page 201, and delete the control 202 on the configuration page 201 by dragging the control 202 out of the corresponding area of the configuration page 201.
[0060] Similarly, in this embodiment, the size of the control 202 can be adjusted by inputting the dimensions, or the control 202 can be scaled directly by dragging.
[0061] The number of controls 202 can be one or more, and the specific number can be set as needed; no further limitation is made here.
[0062] Step 103: The control device generates control parameters based on the display status.
[0063] After adjusting the position and size of control 202, control parameters are further generated. In implementation, a list recording control information can be created. In this embodiment, it is called the first list. The number of elements in the first list is the same as the number of controls 202. Each element corresponds to one control 202, and the information of each element records the control parameters of one control 202.
[0064] In this embodiment, the control parameters include the distance between the display position of the control 202 and the boundaries of the configuration page 201. Based on the determined distance, the specific position of the control 202 in the configuration page 201 can be determined. The control parameters also include the ratio of the display size of the control 202 to the size of the configuration page 201. Based on this ratio, the display size of the control 202 on the page can be determined.
[0065] Step 104: The control device sends the control parameter to the terminal device.
[0066] In this embodiment, the control parameter can be saved in different ways. In one of the embodiments, the control parameter is saved by a json file. When the page configuration is needed, the control device sends the json file to the terminal device.
[0067] Step 105: The terminal device determines the display state of the control on the terminal device according to the display parameter of the terminal device and the control parameter.
[0068] The terminal device can be a smart phone, a web page, etc. Different terminal devices have different display parameters. After receiving the control parameter, the terminal device determines the display state of the control 202 on the terminal device in combination with its own display parameter, and configures the page according to the determined display state of the control 202, so as to better match its own display parameter and improve the configuration and display effect of the page.
[0069] In some embodiments, automatic adjustment of the position of the control 202 is also configured. In this embodiment, the control 202 includes a first control 2021 and a second control 202. Before step 102, the method further includes:
[0070] When receiving a display instruction of displaying the second control on the configuration page, obtaining a first coordinate parameter;
[0071] determining a second coordinate parameter of the second control according to the adjustment instruction of the second control;
[0072] if the difference between the target coordinate parameter in the first coordinate parameter and the corresponding second coordinate parameter is less than a preset difference threshold, updating the second coordinate parameter to the target coordinate parameter;
[0073] updating the position of the second control according to the updated second coordinate parameter.
[0074] In this embodiment, the first coordinate parameter is determined according to the position of the first control 2021 displayed on the configuration page 201, or the first coordinate parameter is determined according to a preset reference position on the configuration page 201.
[0075] For example, Figure 3As shown, it can be understood that, in one embodiment, when the second control 2022 needs to be added on the configuration page 201, the first control 2021 already exists on the configuration page 201, and then the position of the second control 2022 is adjusted according to the first coordinate parameter determined according to the first control 2021. In another embodiment, a preset reference position exists on the configuration page 201, and in some embodiments, the preset reference position includes a plurality of reference mark lines, and the first coordinate parameter can be determined according to the position of the reference mark line to adjust the position of the second control 2022.
[0076] When the second control 2022 is added, the first coordinate parameter and the second coordinate parameter are obtained, wherein the first coordinate parameter refers to the coordinate of the first control 2021 or the preset reference position.
[0077] In this embodiment, the target coordinate parameter of the first coordinate parameter is the left coordinate of the first control 2021. When the second control 2022 is added, the left coordinate of the first control 2021 is obtained as the target coordinate parameter.
[0078] After obtaining the adjustment instruction for the second control 2022, the size and position of the second control 2022 can be adjusted, and according to the adjusted second control 2022, the left coordinate of the second control 2022 can also be determined, and the left coordinate of the second control 2022 is taken as the second coordinate parameter.
[0079] As shown, Figure 3 Next, the obtained target coordinate parameter and the second coordinate parameter are compared, and if the difference between the two is less than a certain preset difference threshold, it means that the left positions of the first control 2021 and the second control 2022 are very close, at this time, the second coordinate parameter is updated to the target coordinate parameter, so that the left coordinate of the second control 2022 becomes equal to the left coordinate of the first control 2021, that is, the left side of the first control 2021 and the left side of the second control 2022 are aligned, that is, the position of the second control 2022 is adjusted from the dashed line position to the solid line position.
[0080] In implementation, a second list including the coordinates of the preset reference position can be established, and then the obtained second coordinate parameter is compared with the values in the first list or the values in the second list to determine whether to adjust the position of the second control 2022. When updating the position of the second control 2022, the position of the second control 2022 can be adjusted by updating the value corresponding to the coordinate of the second control 2022 in the above first list.
[0081] The preset difference threshold can be set as needed, for example, set to 1mm, 2mm, 3mm, etc.
[0082] In implementation, the selected target coordinate parameter and the second coordinate parameter can be different coordinates such as the upper coordinate, the lower coordinate, the left coordinate, the right coordinate, the horizontal axis coordinate, the vertical axis coordinate, and the like of the control 202.
[0083] In this way, the technical solution of the embodiment can conveniently and quickly realize the alignment of the control 202 when adjusting the position of the control 202. From the visual effect, when adjusting the position of the control 202, the control 202 can be automatically attracted to a specific position nearby to align with other controls 202 or a specific reference position, which can improve the convenience of page configuration.
[0084] In some embodiments, after the control parameter is generated according to the display state, the method further includes:
[0085] obtaining attribute information of the control, the attribute information including at least one of a binding relationship between the control and a function interface and a corresponding relationship between the control and a control event;
[0086] adding the attribute information of the control in the control parameter.
[0087] In the embodiment, the attribute information of the control 202 can also be configured. Specifically, the attribute information of the control can be configured by manual input or selection from a list.
[0088] For example, in one embodiment, an input box can be displayed, and a staff member can manually input a required data source to be bound by modifying the corresponding attribute value to adjust the attribute information of the interface. In another embodiment, an interface (API) list can be displayed, and then the function corresponding to the control 202 is selected from the interface list. Further, a maintenance control can be established to maintain the corresponding relationship between the interface and the attribute, thereby realizing the binding between the control 202 and the corresponding interface to call the function corresponding to the interface through the control 202.
[0089] The control event refers to an event of controlling the page attribute such as page or address jump. In implementation, the control 202 can be bound with the corresponding control event, thereby realizing the triggering of the corresponding control event through the control 202.
[0090] After the configuration of the page is completed and the control parameter is generated, a dependent library can be further added to the corresponding configuration file, thereby ensuring that the corresponding function can be normally realized, so that the compilation can be normally performed.
[0091] Finally, the related parameters of the position, size, attribute information and the like of each control 202 in the configuration page 201 are saved to generate control parameters, for example, can be written into the same json file as control parameters. Further, the control parameters can be sent to the server and forwarded to the terminal device through the server. Obviously, the control parameters can also be sent to the terminal device directly through the control device.
[0092] In some embodiments, the display state of the control on the terminal device is determined according to the display parameter of the terminal device and the control parameter, including:
[0093] obtaining the display parameter of the terminal device;
[0094] calculating the display size of the control on the terminal device according to the display parameter and the control parameter;
[0095] calculating the display position of the control on the terminal device according to the display parameter and the control parameter;
[0096] generating the display state of the control on the terminal device, the display state of the control on the terminal device including the display size and the display position of the control on the terminal device.
[0097] In this embodiment, the display parameter of the terminal device includes the size of the display interface of the terminal device, which can be embodied by resolution.
[0098] It should be understood that there can be multiple terminal devices, and the display parameters of different terminal devices are different. Therefore, it is necessary to further determine the display size of the control 202 on the terminal device.
[0099] In this embodiment, the display position and the display size of the control 202 on the terminal device need to be determined respectively.
[0100] In this embodiment, the first display ratio of the control 202 is equal to the second display ratio of the control 202, wherein the first display ratio refers to the ratio of the display size of the control 202 in the display interface to the size of the display interface, and the second display ratio refers to the ratio of the display size of the control 202 in the configuration page 201 to the size of the configuration page 201.
[0101] For example, if the horizontal size ratio of the control 202 in the configuration page 201 to the configuration page 201 is 1:5, the horizontal display size ratio of the control 202 in the display interface of the terminal device to the horizontal size of the display interface of the terminal device is also 1:5. By controlling the first display ratio and the second display ratio in each direction to be equal, the display ratio of the control 202 in the configuration page 201 and the display ratio on the terminal device can be consistent.
[0102] The third display ratio of the control 202 is equal to the fourth display ratio of the control 202, the third display ratio is the ratio of the first distance and the second distance, the first distance is the distance between the control 202 and the boundary of the display interface, the second distance is the size of the display interface, the fourth display ratio is the ratio of the third distance and the fourth distance, the third distance is the distance between the control 202 and the boundary of the configuration page 201, and the second distance is the size of the configuration page 201.
[0103] For example, if the ratio between the distance between the control 202 and the left boundary of the configuration page 201 and the horizontal length of the configuration page 201 is 1:5, when the control 202 is displayed on the display interface of the terminal device, the ratio between the distance between the control 202 and the left boundary of the display interface and the horizontal length of the display interface is also 1:5.
[0104] In this way, by determining the display state of the control 202 on the terminal device, the display state of the control 202 on the terminal device can be consistent with the configuration on the configuration page 201 of the control device, so that the display state of the control 202 on different terminal devices can be automatically adapted.
[0105] As shown in Figure 4 The technical scheme of the embodiment can be understood as follows: first, a configuration page is established, then a control is selected, and the control is added to the configuration page, further, the control is configured with attributes, specifically including the configuration of the binding relationship and the control event of the control. After the configuration is completed, the control parameter is generated, and the control parameter is sent to the terminal device to control the terminal device to display the corresponding page.
[0106] The embodiment of the disclosure provides a page configuration method, applied to a control device in a page configuration system, the page configuration system comprising a control device and a terminal device, the control device and the terminal device being in communication connection, and the method comprising the following steps:
[0107] generating a visual configuration page;
[0108] obtaining the display state of the control in the configuration page;
[0109] generating a control parameter according to the display state, wherein the control parameter comprises the distance between the display position of the control and each boundary of the configuration page, and the ratio of the display size and the size of the configuration page;
[0110] sending the control parameter to the terminal device, so that the terminal device determines the display state of the control on the terminal device according to the display parameter of the terminal device and the control parameter.
[0111] In some embodiments, the control includes a first control and a second control, and before the display state of the control in the configuration page, the method further includes:
[0112] When receiving a display instruction to display the second control on the configuration page, a first coordinate parameter is obtained, wherein the first coordinate parameter is determined according to the position of the first control displayed on the configuration page, or the first coordinate parameter is determined according to a preset reference position on the configuration page;
[0113] A second coordinate parameter of the second control is determined according to the adjustment instruction for the second control;
[0114] When a difference between a target coordinate parameter in the first coordinate parameter and the corresponding second coordinate parameter is less than a preset difference threshold, the second coordinate parameter is updated to the target coordinate parameter;
[0115] The position of the second control is updated according to the updated second coordinate parameter.
[0116] In some embodiments, the preset reference position includes a plurality of reference mark lines.
[0117] In some embodiments, after the control parameter is generated according to the display state, the method further includes:
[0118] Obtaining attribute information of the control, the attribute information including at least one of a binding relationship between the control and a function interface and a corresponding relationship between the control and a control event;
[0119] Adding the attribute information of the control in the control parameter.
[0120] In some embodiments, the control parameter is saved through a json file.
[0121] The page configuration method of the present embodiment can refer to the part of the page configuration method applied to the page configuration system and performed by the control device as described above, which will not be described herein.
[0122] The present embodiment provides a page configuration method applied to a terminal device in a page configuration system, the page configuration system including a control device and a terminal device, the control device and the terminal device being communicatively connected, and the method including the following steps:
[0123] receive a control parameter sent by the control device, wherein the control parameter is generated by the control device according to a display state of the control in the configuration page, and the control parameter comprises a distance between a display position of the control and each boundary of the configuration page and a ratio of the display size to the size of the configuration page;
[0124] determine the display state of the control in the terminal device according to the display parameter of the terminal device and the control parameter.
[0125] In some embodiments, the display state of the control in the terminal device is determined according to the display parameter of the terminal device and the control parameter;
[0126] obtain the display parameter of the terminal device, wherein the display parameter comprises the size of the display interface of the terminal device;
[0127] calculate the display size of the control in the terminal device according to the display parameter and the control parameter, wherein a first display ratio of the control is equal to a second display ratio of the control, the first display ratio is a ratio of the display size of the control in the display interface to the size of the display interface, and the second display ratio is a ratio of the display size of the control in the configuration page to the size of the configuration page;
[0128] calculate the display position of the control in the terminal device according to the display parameter and the control parameter, wherein a third display ratio of the control is equal to a fourth display ratio of the control, the third display ratio is a ratio of a first distance and a second distance, the first distance is a distance between the control and a boundary of the display interface, and the second distance is the size of the display interface, and the fourth display ratio is a ratio of a third distance and a fourth distance, the third distance is a distance between the control and a boundary of the configuration page, and the second distance is the size of the configuration page;
[0129] generate the display state of the control on the terminal device, wherein the display state of the control on the terminal device comprises the display size and the display position of the control in the terminal device.
[0130] The page configuration method of the embodiment can refer to the part performed by the terminal device in the page configuration method applied to the page configuration system described above, and details are not described herein.
[0131] The page configuration system provided in the embodiments of the present disclosure comprises a control device and a terminal device, and the control device and the terminal device are communicatively connected.
[0132] The control device is configured to:
[0133] generating a configuration page of the visualization;
[0134] obtaining a display state of the control in the configuration page, the display state including a display position and a display size of the control;
[0135] generating a control parameter according to the display state, wherein the control parameter includes a distance between the display position of the control and each boundary of the configuration page, and a ratio between the display size and a size of the configuration page;
[0136] sending the control parameter to the terminal device;
[0137] The terminal device is configured to:
[0138] determine a display state of the control in the terminal device according to the display parameter of the terminal device and the control parameter.
[0139] The page configuration system provided by the embodiments of the present disclosure can implement each step of the page configuration method and achieve the same or similar technical effects, and thus the details are not described herein.
[0140] The embodiments of the present disclosure further provide an electronic device. Referring to Figure 5 , the electronic device can include a processor 501, a memory 502, and a program 5021 stored in the memory 502 and executable on the processor 501.
[0141] The program 5021, when executed by the processor 501, can implement any step of the above method embodiments and achieve the same beneficial effects, and thus the details are not described herein.
[0142] Those skilled in the art can understand that all or part of the steps of the above-mentioned embodiment methods can be completed by program instructions related to hardware, and the program can be stored in a readable medium.
[0143] The embodiments of the present disclosure further provide a readable storage medium, and the readable storage medium stores a computer program. The computer program, when executed by a processor, can implement any step of the above method embodiments and achieve the same technical effects. To avoid repetition, details are not described herein.
[0144] The storage medium, such as a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, etc.
[0145] The above describes preferred embodiments of the present disclosure, and it should be noted that, for those skilled in the art, without departing from the principles of the present disclosure, a number of improvements and refinements can be made, and these improvements and refinements should also be considered as the protection scope of the present disclosure.
Claims
1. A page configuration method applied to a page configuration system, the page configuration system comprising a control device and a terminal device, the control device and the terminal device being communicatively connected, the method comprising the following steps: the control device generating a visualized configuration page; the control device obtaining a display state of a control in the configuration page, the display state comprising a display position and a display size of the control; the control device generating a control parameter according to the display state, wherein the control parameter comprises a distance between the display position of the control and each boundary of the configuration page, and a ratio between the display size and the size of the configuration page; the control device sending the control parameter to the terminal device; the terminal device determining a display state of the control in the terminal device according to a display parameter of the terminal device and the control parameter; wherein the control comprises a first control and a second control, before the control device obtains the display state of the control in the configuration page, the method further comprises: when a display instruction of displaying the second control on the configuration page is received, obtaining a first coordinate parameter, wherein the first coordinate parameter is determined according to a position of the first control displayed on the configuration page, or the first coordinate parameter is determined according to a preset reference position on the configuration page; determining a second coordinate parameter of the second control according to an adjustment instruction for the second control; when a difference between a target coordinate parameter in the first coordinate parameter and a corresponding second coordinate parameter is less than a preset difference threshold, updating the second coordinate parameter as the target coordinate parameter; updating a position of the second control according to the updated second coordinate parameter. 2.A page configuration method applied to a control device in a page configuration system, the page configuration system comprising a control device and a terminal device, the control device and the terminal device being communicatively connected, the method comprising the following steps: generating a visualized configuration page; obtaining a display state of a control in the configuration page; generating a control parameter according to the display state, wherein the control parameter comprises a distance between a display position of the control and each boundary of the configuration page, and a ratio between a display size and a size of the configuration page; sending the control parameter to the terminal device, for the terminal device to determine a display state of the control in the terminal device according to a display parameter of the terminal device and the control parameter; wherein the control comprises a first control and a second control, before the control device obtains the display state of the control in the configuration page, the method further comprises: when a display instruction of displaying the second control on the configuration page is received, obtaining a first coordinate parameter, wherein the first coordinate parameter is determined according to a position of the first control displayed on the configuration page, or the first coordinate parameter is determined according to a preset reference position on the configuration page; determining a second coordinate parameter of the second control according to an adjustment instruction for the second control; In a case where a difference between a target coordinate parameter in the first coordinate parameters and a corresponding second coordinate parameter is less than a preset difference threshold, the second coordinate parameter is updated as the target coordinate parameter; A position of the second control is updated according to the updated second coordinate parameter.
3. The method of claim 2, wherein, The preset reference position includes a plurality of reference mark lines.
4. The method of claim 2, wherein, After the control parameter is generated according to the display state, the method further includes: obtaining attribute information of the control, the attribute information including at least one of a binding relationship between the control and a function interface and a corresponding relationship between the control and a control event; adding the attribute information of the control in the control parameter.
5. The method of any one of claims 2 to 4, wherein, The control parameter is saved through a json file.
6. A page configuration method applied to a terminal device in the page configuration system of claim 1, the page configuration system including a control device and a terminal device, the control device and the terminal device being in communication connection, and the method including the following steps: receiving a control parameter sent by the control device, wherein the control parameter is generated by the control device according to a display state of a control in a configuration page, and the control parameter includes a distance between a display position of the control and each boundary of the configuration page and a ratio of a display size to a size of the configuration page; determining the display state of the control in the terminal device according to a display parameter of the terminal device and the control parameter.
7. The method of claim 6, wherein, The determination of the display state of the control in the terminal device according to the display parameter of the terminal device and the control parameter includes: obtaining the display parameter of the terminal device, wherein the display parameter includes a size of a display interface of the terminal device; calculating a display size of the control in the terminal device according to the display parameter and the control parameter, wherein a first display ratio of the control is equal to a second display ratio of the control, the first display ratio being a ratio of a display size of the control in the display interface to the size of the display interface, and the second display ratio being a ratio of a display size of the control in the configuration page to the size of the configuration page; calculating a display position of the control in the terminal device according to the display parameter and the control parameter, wherein a third display ratio of the control is equal to a fourth display ratio of the control, the third display ratio being a ratio of a first interval and a second interval, the first interval being a distance between the control and a boundary of the display interface, and the second interval being a size of the display interface, and the fourth display ratio being a ratio of a third interval and a fourth interval, the third interval being a distance between the control and a boundary of the configuration page, and the second interval being a size of the configuration page; generating the display state of the control on the terminal device, the display state of the control on the terminal device including the display size and the display position of the control in the terminal device.
8. A page configuration system including a control device and a terminal device, the control device and the terminal device being in communication connection: The control device is configured to: generate a configuration page for visualization; obtain a display state of the control in the configuration page, the display state including a display position and a display size of the control; generating control parameters in accordance with the display state, wherein the control parameter includes a distance between the display position of the control and each boundary of the configuration page, and a ratio between the display size and the size of the configuration page; send the control parameter to the terminal device; the terminal device is configured to: determine the display state of the control in the terminal device according to the display parameter of the terminal device and the control parameter; wherein the control includes a first control and a second control, and the control device is further configured to, before obtaining the display state of the control in the configuration page, when receiving a display instruction to display the second control on the configuration page, obtain a first coordinate parameter, wherein the first coordinate parameter is determined according to the position of the first control displayed on the configuration page, or the first coordinate parameter is determined according to a preset reference position on the configuration page; determine a second coordinate parameter of the second control according to an adjustment instruction for the second control; when a difference between a target coordinate parameter in the first coordinate parameter and the corresponding second coordinate parameter is less than a preset difference threshold, update the second coordinate parameter to the target coordinate parameter; update the position of the second control according to the updated second coordinate parameter.
9. An electronic device comprising: A memory, a processor, and a program stored in the memory and executable on the processor; the processor is configured to read the program in the memory to implement the steps in the page configuration method according to any one of claims 1 to 7.
10. A readable storage medium for storing a program, characterized in that, The program is executed by the processor to implement the steps in the page configuration method according to any one of claims 1 to 7.
Citation Information
Patent Citations
Dynamic page display method and device, electronic device and storage medium
CN110096277A
Method and device for determining display page, electronic equipment and storage medium
CN113626120A